矢量图形

折线、面、圆形等覆盖物

本小节介绍在地图图面使用折线、多边形、圆形等覆盖物的方式。

折线 Polyline

nimap.Polyline 对象为用户提供在地图图面绘制折线的能力。可以为折线设置宽度、线条样式等属性。

1. 折线的创建

JavaScript

var path = [
    [116.362209, 39.887487],
    [116.422897, 39.878002],
    [116.372105, 39.90651],
    [116.428945, 39.89663]
];

var polyline = new nimap.Polyline({
    path: path,
    "line-join": 'round',
    "line-cap": 'round',
    "line-width":8,
    'line-blur':0,
    "line-color":'#4169E1'
});
map.on('load',function () {
    polyline.addTo(map);
    // 缩放地图到合适的视野级别
    map.setFitView(polyline.path)
})

2. 折线的移除

JavaScript

map.removeLayer(polyline);

3. 折线的显示与隐藏

JavaScript

// 显示一条已创建的 polyline
polyline.show();

// 隐藏一条已创建的 polyline
polyline.hide();

多边形 Polygon

nimap.Polygon 对象为用户提供在地图图面绘制多边形的能力。可以为多边形设置填充颜色、描边颜色、轮廓线样式等属性。

1. 多边形的创建

JavaScript

var path = [
    [116.403322, 39.920255],
    [116.410703, 39.897555],
    [116.402292, 39.892353],
    [116.389846, 39.891365],
    [116.403322, 39.920255],
]

var polygon = new nimap.Polygon({
    path: path,
    'fill-antialias': true,
    'fill-outline-color': '#FF00FF',
    'fill-opacity': 0.8,
    'fill-color':'#7B68EE'
});
map.on('load',function () {
    polygon.addTo(map);
    // 缩放地图到合适的视野级别
    map.setFitView(polygon.path)
})

2. 多边形的移除

JavaScript

map.removeLayer(polygon);

3. 多边形的显示与隐藏

JavaScript

// 显示一条已创建的 polygon
polygon.show();

// 隐藏一条已创建的 polygon
polygon.hide();

圆形 Circle

nimap.Circle 对象为用户提供在地图图面绘制圆形覆盖物的能力。可以为圆形覆盖物设置填充颜色、描边颜色、轮廓线样式等属性。 nimap.Circle 类与上一章介绍到的 nimap.CircleMarker 类均为在地图上绘制圆形覆盖物的类。这两种方式的根本不同在于 nimap.Circle 为矢量图形类，随地图的缩放会改变大小；而 nimap.CircleMarker 类则不会随图面缩放而改变。

JavaScript

var circle = new nimap.Circle({
    center: '116.4019,39.9246',
    radius: 500,
    'fill-outline-color': 'red',
    "fill-color":"#4169E1",
    "fill-opacity": 0.4
});
map.on('load', function () {
    circle.addTo(map);
    // 缩放地图到合适的视野级别
    map.setFitView(circle.path)
})