天地图实现标点、点聚合、信息窗体和区域划分


 initMap() {
      //初始化地图对象
      this.map = new T.Map("my_map");
      // this.map.enableDrag();
      var ctrl = new T.Control.MapType();
      this.map.addControl(ctrl);
      this.map.centerAndZoom(new T.LngLat(122.323867, 29.97176), 12);
      this.loadMap();
    },
    loadMap() {
      this.map.clearOverLays();
      // this.removeMarkets();
      this.arrayObj = [];
      //创建对象
      let administrative = new T.AdministrativeDivision();
      var config = {
        needSubInfo: false,
        needAll: false,
        needPolygon: true,
        needPre: true,
        searchType: 1,
        searchWord: "xx市"
      };
      administrative.search(config, this.searchResult);
      this.map.clearOverLays();
      this.arrayObj = [];
    },
    searchResult(result) {
      //console.log(result);
      if (result.getStatus() == 100) {
        var data = result.getData();
        // //console.log(data);
        this.polygon(data[0].points);
      } else {
        result.getMsg();
      }
    },
    polygon(points) {
      var pointsArr = [];
      for (var i = 0; i < points.length; i++) {
        var regionLngLats = [];
        var regionArr = points[i].region.split(",");
        for (var m = 0; m < regionArr.length; m++) {
          var lnglatArr = regionArr[m].split(" ");
          var lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);
          regionLngLats.push(lnglat);
          pointsArr.push(lnglat);
        }
        //创建面对象
        var polygon = new T.Polygon(regionLngLats, {
          color: "#172ED6",
          weight: 3,
          lineStyle: "dashed",
          opacity: 1,
          fillColor: "#FFFFFF",
          fillOpacity: 0
        });
        //向地图上添加行政区划面
        this.map.addOverLay(polygon);
        // map.addOverLay(line);
      }
      //显示最佳比例尺
      // this.map.setViewport(pointsArr);
    },
    removeMarkets() {
      var lays = this.map.getOverlays(); //获取地图上所有的覆盖物
      var s = 0;
      for (var i = lays.length - 1; i >= 0; i--) {
        //倒序删除避免长度发生变化
        if ((lays[i].Type = 1000)) {
          //根据地图上覆盖物的类型删除
          this.map.removeOverLay(lays[i]); //从地图上移除。
          //        s++;
        }
      }
    },
    // 点击显示点信息
    // 景区
    showBridge(e) {
      // this.loadMap();
      // //console.log(e);
      //创建图片对象
      let a = [];
      let imgUrl = "";
      let icon = new T.Icon({
        iconUrl: require("../../assets/image/gis/point.png"),
        iconSize: new T.Point(27, 27),
        iconAnchor: new T.Point(10, 25)
      });
      // 创建点
      var marker = new T.Marker(new T.LngLat(e.lng, e.lat), {
        icon: icon
      });
      // if (e.p) {

 

      // }
      if (e.flagPicUrl == null) {
        if (e.flagPic == null) {
          // 暂无图片
          imgUrl = require("../../assets/image/gis/icon/noPic.jpg");
        } else {
          imgUrl = "http://txl.tourzj.gov.cn/sitepic/Imgbig/" + e.flagPic;
        }
      } else {
        imgUrl = e.flagPicUrl;
      }
      a.push(marker);
      var infoWin1 = new T.InfoWindow();
      let sContent =
        "<div  style='width: 200px;#04213E;'>" +
        "<img style='width: 100%;' src=" +
        imgUrl +
        " ><div>" +
        "<p style='padding:10px;color:#fff;margin:0'>" +
        e.unitName +
        "</p>" +
        "<p style='padding:10px;color:#fff;margin:0'>地址:" +
        e.address +
        "</p>" +
        "</div></div>";
      infoWin1.setContent(sContent);
      marker.addEventListener("click", function(e) {
        marker.openInfoWindow(infoWin1);
      });
      //console.log(e.lng, e.lat);
      this.map.centerAndZoom(new T.LngLat(e.lng, e.lat), 12);
      setTimeout(() => {
        marker.openInfoWindow(infoWin1);
      }, 100);
      // 将标注添加到地图中
      var markers = new T.MarkerClusterer(this.map, {
        markers: a
        // markers: array
      });
      // markers.openInfoWindow(infoWin1);
    },

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM