• 0
  • 0

高德地图绘制矢量图形封装

2019-11-29 5 0 admin 所属分类:开发组件

由于在界面上可能需要绘制多个模块的矢量图形,因此考虑多每个绘制的操作封装在函数里面调用,只需要传入绘制参数即可。

function drawRectangle(data) {
    var northEast = new AMap.LngLat(parseFloat(data[1].lng), parseFloat(data[1].lat));
    var southWest = new AMap.LngLat(parseFloat(data[3].lng), parseFloat(data[3].lat));
    var bounds = new AMap.Bounds(southWest, northEast)
    var sharp = new AMap.Rectangle({
        bounds: bounds,
        fillColor: '#00b0ff',
        strokeColor: '#80d8ff',
        strokeStyle: 'dashed',
        strokeColor: 'red',
        strokeWeight: 6,
        strokeOpacity: 0.5,
        fillOpacity: 0.5,
        strokeDasharray: [30, 10]
    });
    map.add(sharp);
    return sharp;
}

function drawPolygon(data) {
    var list = [];
    for (var i = 0; i < data.length; i++) {
        var p = new AMap.LngLat(parseFloat(data[i].lng), parseFloat(data[i].lat));
        list.push(p);
    }
    sharp = new AMap.Polygon({
        path: list,
        fillColor: '#00b0ff',
        strokeColor: '#80d8ff',
        strokeStyle: 'dashed',
        strokeColor: 'red',
        strokeWeight: 6,
        strokeOpacity: 0.5,
        fillOpacity: 0.5,
        strokeDasharray: [30, 10]
    });
    map.add(sharp);
    return sharp;
}

function drawCircle(lat, lng, data) {
    var meter = parseInt(getFlatternDistance(lat, lng, data[0].lat, data[0].lng));
    var sharp = new AMap.Circle({
        center: new AMap.LngLat(lng, lat), // 圆心位置
        radius: meter, // 圆半径
        fillColor: '#00b0ff',
        strokeColor: '#80d8ff',
        strokeStyle: 'dashed',
        strokeColor: 'red',
        strokeWeight: 6,
        strokeOpacity: 0.5,
        fillOpacity: 0.5,
        strokeDasharray: [30, 10]
    });
    map.add(sharp);
    return sharp;
}

function drawText(x, y, name) {
    var textsharp = new AMap.Text({
        text: name,
        position: new AMap.LngLat(x, y),
        zIndex: 999,
        animation: 'AMAP_ANIMATION_BOUNCE'
    });
    map.add(textsharp);
    return textsharp;
}

另外需要补充的就是很可能我们需要获取图形的中心坐标用于定位和显示文字等。额外弄出来供其他函数使用

var nums = paths.length;
var all_x = 0;
var all_y = 0;
var x = 0;
var y = 0;
var sharp = null;
for (var i = 0; i < nums; i++) {
    all_x += parseFloat(paths[i].lng);
    all_y += parseFloat(paths[i].lat);
}
x = all_x / nums;
y = all_y / nums;


返回顶部