【解决办法】加载代码如下: 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");
}
});