百度地图区域绘制面
<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>