Quick Start Mapboxgl__javascript

Author: MR.

Mapbox GL JS is a JavaScript library that uses WEBGL to render interactive vector tile maps and grid tile maps. WebGL rendering means high performance, MAPBOXGL can render a large number of map elements, have smooth interaction and animation effect, can display stereo map and support mobile end, is a very good web GIS development framework. Hello MAPBOXGL

Now let's start our mapbox journey.
First introduce the MAPBOXGL script library and the style library on the page:

<script src= ' https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.js ' ></script>
<link href= ' Https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.css ' rel= ' stylesheet '/>

You can also find mapboxgl:https://github.com/mapbox/mapbox-gl-js/releases in GitHub.

The Mapboxgl object is created after the introduction of the above script, which enables you to use the full functionality of MAPBOXGL.
Before you can use it, you need to set the Mapboxgl.accesstoken first. Access tokens (access token) can use the samples provided by the API (below), or you can register the Mapbox account and view or create tokens on the user Information page.

Now start the first MAPBOXGL program: show a map. The code is as follows:

<div id= ' map ' style= ' width:900px; height:600px; ' ></div>
<script>
mapboxgl.accesstoken = ' Pk.eyJ1IjoibWFvcmV5IiwiYSI6ImNqNWhrenIwcDFvbXUyd3I2bTJxYzZ4em8ifQ.KHZIehQuWW9AsMaGtATdwA '; Sets the Mapbox access token
var map = new MAPBOXGL. Map ({
    container: ' map ',
    style: ' Mapbox://styles/mapbox/streets-v9 '
});
</script>

The Map object is the core object of MAPBOXGL, and the display and interaction of maps are realized by it. The DIV element with ID map in the above code is a container for the map;MAPBOXGL. the map construct method is used to create the map object, a Map object corresponds to a mapping container, and the parameter container Specifies the mapping container ID to use,style Used to specify the Mapbox map to use.
The above code effects are as follows:

Now we can drag and drop the map by mouse, and use right mouse button to rotate (bearing property), Tilt (pitch property) map.
style Specifies a mapbox-provided map that is loaded as a vector tile, can find predefined styles in the API and user information, and can also customize the map style, reference blog: http://blog.csdn.net/ supermapsupport/article/details/77991911
In addition to using the maps provided by Mapbox, you can also use other map services to support the zxy Map Tile Service (OpenStreetMap specification),mapbox vector Tile Map Service (MVT), and Geojson and other service specifications and data formats, Supermap Iserver 9D for these three formats are supported, sample address: Http://iclient.supermapol.com/examples/mapboxgl/examples.html#iServer. Map Controls

Now we're going to add some common map controls, navigation (Navigationcontrol, zooming in and out, and pointing to the North Pin button), positioning (geolocatecontrol), scale ( Scalecontrol), full screen (Fullscreencontrol):

As shown above, you only need to instantiate the control and use the AddControl method to add it to the map. Add a tag and click on the pop-up bubble

Both the tag and the bubble can be individually specified to add coordinates to the map. Tags can be set by the Setpopup method to click on the displayed bubbles. For tags, the specified coordinates are at the center point of the tag picture, so the vertical direction needs to offset the half of the picture's height, so that the specified coordinates are at the tip of the drop-mark picture; For bubbles, the specified coordinates are at the tip of the bubble's lower end, so the height plus 1 pixels from the marker picture is shifted to the top of the marker. Draw dot Line surface

MAPBOXGL draw point line in fact and load map is the same, point and line surface data is placed in the data source,Add layer (layer) and specify the data source, display parameters, and so on.

This is part of the advanced content, you need to be more familiar with the MAPBOXGL API documentation, this is no longer described too much.

Finally, the effect of the following figure is also done using the Mapbox (and the Echarts plug-in).