问题
高德 JS API 多区域 多边形的绘制和编辑
详细问题
笔者使用Vue进行前端开发,需要集成高德API实现多区域多边形的绘制和编辑。但是在高德JS API1.4示例多边形的绘制和编辑中,只给了一个区域的多边形的绘制和编辑,未提供多区域 多边形的绘制和编辑。
解决方案
由于笔者使用Vue进行开发,此处给出Vue实现方法
实现效果
动态请求数据
<template>
<div>
<div id="container" style="width: 100%; height: calc(100vh - 100px)"></div>
<div id="info"></div>
</div>
</template>
<script>
// import AMap from 'AMap'
var content = [
"<div style='font-size: 14px; color: red; width: 200px; height: 50px'>这是信息窗口</div>"
];
export default {
name: "Map",
data() {
return {
map: '',
data: [],
}
},
created() {
},
mounted: function () {
// 在 mounted 钩子函数中引入高德地图相关脚本
const script1 = document.createElement('script');
script1.src = 'https://webapi.amap.com/maps?v=1.4.15&key=your_api_key&plugin=AMap.PolyEditor';
document.body.appendChild(script1);
const script2 = document.createElement('script');
script2.src = 'https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js';
document.body.appendChild(script2);
setTimeout(() => {
this.initMap();
}, 1000);
},
methods: {
initMap() {
//初始化地图对象,加载地图
this.map = new AMap.Map("container", {
center: [101.77, 36.62],
// 卫星地图
// layers: [new AMap.TileLayer.Satellite()],
zoom: 10,
resizeEnable: true,
});
this.load()
},
load() {
this.request.get("/your_data_request_interface").then(res => {
this.data = res.data.map(item => {
return {
// 数据唯一标识
id: item.id,
// 指定区域 数据格式如下:101.723141,36.59516;101.730394,36.585745;101.721896,36.584933
value: item.region
};
});
this.format()
})
},
format() {
//数据格式化;
for (var j = 0; j < this.data.length; j++) {
var path = [];
var points = this.data[j].value.split(";");
for (var i = 0; i < points.length; i++) {
var point = points[i].split(",");
path.push(new AMap.LngLat(point[0], point[1]));
}
this.addPolygon(path);
}
},
//循环遍历添加多边形;
addPolygon(path) {
var polygon = new AMap.Polygon({
map: this.map,
path: path,
strokeColor: "#1E9FFF",
strokeWeight: 2,
strokeStyle: 'dashed',
strokeOpacity: 1,
fillOpacity: 0.1,
fillColor: '#1E9FFF',
zIndex: 50,
});
//多边形覆盖物上点击触发函数;
polygon.on('click', function (e) {
});
//鼠标高亮效果
polygon.on('mouseover', function (e) {
polygon.setOptions({
fillColor: '#FFB800',
})
});
polygon.on('mouseout', function (e) {
polygon.setOptions({
fillColor: '#1E9FFF',
})
});
}
}
}
</script>
<style>
</style>
静态数据
<template>
<div>
<div id="container" style="width: 100%; height: calc(100vh - 100px)"></div>
<div id="info"></div>
</div>
</template>
<script>
// import AMap from 'AMap'
var content = [
"<div style='font-size: 14px; color: red; width: 200px; height: 50px'>这是信息窗口</div>"
];
export default {
name: "Map",
data() {
return {
map: '',
data: [],
}
},
created() {
},
mounted: function () {
// 在 mounted 钩子函数中引入高德地图相关脚本
const script1 = document.createElement('script');
script1.src = 'https://webapi.amap.com/maps?v=1.4.15&key=your_api_key&plugin=AMap.PolyEditor';
document.body.appendChild(script1);
const script2 = document.createElement('script');
script2.src = 'https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js';
document.body.appendChild(script2);
this.data = [
{
id: 1,
value: "101.723141,36.59516;101.730394,36.585745;101.721896,36.584933"
},
{
id: 2,
value: "101.707949,36.603153;101.708078,36.60318;101.708078,36.603126;101.697092,36.583003;101.702241,36.617043"
},
{
id: 3,
value: "101.706984,36.589591;101.706877,36.589811;101.706876,36.589895;101.697092,36.583003;101.710395,36.576662"
},
{
id: 4,
value: "101.705525,36.567328;101.705728,36.567507;101.705417,36.56748;101.705674,36.567494;101.713657,36.566598;101.710395,36.576662"
}
];
setTimeout(() => {
this.initMap();
}, 1000);
},
methods: {
initMap() {
//初始化地图对象,加载地图
this.map = new AMap.Map("container", {
center: [101.77, 36.62],
// 卫星地图
// layers: [new AMap.TileLayer.Satellite()],
zoom: 10,
resizeEnable: true,
});
this.format()
},
format() {
//数据格式化;
for (var j = 0; j < this.data.length; j++) {
var path = [];
var points = this.data[j].value.split(";");
for (var i = 0; i < points.length; i++) {
var point = points[i].split(",");
path.push(new AMap.LngLat(point[0], point[1]));
}
this.addPolygon(path);
}
},
//循环遍历添加多边形;
addPolygon(path) {
var polygon = new AMap.Polygon({
map: this.map,
path: path,
strokeColor: "#1E9FFF",
strokeWeight: 2,
strokeStyle: 'dashed',
strokeOpacity: 1,
fillOpacity: 0.1,
fillColor: '#1E9FFF',
zIndex: 50,
});
//多边形覆盖物上点击触发函数;
polygon.on('click', function (e) {
});
//鼠标高亮效果
polygon.on('mouseover', function (e) {
polygon.setOptions({
fillColor: '#FFB800',
})
});
polygon.on('mouseout', function (e) {
polygon.setOptions({
fillColor: '#1E9FFF',
})
});
}
}
}
</script>
<style>
</style>
参考文献
原创不易
转载请标明出处
如果对你有所帮助 别忘啦点赞支持哈