Question

如题所示，如何在vite框架，supermap/iclient-ol": "^11.1.1" 加载

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

我写的代码如下所示

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)
}

Answer 1

vite部署可以参考：

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);

Comments

你好我这边已经引入了supermap/iclient-ol 还需要额外引入

@supermapgis/iclient-ol吗

---

使用局部引用的方式，将function引入

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