矢量图形

折线、面、圆形等覆盖物

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

折线 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)
                            })