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