• 高德地图绘制纯文本、绘制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="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",
        }
     ]
    }
  • 相关阅读:
    VMware workstation安装linux(ubuntu)配置详解
    虚拟机的三种网络模式
    虚拟机(VMware Workstation)的使用方法
    零基础学习hadoop到上手工作线路指导(初级篇)
    Hadoop到底能做什么?怎么用hadoop?
    什么是云计算技术
    什么是云计算
    静态数据库迁移
    apache-mysql-php安装与配置
    CentOS6.6下的authpuppy源码安装与配置完全纯净版,内有问题解答
  • 原文地址:https://www.cnblogs.com/teamemory/p/15342746.html
Copyright © 2020-2023  润新知