Use Offline

at presentL7Support Gao DeheMapboxTwo base maps, the AMap map is used onlineAPIOffline deployment is not possible. If you have offline deployment requirements, you can use it.MapBoxMake a base map.L7The interface layer unifies the direct differences between different basemaps, and a set of visualization codes can be run onL7On any supported basemap. This article mainly introduces how to use it offline and accelerate its use in China.MapBox, and also provides online font services, which you can also download for local use.

How to introduce Mapbox in L7

import { Scene, LineLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
  id: 'map',
  map: new Mapbox({
    style: 'dark',
    center: [103.83735604457024, 1.360253881403068],
    pitch: 4.00000000000001,
    zoom: 10.210275860702593,
    rotation: 19.313180925794313,
    token: 'xxxx',
  }),
});

Why go offline

• Offline deployment
• Domestic acceleration
• Do not usemapbox token

How to use MapBox offline

As long as you don’t useMapBoxThe data base map service can be used offline.mapboxAll data service resources are instyleconfigured inside. In addition to data services, there are also some static resources, which are mainly used for image annotation and text annotation.

mapboxIf the data resources themselves are deployed and used separately in foreign countries, the loading speed experience is still very good.

Let’s find out firstMapBoxWhat configuration items the style contains.

Mapbox style parameters

• version：JS SDKThe corresponding version must be 8.
• name: The naming of the style.
• sprite: Sprite map, which contains all the sporadic icon images involved in a map into one large image.
• glyphs：.pbfFormat font style, such as Microsoft Yahei and other font libraries.
• sources: The resource file of the layer, which can support vector slices, raster,demraster, picture,geojson, video and other formats.
• layers: It is a description of each layer style. This is the key to rendering the map style. You can customize the map style.

Specific parameters and theirapiCan refer tomapboxofficial website.

If you want to achieve localization, you only needsprite，glyphsLocalization is fine, and the map service can load other services.

If you don’t need to useMapBoxData service, used to complete the visualization layerL7Rendering is even simpler.

You just need toMapBoxMap style settingsblank。

const scene = new Scene({
  id: 'map',
  map: new Mapbox({
    style: 'blank',
    center: [103.83735604457024, 1.360253881403068],
    pitch: 4.00000000000001,
    zoom: 10.210275860702593,
    rotation: 19.313180925794313,
  }),
});

blankThe style is considered to be a baseless style, so there is no need to use it in this style.mapboxservice, there is no need to usemapboxoftoken。

Localized sprite map

If you need to usemapboxFor field image annotation, you need to localize sprite image resources
Just download two files
sprite.json mainly records the position of each chart on the big picture
sprite.png A big picture composed of each small icon

Online sprite service address:
https://lzxue.github.io/font-glyphs/sprite/sprite

localized fonts

If needed usemapboxThe article annotation function needs to be localized. If your rendering capabilities are all usingL7To achieve this, this process is also unnecessary.

L7Online font service provided
Currently supports 4 fonts.

• Alibaba inclusive body
• noto
• opensan
• roboto

If you have new font requirements, you can submit a PR and we will automatically generate an online font service for you. You can use it online or download it for local use.

Font service download:gh-pages branch you cancloneCome down and use it directly.

You can also use online services
github service
https://lzxue.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf
Ant CDN:
https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf

Map service localization

1.LoadThird-party basemap, the raster tile layer is used as the base map, such as Sky Map, AMap,googleGrid tiles are available
2.Downloadopensteetmap Vector tile map as base map
3. Publish base map service or vector tile service for your own business data.

Here is a more complete solution
 https://jingsam.github.io/foxgis-server-lite/#/

All service resources have been prepared so that we can use them independentlymapboxService, no need to apply againmapboxoftoken。

import { Scene, LineLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
  id: 'map',
  map: new Mapbox({
    style: {
      version: 8,
      name: 'blank',
      sprite: 'https://lzxue.github.io/font-glyphs/sprite/sprite',
      glyphs:
        'https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf',
      sources: {},
      layers: [
        {
          id: 'background',
          type: 'background',
          paint: {
            'background-color': 'white',
          },
        },
      ],
    },
    center: [103.83735604457024, 1.360253881403068],
    pitch: 4.00000000000001,
    zoom: 10.210275860702593,
    rotation: 19.313180925794313,
    token: 'xxxx',
  }),
});

Offline, use mapbox demo without token