相关文章推荐
风流的墨镜  ·  background-size - ...·  3 月前    · 
强悍的海龟  ·  【ABAP基础】for all ...·  1 年前    · 
多边形数据格式
//ajax数据输入格式;
var data = [
{
id: 1,
value: "121.546266,29.80975;121.54543,29.806845;121.548713,29.806752;121.549957,29.809508"
},
{
id: 2,
value: "121.549996,29.809229;121.549202,29.806818;121.55183,29.806315;121.552689,29.808615"
},
{
id: 3,
value: "121.548172,29.802794;121.548065,29.800745;121.5527,29.800494;121.552174,29.802068"
},
{
id: 4,
value: "121.548698,29.8054;121.548215,29.803166;121.550811,29.802701;121.550843,29.804786;121.549577,29.80419;121.549577,29.80419"
}
];

初始化地图

//初始化地图对象,加载地图
var map = new AMap.Map("container", {
center: [121.548181, 29.806906],
zoom: 15,
resizeEnable: true,
});

数据格式化

//数据格式化;
for (var j = 0; j < data.length; j++) {
var path = [];
var points = 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]));
}

//循环遍历添加多边形;
addPolygon(path);
}

创建多边形

//创建多边形-函数封装;
function addPolygon(path) {
var polygon = new AMap.Polygon({
map: map,
path: path,
strokeColor: "#1E9FFF",
strokeWeight: 2,
strokeStyle: 'dashed',
strokeOpacity: 1,
fillOpacity: 0.1,
fillColor: '#1E9FFF',
zIndex: 50,
});

//多边形覆盖物上点击显示窗体;
polygon.on('click', function (e) {
openInfo(e.lnglat);
});

//鼠标高亮效果
polygon.on('mouseover', function (e) {
polygon.setOptions({
fillColor: '#FFB800',
})
});

polygon.on('mouseout', function (e) {
polygon.setOptions({
fillColor: '#1E9FFF',
})
});
}

lockdatav Done!