leafletwx是基于leaflet，使用微信原生組件開發(fā)的一套開源地圖組件，目的是替換小程序內(nèi)的原生map組件，項(xiàng)目開源地址：leatletwx。
加載自制手繪地圖效果：
?本示例開源地址在leafletwx的mymap頁面。
如何將手繪地圖轉(zhuǎn)換為瓦片
可以使用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
即可生成瓦片地圖數(shù)據(jù)文章來源：http://www.zghlxwxcb.cn/news/detail-819740.html
圖片坐標(biāo)與地理坐標(biāo)如何轉(zhuǎn)換
圖片坐標(biāo)點(diǎn)與地理坐標(biāo)點(diǎn)互轉(zhuǎn)方法如下(引入的庫在組件內(nèi)可以找到，須知道原始圖片大小和圖片左上角及右下角分別對(duì)應(yīng)的地理坐標(biāo)):文章來源地址http://www.zghlxwxcb.cn/news/detail-819740.html
import {LagLngPoint} from './LagLng.Utils'
import {latLng2xy, xy2latLng} from './utils/util'
// 圖片坐標(biāo)點(diǎn)轉(zhuǎn)地理坐標(biāo)點(diǎn)
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;
}
// 地理坐標(biāo)點(diǎn)轉(zhuǎn)圖片坐標(biāo)點(diǎn)
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)];
}到了這里，關(guān)于在微信小程序中使用leafletwx加載自制手繪地圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
