小程序手绘地图开发

以此文纪念开发手绘地图的坑

需求

一个类似故宫旅游小程序开发

方案整理

• 小程序个性化地图扩展功能（需要钱）
• 小程序内嵌webview（初始加载速度慢）
• 小程序贴图（体验有些差，闪屏和位置偏移问题）

不需要动脑子，排除要钱的
ps:大部分的艰难来自于客户，觉得肯定是免费的，所以试了半天。
然后排除小程序贴图，一直差不如开始差一点~

开发

瓦片图生成工具

• 工具名：mapTiler
• 官网https://www.maptiler/
• 简单介绍：生成不同放缩比例的瓦片图，正版不付费有水印

生成目录：tiles/14/855_480.png tiles是文件加名，
14对应地图放缩比例（z的值）,855_480对应x，y的值

手绘图使用

• 文档地址
• 示例代码

//设置中心点坐标
var center = new TMap.LatLng(26.870355,100.239704);
//初始化地图
var map = new TMap.Map('mapContainer', {
    center: center,
    zoom: 15,
    maxZoom:16
});
//初始化imageTileLayer
var imageTileLayer = new TMap.ImageTileLayer({
    getTileUrl: function (x, y, z) {
        //拼接瓦片URL
        var url='http://localhost/javascript_gl/sample/img/tilelayer/' + z + '/' + x + '_' + y +'.png' ;//
        return url;
    },
    tileSize: 256,  //瓦片像素尺寸
    minZoom: 14,    //显示自定义瓦片的最小级别
    maxZoom: 16,    //显示自定义瓦片的最大级别
    visible: true,  //是否可见
    zIndex: 5000,   //层级高度（z轴）
    opacity: 0.95   //图层透明度：1不透明，0为全透明
    map: map,       //设置图层显示到哪个地图实例中
});

minZoom,maxZoom与生成的瓦片图同步
url本地调试时不能是相对地址，需要网络地址。
比如我复制了webstorm调试的时候访问到瓦片图地址

路线功能

• 路线初始化

var polylineLayer = new TMap.MultiPolyline({
    id: 'polyline-layer', //图层唯一标识
    map: map,//设置折线图层显示到哪个地图实例中
    //折线样式定义
    styles: {
        'style_red': new TMap.PolylineStyle({
            'color': '#FFC357', //线填充色
            'zIndex': 1004,
            'width': 3, //折线宽度
            'borderWidth': 0, //边线宽度
            'borderColor': '#FFC357', //边线颜色
            'lineCap': 'round' //线端头方式
        })
    },
    //折线数据定义
    geometries: [
    ]
});

• 获取数据绘制路线

    let points = getPoints()//获取标记点
    polylineLayer.add(
        {
            'id': way.line_id,
            'styleId': 'style_red',
            'paths': points.map(item=>{
                let lnglat = item.split(',')
                return new TMap.LatLng(lnglat[1],lnglat[0])
            })
        }
    )

• 清除路线

    polylineLayer.remove()

其他

小程序webview开发文档

内嵌后webview的功能受限

1.相关接口1，按照官网配置后不再受限制
2.相关接口2需要后端获取公众号的配置，并且在页面进行wx.config配置权限
3.开发工具上小程序暂时都会提示授权失败，公众号的开发工具可以正常提示
4.webview传输消息只在特定事件中触发，不能主动触发