天地图给多边形加标注

先看效果图

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

这里用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 =
                  "<div style='margin:0px;'>" +
                "<div style='margin:10px 10px; '>" +
                "<img style='float:left;margin:0px 10px' src='http://lbs.tianditu.gov.cn/images/logo.png' width='101' height='49' title='天安门'/>" +
                "<div style='margin:10px 0px 10px 120px;'>电话 : [phone] <br>地址：北京市顺义区机场东路国门商务区地理信息产业园2号楼天地图大厦" +
                "</div>" +
                "<input  id='keyWord' value='机场' type='text' style='border: 1px solid #cccccc;width: 180px;height: 20px;line-height: 20px;padding-left: 10px;display: block;float: left;'>" +
                "<input style='margin-left:195px;  width: 80px;height: 24px; text-align: center; background: #5596de;color: #FFF;border: none;display: block;cursor: pointer;' type='button' value='周边搜索'  onClick=\"localsearch.searchNearby(document.getElementById('keyWord').value,center,radius)\">" +
                "</div>" +
                "</div>";
        infoWin1.setContent(sContent);

        polygon.openInfoWindow(infoWin1);
         
        
    }
    else {
        alert("无法获知该覆盖物类型");
    }
}