- 全地区展现/点聚合
- 独自区域展现
- 行政区划分
- 自定义图层
- 样图展现
一、全地区展现/点聚合
/* 加载地图 */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、自定义图层