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

 本示例开源地址在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

即可生成瓦片地图数据

如果需要在不同的地图层级加载不同的地图细节，可以制作两张大小一样的地图图片，生成不同的层级即可

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

图片坐标点与地理坐标点互转方法如下(引入的库在组件内可以找到，须知道原始图片大小和图片左上角及右下角分别对应的地理坐标):

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)];
}