// 获取所有网格
getGrids() {
this.$http
.request({
url: "/rbac/admin/org/info/findOrgListByLevel",
method: "POST",
data: {
orgLevel: 6,
pageSize: -1,
pageNo: 1,
},
})
.then((res) => {
// console.log(res);
if (res.code == 200 && res.content) {
this.getGridEchart(res.content.list);
} else {
this.$message({
message: "暂无网格",
type: "warning",
});
}
});
},
// 画网格
getGridEchart(data) {
if (this.polygons2.length > 0) {
this.myMap.remove(this.polygons2);
this.polygons2 = [];
}
data.forEach((item, index) => {
if (item.pointPosition) {
let polygonArr = [];
item.pointPosition.split(",").forEach((e) => {
polygonArr.push(e.split(":"));
});
if (index < 100) {
if (index < 10) {
index = "00" + index;
} else {
index = "0" + index;
}
}
let color = "#" + index + "5EC";
let polygon = new AMap.Polygon({
map: this.myMap,
path: polygonArr, //设置多边形边界路径
strokeColor: "#fee", //线颜色
strokeOpacity: 0.5, //线透明度
strokeWeight: 1, //线宽
fillColor: color, //填充色
fillOpacity: 0.5, //填充透明度
extData: {
name: item.label,
},
});
let that = this;
//变色
polygon.on("mouseover", function (e) {
// console.log(e);
this.setOptions({
strokeOpacity: 1, //线透明度
strokeWeight: 2, //线宽
fillOpacity: 1, //填充透明度
});
that.sText = new AMap.Text({
text: item.label,
anchor: "center", // 设置文本标记锚点
draggable: false,
cursor: "pointer",
angle: 10,
style: {
"text-align": "center",
"font-size": "12px",
"background-color": "transparent",
border: "none",
"z-index": "-1",
},
zIndex: -1,
position: that.getCenterPoint(polygonArr),
});
that.sText.setMap(that.myMap);
});
polygon.on("mouseout", function () {
this.setOptions({
strokeOpacity: 0.5, //线透明度
strokeWeight: 1, //线宽
fillOpacity: 0.5, //填充透明度
});
if (that.sText) {
that.myMap.remove(that.sText);
that.sText = "";
}
});
this.polygons2.push(polygon);
}
});
// console.log(this.polygons2);
this.myMap.add(this.polygons2);
},
高德地图画社区网格
最新推荐文章于 2024-06-02 09:46:23 发布