一，实现的效果
（注，点聚合功能也是可以的,只是这图片没有用后台返回的数据，所以没看到点聚合的效果，本案例的点聚合是有后台接口的，参考的朋友改成你们自己项目的接口即可）
二，项目地址
/ling-xu/gaud-map-vue
三，关键代码
<template><div:id="idHash"class="container"style="z-index:1"/></template><script>import pin1 from "../assets/pin1.png";import pin2 from "../assets/pin2.png";import pin3 from "../assets/pin3.png";import pin4 from "../assets/pin4.png";import pin5 from "../assets/pin5.png";import axios from "axios";export default {name: "MapChart",props: {year: {type: String, default: "" },// zoom: { type: Number, default: 4 },showData: {type: Boolean, default: false },locationList: Array, //产业数据-面店分布的地图显示传入数据getLocation: {type: Boolean, default: false } //首页-面店分布的图片显示},data: () => ({loading: false,idHash: "MapContainer" + new Date().getTime(),disProvinces: " ",map: {}, //地图对象depFeatures: [], //地图标注内容lineArr: []}),watch: {year() {this.refresh();},locationList() {this.refresh();}},mounted() {// eslint-disable-next-line no-undefinedif (window.AMap == undefined) {const script = document.createElement("script");script.src ="/maps?v=1.4.15&plugin=AMap.MarkerClusterer,Map3D,AMap.DistrictLayer,AMap.DistrictSearch&callback=initAMap&key=de45c1a0e7ea44bea49388cea9cca2f7";document.head.appendChild(script);window.initAMap = () => {this.refresh();};} else {this.refresh();}},methods: {refresh() {let that = this;if (!window.AMap) {return;}const opts = {subdistrict: 0,extensions: "all",level: "province"};//直接通过经纬度构建mask路径// eslint-disable-next-line no-undefconst district = new AMap.DistrictSearch(opts);district.search("青海省", function(status, result) {const bounds = result.districtList[0].boundaries;const mask = [];for (let i = 0; i < bounds.length; i += 1) {mask.push([bounds[i]]);}// eslint-disable-next-line no-undefconst Map = new AMap.Map(that.idHash, {mask: mask, //只显示包裹起来的区域resizeEnable: false, //是否监控地图容器尺寸变化showIndoorMap: false, //关闭室内地图center: [96.01909121185537, 35.874643454131984],viewMode: "3D",dragEnable: false, //初始状态下不可移动// pitch: 0,zoom: 6.9,features: that.depFeatures, //初始色块模式下，不显示标注等信息mapStyle: "amap://styles/021981e1781074e215441507a954df4b" //设置地图的显示样式});that.map = Map; //把这里面创建的地图对象存起来，让这个指针指向它，后续要使用//青海省描边--（原因是黄南中间有块地方，是属于海南自治区的。）for (let i = 0; i < bounds.length; i += 1) {// eslint-disable-next-line no-undefnew AMap.Polyline({path: bounds[i],strokeColor: "#1a77aa",strokeWeight: 20,map: Map});}//点聚合数据处理if (that.showData) {// 地图的数据由父组件传入that.updateMark(Map, that.locationList);} else if (that.getLocation) {// 首页-面店分布的图片显示axios({url: "diagram/getShopDistribute2",method: "get", // defaultbaseURL: "http://47.115.140.114:5001/api/report/",headers: {"x-user-token":"eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiJiYW5rZm9ydGVzdDAwMSIsInN1YiI6ImxvZ2luLmxvZ2luIiwiaWF0IjoxNjI0NjA1MTkxLCJhdXRob3JpemF0aW9uIjp7fSwiYWFhIjoiYWFhIiwiZGVwdE5hbWUiOiLpnZLmtbfmi4npnaLkuqfkuJrnu7zlkIjmnI3liqHlubPlj7AiLCJsb2dpblRpbWUiOiIyMDIxLTA2LTI1IDE1OjEzOjExIiwidW5pdE5hbWUiOiLpnZLmtbfmi4npnaLkuqfkuJrnu7zlkIjmnI3liqHlubPlj7AiLCJwcm92aW5jZSI6IjQ0MDAwMCIsImNpdHkiOiI0NDAxMDAiLCJ1bml0Q29kZSI6ImxhbWlhbiIsInJlZGlzVG9rZW4iOiI2ODVjMjU1YS0xYmRmLTRhMDQtOWZlYy1kMjMwZTNmYzU4ODYiLCJ0ZW5hbnRJZCI6ImxhbWlhbiIsInN0YWZmVHlwZTIiOiI0IiwiZGVwdENvZGUiOiJsYW1pYW4iLCJleHAiOjE2MjQ2MDY5OTEsInVzZXJuYW1lIjoiYmFua2ZvcnRlc3QwMDEifQ.p8O7Sn86G_wFhSGimNaEd6sUFddiVsbYSbaGsKpa4Gg"}}).then(res => {that.updateMark(Map, res.data.locationList);});}//按行政区填充色块that.initPro(Map);//也可以改用覆盖物填充的方式填充行政区// that.alldrawBounds(Map);//按行政区描边that.allborderLine(Map);//监听地图的缩放事件Map.on("zoomstart", function() {console.log("放大级别：", Map.getZoom());if (Map.getZoom() >= 7) {that.zoomChange();} else {//重新显示行政区色块that.disProvinces.show();//且需要关闭街景模式that.depFeatures = [];that.setFeature(that.map);//重新显示描边for (let i = 0; i < that.lineArr.length; i++) {that.lineArr[i].show();}}});});},//所有行政区填充色块alldrawBounds(Map) {const that = this;that.drawBounds("西宁市", Map, "#2c54cf");that.drawBounds("海西蒙古族藏族自治州", Map, "#17307c");that.drawBounds("海东市", Map, "#17307c");that.drawBounds("海南藏族自治州", Map, "#2b47ac");that.drawBounds("海北藏族自治州", Map, "#204699");that.drawBounds("果洛藏族自治州", Map, "#17307c");that.drawBounds("黄南藏族自治州", Map, "#1c3077");that.drawBounds("玉树藏族自治州", Map, "#204699");},//使用覆盖物的方法，按行政区填充色块drawBounds(city, Map, color) {//实例化DistrictSearchlet opts = {subdistrict: 0, //获取边界不需要返回下级行政区extensions: "all", //返回行政区边界坐标组等具体信息level: "city" //查询行政级别为市};// eslint-disable-next-line no-undefconst district = new AMap.DistrictSearch(opts);//行政区查询district.search(city, function(status, result) {const polygons = [];const bounds = result.districtList[0].boundaries;console.log(city, bounds);if (bounds) {for (let i = 0, l = bounds.length; i < l; i++) {//生成行政区划polygon// eslint-disable-next-line no-undeflet polygon = new AMap.Polygon({strokeWeight: 0, //线宽path: bounds[i], //多边形边界路径fillOpacity: 0.7, //填充透明度fillColor: color, //填充颜色strokeColor: "#1a77aa" //线颜色});// 创建覆盖物的监听事件// polygon.on('mouseover', function(e) {// polygon.setOptions({// fillColor: '#114af8',//填充颜色// })// });// polygon.on('mouseout', function(e) {//console.log(e.lnglat);//polygon.setOptions({// fillColor: color,//填充颜色//})// });polygons.push(polygon);}}Map.add(polygons);});},// 创建市区的颜色块initPro(map) {const that = this;const code = 630000; //青海省代码const dep = 1; //按市区划分let disProvince;disProvince && disProvince.setMap(null);// eslint-disable-next-line no-undefdisProvince = new AMap.DistrictLayer.Province({zIndex: 12,adcode: [code],depth: dep,styles: {fill: function(properties) {// properties为可用于做样式映射的字段，包含// NAME_CHN:中文名称// adcode_pro// adcode_cit// adcodelet adcode = properties.adcode;return that.getColorByAdcode(adcode);},// 'province-stroke': 'cornflowerblue',"city-stroke": "#3078AC" // 中国地级市边界// 'county-stroke': 'rgba(255,255,255,0.5)' // 中国区县边界}});disProvince.setMap(map);that.disProvinces = disProvince;},// 颜色辅助方法getColorByAdcode(adcode) {const colors = {630100: "#2c54cf", //西宁630200: "#17307c", //海东632200: "#204699", //海北632300: "#1c3077", //黄南632500: "#2b47ac", //海南632600: "#17307c", //果洛632700: "#204699", //玉树632800: "#17307c" //海西};return colors[adcode];},//更新标记点updateMark(Map, points) {// 位置标记const Markers = [];for (let i = 0; i < points.length; i += 1) {if (points[i]) {Markers.push(// eslint-disable-next-line no-undefnew AMap.Marker({position: points[i].split(","),// eslint-disable-next-line no-undefoffset: new AMap.Pixel(-15, -15)}));}}let str = [{url: pin5,// eslint-disable-next-line no-undefsize: new AMap.Size(100, 100),// eslint-disable-next-line no-undefoffset: new AMap.Pixel(-100, -100),textSize: 40,textColor: "#353535"},{url: pin4,// eslint-disable-next-line no-undefsize: new AMap.Size(100, 100),// eslint-disable-next-line no-undefoffset: new AMap.Pixel(-100, -100),textSize: 40,textColor: "#353535"},{url: pin3,// eslint-disable-next-line no-undefsize: new AMap.Size(100, 100),// eslint-disable-next-line no-undefoffset: new AMap.Pixel(-100, -100),textSize: 40,textColor: "#353535"},{url: pin2,// eslint-disable-next-line no-undefsize: new AMap.Size(100, 100),// eslint-disable-next-line no-undefoffset: new AMap.Pixel(-100, -100),textSize: 40,textColor: "#353535"},{url: pin1,// eslint-disable-next-line no-undefsize: new AMap.Size(100, 100),// eslint-disable-next-line no-undefoffset: new AMap.Pixel(-100, -100),textSize: 40,textColor: "#353535"}];// eslint-disable-next-line no-undefnew AMap.MarkerClusterer(Map, Markers, {styles: str,gridSize: 60,minClusterSize: 1});},//所有行政区描边allborderLine(Map) {const that = this;that.borderLine("海西蒙古族藏族自治州", Map);that.borderLine("海东市", Map);that.borderLine("海南藏族自治州", Map);that.borderLine("海北藏族自治州", Map);that.borderLine("果洛藏族自治州", Map);// that.borderLine('黄南藏族自治州',Map)//黄南中间有块地皮是海南自治区的，不能描边，采用省描边加邻区描边来作为它的边that.borderLine("玉树藏族自治州", Map);that.borderLine("西宁市", Map);},//行政区描边的功能borderLine(city, Map) {const that = this;const opts = {subdistrict: 0,extensions: "all",level: "city"};//直接通过经纬度构建mask路径// eslint-disable-next-line no-undefconst district = new AMap.DistrictSearch(opts);district.search(city, function(status, result) {const bounds = result.districtList[0].boundaries;//添加描边for (let i = 0; i < bounds.length; i += 1) {// eslint-disable-next-line no-undefconst myLine = new AMap.Polyline({path: bounds[i],strokeColor: "#1a77aa",strokeWeight: 10,strokeOpacity: 0.9,map: Map});// 创建线条的监听事件myLine.on("mouseover", function() {myLine.setOptions({strokeColor: "#114af8",strokeWeight: 20});});myLine.on("mouseout", function() {myLine.setOptions({strokeColor: "#1a77aa",strokeWeight: 10});});that.lineArr.push(myLine); //把行政区描边通过闭包给拿出来，后续需要显示和隐藏切换}});},//重新给地图增加标注信息setFeature(Map) {const _that = this;Map.setFeatures(_that.depFeatures);},//监听鼠标滚轮事件，一旦用户放大地图则切换成街景模式zoomChange() {if (this.depFeatures.length > 0) {console.log("已经开启街景地图，不做处理");return;} else {this.depFeatures = ["bg", "road", "building", "point"];this.map.setStatus({dragEnable: true //切换成街景模式需要开启可拖拽模式});this.setFeature(this.map);// this.map.clearMap(); //清除所有覆盖物// this.removePoly("polygon"); //清除选定的覆盖物// this.removePoly("polyline"); //清除选定的行政区边界this.disProvinces.hide(); //隐藏行政区色块图层for (let i = 0; i < this.lineArr.length; i++) {//也可以不清除，而是采用隐藏，因为后续要重新显示this.lineArr[i].hide();}console.log("开启街景地图");}},//清除行政区色块和边界线条--(已经注释掉采用隐藏的方案替代)removePoly(target) {// 首先获取当前地图中所有覆盖物的实例。let mapPolyArr = this.map.getAllOverlays(target);// 定义一个空数组用来存放需要删除的覆盖物实例。let arr = [];// 循环拿到需要删除的覆盖物for (let i = 0; i < mapPolyArr.length; i++) {// 将需要删除的项添加到空数组里arr.push(mapPolyArr[i]);}// 移除覆盖物this.map.remove(arr);}}};</script><style lang="less" scoped>.container {height: 100%;}/deep/.amap-logo {display: none !important;}</style>
