首頁 / 浏覽問題 / 組件GIS / 問題詳情
vite supermap/iclient-ol": "^11.1.1" 加載 vectortile服務
3EXP 2025年02月10日

如題所示,如何在(zài)vite框架,supermap/iclient-ol": "^11.1.1" 加載

https://iserver.supermap.io/iserver/services/map-china400/restjsr/v1/vectortile/maps/China_4326/style.json

我寫的(de)代碼如下所示

import { Tile as TileLayer, Vector as VectorLayer, Image as ImageLayer, VectorTile as VectorTileLayer } from 'ol/layer'; 
import { TileSuperMapRest, VectorTileSuperMapRest,GetFeaturesByGeometryParameters,FeatureService } from '@supermap/iclient-ol'; import { GeoJSON, MVT } from 'ol/format' 
import { MapboxStyles } from '@supermap/iclient-ol/overlay/vectortile/MapboxStyles'; 

function abcd(){
  let styleURL = 'https://iserver.supermap.io/iserver/services/map-china400/restjsr/v1/vectortile/maps/China_4326/style.json'
  var format = new MVT();
  var style = new MapboxStyles({
    url: styleURL,
    map: map.value,
  })
  let vectorLayer = new VectorTileLayer({
    declutter: true,
    source: new VectorTileSuperMapRest({
      url: styleURL,
      projection: 'EPSG:4326',
      format: format
    }),
    style: style.getStyleFunction()
  });
  map.value.addLayer(vectorLayer)
}

1個(gè)回答

vite部署可以(yǐ)參考:

https://blog.csdn.net/supermapsupport/article/details/123569581

https://blog.csdn.net/supermapsupport/article/details/130778845

加載vectortile代碼:

import Map from 'ol/Map';
import View from 'ol/View';
import MVT from 'ol/format/MVT';
import Feature from 'ol/Feature';
import VectorTileLayer from 'ol/layer/VectorTile';
import { MapboxStyles, VectorTileSuperMapRest } from '@supermapgis/iclient-ol';

var styleURL = "https://iserver.supermap.io/iserver/services/map-china400/restjsr/v1/vectortile/maps/China_4326/style.json";
var topResolution = 360.0 / 512;
var resolutions = [];
for (var zoom = 0; zoom < 22; zoom++) {
  resolutions.push(topResolution / Math.pow(2, zoom));
}
var vectorLayer;
var map = new Map({
  target: 'map',
  view: new View({
    center: [116, 39],
    zoom: 6,
    projection: 'EPSG:4326',
    resolutions: resolutions
  })
});
var format = new MVT({
  featureClass: Feature
});
var style = new MapboxStyles({
  style: styleURL,
  map: map
})
style.on('styleloaded', function () {
  vectorLayer = new VectorTileLayer({
    source: new VectorTileSuperMapRest({
      style: styleURL,
      projection: 'EPSG:4326',
      format: format
    }),
    style: style.getStyleFunction()
  });
  map.addLayer(vectorLayer);
1,191EXP 2025年02月11日

你好我這(zhè)邊已經引入了(le/liǎo)supermap/iclient-ol 還需要(yào / yāo)額外引入

@supermapgis/iclient-ol嗎

使用局部引用的(de)方式,将function引入

import { MapboxStyles, VectorTileSuperMapRest } from '@supermapgis/iclient-ol';
...