高德地圖繪制純文本、繪制maker及給其綁定事件方法、繪制區域方法小結

我們常需要利用高德地圖在地圖圖層上面繪制文本、maker等內容，有必要小結一下；

情形一：繪制純文本

封裝方法如下：

addText(
      textData,
      style = {
        "font-size": "12px",
        color: "#fff",
        backgroundColor: "transparent",
        border: "none",
      }
    ) {
      if (!textData.length) return;
      for (const [keys, values] of textData.entries()) {
        var text = new AMap.Text({
          text: values.name,
          style,
          position: values.position,
        });
        text.setMap(this.map);
      }
}

使用方法：

this.addText([
  {
    name: "瀟河產業園區",
    position: [112.51776, 37.619499],
  },
  {
    name: "陽曲產業園",
    position: [112.690353, 38.05569],
  }]
);

注意：此封裝方法，將經緯度已經默認組裝在一個數組里面，這里根據實際情況可以將經緯度自行拆開封裝也行；

情形二：繪制maker及綁定事件彈出信息窗口

封裝方法如下：

 /**
     * @description: 繪制maker的方法及添加事件
     * @param {*} markerList 坐標的集合[{lang:'',lat:''}]
     * @param {*} icon = new AMap.Icon({
        size: new AMap.Size(20, 20), // 圖標尺寸
        image:
          "data:"base64格式", // Icon的圖像
        imageSize: new AMap.Size(20, 20), // 根據所設置的大小拉伸或壓縮圖片
      });
     * @param {*} myhtml 彈框infowindow的樣式函數
     * @return {*}
     * @author: George Zhang
     */

    addCommonMarkerFun(markerList = [], icon = "", myHtml = "") {
      let that = this;
      if (!markerList.length) return;
      for (const [keys, values] of markerList.entries()) {
        let marker = new AMap.Marker({
          position: new AMap.LngLat(values.longitude, values.latitude),
          offset: new AMap.Pixel(-5, -5),
          icon,
          label: {
            content: values.name || "",
            direction: "bottom",
            offset: new AMap.Pixel(5, 5),
          },
        });
        marker.on("click", async function(e) {
          if (!myHtml) return;
          const html = myHtml(values);
          that.addInfoWindow(html, [e.lnglat.lng, e.lnglat.lat]);
          that.map.setCenter([e.lnglat.lng, e.lnglat.lat - 0.1]);
        });
        that.map.add(marker);
      }
    },

使用方法如下：

此處我們也將 qiyeHtml 這個彈框信息封裝為方法，當然此方法根據你具體的需求需要自定義，有時間還需要異步請求 ！！！

 // 繪制企業及文字
      this.addCommonMarkerFun(
        [
            {
                  name: 'xxxx', //該字段根據實際情況來定
                  longitude:112.23,
                  latitude: 37.56,
            }
        ],
        new AMap.Icon({
          size: new AMap.Size(20, 20), // 圖標尺寸
          image:
            "data:", // Icon的圖像
          imageSize: new AMap.Size(20, 20), // 根據所設置的大小拉伸或壓縮圖片
        }),
        this.qiyeHtml
      );                                           

 qiyeHtml(e) {
　　// 此處可能會有異步請求，可加入await async 來進行處理！！！
      const html = `<div style="width:2.6667rem;padding: 0.1rem;">
                <p style="color: #fff;font-size: 0.16rem;font-weight: bold;">
                    ${e.name}
                </p>
                <div class='flex-start' style='margin:0.1rem 0;'> <span>碳排放量：</span> <span>${e.yearTotal}噸</span> </div>
              </div>`;
      return html;
 },

 

情形三：繪制區域

此需要需要給出具體的坐標閉合區域。

封裝方法：

 /**
     * @description:
     * @param {*} geoJsonData
     * @param {*} type 1代表企業  2代表園區 3 綠地
     * @return {*}
     * @author: George Zhang
     */
    drawGeoJson(geoJsonData, type = 1) {
      let that = this;
      let geoJson = new AMap.GeoJSON({
        geoJSON: geoJsonData, // GeoJSON對象
        getPolygon: function(geojson, lnglats) {
          return new AMap.Polygon({
            path: lnglats,
            fillOpacity: 0.8,
            fillColor: that.fillColor(geojson.properties.name, type),
            fillOpacity: that.fillOpacity(geojson.properties.name, type),
            strokeColor: "#B0E8C8",
            name: geojson.properties.name,
            borderWeight: 1,
            strokeOpacity: 0.4,
          });
        },
      });
      geoJson.eachOverlay((e) => {
        let that = this;
        if (e.w.name) {
          let fillColor = e.w.fillColor;
          let fillOpacity = e.w.fillOpacity;
          e.on("click", async (params) => {
            that.map.setCenter([params.lnglat.lng, params.lnglat.lat - 0.1]);
            const html = await that.myYuanquHtml(e.w.name);
            that.addInfoWindow(html, [params.lnglat.lng, params.lnglat.lat]);
          });
          e.on("mouseover", () => {
            e.setOptions({
              fillColor: "#CB7F1F",
              fillOpacity: 1,
            });
          });
          e.on("mouseout", () => {
            e.setOptions({
              fillColor,
              fillOpacity,
            });
          });
        }
      });
      this.map.add(geoJson);
    },

 

使用方法：

geoJsonData 的格式為如下的內容  （GeoJSON格式的數據）

{
  type: "FeatureCollection",
  features: [
    {
      geometry: {
        coordinates: [
          [
            [112.5443997335351, 37.78031618392991],
            [112.5442467093464, 37.78441214392258],
            [112.5445342759263, 37.78764893351841],
            [112.5454687381043, 37.79001597508982],
            [112.5492412801307, 37.79962551542971],
            [112.549960054558, 37.81383739056211],
            [112.5756339657377, 37.8137928084111],
            [112.5755981477979, 37.78834534929788],
            [112.5762988222724, 37.78356866754082],
            [112.5676752511216, 37.78371218538219],
            [112.5675673829111, 37.78046084890205],
            [112.5443997335351, 37.78031618392991],
          ],
        ],
        type: "Polygon",
      },
      properties: {
        UserID: 0,
        name: "學府產業園區",
      },
      type: "Feature",
    },
    {
      geometry: {
        coordinates: [
          [
            [112.6109310562599, 37.87825393162834],
            [112.6186623445191, 37.87869114011654],
            [112.6189318724017, 37.87931788497126],
            [112.624070428042, 37.87995845543765],
            [112.6241242070624, 37.88068460933729],
            [112.6256154928961, 37.88086962235363],
            [112.624767353892, 37.87093242989624],
            [112.6259708884497, 37.87093104681709],
            [112.6265676816104, 37.87302248249204],
            [112.6274839536567, 37.87386269388013],
            [112.6288452775488, 37.87545787923099],
            [112.631704201473, 37.87542930170126],
            [112.6288580153967, 37.86517743047393],
            [112.626195737938, 37.86462876720404],
            [112.625556153919, 37.86023124021069],
            [112.6225792253824, 37.86065965899524],
            [112.6139553814875, 37.86068877083186],
            [112.6114535000939, 37.86118773077254],
            [112.6109279246743, 37.8777373512381],
            [112.6109310562599, 37.87825393162834],
          ],
        ],
        type: "Polygon",
      },
      properties: {
        UserID: 0,
        name: "陽曲產業園",
      },
      type: "Feature",
    }
 ]
}