百度地图区域绘制面

<template>
  <div class="mapContainer">
    <!-- <div id="tMap" /> -->
    <div id="tMap" ref="tMap" />
  </div>
</template>

<script>
import { TDIMap, BaiduMap } from "@/utils/map.js";
import marki1 from "@/assets/map/i-1.png";
import marki2 from "@/assets/map/i-2.png";
import marki3 from "@/assets/map/i-3.png";
import marki4 from "@/assets/map/i-4.png";
import marki5 from "@/assets/map/i-5.png";
import marki6 from "@/assets/map/i-6.png";
import marki7 from "@/assets/map/i-7.png";
import markBg1 from "@/assets/map/m-t-bg1.png";
import markBg2 from "@/assets/map/m-t-bg2.png";
import markBg3 from "@/assets/map/m-t-bg3.png";
import markBg4 from "@/assets/map/m-t-bg4.png";
import markBg5 from "@/assets/map/m-t-bg5.png";
import markBg6 from "@/assets/map/m-t-bg6.png";
import markBg7 from "@/assets/map/m-t-bg7.png";
import mapdbg from "@/assets/dzdl/mapdbg.png";
import drawjson from "@/assets/json/1.json";
const $tdMap = null;

export default {
  name: "TdMap",
  props: {
    dataList: {
      type: Array,
      default: () => {
        return [
          {
            lat: "118.174014",
            lng: "30.732226",
            name: "这里是景区名称",
          },
        ];
      },
    },
  },
  data() {
    return {
      // lat: 30.930916,
      // lng: 118.344438,
      //118.17193,30.727538
      // lat: 30.927928,
      // lng: 118.194855,
      lat: 30.679277,
      lng: 118.140187,
      mapLevel: 14,
    };
  },
  watch: {
    dataList: {
      handler() {
        // this.initBaiDu();
        this.bgMark();
      },
      deep: true,
    },
  },
  mounted() {
    this.initBaiDu();
  },
  created() {},
  methods: {
    initBaiDu() {
      const _this = this;
      BaiduMap.init().then((BMap) => {
        _this.map = new BMapGL.Map(_this.$refs.tMap);
        _this.map.centerAndZoom(
          new BMapGL.Point(_this.lng, _this.lat),
          _this.mapLevel
        );
        // _this.map.addControl(
        //   new BMapGL.MapTypeControl({
        //     // mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP], //图层类型+混合
        //     // mapTypes: [BMAP_NORMAL_MAP], //图层类型
        //     // anchor: BMAP_ANCHOR_TOP_LEFT, //切换按钮位置
        //   })
        // );
        _this.map.enableScrollWheelZoom();
        let zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
        _this.map.addControl(zoomCtrl);
        //地图个性化
        _this.map.setMapStyleV2({
          styleId: "2ab34170567eb610404d09569833f505",
        });
        //划区域
        _this.getBoundary();
      });
    },
    getBoundary() {
      const _this = this;
      // 绘制面-埃里村
      let mapArrys = [
        [
          // { lat: 118.11290981010475, lng: 30.63750677209448 },
          // { lat: 118.15085423484622, lng: 30.632037879849108 },
          // { lat: 118.18247458879745, lng: 30.661367374559234 },
          // { lat: 118.192248152746, lng: 30.69963133168712 },
          // { lat: 118.16465220747949, lng: 30.713044936540303 },
          // { lat: 118.12670778273801, lng: 30.70459955311886 },
          // { lat: 118.11233489457837, lng: 30.680252799658575 },
          [118.12474856744029, 30.703262278578094],
          [118.13063583662012, 30.70209411456956],
          [118.12859793573688, 30.69800543137113],
          [118.12225779965485, 30.69411128631431],
          [118.11727626416166, 30.686322524858355],
          [118.11840843132046, 30.68087001794811],
          [118.11501192984616, 30.676780435722165],
          [118.11003039435514, 30.676585689391388],
          [118.09961445650652, 30.660030816288184],
          [118.09508578787558, 30.65886212983648],
          [118.09372718728673, 30.656524714539245],
          [118.09667082189662, 30.651070525711418],
          [118.09463292101333, 30.641330137502294],
          [118.10187879081991, 30.64230422047129],
          [118.10527529229205, 30.647758903799797],
          [118.10912466062854, 30.650486130086406],
          [118.11093612807963, 30.65068092902024],
          [118.11569123014061, 30.65262889677608],
          [118.11795556445605, 30.65321327944926],
          [118.11840843132046, 30.651070525711418],
          [118.11999346533935, 30.65068092902024],
          [118.12135206592825, 30.648732922018326],
          [118.120899199066, 30.64347310708439],
          [118.12723933514798, 30.64834331590812],
          [118.12927723603133, 30.650875727561598],
          [118.1374288395644, 30.657303859252266],
          [118.1367495393099, 30.65886213046639],
          [118.14376897568638, 30.6668478728957],
          [118.14625974343198, 30.66606880512373],
          [118.1539584801028, 30.671522147616216],
          [118.15712854814484, 30.68612779840045],
          [118.16029861618489, 30.68632252548808],
          [118.16369511765703, 30.68749087976775],
          [118.16709161912917, 30.68671197848586],
          [118.16935595344461, 30.687296155036634],
          [118.16912952001451, 30.69430599792814],
          [118.16120434991143, 30.706571998012762],
          [118.14535400970743, 30.70832415645178],
          [118.12474856744029, 30.703262278578094],
        ],
      ];
      for (let i = 0; i < mapArrys.length; i++) {
        let mapAreas = [];
        for (let j = 0; j < mapArrys[i].length; j++) {
          mapAreas.push(new BMapGL.Point(mapArrys[i][j][0], mapArrys[i][j][1]));
        }
        console.log("mapAreas", mapAreas);
        let polygon = new BMapGL.Polygon(mapAreas, {
          strokeWeight: 3,
          strokeColor: "#13EBFF",
          strokeStyle: "dashed",
          fillColor: "#08304B",
          fillOpacity: 0.2,
        });
        _this.map.addOverlay(polygon);
      }
      //地图标点=========================
      _this.bgMark();
    },
    //坐标点标记
    bgMark() {
      let _this = this;
      const marArr = _this.dataList;
      let mark = "";
      let markBg = "";
      let colorBg = "";
      _this.removeMarkets();
      for (var i = 0; i < marArr.length; i++) {
        let type = marArr[i].type;
        switch (type) {
          case "1":
            mark = marki1;
            markBg = markBg1;
            colorBg = "#43E185";
            break;
          case "2":
            mark = marki2;
            markBg = markBg2;
            colorBg = "#FF9F2C";
            break;
          case "3":
            mark = marki3;
            markBg = markBg3;
            colorBg = "#44ACFF";
            break;
          case "4":
            mark = marki4;
            markBg = markBg4;
            colorBg = "#BD7AF2";
            break;
          case "5":
            mark = marki5;
            markBg = markBg5;
            colorBg = "#FF91E2";
            break;
          case "6":
            mark = marki6;
            markBg = markBg6;
            colorBg = "#1EE8FB";
            break;
          case "7":
            mark = marki7;
            markBg = markBg7;
            colorBg = "#FF6459";
            break;
          default:
            mark = marki1;
            markBg = markBg1;
            colorBg = "#43E185";
        }

        if (marArr[i].lat && marArr[i].lng) {
          _this.myIcon = new BMapGL.Icon(mark, new BMapGL.Size(42, 50));
          let marker = new BMapGL.Marker(
            new BMapGL.Point(marArr[i].lat, marArr[i].lng),
            {
              icon: _this.myIcon,
            }
          );
          _this.map.addOverlay(marker);
          // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
          // 创建信息窗口
          let scont =
            "<div class='tcont' style='background-image:url(" +
            markBg +
            ");color:" +
            colorBg +
            "'>" +
            marArr[i].name +
            "</div>";
          let opts = {
            width: 150,
          };
          let infoWindow = new BMapGL.InfoWindow(scont, opts);
          // 点标记添加点击事件
          let point = new BMapGL.Point(marArr[i].lat, marArr[i].lng);
          marker.addEventListener("click", function () {
            _this.map.openInfoWindow(infoWindow, point); // 开启信息窗口
          });
        }
      }
    },
    //删除坐标
    removeMarkets() {
      let _this = this;
      let markers_gis = _this.map.getOverlays();
      if (markers_gis.length > 0) {
        for (let i = 0; i < markers_gis.length; i++) {
          _this.map.removeOverlay(markers_gis[i]);
        }
      }
      //清楚标点后再添加行政区域
      // 绘制面-埃里村
      let mapArrys = [
        [
          // { lat: 118.11290981010475, lng: 30.63750677209448 },
          // { lat: 118.15085423484622, lng: 30.632037879849108 },
          // { lat: 118.18247458879745, lng: 30.661367374559234 },
          // { lat: 118.192248152746, lng: 30.69963133168712 },
          // { lat: 118.16465220747949, lng: 30.713044936540303 },
          // { lat: 118.12670778273801, lng: 30.70459955311886 },
          // { lat: 118.11233489457837, lng: 30.680252799658575 },
          [118.12474856744029, 30.703262278578094],
          [118.13063583662012, 30.70209411456956],
          [118.12859793573688, 30.69800543137113],
          [118.12225779965485, 30.69411128631431],
          [118.11727626416166, 30.686322524858355],
          [118.11840843132046, 30.68087001794811],
          [118.11501192984616, 30.676780435722165],
          [118.11003039435514, 30.676585689391388],
          [118.09961445650652, 30.660030816288184],
          [118.09508578787558, 30.65886212983648],
          [118.09372718728673, 30.656524714539245],
          [118.09667082189662, 30.651070525711418],
          [118.09463292101333, 30.641330137502294],
          [118.10187879081991, 30.64230422047129],
          [118.10527529229205, 30.647758903799797],
          [118.10912466062854, 30.650486130086406],
          [118.11093612807963, 30.65068092902024],
          [118.11569123014061, 30.65262889677608],
          [118.11795556445605, 30.65321327944926],
          [118.11840843132046, 30.651070525711418],
          [118.11999346533935, 30.65068092902024],
          [118.12135206592825, 30.648732922018326],
          [118.120899199066, 30.64347310708439],
          [118.12723933514798, 30.64834331590812],
          [118.12927723603133, 30.650875727561598],
          [118.1374288395644, 30.657303859252266],
          [118.1367495393099, 30.65886213046639],
          [118.14376897568638, 30.6668478728957],
          [118.14625974343198, 30.66606880512373],
          [118.1539584801028, 30.671522147616216],
          [118.15712854814484, 30.68612779840045],
          [118.16029861618489, 30.68632252548808],
          [118.16369511765703, 30.68749087976775],
          [118.16709161912917, 30.68671197848586],
          [118.16935595344461, 30.687296155036634],
          [118.16912952001451, 30.69430599792814],
          [118.16120434991143, 30.706571998012762],
          [118.14535400970743, 30.70832415645178],
          [118.12474856744029, 30.703262278578094],
        ],
      ];
      for (let i = 0; i < mapArrys.length; i++) {
        let mapAreas = [];
        for (let j = 0; j < mapArrys[i].length; j++) {
          mapAreas.push(new BMapGL.Point(mapArrys[i][j][0], mapArrys[i][j][1]));
        }
        console.log("mapAreas", mapAreas);
        let polygon = new BMapGL.Polygon(mapAreas, {
          strokeWeight: 3,
          strokeColor: "#13EBFF",
          strokeStyle: "dashed",
          fillColor: "#08304B",
          fillOpacity: 0.2,
        });
        _this.map.addOverlay(polygon);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.mapContainer {
  width: 100%;
  z-index: 4;
  height: 100%;
}
#tMap {
  width: 100%;
  height: 100%;
}
</style>

 

posted @ 2022-12-02 09:54  abcByme  阅读(188)  评论(0编辑  收藏  举报