Recently, I came into contact with the plug-in Mapbox due to business needs, and I stepped on a lot of pits in the process. Now, I will summarize some information I came into contact with and the pits I stepped on. I hope the code friends who read this article can help you.

The document

Official documentation: English version: docs.mapbox.com/mapbox-gl-j… Chinese version: www.mapbox.cn/mapbox-gl-j…

Assist documents: data interchange format: zh.wikipedia.org/wiki/GeoJSO… Distance calculation: turfjs.org/docs/

usage

The specific usage of the official documentation is very clear, please read more documentation, here only discusses the page to introduce JS writing method.

Resource localization

After the above code is run, it will be found that all resources are loaded by the resources of mapbox website, which leads to the slow opening speed of our page. Occasionally the Mapbox website crashes and our page cannot be opened, so we need to load resources and localize.

Pictured above, namely mapbox: / / styles/mapbox/streets – v11, the specific content of the first after we modify the code is as follows:

At this point, resource localization is complete. But the map we are rendering now is blank, because there is nothing in layers, so now we need to render the Chinese map in combination with the Map of Heaven and Earth.

PBF, which stands for Protocal Buffers, is a data description language developed by Google. Similar to XML, PBF serializes structured data and can be used for data storage and communication protocols. In short, it is simple in structure and fast in speed. The vector slice we talked about in front also uses this format.

Our common font library such as Microsoft Yahei. TTF font file is about 15M, a request to load 15M and have to parse, the server and client are under great pressure, so Mapbox uses. PBF format for batch request, the following is the comparison of the two formats. The PBF format greatly reduces the request stress.

Can look at this article in detail about PBF: www.cnblogs.com/ATtuing/p/9…


Render map base – Map of heaven and Earth

In addition to map heaven and Earth, you can also use Baidu Map, Google Map, Autonavi and other maps, and choose Map Heaven and Earth here.

Map world’s official website: www.tianditu.gov.cn/ GeoGlobe JavaScript: jiangsu tianditu. Gov. Cn/xuzhou/the java.awt.geom…

The GeoGlobe JavaScript API relies on the OGC standard service and application service provided by the GeoGlobe Server service management, mainly realizing the sharing and application of geographic information resources. GeoGlobe development Center website through the GeoGlobe JS API method call, centralized display of secondary development examples, mainly to achieve the Web browser terminal spatial information application examples.

Geoglobejs.min.js is introduced into the page

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet' />
<script src="/js/GeoGlobeJS.min.js"></script>

Copy the code

Create a map object instance and add it to a div container with the id map. Two layers will be added to the map load and a Chinese version of the map will be rendered. Map base rendering is completed, is the specific page logic operation, this time focus on mapBox API.

Basic usage

Draw lines on the map using GeoJSON:

There are three difficulties in this section:

1. GeoJSON

GeoJSON is a JSON-based geospatial data exchange format that defines several types of JSON objects and the way they are combined to represent data about geographic elements, attributes, and their spatial scope.

GeoJSON uses a unique geographic coordinate reference system, WGS1984, and decimal units. A GeoJSON object can be Geometry, Feature, or FeatureCollection.

Its geometric objects include dots (representing geographical locations), lines (representing streets, roads, and borders), polygons (representing countries, provinces, and territories), and composite geometric figures composed of the above types.

Specific details please refer to: zh.wikipedia.org/wiki/GeoJSO…

If you draw a graph on a map and there is no error, but the graph does not show up, it must be because of the format of GeoJSON! 2. Layer type

The layer type is specified by the “type” attribute, And it must be One of”fill”,”line”,”symbol”,”circle”,” Heatmap “,”fill-extrusion”,”raster”,” Hillshade “,”background”. Layout and paint are also different for each type property.

Please refer to: English: docs.mapbox.com/mapbox-gl-j… English: www.mapbox.cn/mapbox-gl-j…

3. Expression expression this piece of JS foundation is not solid students may be very difficult, but look more, more information slowly familiar with it. It’s pretty clear in the mapbox documentation, so I’m not going to explain it here.

Popup component:

Create Marker component Marker:

That’s it, the basic usage of mapbox, but there’s one important thing left out — the Raster layer, which I’ll cover in a separate article. See you in the next one. If there is something wrong in the article, please give me more advice. It is my first time to contact Mapbox and I still have a lot to learn.

The little knowledge

  • GetLayer (‘xx’), map.removelayer (‘xx’), try map.style.getlayer (‘xx’), map.style.removelayer (‘xx’)

  • There are three ways to show a place on a map:

    1. Draw points on the map, layer type is symbol 2.Popup component 3

  • LngLat and LngLatBounds represent point and area coordinates in the geographic world. Point denotes a Point in the screen coordinate system. The conversion of the two coordinates can be implemented using map.project()