在微信小程序中使用leafletwx加载自制手绘地图-Toy模板网

这篇具有很好参考价值的文章主要介绍了在微信小程序中使用leafletwx加载自制手绘地图。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

leafletwx是基于leaflet，使用微信原生组件开发的一套开源地图组件，目的是替换小程序内的原生map组件，项目开源地址：leatletwx。

加载自制手绘地图效果：

leafletwx,leafletwx,微信小程序

本示例开源地址在leafletwx的mymap页面。

如何将手绘地图转换为瓦片

可以使用gdal，安装成功后，使用命令

切分瓦片（使用gdal）： gdal2tiles-l.py -l -p raster -z 1-3 -w none [source_image] [target_dir]

例如：gdal2tiles-l.py -l -p raster -z 1-3 -w none 1.jpg out

即可生成瓦片地图数据

图片坐标与地理坐标如何转换

图片坐标点与地理坐标点互转方法如下(引入的库在组件内可以找到，须知道原始图片大小和图片左上角及右下角分别对应的地理坐标):文章来源地址https://www.toymoban.com/news/detail-819740.html

import {LagLngPoint} from './LagLng.Utils'
import {latLng2xy, xy2latLng} from './utils/util'

// 图片坐标点转地理坐标点
function rasterImage2latLng(imgPosition, imgSize, leftUpLatLng, rightDownLatLng) {
  let latLng = new LagLngPoint(0, 0);
  let _imgPos = [
    Math.max(0, Math.max(imgSize[0], imgPosition[0])),
    imgSize[1] - Math.max(0, Math.max(imgSize[1], imgPosition[1])),
  ];
  const ag = xy2latLng(_imgPos[0], _imgPos[1], 0, 0, imgSize[0], imgSize[1], leftUpLatLng.longitude, leftUpLatLng.latitude, rightDownLatLng.longitude, rightDownLatLng.latitude);
  latLng.longitude = ag.lon;
  latLng.latitude = ag.lat;
  return latLng;
}

// 地理坐标点转图片坐标点
function latLng2rasterImage(latLng, imgSize, leftUpLatLng, rightDownLatLng) {
  let imgPosition = [0, 0];
  const minLng = Math.min(leftUpLatLng.longitude, rightDownLatLng.longitude);
  const maxLng = Math.max(leftUpLatLng.longitude, rightDownLatLng.longitude);
  const minLat = Math.min(leftUpLatLng.latitude, rightDownLatLng.latitude);
  const maxLat = Math.max(leftUpLatLng.latitude, rightDownLatLng.latitude);
  let lng = Math.min(maxLng, Math.max(latLng.longitude, minLng));
  let lat = Math.min(maxLat, Math.max(latLng.latitude, minLat));
 
  let xy = latLng2xy(lng, lat, 0, 0, imgSize[0], imgSize[1], leftUpLatLng.longitude, leftUpLatLng.latitude, rightDownLatLng.longitude, rightDownLatLng.latitude)
  return [Math.round(xy.x), Math.round(xy.y)];
}

到了这里，关于在微信小程序中使用leafletwx加载自制手绘地图的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！