Mapbox GL JS 使用小結（二）

一、加載圖標資源

      ImageList.map((item, index) => {
          this.map.loadImage(
            `static/images/${item}.png`,
            (error, img) => {
              img && this.map.addImage(item, img);
            }
          );
        });

二、切換地圖圖層時，設置地圖圖層屬性狀態

     map.geomap.setLayoutProperty(id, "visibility", "none");
     map.geomap.setLayoutProperty(id, "visibility", "visible");

三、添加Popup對象

      // 添加Popup對象
      const popup = new mapboxgl.Popup({
        anchor: "bottom",
        offset: offset || [1, -15],
        className: "popup"
      });
      popup.on("close", function(p) {
        if (p && p.target && p.target._vue) {
          p.target._vue.$destroy();
        }
      });
      const dom = document.createElement("div");
      dom.className = "popup-content-wrapper";
      
     popup.setLngLat(coordinates).setDOMContent(dom).addTo(map);
       // 渲染局部Vue組件（mappopupwrapper）
       popup._vue = new Vue({
         render: h =>
           h(MapPopupWrapper, {
            props: {
              width: "700px",
              type: "resource",
              target: {
                feature
              }
            }
          })
      }).$mount(dom);

四、對於“icon-color”一種常用的篩選方式

   "icon-color": [
                "case",
                ["boolean", ["feature-state", "hover"], false],
                "#F89806",
                ["boolean", ["==", ["get", "state"], 0], false],
                "#2363F8",
                ["get", "color"]
              ],

//配合選中效果的圖標顏色變化        
  "circle-color": [
                "case",
                ["boolean", ["feature-state", "hover"], false],
                "#ccdeff",
                "#ffffff"
              ],
        let hoveredStateId = null;
          map.on("mouseenter", "Layer", function(e) {
            map.getCanvas().style.cursor = "pointer";
            if (e.features.length > 0) {
              if (hoveredStateId) {
                map.setFeatureState(
                  { source: "Source", id: hoveredStateId },
                  { hover: false }
                );
              }
              hoveredStateId = e.features[0].properties.id;
              map.setFeatureState(
                { source: "Source", id: hoveredStateId },
                { hover: true }
              );
            }
          });
          map.on("mouseleave", "Layer", function(e) {
            map.getCanvas().style.cursor = "";
            if (hoveredStateId) {
              map.setFeatureState(
                { source: "Source", id: hoveredStateId },
                { hover: false }
              );
            }
            hoveredStateId = null;
          });

五、百度地圖的限制地區（此處為廣東省）地名查詢url

        url = 'http://api.map.baidu.com/place/v2/suggestion?&query='+ queryString + "&region=廣東省&city_limit=false&output=json&ak=" + baiduAPI.ak;

六、數據轉換為geojson一般格式

     // 轉化GeoJSON
     GeoJSON(datalist) {
       this.geojson = null;
       const geojson = {
         type: "FeatureCollection",
         features: []
       };
      datalist.map(item => {
        const feature = {
          type: "Feature",
          id: item.id,
          geometry: {
            type: "Point",
            coordinates: [Number(item.lng), Number(item.lat)]
          },
          properties: {
            ...item,
          }
        };
        geojson.features.push(feature);
      });
      this.geojson = geojson;
      return geojson;
    },

七、日期格式轉換

    formatDate(date, fmt) {
      var o = {
        "M+": date.getMonth() + 1, //月份
        "d+": date.getDate(), //日
        "h+": date.getHours(), //小時
        "m+": date.getMinutes(), //分
        "s+": date.getSeconds(), //秒
        "q+": Math.floor((date.getMonth() + 3) / 3), //季度
        S: date.getMilliseconds() //毫秒
      };
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? o[k]
              : ("00" + o[k]).substr(("" + o[k]).length)
          );
        }
      }
      return fmt;
    }

八、設置等級顏色分類

        map.setPaintProperty('layerID', "fill-color", {
           property: "Value",
                stops: [
                    [0, "#CDCDCD"],
                    [0.1, "#A7F38F"],
                    [2, "#72D96E"],
                    [5, "#3CB93C"],
                    [10, "#2C8B2C"],
                    [25, "#60B9FF"],
                    [50, "#0000FD"],
                    [100, "#FB00FB"],
                    [250, "#810040"]
                    ],
                type: "interval"
            });

九、隨機生成顏色

    // 隨機生成顏色
    randomColor() {
      return ("#" + ("00000" + ((Math.random() * 0x1000000) << 0).toString(16)).substr(-6));
    },

十、人口密度熱力圖（二）

  addRenderHeatLayerToMap (geojson) {
      const map = this.map.geomap;
      // 移除舊圖層
      this.removeRenderHeatLayerToMap();
      
      const layerId = 'map_rk_heatmap_lyers';
      // 添加圖層數據源
      map.addSource(layerId, {
        type: "geojson",
        data: geojson
      });
      // 渲染熱力圖
      map.addLayer({
        "id": layerId,
        "type": "heatmap",
        "source": layerId,
        "paint": {
          "heatmap-weight": [
            "interpolate",
            ["linear"],
            ["get", "mag"],
            0, 0,
            1, 1
          ],
          "heatmap-intensity": 5,
          "heatmap-color": [
            "interpolate",
            ["linear"],
            ["heatmap-density"],
            0, "rgba(255, 255, 255, 0)",
            0.2, "rgba(0, 0, 255, 0.8)",
            0.4, "rgba(0, 255, 255, 0.8)",
            0.6, "rgba(0, 255, 0, 0.8)",
            0.8, "rgba(255,255, 0, 0.8)",
            1, "rgba(255, 0, 0, 0.8)"
          ],
          "heatmap-radius": 30,
          "heatmap-opacity": 0.8
        }
      });
    },

十一、mapbox 自動避讓

    layout: {
              "icon-allow-overlap": true,//自動避讓屬性
              "icon-ignore-placement": true,
              "icon-image": "_svg_pin",
              "icon-size": 1
            },