快捷導(dǎo)航

vue3+高德地圖只展示指定市、區(qū)行政區(qū)域的地圖以及遮罩反向鏤空其他地區(qū)

更新時(shí)間：2024年02月01日 15:04:05 作者：Fantasywt

vue大屏項(xiàng)目開發(fā),客戶覺(jué)得地圖上的文字標(biāo)注太多了,要求地圖上只顯示省市等主要城市的標(biāo)注,這篇文章主要給大家介紹了關(guān)于vue3+高德地圖只展示指定市、區(qū)行政區(qū)域的地圖以及遮罩反向鏤空其他地區(qū)的相關(guān)資料,需要的朋友可以參考下

實(shí)現(xiàn)效果：

例如像這樣，只展示廈門的地圖，隱藏其他地方，點(diǎn)擊區(qū)域，在單獨(dú)展示區(qū)，點(diǎn)擊返回回到總覽。

一、獲取高德地圖的key，和密鑰

地址：高德控制臺(tái)具體的獲取流程就不教授了，百度很多

二、安裝

npm i @amap/amap-jsapi-loader --save

三、引入使用

要注意的是，因?yàn)槭褂昧诵姓?wù)搜索的api，它的search()方法要有回調(diào)，就必須配置密鑰

點(diǎn)擊查看官方推薦的密鑰使用方式

      window._AMapSecurityConfig = {
        securityJsCode: "你的密鑰",
      };

主要使用的api: 行政區(qū)查詢服務(wù)（AMap.DistrictSearch）

完整代碼

<template>
  <div class="home_div">
    <div class="map-title">
      <h3>JSAPI Vue3地圖組件示例</h3>
      <div v-if="back" id="back" @click="showAllMap" style="cursor: pointer;">返回</div>
    </div>
    <div id="container"></div>
  </div>
</template>
<script lang="ts">
import AMapLoader from "@amap/amap-jsapi-loader";
import { shallowRef } from "@vue/reactivity";
import { ref } from "vue";
export default {
  name: "mapComtaint",
  setup() {
    const map = shallowRef(null) as any;
    const AMap = shallowRef(null) as any;
    const back = ref(false);
    const polygons = shallowRef([]) as any; // 區(qū)描邊、遮罩
    const district = shallowRef(null) as any;
    const polygon = shallowRef(null) as any; // 市描邊、遮罩
    return {
      map,
      AMap,
      back,
      polygons,
      district,
      polygon,
    };
  },
  create() {},
  methods: {
    /*  
    返回區(qū)域?qū)?yīng)顏色
    adcode:廈門市	        350200
            廈門市市轄區(qū)	350201
            思明區(qū)	        350203
            海滄區(qū)	        350205
            湖里區(qū)	        350206
            集美區(qū)	        350211
            同安區(qū)	        350212
            翔安區(qū)	        350213
            */
    getColorByAdcode(adcode: string) {
      let colors = {
        "350200": "#111111",
        "350201": "#456aed",
        "350203": "428cced",
        "350205": "#a456e1",
        "350206": "#123fee",
        "350211": "#666eee",
        "350212": "#963qde",
        "350213": "#784eda",
      } as any;
      return colors[adcode];
    },
    // 初始化遮罩
    initArea(city: string, isChildDraw: boolean = false) {
      let that = this;
      this.district.search(city, function (status: string, result: any) {
        // 外多邊形坐標(biāo)數(shù)組和內(nèi)多邊形坐標(biāo)數(shù)組
        var outer = [
          new that.AMap.LngLat(-360, 90, true),
          new that.AMap.LngLat(-360, -90, true),
          new that.AMap.LngLat(360, -90, true),
          new that.AMap.LngLat(360, 90, true),
        ];
        console.log(result);

        // 繪制遮罩
        var holes = result.districtList[0].boundaries;
        var pathArray = [outer];
        pathArray.push.apply(pathArray, holes);
        that.polygon = new that.AMap.Polygon({
          pathL: pathArray,
          strokeColor: "#00eeff",
          strokeWeight: 1,
          fillColor: "#020933",
          fillOpacity: 1,
        });
        that.polygon.setPath(pathArray);
        that.map.add(that.polygon);
        // 判斷是否要繪制子區(qū)域
        if (isChildDraw) {
            // 將搜索層級(jí)設(shè)置為 區(qū)、縣
          that.district.setLevel("district");
          for (let i = 0; i < result.districtList[0].districtList.length; i++) {
            that.areaPolyline(result.districtList[0].districtList[i].adcode);
          }
        }
      });
    },
    // 顯示總覽
    showAllMap() {
      this.back = false;
      if (this.polygon) {
        // 清除遮罩
        this.map.remove(this.polygon);
      }
      this.initArea("廈門市", true);
      this.map.setCenter([118.113994, 24.614998]);
      this.map.setZoom(11);
    },
    // 繪制區(qū)域描邊
    areaPolyline(adcode: string) {
      let that = this;
      if (this.polygons.length) {
        this.map.remove(this.polygons);
        this.polygons = [];
      }
      this.district.search(adcode, function (status: string, result: any) {
        console.log("區(qū)", result);
        //   繪制區(qū)域描邊
        let bounds = result.districtList[0].boundaries;
        for (let i = 0; i < bounds.length; i++) {
          const color = that.getColorByAdcode(result.districtList[0].adcode);
          const polygon = new that.AMap.Polygon({
            path: bounds[i],
            strokeColor: "#784eda",
            strokeWeight: 4,
            fillColor: "#784eda",
            fillOpacity: 0,
          });
          // 添加監(jiān)聽(tīng)事件
          polygon.on("mouseover", () => {
            if (!that.back) {
              polygon.setOptions({
                fillOpacity: 0.7,
              });
            }
          });
          // 添加點(diǎn)擊事件
          polygon.on("click", () => {
            // 判斷是否為市級(jí)
            if (!that.back) {
                // 顯示返回按鈕
              that.back = true;
              that.map.setZoom(12);
              // 修改中心位置為區(qū)級(jí)中心
              that.map.setCenter([
                result.districtList[0].center.lng,
                result.districtList[0].center.lat,
              ]);
            //   繪畫
              that.initArea(result.districtList[0].adcode, false);
            }
          });
          polygon.on("mouseout", () => {
            polygon.setOptions({
              fillOpacity: 0,
            });
          });
          that.polygons.push(polygon);
        }
        that.map.add(that.polygons);
      });
    },
    ininMap() {
      let that = this;
      // 這個(gè)配置很重要，必須設(shè)置，否則你的 行政服務(wù)搜索api無(wú)法使用生成回調(diào)
      window._AMapSecurityConfig = {
        securityJsCode: "密鑰",
      };
      AMapLoader.load({
        key: "你的key", //設(shè)置您的key
        version: "2.0",
        plugins: [
          "AMap.ToolBar",
          "AMap.Driving",
          "AMap.Polygon",
          "AMap.DistrictSearch",
          "AMap.Object3DLayer",
          "AMap.Object3D",
          "AMap.Polyline",
        ],
        AMapUI: {
          version: "1.1",
          plugins: [],
        },
        Loca: {
          version: "2.0.0",
        },
      })
        .then((AMap) => {
          that.AMap = AMap;
          that.map = new AMap.Map("container", {
            viewMode: "3D",
            zoom: 11,
            zooms: [10, 20],
            center: [118.113994, 24.614998],
          });
          that.district = new AMap.DistrictSearch({
            subdistrict: 3, //獲取邊界返回下級(jí)行政區(qū)
            extensions: "all", //返回行政區(qū)邊界坐標(biāo)組等具體信息
            level: "city", //查詢行政級(jí)別為 市
          });
          that.initArea("廈門市", true);
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
  mounted() {
    //DOM初始化完成進(jìn)行地圖初始化
    this.ininMap();
  },
};
</script>
<style scope>
.home_div {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  position: relative;
}
#container {
  height: 100vh;
  width: 100%;
  padding: 0px;
  margin: 0px;
}
.map-title {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 50px;
  background-color: rgba(27, 25, 27, 0.884);
  display: flex;
  justify-content: space-around;
  align-items: center;
}
h3 {
  z-index: 2;
  color: white;
}
</style>

效果圖如文章開頭圖片

總結(jié)

到此這篇關(guān)于vue3+高德地圖只展示指定市、區(qū)行政區(qū)域的地圖以及遮罩反向鏤空其他地區(qū)的文章就介紹到這了,更多相關(guān)vue3 高德地圖只展示指定行政區(qū)域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: