首页 / 浏览问题 / WebGIS / 问题详情
超图FAQ:WebGL加载PBF矢量瓦片时报错,同时加载MVT和PBF格式瓦片时无法正常显示。
64,468EXP 2026年02月02日

WebGL加载PBF矢量瓦片时报错,同时加载MVT和PBF格式瓦片时无法正常显示。

1个回答

【解决办法】加载代码如下: var url = "http://172.16.15.203:8090/iserver/services/map-mvt-beijing/restjsr/v1/vectortile/maps/beijing"; var mvtMap = scene.addVectorTilesMap({ url: url, canvasWidth: 512, name: 'JingJinDiTu' }); var mvtMap1 = scene.addVectorTilesMap({ canvasWidth: 512, name: "testMVT", crs: "EPSG:4326", }); SuperMap3D.when(mvtMap1.readyPromise, function () { mvtMap1.setCRS("EPSG:4326"); // 设置 MVT 图层的 Mapbox Style 样式对象 mvtMap1.mapboxStyle = { // 样式版本号,固定为 8 version: 8, // 数据源集合,key 为数据源名称,value 为数据源配置 sources: { // 定义名为 "esri" 的矢量数据源 esri_school: { type: "vector", // 数据源类型:矢量 tiles: [ // 矢量瓦片地址列表,可支持多级 "http://xtgc.geo-compass.com/yj_xian/gmpub/api/v1/mvt-v2/5faad435-edd7-441c-b13c-6100ac4a6cc7/{z}/{x}/{y}.pbf?apikey=943522ad-5506-48cf-93fa-1f2bdccf993b", ], }, }, // 图层样式数组,按顺序绘制 layers: [ { id: "testMVT", // 图层唯一标识 type: "circle", // 图层类型:填充面 source: "esri_school", // 引用的数据源名称 "source-layer": "学校", // 数据源中的图层名 // "filter": ["==", "_symbol", 0], // 过滤条件:仅渲染 _symbol=0 的要素 minzoom: 0, // 最小可见层级(含) layout: {}, // 布局属性,此处留空 paint: { // 绘制属性 "circle-color": "#fb002b", // 填充颜色 "circle-radius": 5 }, }, ], }; }); // 等待主图层(京津地图)准备好后定位 + 填充图层列表 SuperMap3D.when(mvtMap.readyPromise, function () { var bounds = mvtMap.rectangle; scene.camera.setView({ destination: new SuperMap3D.Cartesian3.fromRadians( (bounds.east + bounds.west) * 0.5, (bounds.north + bounds.south) * 0.5, 150000 ), orientation: { heading: 0, roll: 0 } }); // 填充图层选择下拉框(这里主要用主图层的图层) $('#layersList').empty(); var menu = document.getElementById('layersList'); var mapboxStyle = mvtMap.mapboxStyle || { layers: [] }; mapboxStyle.layers.forEach((layer, index) => { if (layer.id) { var option = document.createElement('option'); option.innerHTML = layer.id + " (主图层)"; option.value = index; menu.appendChild(option); } }); // 额外添加第二个图层的选项(简单处理) var option2 = document.createElement('option'); option2.innerHTML = "地质灾害点 (次图层)"; option2.value = "geo"; menu.appendChild(option2); // 默认选择第一个 if (mapboxStyle.layers.length > 0) { $('#layersList').val(0).trigger("change"); } });
64,468EXP 2026年02月02日
...