首页 / 浏览问题 / WebGIS / 问题详情
ol添加矢量瓦片显示‘ol_uid'未定义错误
4EXP 2025年07月14日

问题描述:在各种信息正常访问和正常加载的情况下,执行map.addLayer(vectorLayer);添加矢量瓦片数据,出现Uncaught TypeError: Cannot read properties of undefined (reading 'ol_uid')错误

重现: 1.加载各项服务

onMounted(async() => {
      initMap();
      initvector().then(() => {
        if (vectorLayer) {
          addlayers();
          console.log('矢量图层已添加');
        } else {
        console.error('矢量图层未构造完成');
        }  

    })
  });

  let map;
  let vectorLayer;
  // 地图实例化函数
  const initMap = () => {
  // const url = "http://localhost:8090/iserver/services/map-chengdu/rest/maps/chengdu_sheng%40chengdu";
  // const url = "http://localhost:8090/iserver/services/map-cd_data/rest/maps/chengdu_alldata";
  const url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World"
  const sheng_url = "http://localhost:8090/iserver/services/map-cd_data/rest/maps/sichuan_sheng"
  const elem_url = "http://localhost:8090/iserver/services/map-cd_data/rest"
  const source = new TileSuperMapRest({url: url,wrapX: true,})
  const source_sheng = new TileSuperMapRest({url: sheng_url,wrapX: true,})
  map = new Map({
      layers: [
        new TileLayer({
              source: source,
              projection: "EPSG:4326",
        }),
        // new TileLayer({
        //       source: source_sheng,
        //       projection: "EPSG:4326",
        // }),
      ],
      view: new View({
          center: [104.08 , 30.75],
          zoom: 10,
          projection:'EPSG:4326'
      }),
      target: 'maplayer',
      controls:[
        // 比例尺
        new ScaleLine({
          className:'ol-scale-line',
          target:document.getElementById('scale-bar'),
          minWidth:64,
          units:'metric'
      }),
      // 缩略图
        new OverviewMap({
          className: 'ol-overviewmap ol-custom-overviewmap', // 可自定义样式类名
          collapsed: false, // 默认展开
          collapsible: false,
          view: new View({
            projection: 'EPSG:4326',
            multiWorld: true
        }),
          collapsed: false,
          layers: [
          new TileLayer({
              source: source,
              projection: "EPSG:4326",
            }),
        ]
        }),
      ]
  });


  }
  // 矢量图层添加
const initvector = () => {
 return new Promise((resolve, reject) => { 
  
  if (!map || !map.getTargetElement()) {
    console.error('地图尚未初始化');
    return;
  }
  // iserver矢量地图服务
  const line_url = "http://localhost:8090/iserver/services/map-cd_data/rest/maps/roads_Clip%40DataSource"
  // const line_url_vector = "http://localhost:8090/iserver/services/map-cd_data-3/restjsr/v1/vectortile/maps/roads_Clip%40DataSource.json"
  // const line_style_url = "http://localhost:8090/iserver/services/map-cd_data-3/restjsr/v1/vectortile/maps/roads_Clip%40DataSource/style"
  new MapService(line_url).processAsync().then(serviceResult => {

console.log('地图服务信息:', serviceResult);
const mapInfo = serviceResult.result;
console.log('地图名称:', mapInfo.name);
console.log('图层数组:', mapInfo.layers);
console.log('坐标系:', mapInfo.prjCoordSys);
console.log('地图范围:', mapInfo.bounds);

const style = map.getView()
// 矢量瓦片风格参数对象
var stylesOptions = {
      url: line_url,
      view: style
  };
  
  console.log('瓦片风格:', style);
  console.log('瓦片风格参数对象:', stylesOptions);
  // 创建瓦片风格对象
  var vectorTileStyles = new VectorTileStyles(stylesOptions);
  console.log('瓦片风格对象:', vectorTileStyles);
  // 通过地图信息获取瓦片参数对象
  var vectorTileOptions = VectorTileSuperMapRest.optionsFromMapJSON(line_url, serviceResult.result);
  console.log('服务结果:', serviceResult.result);
  console.log('瓦片参数对象:', vectorTileOptions);
  try { 
    // 添加矢量瓦片图层
  vectorLayer = new VectorTile({
      source: new VectorTileSuperMapRest(vectorTileOptions),
      style: vectorTileStyles.getFeatureStyle
  });
  console.log('getFeatureStyle:', vectorTileStyles.getFeatureStyle);

  console.log('当前地图分辨率:', map.getView().getResolution());
  console.log('支持的分辨率列表:', vectorTileOptions.tileGrid.resolutions_);
  console.log('矢量瓦片图层:', vectorLayer);

  resolve();
  } catch (e) { 
    console.error('构造矢量图层失败:', e);
    reject(e);
  }
  

  })
  })
  }
  
  
  const addlayers = () => { 
    map.addLayer(vectorLayer);
};

控制台返回信息
矢量瓦片图层的ol_uid信息

2.执行 map.addLayer(vectorLayer);后报错

Uncaught TypeError: Cannot read properties of undefined (reading 'ol_uid')
    at getUid (@supermapgis_iclient-ol.js?v=989681ed:276268:14)
    at VectorRenderTile.getContext (@supermapgis_iclient-ol.js?v=989681ed:361264:17)
    at CanvasVectorTileLayerRenderer.renderTileImage_ (chunk-OANGUXVK.js?v=989681ed:806:26)
    at CanvasVectorTileLayerRenderer.drawTile (chunk-OANGUXVK.js?v=989681ed:99:12)
    at CanvasVectorTileLayerRenderer.renderFrame (chunk-4UCJ77ZV.js?v=989681ed:1950:14)
    at VectorTileLayer.render (chunk-YZ5MUZIA.js?v=989681ed:282:28)
    at CompositeMapRenderer.renderFrame (chunk-IT6QXFSY.js?v=989681ed:3062:29)
    at Map.renderFrame_ (chunk-IT6QXFSY.js?v=989681ed:4191:20)
    at Map.animationDelay_ (chunk-IT6QXFSY.js?v=989681ed:4056:10)

补充:map实例也正常加载,代码执行顺序应该也没错

登录 或者 注册 后回答这个问题。

...