MapTalks知识点

1、改变图层顺序以及加载图片

    loadPic(ico){
      if(this.imageLayer){
        this.map.removeLayer(this.imageLayer);
      }
          // 地图图层区域
      this.imageLayer = new maptalks.ImageLayer('images',
        [
          {
            url : ico,
            extent: [111.3626371121935, 24.38936365178867, 115.42531150090603, 21.562222480666943],
            opacity : 1
          }
        ]);
      this.map.addLayer(this.imageLayer);
      this.map.getLayer('images').bringToBack();
    },

2、加载气泡框

 loadInfo(listData) {
      if (listData) {
        let that = this;
         if (!this.layer) {
          this.layer = new maptalks.VectorLayer('layer').addTo(this.map);
        } else {
          this.layer.clear();
        }
        listData.forEach((element) => {
          if(element.longitude && element.projectName !== '东风水库'){
            let marker = new maptalks.Marker([element.longitude, element.latitude], {
             'symbol' : {
                'markerType': 'ellipse',
                'markerFill':element.type == 1 ?  '#a200ff' :element.type == 2 ?  '#ffaf00' :element.type == 0 ?  'red':'#66dab8',
                'markerFillOpacity': 1,
                'markerLineColor': element.type == 1 ?  '#a200ff' :element.type == 2 ?  '#ffaf00' :element.type == 0 ?  'red':'#66dab8',
                'markerLineWidth': 3,
                'markerLineOpacity': 1,
                'markerLineDasharray':[],
                'markerWidth': 14,
                'markerHeight': 14,
                'markerDx': 0,
                'markerDy': 20,
                'markerOpacity' : 1
              }
          }).addTo(this.layer);
            let options = {
              autoOpenOn: null, //set to null if not to open window when clicking on map
              single: false,
              width: 183,
              height: 105,
              custom: true,
              dx: -3,
              dy: -12,
              content: `<div class="content">
                  <div class="contentbody">
                    <div class="pop_title">${element.projectName}</div>
                    <div class="pop_time"><span>水位值：</span> ${element.currentWater ? element.currentWater : '暂无数据'} m</div>
                     <div class="pop_time"><span>总库容：</span> ${element.totalCapacity ? element.totalCapacity : '暂无数据'} （万m3）</div>
                  </div>
                  <div class="arrow"></div>
                </div>`,
            };
            let infoWindow = new maptalks.ui.InfoWindow(options);
            infoWindow
              .addTo(this.layer)
              .show({
                x: Number(element.longitude),
                y: Number(element.latitude),
              });
            }
        });
      }
    },
     /**
     * @description 清除点位清除已有label
     */

    clearHtml(){
      let btns = document.querySelectorAll('.content');
       for (var i =0;i<btns.length;i++){
          btns[i].remove();   
        }
    },
    unloadPoint(value) {
      this.layer.clear();
    },