Vector Graphics

Polylines, faces, circles, etc.

This section describes how to use fold lines, polygons, circles, etc. on the map surface.

Polyline

The nimap.Polyline object gives the user the ability to draw a polyline on the map surface. You can set properties such as width and line style for polylines.

1. Creation of polyline

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);
                                // Zoom the map to the appropriate level of view
                                map.setFitView(polyline.path)
                            })

2. Removal of polyline

JavaScript

                        map.removeLayer(polyline);

3. Display and hide of polylines

JavaScript

                        // Display a created polyline
                        polyline.show();

                        // hide a polyline that has been created
                        polyline.hide();

Polygon Polygon

The nimap.Polygon object gives the user the ability to draw polygons on the map surface. You can set properties such as fill color, stroke color, and outline style for a polygon.

1. Creation of polygons

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);
                                // Zoom the map to the appropriate level of view
                                map.setFitView(polygon.path)
                            })

2. Removal of polygons

JavaScript

                        map.removeLayer(polygon);

3. Display and hide of polygons

JavaScript

                        // Display a created polygon
                        polygon.show();

                        // hide a created polygon
                        polygon.hide();

Circular Circle

The nimap.Circle object gives the user the ability to draw a circular overlay on the map surface. You can set the fill color, stroke color, outline style, and other properties for the circular overlay. The nimap.Circle class and the nimap.CircleMarker class introduced in the previous chapter are classes that draw circular overlays on the map. The fundamental difference between the two methods is that nimap.Circle is a vector graphics class that changes size with the zoom of the map; the nimap.CircleMarker class does not change with the scale of the surface.

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);
                                // Zoom the map to the appropriate level of view
                                map.setFitView(circle.path)
                            })