Mapbox Vue3

中文

English

中文

English

Appearance

常见问题列表 ​

切记

所有图层id属性均不可变更，如果不需要动态调整图层顺序，无需设置图层id属性值。

1. 地图无法显示 ​

  • 检查浏览器控制台是否有报错
  • 检查MbMap组件center属性是否设置正确
  • 检查MbMap组件zoom属性是否设置正确

2. SymbolLayer图层无法显示 ​

  • 检查浏览器控制台是否有报错
  • 检查图层上的点经纬度值是否设置正确，确保经纬度值是number类型

3. 字体文件缺失导致怪异问题 ​

如遇到如下问题，需检查Mapbox字体文件是否正常载入：

  • 点位、聚合点不展示
  • 聚合散开行为错误
  • 缓冲区配置countable属性，而字体文件配置错误，会导致缓冲区显示不全

解决方法：MbMap组件上设置glyphs属性

4. WMTS图层范围溢出（tileRow / tileCol out of range） ​

  • WMTS图层坐标系与地图坐标系不一致

解决方法：保持MbMap组件上crs属性值和WMTS图层坐标系值一致

  • WMTS图层的起始 index 值不一致；Mapbox 瓦片图层 index 计算起始值为1，而瓦片服务的 index 起始值为0

解决方法：

  1. 强制修改请求瓦片的 url，将 TileMatrix=EPSG:4326:{Z} 修改为 TileMatrix=EPSG:4326:{Z-1}，示例代码如下： 解决代码
  2. 如果由超图提供服务，可使用如下方式加载底图
html
<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'
  }"
/>

5. 瓦片上的文字很小，需要放大 ​

一般这种情况出现在高分辨率屏幕（如 8704*3456）上，且地图厂商也不再配合发布字体更大的底图时，可通过设置 WMTS 图层的 tileSize （设置为600）放大底图，代码如下： 解决代码

6. 双核浏览器显示不支持webGL问题 ​

一般是浏览器设置问题：

  • 浏览器输入 chrome://gpu 查看webgl的设置情况 如果是 disabled 表示关闭了
  • 浏览器输入 chrome://flags 找到webgl相关选项选择开启，然后重启浏览器 解决代码解决代码

7. 非ESPG:3857坐标系示例 ​

  • ESPG:4490（CGCS2000）
html
<mb-map
  crs='EPSG:4490'
  ...
>
...
</mb-map>
  • ESPG:4326（WGS84） 如果显示不正确，请参考问题4的解决方式
html
<mb-map
  crs='ESPG:4326'
  ...
>
...
</mb-map>
  • EPSG:4526
ts
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]];
html
<mb-map
  :crs='crs'
  ...
>
...
</mb-map>

8. 底图请求如何设置token等header ​

在MbMap组件的 extendProps 属性性中设置 transformRequest 方法，参考代码： 解决代码

9. 图层顺序 ​

根据Vue解析组件顺序，处在MbMap下方的组件图层在Mapbox显示的顺序在上方。如下代码所示：

  • 图层2在图层1上面
  • 图层3在图层2上面
  • 图层4在图层3上面
  • 图层5在图层4上面
html
<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>

如需调整图层顺序，请使用MbMap组件实例上的reorderLayers方法

10. WMTS底图Origin不是[-180, -90] ​

如果发布的WMTS图层原点不是默认值，例如arcgis发布的WMTS服务切片原点一般为Origin: X: -400.0 Y: 400.0，这种情况Mapbox处理不了此种图层。 有两种方法可以解决此问题：

  1. 通过arcgis自带的转换功能，把WMTS图层导出成WMS图层，导出的url格式一般为：/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. 用leaflet，leaflet可以完全自定义图层参数

11. 加载高德导航底图 ​

参数

  • wprd0{1-4}
  • scl=1&style=7 为矢量图（含路网和注记）
  • scl=2&style=7 为矢量图（含路网但不含注记）
  • scl=1&style=6 为影像底图（不含路网，不含注记）
  • scl=2&style=6 为影像底图（不含路网、不含注记）
  • scl=1&style=8 为影像路图（含路网，含注记）
  • scl=2&style=8 为影像路网（含路网，不含注记）
html
<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"
/>