天地图给多边形加标注

先看效果图

 该开始开发的时候用的是高德高德用起来还是比较简单的 但是后来公司要换成天地图 然后就去学习了天地图  来记录下以免朋友们踩坑

这里用vue3举例 看代码

创建初始化地图 

//地图初始化
const init = () => {//添加图层const imageURL ="http://t0.tianditu.gov.cn/vec_w/wmts?" +"SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles" +"&TILEMATRIXSET=w&STYLE=default&LAYER=vec&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=您的key";const imageURLT ="http://t0.tianditu.gov.cn/cva_w/wmts?" +"SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles" +"&TILEMATRIXSET=w&STYLE=default&LAYER=cva&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=您的key";const lay = new T.TileLayer(imageURL, { minZoom: 6, maxZoom: 18 }); //创建图层对象const lay2 = new T.TileLayer(imageURLT, { minZoom: 6, maxZoom: 18 }); //创建图层对象var config = { layers: [lay, lay2] };data.map = new T.Map("map", config); //创建地图对象data.map.centerAndZoom(new T.LngLat(116.63072 ,40.054952),// new T.LngLat(118.63372,37.24352),14); //初始化地图addPolygon(); //添加多边形};

 添加多边形覆盖物

//多边形
const addPolygon = () => {data.area.forEach((item) => {let list = getList(item);//多边形的坐标 详细看文档let polygon = new T.Polygon(list, {color: "#06d7f9",weight: 3,opacity: 1,fillColor: "#06d7f9",fillOpacity: 0.3,});data.map.addOverLay(polygon);data.polygons.push(polygon);//这里是给都多边形加的标注polygon.addEventListener("click", function(e){overlay_style(e,item,polygon)});});
};

标注的方法

//获取marker的属性
function overlay_style(e,i,polygon) {var p = e.target;if (p instanceof T.Polygon) {var infoWin1 = new T.InfoWindow();var sContent ="" +"" +"" +"电话 : (010)88187700 
地址：北京市顺义区机场东路国门商务区地理信息产业园2号楼天地图大厦" +"" +"" +"" +"" +"";infoWin1.setContent(sContent);polygon.openInfoWindow(infoWin1);}else {alert("无法获知该覆盖物类型");}
}