Shape & Symbol
这篇文档目前尚未提供译文，将以原文展示。
Draw different shapes and symbol to the map.
Demo
Plain HTML
You can find the live Demo on CodeSandbox here.
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
8 href="https://maps-gl.nextbillion.io/maps/v2/api/css"
9 rel="stylesheet"
10 />
11 <style>
12 * {
13 margin: 0;
14 padding: 0;
15 }
16 #map {
17 width: 100vw;
18 height: 100vh;
19 }
20 </style>
21 </head>
22 <body>
23 <div id="map"></div>
24 <script src="https://maps-gl.nextbillion.io/maps/v2/api/js"></script>
25 <script>
26 (function () {
27 // draw a polyline
28 function drawPolyline(nbmap) {
29 nbmap.map.addSource("polyline-source", {
30 type: "geojson",
31 data: {
32 type: "FeatureCollection",
33 features: [
34 {
35 type: "Feature",
36 properties: {
37 color: "#e74747" // red clolor
38 },
39 geometry: {
40 type: "LineString",
41 coordinates: [
42 [-118.24648, 34.05815],
43 [-118.24556, 34.05739],
44 [-118.2445, 34.0565],
45 [-118.24397, 34.05605],
46 [-118.24359, 34.05573],
47 [-118.24372, 34.05559],
48 [-118.24385, 34.05544],
49 [-118.24427, 34.05501],
50 [-118.24509, 34.05412],
51 [-118.24555, 34.05361]
52 ]
53 }
54 },
55 {
56 type: "Feature",
57 properties: {
58 color: "#93a1ff" // blue clolor
59 },
60 geometry: {
61 type: "LineString",
62 coordinates: [
63 [-118.24648, 34.05815],
64 [-118.24748, 34.05725],
65 [-118.24763, 34.05712],
66 [-118.24797, 34.05678],
67 [-118.24823, 34.05641],
68 [-118.24836, 34.05623],
69 [-118.24874572, 34.05567155],
70 [-118.24637, 34.05417],
71 [-118.24571, 34.05376],
72 [-118.24553, 34.05363],
73 [-118.24555, 34.05361]
74 ]
75 }
76 }
77 ]
78 }
79 });
80
81 // you can get more information about setting the style of lines here. https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
82 nbmap.map.addLayer({
83 id: "polyline-layer",
84 type: "line",
85 source: "polyline-source",
86 paint: {
87 "line-width": 3,
88 // get color from the source
89 "line-color": ["get", "color"]
90 }
91 });
92 }
93
94 // draw a polygon
95 function drawPolygon(nbmap) {
96 nbmap.map.addSource("polygon-source", {
97 type: "geojson",
98 data: {
99 type: "FeatureCollection",
100 features: [
101 {
102 type: "Feature",
103 geometry: {
104 type: "Polygon",
105 coordinates: [
106 [
107 [-118.24455192, 34.05649731],
108 [-118.24646327, 34.05811205],
109 [-118.24751855, 34.05716641],
110 [-118.2479062, 34.05678279],
111 [-118.24834231, 34.05621183],
112 [-118.24870843, 34.05567655],
113 [-118.24661649, 34.05436717],
114 [-118.24455192, 34.05649731]
115 ]
116 ]
117 }
118 }
119 ]
120 }
121 });
122
123 // you can get more information about setting the style of layers here. https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/
124 nbmap.map.addLayer({
125 id: "polygon-layer",
126 type: "fill",
127 source: "polygon-source",
128 paint: {
129 // fill with green color and a opacity of 0.6
130 "fill-color": "#469300",
131 "fill-opacity": 0.6
132 }
133 });
134 }
135
136 // draw a circle
137 function drawCircle(nbmap) {
138 nbmap.map.addSource("circle-source", {
139 type: "geojson",
140 data: {
141 type: "FeatureCollection",
142 features: [
143 {
144 type: "Feature",
145 geometry: {
146 type: "Point",
147 coordinates: [-118.24501946, 34.05507342]
148 }
149 }
150 ]
151 }
152 });
153 // you can get more information about setting the style of layers here. https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
154 nbmap.map.addLayer({
155 id: "circle-layer",
156 type: "circle",
157 source: "circle-source",
158 paint: {
159 "circle-color": "#8d5a9e",
160 "circle-radius": 40
161 }
162 });
163 }
164
165 // draw symbol
166 function drawSymbol(nbmap) {
167 nbmap.map.addSource("symbol-source", {
168 type: "geojson",
169 data: {
170 type: "FeatureCollection",
171 features: [
172 {
173 type: "Feature",
174 geometry: {
175 type: "Point",
176 coordinates: [-118.24501946, 34.05507342]
177 }
178 }
179 ]
180 }
181 });
182 // you can get more information about setting the style of layers here. https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#symbol
183 nbmap.map.addLayer({
184 id: "symbol-layer",
185 type: "symbol",
186 source: "symbol-source",
187 layout: {
188 "symbol-placement": "point",
189 visibility: "visible",
190 "symbol-spacing": 1,
191 "icon-allow-overlap": true,
192 "icon-image": "nb-logo",
193 "icon-size": 0.16
194 }
195 });
196 }
197
198 // You need to replace the apiKey with yours
199 nextbillion.setApiKey("your-api-key");
200 var nbmap = new nextbillion.maps.Map({
201 container: document.getElementById("map"),
202 style: "https://api.nextbillion.io/maps/streets/style.json",
203 zoom: 15,
204 center: { lat: 34.05649731, lng: -118.24455192 }
205 });
206
207 nbmap.on("load", () => {
208 drawPolyline(nbmap);
209 drawPolygon(nbmap);
210 drawCircle(nbmap);
211 // load image so we can use it in the symbol layer
212 nbmap.map.loadImage(
213 "https://static.nextbillion.io/docs-next/nbai-logo-white.png",
214 (err, image) => {
215 if (err) {
216 console.error("err image", err);
217 return;
218 }
219 nbmap.map.addImage("nb-logo", image);
220 drawSymbol(nbmap);
221 }
222 );
223 });
224 })();
225 </script>
226 </body>
227</html>React
You can find the live Demo on CodeSandbox here.
1import React, { useEffect } from 'react'
2import '@nbai/nbmap-gl/dist/nextbillion.css'
3import nextbillion, { NBMap } from '@nbai/nbmap-gl'
4
5// draw a polyline
6function drawPolyline(nbmap) {
7 nbmap.map.addSource('polyline-source', {
8 type: 'geojson',
9 data: {
10 type: 'FeatureCollection',
11 features: [
12 {
13 type: 'Feature',
14 properties: {
15 color: '#e74747' // red clolor
16 },
17 geometry: {
18 type: 'LineString',
19 coordinates: [
20 [-118.24648, 34.05815],
21 [-118.24556, 34.05739],
22 [-118.2445, 34.0565],
23 [-118.24397, 34.05605],
24 [-118.24359, 34.05573],
25 [-118.24372, 34.05559],
26 [-118.24385, 34.05544],
27 [-118.24427, 34.05501],
28 [-118.24509, 34.05412],
29 [-118.24555, 34.05361]
30 ]
31 }
32 },
33 {
34 type: 'Feature',
35 properties: {
36 color: '#93a1ff' // blue clolor
37 },
38 geometry: {
39 type: 'LineString',
40 coordinates: [
41 [-118.24648, 34.05815],
42 [-118.24748, 34.05725],
43 [-118.24763, 34.05712],
44 [-118.24797, 34.05678],
45 [-118.24823, 34.05641],
46 [-118.24836, 34.05623],
47 [-118.24874572, 34.05567155],
48 [-118.24637, 34.05417],
49 [-118.24571, 34.05376],
50 [-118.24553, 34.05363],
51 [-118.24555, 34.05361]
52 ]
53 }
54 }
55 ]
56 }
57 })
58
59 // you can get more information about setting the style of lines here. https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
60 nbmap.map.addLayer({
61 id: 'polyline-layer',
62 type: 'line',
63 source: 'polyline-source',
64 paint: {
65 'line-width': 3,
66 // get color from the source
67 'line-color': ['get', 'color']
68 }
69 })
70}
71
72// draw a polygon
73function drawPolygon(nbmap) {
74 nbmap.map.addSource('polygon-source', {
75 type: 'geojson',
76 data: {
77 type: 'FeatureCollection',
78 features: [
79 {
80 type: 'Feature',
81 geometry: {
82 type: 'Polygon',
83 coordinates: [
84 [
85 [-118.24455192, 34.05649731],
86 [-118.24646327, 34.05811205],
87 [-118.24751855, 34.05716641],
88 [-118.2479062, 34.05678279],
89 [-118.24834231, 34.05621183],
90 [-118.24870843, 34.05567655],
91 [-118.24661649, 34.05436717],
92 [-118.24455192, 34.05649731]
93 ]
94 ]
95 }
96 }
97 ]
98 }
99 })
100
101 // you can get more information about setting the style of layers here. https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/
102 nbmap.map.addLayer({
103 id: 'polygon-layer',
104 type: 'fill',
105 source: 'polygon-source',
106 paint: {
107 // fill with green color and a opacity of 0.6
108 'fill-color': '#469300',
109 'fill-opacity': 0.6
110 }
111 })
112}
113
114// draw a circle
115function drawCircle(nbmap) {
116 nbmap.map.addSource('circle-source', {
117 type: 'geojson',
118 data: {
119 type: 'FeatureCollection',
120 features: [
121 {
122 type: 'Feature',
123 geometry: {
124 type: 'Point',
125 coordinates: [-118.24501946, 34.05507342]
126 }
127 }
128 ]
129 }
130 })
131 // you can get more information about setting the style of layers here. https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
132 nbmap.map.addLayer({
133 id: 'circle-layer',
134 type: 'circle',
135 source: 'circle-source',
136 paint: {
137 'circle-color': '#8d5a9e',
138 'circle-radius': 40
139 }
140 })
141}
142
143// draw symbol
144function drawSymbol(nbmap) {
145 nbmap.map.addSource('symbol-source', {
146 type: 'geojson',
147 data: {
148 type: 'FeatureCollection',
149 features: [
150 {
151 type: 'Feature',
152 geometry: {
153 type: 'Point',
154 coordinates: [-118.24501946, 34.05507342]
155 }
156 }
157 ]
158 }
159 })
160 // you can get more information about setting the style of layers here. https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#symbol
161 nbmap.map.addLayer({
162 id: 'symbol-layer',
163 type: 'symbol',
164 source: 'symbol-source',
165 layout: {
166 'symbol-placement': 'point',
167 visibility: 'visible',
168 'symbol-spacing': 1,
169 'icon-allow-overlap': true,
170 'icon-image': 'nb-logo',
171 'icon-size': 0.16
172 }
173 })
174}
175
176const DrawDemo = () => {
177 useEffect(() => {
178 nextbillion.setApiKey('your-api-key')
179 const nbmap = new NBMap({
180 container: 'map',
181 style: 'https://api.nextbillion.io/maps/streets/style.json',
182 zoom: 15,
183 center: { lat: 34.05649731, lng: -118.24455192 }
184 })
185
186 nbmap.on('load', () => {
187 drawPolyline(nbmap)
188 drawPolygon(nbmap)
189 drawCircle(nbmap)
190 // load image so we can use it in the symbol layer
191 nbmap.map.loadImage(
192 'https://static.nextbillion.io/docs-next/nbai-logo-white.png',
193 (err, image) => {
194 if (err) {
195 console.error('err image', err)
196 return
197 }
198 nbmap.map.addImage('nb-logo', image)
199 drawSymbol(nbmap)
200 }
201 )
202 })
203 }, [])
204
205 return (
206 <div className="app">
207 <div
208 style={{
209 width: '100%',
210 height: '100%',
211 position: 'fixed',
212 top: '0',
213 left: '0'
214 }}
215 id="map"></div>
216 </div>
217 )
218}
219export default DrawDemoPopup
3D model
