天地图给多边形加标注

Z_Xshan

已于 2022-07-27 15:17:13 修改

阅读量1k

点赞数

分类专栏： vue 文章标签： javascript 开发语言 ecmascript

于 2022-07-27 15:13:26 首次发布

本文链接：https://blog.csdn.net/Z_Gleng/article/details/126014848

版权

vue 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

先看效果图

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

这里用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;'>电话 : (010)88187700 <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("无法获知该覆盖物类型");
    }
}