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