修改Shape
除了绘制 Shape 之外，你可以更进一步修改编辑或者删除 NextBillion.ai Maps 中的 Shape。
形状可以通过拖动边缘的方形手柄来改变，并通过拖动形状内部来移动。
相关页面: Draw Some Shapes.
升级到 NextBillion.ai Maps GL
NextBillion.ai Maps GL 目前只支持创建和移除 Shape 但不支持删除。请参考Circle, Polygon 和 Polyline 以了解更详细的使用方式。
你可以在Upgrade Guide 页面找到更详细的升级指南。
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta name="viewport" content="initial-scale=1.0" />
5 <meta charset="UTF-8" />
6 <title>Basic Map</title>
7 <link href="https://maps.nextbillion.io/maps/api/css" rel="stylesheet" />
8 <style>
9 * {
10 margin: 0;
11 padding: 0;
12 }
13 #map {
14 width: 100vw;
15 height: 100vh;
16 }
17 </style>
18 </head>
19 <body>
20 <div id="map"></div>
21 <div style="position: absolute; top: 20px; left: 20px; z-index: 999;">
22 <button style="padding: 12px 6px;" id="btnAddPolygon">Add a Polygon</button>
23 <button style="padding: 12px 6px;" id="btnRemovePolygon">Remove a Polygon</button>
24 </div>
25 <script src="https://maps.nextbillion.io/maps/api/js"></script>
26 <script>
27 ;(function () {
28 var loc = { lat: 1.3521, lng: 103.8198 }
29 var loc2 = { lat: 1.3921, lng: 103.8198 }
30 var loc3 = { lat: 1.3921, lng: 103.8798 }
31 var loc4 = { lat: 1.3721, lng: 103.8298 }
32 var map = new nextbillion.maps.Map(document.getElementById('map'), {
33 zoom: 11,
34 center: loc,
35 editable: true,
36 })
37 var polygon = new nextbillion.maps.Polygon({
38 path: [[loc, loc2, loc3]],
39 map: map,
40 })
41 var circle = new nextbillion.maps.Circle({
42 center: loc4,
43 map: map,
44 strokeColor: 'green',
45 fillColor: 'green',
46 radius: 1000,
47 })
48
49 polygon.enableEdit()
50 circle.enableEdit()
51
52 var polygons = [polygon]
53
54 var elButtonAdd = document.querySelector('#btnAddPolygon')
55 elButtonAdd.onclick = function (e) {
56 var polygon = new nextbillion.maps.Polygon({
57 path: [[locationTsingtao, locationTsingtao2, locationTsingtao3]],
58 map: map,
59 })
60 polygon.enableEdit()
61 polygons.push(polygon)
62 }
63
64 var elButtonRemove = document.querySelector('#btnRemovePolygon')
65 elButtonRemove.onclick = function (e) {
66 var polygon = polygons.pop()
67 if (polygon) {
68 polygon.remove()
69 }
70 }
71 })()
72 </script>
73 </body>
74</html>Make a Map
