[GIS]在vue中使用天地图JavaScript API 4.0
UPDATE:8/16
天地图的JavaScript3.0 API中提供了一些方法，在4.0的文档中没有，但是仍然可用，比如设置地图的样式：
map.setMapType(...)
1、引入天地图API
按需引入，在需要用到天地图API的时候，动态创建script标签：
//某组件
...
mounted() {
this.initMap();
},
...
//methods
initMap(){
let script = document.getElementById('MapDivId');
if (script) {
return this._initMap();
}
const _this = this;
script = document.createElement('script');
script.id = 'MapDivId';
script.src = 'https://tianditu.gov.cn/xxxxxxxx';
script.onload = function () {
_this._initMap();
};
document.body.appendChild(script);
}
二、初始化地图
...
_initMap() {
//添加卫星图层，下面这个url是固定的，我只找到这种默认显示卫星图层的办法
let satelliteLayerUrl = "http://t0.tianditu.gov.cn/img_w/wmts?" + "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" + "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=您的密钥";
let layer = new T.TileLayer(satelliteLayerUrl, { minZoom: 3, maxZoom: 18 });
window.GIS.Map = new T.Map('Map', { layers: [layer] });
// 定位到一个默认的坐标，例如北京。这里的坐标是虚构的
window.GIS.Map.centerAndZoom(new T.LngLat(123.45678, 30.1234), 12);
//添加地图类型控件
let ctrlMapType = new T.Control.MapType([
{
title: '卫星混合',
icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png',
layer: TMAP_HYBRID_MAP
},
{
title: '地图',
icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png',
layer: TMAP_NORMAL_MAP
}
]);
window.GIS.Map.addControl(ctrlMapType);
//添加缩放控件
let ctrlZoom = new T.Control.Zoom();
window.GIS.Map.addControl(ctrlZoom);
ctrlZoom.setPosition(T_ANCHOR_BOTTOM_RIGHT);
//添加比例尺控件
let ctrlScale = new T.Control.Scale();
window.GIS.Map.addControl(ctrlScale);
},
...
三、添加各种标注工具
首先编写HTML结构，定位到地图上的某个位置，并绑定一个click事件，这部分很简单，效果如下：
然后编写click事件代码：
<span class="icon xxxx" @click="openPolygonTool"></span>
openPolygonTool() {
if (window.GIS.handler) window.GIS.handler.close();
let handler = new T.PolygonTool(window.GIS.Map);
handler.open();
window.GIS.handler = handler;
}
效果如下：
四、保存标注数据
一般在打开标注工具的时候，注册一个相关事件，这样，在结束标注的时候，就能获取到标注的数据。多边形的结束事件是draw：
openPolygonTool() {
...
handler.addEventListener('draw', function(e){
console.log(e);
});
handler.open();
...
}
到这里，就可以把需要的数据存储起来了。
END
