This is the 5th day of my participation in the August More Text Challenge

background

Recently, the company is preparing to develop a large-screen visualization application, which is mainly used to display some data of the company’s customers and the distribution of users’ regions. Basically, some data charts are placed on the left and right, and a map with a strong sense of technology is placed in the middle. Data chart development I think for the general front-end is certainly very simple requirements, but the middle map, need to do custom. From the current team, we all lack gis development experience, and at the moment we received the demand, we also did some research on map development.

Visual map development research

With a collective effort, several plans were ordered at the beginning:

  • Baidu map: Customizable styles are available, but there are few customizable styles, which cannot meet current requirements
  • Scott map: Customizable style, similar to Baidu Map
  • Echarts: Looks like the effect is good, custom ability is also quite strong
  • Leaflet: Strong customization capability, but only supports 2D maps
  • Cesium: Strong ability to customize, can load third party layers, etc., the effect is also better, but it is difficult to get started, support 3D
  • Mapbox: Strong ability to customize, style effect is more beautiful, easy to use, have a strong custom style tools, support 3D
  • .

After comparison, Mapbox is finally selected

Mapbox

MapBox provides multiple platform SDKS and open apis, which can be used in Android, ios, Web React Native, Qt Unity and a variety of Rest apis. Since the project is primarily Web-side, it runs in a browser

Go straight to Map GL JS

Remember to register an account to obtain a Token before using:

Mapbox GL JS fundamentals

Let’s take a quick look at Mapbox GL JS. This guide covers the main features and common patterns found in the Web Map API and highlights how Mapbox GL JS differs from other map libraries. Users who have used Leaflet, mapbox.js, or OpenLayers can see the differences between Mapbox GL JS and these map libraries in this file.

Mapbox GL JS core differences

Client-side rendering

The core feature of Mapbox GL JS is client-side rendering. When creating a Web application in Mapbox GL JS, the map is rendered as a vector tiles using JavaScript and WebGL. Rendering with Mapbox GL JS allows you to quickly change styles and render a more diverse map than combining a series of slicing images from the server.

Camera

A Camera is a map view. The map perspective in Leaflet or mapbox.js libraries is determined by centerpoint and zoom level, which is usually an integer between 0 and 22. Mapbox GL JS also provides parameters to adjust the perspective of the map.

  • Center point: arranged in longitude and latitude order.
  • Scale level: Can be any value within the scale range. Even with a decimal point, such as 1.5 or 6.2, the system will render correctly.
  • Bearing: The degree of rotation of a map. Maps can be rotated, and details such as text annotations are displayed correctly when the right side is rotated up.
  • Tilt: The degree by which the map Angle is tilted.

Layers

Traditional JavaScript map libraries have two completely different layers:

  • Baselayers: Slice of an image that forms the basis of a map. They often contain a lot of data — street maps include details like notes, buildings, ICONS, etc., and don’t render well in a browser. May refer toMapbox.jsIn theL.mapbox.tileLayer 和 LeafletIn theL.TileLayer.
  • Overlays: Usually includesGeoJSONVector data, referenceMapbox.jsIn theL.mapbox.featureLayer 和 LeafletIn theL.geoJson. A superimposed layer contains less information than a base layer, but is more interactive: it is available in theJavaScriptTo modify, and click the time will trigger popover.

Layers in Mapbox GL JS are stylized renderings of vector data or Raster data. Each layer will dictate how certain data should be drawn in the browser, and the renderer will use these layers to render the map to the screen.

As shown below, map details change as the zoom level changes. Terrain, buildings, public transit platforms, and location information are rendered as their corresponding layers.

Because Mapbox GL JS loads all map content in the browser as vector data, Mapbox GL JS makes no distinction between base and overlay layers. As a result, map element sections such as labels and ICONS can be modified using JavaScript, similar to overlay layers in the previous map library. Of course, this also means that the functions and methods for changing layer styles are a little more detailed, which we’ll explain in more detail next.

Add a map

The Mapbox GL JS project is based on the MapBoxGl.map class.

var map = new mapboxgl.Map({
  // container id
   container:'map'.// style location
   style:'mapbox://styles/mapbox/streets-'.// starting position
   center: [-74.50.40].zoom:9
});
Copy the code

It is similar to Leaflet’s L.map.map class or mapbox.js’ L.mapbox.map, but with a few core differences:

coordinates

Mapbox GL JS treats coordinates as arrays (such as [-74.50, 40]) arranged in the order longitude, latitude (as opposed to latitude, longitude in Leaflet and mapbox.js). This order is consistent with coordinates in GeoJSON, other geospatial formats, and X and Y orders in mathematics.

Map Style

Map by URL mapbox: / / styles/mapbox/streets – v load. This URL links to a remote file that, when loaded by the map, is used to determine tilesets and how to render styles for end customers. Mapbox GL JS allows only URLs in some places and does not allow literal data, including data sources.

Like other remote data sources in the JavaScript library, these data sources are asynchronous. So the code uses event binding to ensure that the map changes at the right time. Such as:

map.on('load'.function() {
  map.addLayer({
    id:'terrain-data'.type:'line'.source: {type:'vector'.url:'mapbox://mapbox.mapbox-terrain-v2'
    },
    'source-layer':'contour'
  });
});
Copy the code

The code above uses map.on(‘load’, function() {to run map.addlayer when and only after the local graph data source is loaded (including the map style). Running map.addLayer immediately causes an error because addLayer will add a layer on top of the style and the target style has not yet loaded successfully.

There are also two different ways to change the location of a map: jumpTo and easeTo. JumpTo is similar to older map navigation tools: it instantly shows another location. EaseTo is great: it displays smart values like zoom, azimuth, and tilt, making it easy to keep track of detailed map movements.

Add data to the map

Data can be added to the map as a layer using the addLayer() method. AddLayer treats the object as a parameter containing an ID (created by the user) and a type attribute. When adding layers, you need to provide a source so that the renderer can use the data to draw. You can choose to specify layout and paint properties to tell the renderer how to draw.

Add layer source

Data sources can be added using the addSource() method of Mapbox GL JS. This alternative can achieve the same map performance, but sometimes we recommend keeping the code readable.

When you add a new layer, you need to add the data source. Layer data sources include type and URL, meaning that all layer types can be retrieved as remote data sources (like style in Map). There are five layer types, each with its own properties:

  • vector tiles
  • raster tiles
  • GeoJSON
  • image
  • video

Vector data sources also need to contain a source-layer, using the layer name from the vector file data source (usually the name of the original file). Example:

map.on('load'.function() {
  map.addLayer({
    id:'rpd_parks'.type:'fill'.source: {type:'vector'.url:'mapbox://mapbox.3o7ubwm8'
    },
    'source-layer':'RPD_Parks'
  });
});
Copy the code

Layout and Paint property Settings

The layer contains two subproperties for adding data styles: Paint and Layout. Used to specify how to render map data. The Layout property refers to render location and visibility and is applied early in the rendering process. Paint refers to more elaborate rendering styles such as opacity, color, and translation. Don’t need a lot of processing and render at a later stage.

The following code shows how to add a layer to the map to fill the park with green.

In addition, if you add a data source using the addSource() method, you need to include the ID, as the source in addLayer() does.

map.on('load'.function() {
  map.addLayer({
    id:'rpd_parks'.type:'fill'.source: {type:'vector'.url:'mapbox://mapbox.3o7ubwm8'
    },
    'source-layer':'RPD_Parks'.layout: {visibility:'visible'
    },
    paint: {'fill-color':'rgba(61,153,80,0.55)'}}); });Copy the code

The finished product: Zoom in to show San Francisco, and fill the park with a green layer. This layer is drawn based on the vector data source of the city park land data.

Now that you’ve mastered the basics of Mapbox GL JS, make your own map!

Continue to pay attention to wechat public number: front-end development enthusiasts and I come to the front-end map!! Next time, we’ll have a full list of tutorials, so stay tuned