微信小程序添加外部地图服务数据
先上效果:
缘起
使用微信小程序做地图相关功能的时候,有个需求是需要接入自己发布的地图服务。查看微信小程序地图组件文档,发现它对地图相关的支持很少,只有一些基础功能,比如添加点、线、面、气泡和一些常规的地图事件监听,并没有添加地图服务相关的支持。
不过有了需求,也要想办法解决呀。
图层查询
既然小程序不能直接添加地图服务,那就把图层数据查出来,然后通过添加点线面方式添加到地图,具体要怎么实现呢?
首先想到的是通过图层查询接口把所有数据查出来。
但是既然数据是按图层发布的,一般数据量都比较大,把所有数据查询出来,一次性添加过多的数据到地图,地图组件会受不了从而变的卡顿,另外微信小程序单次setData()
的数据不能超过1024kB
,因此这种方案就不可取了。
矢量瓦片
既然一次性请求数据量太大,是不是可以分批次请求呢?于是就想到了矢量瓦片。
矢量瓦片对于做GIS
的人来说,大家都很熟悉了,这也是目前各种GIS
产品对大数据量地图展示所采用的主要方式。
但是,我们如何让不支持添加外部图层的小程序地图组件支持矢量瓦片呢?
查看地图组件相关文档,会看到其中有个regionchange
事件,该事件是在地图视野改变,也就是拖动、缩放地图时触发,它会返回当前中心点、缩放级别、地图范围等信息。
获取瓦片
接下来就是如何根据这些参数获取到矢量瓦片了。
假设,地图切图的原点是(originX,originY)
,地图的瓦片大小是tileSize
,地图屏幕上1像素代表的实际距离是resolution
。计算坐标点(x,y)
所在的瓦片的行列号的公式是:
col = floor((x0 - x)/( tileSize*resolution))
row = floor((y0 - y)/( tileSize*resolution))
这个公式应该不难理解,简单点说就是,先算出一个瓦片所包含的实际长度LtileSize
,然后再算出此时屏幕上的地理坐标点离瓦片切图的起始点间的实际距离LrealSize
,然后用实际距离除以一个瓦片的实际长度,即可得此时的瓦片行列号:LrealSize/LtileSize
。
具体代码如下:
getTileXY: function (lon, lat, level) {
let originX = -180; //坐标系原点的x的值,
let originY = 90; //坐标系原点的y的值
//根据你自己对应的切片方案改,这个就是其分辨率resolution
let resolution = [1.40625, 0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625,
0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 0.0006866455078125, 0.0003433227539062,
0.0001716613769531, 0.0000858306884766, 0.0000429153442383, 0.0000214576721191, 0.0000107288360596,
0.0000053644180298, 0.0000026822090149, 0.0000013411045074, 0.0000006705522537, 0.0000003352761269
]
let tileSize = 256 //这个值表示的是每张切片的大小,一般都是256
let coef = resolution[level] * tileSize;
let x = Math.floor((lon - originX) / coef); // 向下取整,丢弃小数部分
let y = Math.floor((originY - lat) / coef); // 向下取整,丢弃小数部分
let tmsY = Math.pow(2, (level - 1)) - y - 1;
return {
x: x,
y: y,
z: level - 1,
tmsY: tmsY
}
},
这里可以看到我返回的数据中有一个y值,还有一个
tmsY
,这是因为WMTS
、TMS
两种方式调用切片时,传入的y值是不同的,不过两者之间是有可以转换的,也就是tmsY = Math.pow(2, (level - 1)) - y - 1
,WMTS
用的是这里返回的y,TMS
用的是这里返回 的tmsY
。参考链接:
接下来我们只需根据当前地图可视范围的最大、最小坐标以及地图层级,即可获取包含当前地图可视范围的瓦片的编号。
由于微信小程序地图组件使用的是国测局加密坐标,而我发布的地图服务数据为wgs84
坐标,因此这里在获取切片编号时需要用坐标转换方法将国测局坐标转成wgs84
坐标,坐标纠偏方法可参考leaflet中如何优雅的解决百度、高德地图的偏移问题。
getXYZList: function (region, level) {
// 坐标转换
var newsouthwest = appcoord.gcj02_To_gps84(region.southwest.longitude, region.southwest.latitude);
var northeastwest = appcoord.gcj02_To_gps84(region.northeast.longitude, region.northeast.latitude);
// 获取瓦片编号
var xyzInfo1 = this.getTileXY(newsouthwest.lng, northeastwest.lat, level)
var xyzInfo2 = this.getTileXY(northeastwest.lng, newsouthwest.lat, level)
var z = level - 1
for (var x = xyzInfo1.x; x <= xyzInfo2.x; x++) {
for (var y = xyzInfo1.y; y <= xyzInfo2.y; y++) {
this.getGeoJson(x, y, z)
}
}
},
然后通过wx.request
传入请求地址以及x、y、z参数,即可获取到对应矢量切片的geojson
格式数据
getGeoJson: function (x, y, z) {
const v = this
wx.request({
url: "http://127.0.0.1:7000/geoserver/gwc/service/wmts/rest/test:test/EPSG:4326/EPSG:4326:" +
z + "/" + y + "/" + x + "?format=application/json;type=geojson",
method: 'get',
success(res) {
var tileId = 'tile-' + x + '-' + y + '-' + z
tileData[tileId] = {
tileId: tileId,
features: []
}
if(res.statusCode === 200){
tileData[tileId].features = res.data.features
}
v.addFeatures(tileId)
}
})
},
注意,这里我是用
geoserver
发布的矢量瓦片,在调用过程中发现个问题,其中一个点图层瓦片返回的数据中,各个瓦片总有很多重复数据,经检查测试发现,这是由于发布该图层(点图层)时使用的样式为一张大小为40x88
的图片点样,这就导致切图时整体向外缓冲了不少的像素值,所以,如果geoserver
发布的图层是用于矢量切片调用,最好将点图层样式设置为一个像素大小的像素点,这样可以有效减少瓦片数据冗余
添加数据
最后再通过微信小程序地图组件中添加点线面的方法把获取切片数据添加到地图即可
addFeatures: function (tileId) {
var polylines = this.data.polylines
var markers = this.data.markers
tileData[tileId].features.forEach(feature => {
if (feature.geometry.type === 'LineString') {
polylines.push(this.getPolyline(feature.geometry.coordinates, tileId))
} else if (feature.geometry.type === 'Point') {
markers.push(this.getMarker(feature.geometry.coordinates, tileId))
}
});
this.setData({
polylines: polylines,
markers: markers
})
},
存在问题
至此,微信小程序添加矢量瓦片数据已经完成,基本能满足浏览外部矢量图层的需求,但是,这里还是有一些不足的地方
- 需要发布
geojson
格式矢量瓦片图层 - 地图拖动时图层会闪一下,这是小程序重新往地图上绘制点线面图层引起的
- 在小比例尺瓦片返回数据量较大时可能会有卡顿现象(可以通过限定最小比例尺优化)
- 图层配图效果受小程序地图点线面样式限制
虽然该解决方案存在一些问题,但是鉴于微信小程序地图组件的限制,并且确时又有添加图层的需求,此方案还是可取的。
总结
- 微信小程序地图组件不支持添加外部图层服务
- 通过发布
geojson
格式矢量瓦片服务,然后按当前可视范围获取geojson
格式瓦片数据 - 通过小程序地图组件的
regionchange
事件监听地图拖动、缩放,可以获取到当前中心点、缩放级别、地图范围 - 根据缩放级别、地图范围可以获取到当前可视范围的瓦片编号
- 请求瓦片数据,通过微信小程序地图组件中添加点线面的方法把切片数据添加到地图
代码地址
代码地址:http://gisarmory.xyz/blog/index.html?source=WechatVectorTile
原文地址:http://gisarmory.xyz/blog/index.html?blog=WechatVectorTile
欢迎关注《GIS兵器库》
本文章采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布,但务必保留文章署名《GIS兵器库》(包含链接: http://gisarmory.xyz/blog/),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。
微信小程序添加外部地图服务数据的更多相关文章
- 微信小程序-基于高德地图API实现天气组件(动态效果)
微信小程序-基于高德地图API实现天气组件(动态效果) 在社区翻腾了许久,没有找到合适的天气插件.迫不得已,只好借鉴互联网上的web项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有 ...
- 微信小程序添加悬浮在线客服会话按钮
微信为小程序提供客服消息能力,小程序用户可以方便快捷地与小程序服务提供方进行沟通,并且已经做成了组件的形式,直接就可以调用.客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会 ...
- 微信小程序个人/企业开放服务类目一览表
微信小程序个人/企业开放服务类目一览表 微信小程序个人开放服务类目表 服务类目 类目分类一 类目分类二 引导描述 出行与交通 代驾 / / 生活服务 家政.丽人.摄影/扩印.婚庆服务.环保回收/废 ...
- 图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作
图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作 什么是tabBar? 顶部或者底部tab栏如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以 ...
- 为苹果ATS和微信小程序搭建 Nginx + HTTPS 服务
昨天测试开发微信小程序,才发现微信也要求用HTTPS加密数据,想来是由于之前苹果的ATS审核政策的缘故吧,微信想在苹果上开放小程序必然也只能要求开发者必须使用HTTPS了,于是在服务器上测试安装Ngi ...
- 微信-小程序-开发文档-服务端-模板消息:templateMessage.getTemplateList
ylbtech-微信-小程序-开发文档-服务端-模板消息:templateMessage.getTemplateList 1.返回顶部 1. templateMessage.getTemplateLi ...
- 微信-小程序-开发文档-服务端-模板消息:templateMessage.getTemplateLibraryById
ylbtech-微信-小程序-开发文档-服务端-模板消息:templateMessage.getTemplateLibraryById 1.返回顶部 1. templateMessage.getTem ...
- 微信-小程序-开发文档-服务端-模板消息:templateMessage.addTemplate
ylbtech-微信-小程序-开发文档-服务端-模板消息:templateMessage.addTemplate 1.返回顶部 1. templateMessage.addTemplate 本接口应在 ...
- 微信小程序腾讯地图SDK使用方法
一.本篇文章主要知识点有以下几种: 1.授权当前位置 2.map组件的使用 3.腾讯地图逆地址解析 4.坐标系的转化 二.效果如下: 三.WXML代码 <map id="map&quo ...
随机推荐
- MySQL——SQL语句入门
1.DDL: 数据库定义语言 定义对象:库.表 何为定义: 库的定义: 创建 删除 修改---->修改本身以及库中的对象(表.视图.函数.触发器...) 表的定义: 创建---->定义表的 ...
- openwrt开发笔记二:树莓派刷openwrt
前言及准备 本笔记适用于第一次给树莓派刷openwrt系统的玩家,对刷机过程及注意事项进行了记录,刷机之后对openwrt进行一些简单配置. 使用openwrt源码制作固件需要花费一点时间. 平台环境 ...
- 命令行解析函数:getopt_long、getopt
一.前言 在学习一些项目代码时,尤其涉及到命令行传参的代码,经常遇到getopt相关的函数,对这一类函数可以说是既陌生又熟悉.陌生是因为不知道它是干啥的,熟悉呢,是因为经常遇到.于是乎在追踪了多天ip ...
- SpringSecurity-Shiro-初见
目录 简介 实战环境搭建 SpringSecurity 认证和授权 权限控制和注销 记住我 Shiro 快速上手 shiro整合mybais 简介 在 Web 开发中,安全一直是非常重要的一个方面. ...
- jdbc核心技术-宋红康
视频地址 JDBC核心技术 第1章:JDBC概述 1.1 数据的持久化 持久化(persistence):把数据保存到可掉电式存储设备中以供之后使用.大多数情况下,特别是企业级应用,数据持久化意味着将 ...
- 技术栈:springboot2.x,vue,activiti5.22,mysql,带工作流系统
前言 activiti工作流,企业erp.oa.hr.crm等审批系统轻松落地,请假审批demo从流程绘制到审批结束实例. 一.项目形式 springboot+vue+activiti集成了activ ...
- 进程代数CSP基础知识总结(Communicating sequencing process)
进程代数(Process Algebra) Process Algebra 理论 提出者 理论名称 缩写 论文链接 简介 C. A. R. Hoare/Tony Hoare Communicating ...
- Shell系列(24)- 条件判断之文件类型
按照文件类型进行判断 标红,记住:其他了解即可 测试选项 作用 -b 文件 判断该文件是否存在,并且是否为块设备文件(是块设备文件为真) -c 文件 判断该文件是否存在,并且是否为字符设备文件(是字符 ...
- 看完小白也会使用,Android投屏神器scrcpy详细教程
楔子 做为一个软件测试工程师,在使用手机测试的时候,缺陷附件想附上截图.视频,需要从手机把图片.视频发送到拷贝或发送到电脑,非常麻烦. 所以想到使用投屏软件,把手机的屏幕投屏到电脑,便可以直接在电脑上 ...
- selenium下拉选择框处理
HTML: (一)通过xpath层级标签定位 driver.find_element_by_xpath(".//*[@id='Resolution']/option[2]").cl ...