关于vue.js:记录Vue高德地图使用总结

36次阅读

共计 6369 个字符，预计需要花费 16 分钟才能阅读完成。

  1. 全地区展现 / 点聚合
  2. 独自区域展现
  3. 行政区划分
  4. 自定义图层
  5. 样图展现

一、全地区展现 / 点聚合 

/* 加载地图 */
async getMaps() {
  this.loading = true;
  await MapLoader().then((AMap) => {
      const map = new AMap.Map("map_three", {
        showLabel: true,
        mapStyle: "amap://styles/ccab8afcf9c843aefac72ff71d705eb4",
        center: [114.085947, 22.547],
        viewMode: "3D",
        labelzIndex: 130,
        pitch: 30,
        zoom: 11.5,
        zooms: [11, 18],
        features: ["road", "point", "bg"],
      });
      const district = new AMap.DistrictSearch({
        subdistrict: 0,
        extensions: "all",
        level: "district",
      });
      district.search("宝安区", (status, result) => {const [bounds,mask] = [result.districtList[0].boundaries,[]]
        if (bounds) {for (let i = 0, l = bounds.length; i < l; i++) {
            // 生成行政区划 polygon
            let polygon = new AMap.Polygon({
              map: map,
              strokeWeight: 1,
              path: bounds[i],
              fillOpacity: 0.25,
              fillColor: "#09b8bf",
              strokeColor: "#09b8bf",
            });
            mask.push(polygon);
          }
        }
        map.add(mask);
        map.setFitView(mask); // 视口自适应
       
        // 插件：行政区图层、点聚合
        AMap.plugin(["AMap.DistrictLayer","AMap.MarkerClusterer"], function () {
          const disProvince = new AMap.DistrictLayer.Province({
            zIndex: 12,
            depth: 2,
            styles: {fill: function (properties) {
                let adcode = properties.adcode;
                return getColorByAdcode(adcode);
              },
              "province-stroke": "#09b8bf",
              "city-stroke": "#09b8bf",
              "county-stroke": "#09b8bf", // 线条色彩
            },
          });
          disProvince.setMap(map);
        });
        // 随机色彩
        const getColorByAdcode = (adcode) => {const colors = {};
          if (!colors[adcode]) colors[adcode] = "rgba(7,111,142,0.7)";
          return colors[adcode];
        };
        map.on("click", () => {this.maps.infowindow.close();
        });
        this.maps.map = map;
        this.maps.AMap = AMap;
        this.drawStaion(AMap, map);
      });
    },
    (e) => {console.error("地图加载失败", e);
    }
  );
},

/* 生成地图点位 */
async drawStaion(AMap, map, pointList=this.maps.pointList) {const [data,markers] = [pointList,[]];
  let infowindow = null;
  for (let i in data) {const curPoint = data[i];
    // 点位状态色彩
    const status = this.getStatus(curPoint.status);
    // 点位模板
    const contents = this.setMapInfo(status, curPoint, curPoint.status);
    // 弹窗模板
    const windowPopup = this.openPopup(curPoint, this);

    // 点位实例
    const marker = new AMap.Marker({
      content: contents,
      position: [curPoint.longitude, curPoint.latitude],
    });
    // 弹窗实例
    infowindow = new AMap.InfoWindow({
      isCustom: true,
      anchor: "bottom-center",
      offset: new AMap.Pixel(5, -12),
    });
    marker.on("click", (e) => {
      // 避免每项变成遍历的最初一个
      infowindow.setContent(windowPopup.$el);
      infowindow.open(map, marker.getPosition());
    });
    markers.push(marker);
    this.maps.infowindow = infowindow;
    this.markers = markers;
  }

  /* 点聚合局部 */
  new AMap.MarkerClusterer(map, markers, {
    gridSize: 80,
    renderClusterMarker: _renderClusterMarker,
  });

  const count = markers.length;
  var _renderClusterMarker = function (context) {var factor = Math.pow(context.count / count, 1 / 18);
    var div = document.createElement("div");
    var Hue = 180 - factor * 180;
    var bgColor = "hsla(" + Hue + ",100%,50%,0.7)";
    var fontColor = "hsla(" + Hue + ",100%,20%,1)";
    var borderColor = "hsla(" + Hue + ",100%,40%,1)";
    var shadowColor = "hsla(" + Hue + ",100%,50%,1)";
    div.style.backgroundColor = bgColor;
    var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
    div.style.width = div.style.height = size + "px";
    div.style.border = "solid 1px" + borderColor;
    div.style.borderRadius = size / 2 + "px";
    div.style.boxShadow = "0 0 1px" + shadowColor;
    div.innerHTML = context.count;
    div.style.lineHeight = size + "px";
    div.style.color = fontColor;
    div.style.fontSize = "14px";
    div.style.textAlign = "center";
    context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
    context.marker.setContent(div);
  };

  map.add(markers);
  this.loading = false;
},

二、独自地区展现，区域外不显示 

const district = new AMap.DistrictSearch({
    subdistrict: 1,
    extensions: "all",
    level: "district",
    features: ["road", "point", "bg"], // 设置地图显示内容
  });
district.search("宝安区", (status, result) => {const [bounds,mask] = [result.districtList[0].boundaries,[]]
    for (let i = 0; i < bounds.length; i += 1) mask.push([bounds[i]]);
    // 重点：把绑定的元素放进查问里
    const maps = new AMap.Map("map", {
      mask: mask,
      mapStyle: "amap://styles/42828ca67777d22056d80019d1c4f90f",
      center: [113.873549, 22.642423],
      viewMode: "3D",
      showLabel: true,
      labelzIndex: 130,
      pitch: 30,
      zooms: [12, 18],
    });
    
    AMap.plugin(["AMap.DistrictLayer"], ()=>{
      // 异步加载插件
      const disProvince = new AMap.DistrictLayer.Province({
        zIndex: 12,
        depth: 2,
        styles: {fill: (properties)=>{
            var adcode = properties.adcode;
            return getColorByAdcode(adcode);
          },
          "county-stroke": "#09b8bf", // 线条色彩
        },
      });
      disProvince.setMap(maps);
    });
    // 随机色彩
    
    function getColorByAdcode(adcode) {const colors = {};
      if (!colors[adcode]) colors[adcode] = "transparent";
      return colors[adcode];
    };
    //this.maps.map = maps;
    // 敞开信息窗口
    maps.on("click", () => {this.infoWindow.close();
    });
});

三、行政区划分 

async getMaps() {
  this.loading = true;
  await MapLoader().then((AMap) => {
      const map = new AMap.Map("map_three", {
        showLabel: true,
        mapStyle: "amap://styles/ccab8afcf9c843aefac72ff71d705eb4",
        center: [114.085947, 22.547],
        viewMode: "3D",
        labelzIndex: 130,
        pitch: 30,
        zoom: 11.5,
        zooms: [11, 18],
        features: ["road", "point", "bg"],
      });
      const district = new AMap.DistrictSearch({
        subdistrict: 0,
        extensions: "all",
        level: "city",// 城市
      });
      district.search("深圳市", (status, result) => {const [bounds,mask] = [result.districtList[0].boundaries,[]]
        if (bounds) {for (let i = 0, l = bounds.length; i < l; i++) {
            // 生成行政区划 polygon
            let polygon = new AMap.Polygon({
              map: map,
              strokeWeight: 1,
              path: bounds[i],
              fillOpacity: 0.25,
              fillColor: "#09b8bf",
              strokeColor: "#09b8bf",
            });
            mask.push(polygon);
          }
        }
        map.add(mask);
        map.setFitView(mask); // 视口自适应

        AMap.plugin(["AMap.DistrictLayer"], function () {
          const disProvince = new AMap.DistrictLayer.Province({
            zIndex: 12,
            depth: 2,
            adcode: ["440306","440307","440308"],// 重点：增加要划分的子行政区码
            styles: {fill: function (properties) {
                let adcode = properties.adcode;
                return getColorByAdcode(adcode);
              },
              "province-stroke": "#09b8bf",
              "city-stroke": "#09b8bf",
              "county-stroke": "#09b8bf", // 线条色彩
            },
          });
          disProvince.setMap(map);
        });
        // 随机色彩
        const getColorByAdcode = (adcode) => {const colors = {};
          if (!colors[adcode]) colors[adcode] = '#' + parseInt(0x1000000 * Math.random()).toString(16).padStart(6, '0');
          return colors[adcode];
        };
        map.on("click", () => {this.maps.infowindow.close();
        });
      });
    },
    (e) => {console.error("地图加载失败", e);
    }
  );
},

四、自定义图层（图片）

async getMaps() {
  this.loading = true;
  await MapLoader().then((AMap) => {
      // 引入图片图层
      const imageLayer = new AMap.ImageLayer({url: require("@/assets/images/home/map_bg2-2.png"),
        bounds: new AMap.Bounds([113.748587, 22.515094],// 左下
          [113.990000, 22.860618]// 右上
        ),
        zooms: [11, 18],
      });

      const map = new AMap.Map("map_five", {
        showLabel: true,
        mapStyle: "amap://styles/ccab8afcf9c843aefac72ff71d705eb4",
        viewMode: "3D",
        labelzIndex: 130,
        pitch: 30,
        rotateEnable: true,
        center: [113.873549, 22.642423],
        resizeEnable: true,
        zooms: [11, 18],
        features: ["road", "point", "bg"],
        layers: [new AMap.TileLayer(), imageLayer],// 图层实例放到此处
      });
      map.on("click", (e) => {this.maps.infowindow.close();
      });
      this.maps.map = map;
      this.maps.AMap = AMap;
      let arr = [];
      arr = this.maps.pointList.filter((item) => {return this.checkList.includes(item.label);
      });
      this.drawStaion(AMap, map, arr);
    },
    (e) => {console.error("地图加载失败", e);
    }
  );
},

五、样图展现
1、全地区展现 / 点聚合

2、独自区域展现

3、行政区划分

4、自定义图层

正文完
vue.js
发表至： vue.js
2021-06-04
 0
关于vue.js:vue中使用Vueextend方法仿写一个loading加载中效果
关于vue.js:夏哥事件薄-VUE-使用-vueloader-报错及解决在vue里使用scss
关于vue.js:eslint在vscode里的配置问题
关于vue.js:Nuxt3实战系列之了解Nuxt3的渲染模式