FAQ

Important

All layer id properties must not be changed. If you do not need to dynamically adjust the layer order, you do not need to set the layer id property values.

1. Map Not Displaying

• Check the browser console for any errors.
• Verify that the center property of the MbMap component is set correctly.
• Verify that the zoom property of the MbMap component is set correctly.

2. SymbolLayer Not Displaying

• Check the browser console for any errors.
• Verify that the latitude and longitude values of the points on the layer are set correctly and ensure that they are of number type.

3. Font File Missing Leading to Display Issues

If you encounter the following problems, you need to check whether the Mapbox font files are loaded correctly:

• Points and clustered points are not displayed.
• Clustering behavior is incorrect.
• If the countable property is configured for a buffer and the font file configuration is incorrect, the buffer may not be displayed completely.

Solution: Set the glyphs property on the MbMap component.

4. WMTS Layer Range Overflow (tileRow / tileCol out of range)

• The coordinate system of the WMTS layer is inconsistent with the map's coordinate system.

Solution: Keep the crs property value on the MbMap component consistent with the coordinate system value of the WMTS layer.

• The starting index values of the WMTS layer are inconsistent. Mapbox tile layer index calculation starts from 1, while the tile service's index starts from 0.

Solution:

1. Forcefully modify the URL of the requested tiles, changing TileMatrix=EPSG:4326:{Z} to TileMatrix=EPSG:4326:{Z-1}. Example code:
2. If the service is provided by SuperMap, you can use the following method to load the base map:

<mb-url-template-layer
  url="http://100.66.100.156:8090/iserver/services/map-HuangLingXianDiTuPeiTu/rest/maps/%E9%BB%84%E9%99%B5%E5%8E%BF%E5%BA%95%E5%9B%BE%EF%BC%88%E6%B5%85%E8%89%B2%E7%89%88%EF%BC%89?prjCoordSys=%7B%22epsgCode%22:3857%7D"
  :extendSource="{
    rasterSource: 'iserver'
  }"
  @created="handleCreated"
/>

5. Text on Tiles is Too Small and Needs to be Enlarged

This situation usually occurs on high-resolution screens (e.g., 8704*3456), and when map providers no longer release base maps with larger fonts. You can enlarge the base map by setting the tileSize of the WMTS layer (e.g., to 600). the code is as follows:

6. The dual-core browser does not support webGL

Generally, it is a browser setting problem:

• Enter chrome://gpu in the browser to check the settings of webgl. If it is disabled, it means it is turned off
• Enter chrome://flags in the browser to find the webgl-related options and choose to turn it on, then restart the browser

7. Non-ESPG:3857 coordinate system example

• ESPG:4490 (CGCS2000)

<mb-map
  crs='EPSG:4490'
  ...
>
...
</mb-map>

• ESPG:4326 (WGS84) If the display is incorrect, please refer to the solution of problem 4

<mb-map
  crs='ESPG:4326'
  ...
>
...
</mb-map>

• EPSG:4526

import proj4 from 'proj4';

proj4.defs('EPSG:4526', '+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=38500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs');

const WKT_4526 = `PROJCS["CGCS2000 / 3-degree Gauss-Kruger zone 38",
GEOGCS["China Geodetic Coordinate System 2000", DATUM["China_2000", SPHEROID["CGCS2000",6378137,298.257222101, AUTHORITY["EPSG","1024"]], AUTHORITY["EPSG","1043"]], PRIMEM["Greenwich",0, AUTHORITY["EPSG","8901"]], UNIT["degree",0.0174532925199433, AUTHORITY["EPSG","9122"]], AUTHORITY["EPSG","4490"]], PROJECTION["Transverse_Mercator"], PARAMETER["latitude_of_origin",0], PARAMETER["central_meridian",114], PARAMETER["scale_factor",1],
PARAMETER["false_easting",38500000],
PARAMETER["false_northing",0],
UNIT["metre",1,
AUTHORITY["EPSG","9001"]],
AUTHORITY["EPSG","4526"]]`;
const crs = ['EPSG:4526', WKT_4526, [38344577.88, 2380651.49, 38655422.12, 5036050.38]];

<mb-map
  :crs='crs'
  ...
>
  ...
</mb-map>

8. How to set the token and other headers for map requests

In the MbMap component Set the transformRequest method in the extendProps property, reference code:

9. Layer order

According to the order of component parsing by Vue, the component layers below MbMap are displayed above in Mapbox. As shown in the following code:

• Layer 2 is on top of layer 1
• Layer 3 is on top of layer 2
• Layer 4 is on top of layer 3
• Layer 5 is on top of layer 4

<mb-map>
  <mb-url-template-layer id="1" /><!-- 1 -->
  <mb-polygon-layer id="2" /><!-- 2 -->
  <mb-symbol-layer id="3" /><!-- 3 -->
  <mb-symbol-layer id="4" /><!-- 4 -->
  <mb-buffer-circle-layer id="5" /><!-- 5 -->
</mb-map>

To adjust the order of layers, use the reorderLayers method on the MbMap component instance

10. WMTS Basemap Origin is not [-180, -90]

If the origin of the published WMTS layer is not the default value ([-180, -90]), for example, the origin of a WMTS service tile published by ArcGIS is usually Origin: X: -400.0 Y: 400.0, Mapbox cannot handle this type of layer.

There are two ways to solve this problem:

1. Use ArcGIS's built-in conversion function to export the WMTS layer as a WMS layer. The exported URL format is generally: /luzhou/sclz/rest/services/TDT_BZB/MapServer/export?dpi=96&transparent=true&format=png8&layers=default&bbox={bbox-epsg-3857}&f=image&bboxSR=3857&imageSR=3857
2. Use Leaflet. Leaflet allows complete customization of layer parameters.

11. Loading AutoNavi Navigation Map

Parameters

• wprd0{1-4}
• scl=1&style=7 Vector map (with road network and annotations/labels).
• scl=2&style=7 Vector map (with road network but without annotations/labels).
• scl=1&style=6 Imagery base map (without road network and without annotations/labels).
• scl=2&style=6 Imagery base map (without road network and without annotations/labels).
• scl=1&style=8 Imagery map with road network (with road network and annotations/labels).
• scl=2&style=8 Imagery map with road network (with road network but without annotations/labels).

<mb-url-template-layer
  url="http://wprd04.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=6"
/>