admin管理员组文章数量:1662758
写在前面
橡皮擦在最近在研究一些地图数据呈现方面的案例,一直在寻找一款实用的工具
经过一番查找,还真发现了一款,腾讯位置服务,因教程关系,你可以先点击下述链接,注册一个账号,目前大部分功能都是免费使用。
https://lbs.qq?lbs_invite=KZ2RFLK
接下来将带给大家几篇关于位置服务相关的博客。
JavaScript API 与 数据可视化 API
由于腾讯位置服务中相关功能较多,我主要用到的是下图两个部分内容。
官方描述的概述为:
Javascript API GL 是基于 WebGL 技术打造的 3D 版地图 API,3D 化的视野更为自由,交互更加流畅。
提供丰富的功能接口,包括点、线、面绘制,自定义图层、个性化样式及绘图、测距工具等,使开发者更加容易的实现产品构思。
充分发挥 GPU 的并行计算能力,同时结合 WebWorker 多线程技术,大幅度提升了大数据量的渲染性能。最高支持百万级点、线、面绘制,同时可以保持高帧率运行。
对于这些,橡皮擦不太关心,只要好用,易用,上手快即可。
第一步:申请一个 Key
类似应用都需要先初始化一个 Key,以方便后续各种功能的研发,所以进入控制台,先把 Key 配置好。
第二步:作为一个好 JS 库,一定要具备在线测试环境
测试了一下,这点腾讯位置服务做得还不错。
https://lbs.qq/webApi/javascriptGL/glGuide/glBasic
开发文档比较清晰,可以直接在线调试。
通过坐标拾取器,获取一下 【河北园博园】 的坐标,然后在上图右侧代码经纬度位置填写对应地址。
https://lbs.qq/tool/getpoint/index.html
核心代码如下:
<script type="text/javascript">
function initMap() {
var center = new TMap.LatLng(38.144609, 114.61384);
//初始化地图
var map = new TMap.Map("container", {
rotation: 20, //设置地图旋转角度
pitch: 30, //设置俯仰角度(0~45)
zoom: 12, //设置地图缩放级别
center: center, //设置地图中心点坐标
});
}
</script>
第三步:完成第一个小案例:疫情标记
本篇博客,要完成一个针对石家庄疫情的小案例,疫情标记功能,由于只做 Demo 演示使用,那我们需要准备的资料有:
- 确诊者出现地点
- 通过地点检索坐标
- 地图标记
找到一位确诊病例,获取地点小果庄。
找到地址转坐标的接口:https://lbs.qq/service/webService/webServiceGuide/webServiceGeocoder
通过在线测试,得到对应数据如下,核对坐标数据。
请求地址为:
//GET请求示例,注意参数值要进行URL编码
https://apis.map.qq/ws/geocoder/v1/?address=你需要的地址&key=你的Key
还有这个地方用到 Key,需要配置好 WebserviceAPI,否则会出现如下错误:
{ "status": 199, "message":
"此key未开启WebserviceAPI功能,您可登录lbs.qq,进入控制台key管理界面,找到此key并设置启用WebserviceAPI"
}
按照说明,将 qq
设置好就可以使用腾讯提供的线上环境了。
标记代码如下:
<script>
var center = new TMap.LatLng(38.292732, 114.747902);//设置中心点坐标
//初始化地图
var map = new TMap.Map("container", {
center: center
});
//初始化marker
var marker = new TMap.MultiMarker({
id: "marker-layer", //图层id
map: map,
styles: { //点标注的相关样式
"marker": new TMap.MarkerStyle({
"width": 25,
"height": 35,
"anchor": { x: 16, y: 32 },
"src": "https://mapapi.qq/web/lbs/javascriptGL/demo/img/markerDefault.png"
})
},
geometries: [{ //点标注数据数组
"id": "demo",
"styleId": "marker",
"position": new TMap.LatLng(38.292732, 114.747902),
"properties": {
"title": "marker"
}
}]
});
</script>
最终运行效果:
第四步:批量获取确诊者轨迹,拆分位置信息
可以使用 Python 语言爬取数据,在对文本信息进行解析,将所有的地点都标记到地图上,这样就可以得到一张轨迹地图。
注意上文代码中经纬度的小数不要丢掉,否则坐标会产生很大的偏移。
初次使用腾讯位置服务感受
文档非常清晰,上手比较快,在线的测试环境流程度非常好,大家可以申请使用一下。
点击链接直接注册:https://lbs.qq?lbs_invite=KZ2RFLK
版权声明:本文标题:腾讯位置服务 JavaScript API GL 开发指南一:疫情标记 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1729968934a1217943.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论