vue全局引入openlayers_vue+openlayers加载矢量切片显示不完整（图片支零破碎）

布满荆棘的人生 2022-10-28 03:47 357阅读 0赞

您需要贴一下下，您那边对接的代码的，我这边贴我的import Map from 'ol/Map';

import View from 'ol/View';

import proj4 from 'proj4';

import \{get\} from 'ol/proj';

import VectorTileLayer from 'ol/layer/VectorTile';

import \{ Logo, TileSuperMapRest \} from '@supermap/iclient-ol';

import \{VectorTileSuperMapRest\} from '@supermap/iclient-ol/overlay/VectorTileSuperMapRest';

import TileGrid from 'ol/tilegrid/TileGrid';

import \{MapboxStyles\} from '@supermap/iclient-ol/overlay/vectortile/MapboxStyles';

import MVT from 'ol/format/MVT';

import Feature from 'ol/Feature';

import olms from 'ol-mapbox-style';

export default \{

mounted()\{

var url = (window.isLocal ? window.server : "https://iserver.supermap.io") +

"/iserver/services/map-mvt-California/rest/maps/California";

let  scaleToResolution = function (scale) \{

var inchPerMeter = 1 / 0.0254;

var meterPerMapUnitValue = Math.PI \* 2 \* 6378137 / 360;

return 1 / (scale \* 96 \* inchPerMeter \* meterPerMapUnitValue);

\};

let  getResolutions = function (zoom, scale, targetMinZoom, targetMaxZoom) \{

var res = scaleToResolution(scale);

var minRes = res \* Math.pow(2, zoom - targetMinZoom);

var resolutions = \[\];

for (var index = 0; index < targetMaxZoom - targetMinZoom + 1; index++) \{

resolutions.push(minRes / Math.pow(2, index));

return resolutions;

\};

var vectorLayer;

//通过缓存sci文件已知第10级的比例尺是0.000003461454994642，计算0到16级的分辨率

var resolutions = getResolutions(10, 0.000003461454994642, 0, 16);

var map = new Map(\{

target: 'map',

view: new View(\{

center: \[-122.228687503369, 38.1364932162598\],

zoom: 10,

minZoom: 10,

maxZoom: 14,

projection: 'EPSG:4326',

resolutions: resolutions

\})

\});

// var key = 'pk.eyJ1IjoieWFuZ2p1bmxpbiIsImEiOiJjazhpazFsdjQwNnlvM2RwNjl1dngyYmdsIn0.kuycGa4pcXob5ja5aVtgfQ';

// olms('map', 'https://api.mapbox.com/styles/v1/mapbox/bright-v9?access\_token=' + key);

var format = new MVT(\{

featureClass: Feature

\});

// format.defaultDataProjection = new ol.proj.Projection(\{

//     code: 'EPSG:4326',

//     units: ol.proj.Units.TILE\_PIXELS

// \});

var style = new MapboxStyles(\{

url: url,

source: 'California',

resolutions: resolutions

\});

// console.log(style,'style')

style.on('styleloaded', function () \{

vectorLayer = new VectorTileLayer(\{

//设置避让参数

declutter: true,

source: new VectorTileSuperMapRest(\{

url: url,

projection: 'EPSG:4326',

tileGrid: new TileGrid(\{

resolutions: resolutions,

origin: \[-180, 90\],

tileSize: 512

\}),

tileType: 'ScaleXY',

format: format

\}),

style: style.getStyleFunction()

\});

map.addLayer(vectorLayer);

\})

vue全局引入openlayers_vue+openlayers加载矢量切片显示不完整（图片支零破碎）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 UILabel加载attributedText有图片显示不全

相关 026：Mapbox GL加载矢量切片数据源

相关 vue 全局封装loading加载(全局监听)

相关 vue全局引入openlayers_vue+openlayers加载矢量切片显示不完整（图片支零破碎）

相关 Openlayer加载geoserver发布的矢量切片

相关 Android异常--bitmapUtils加载图片不显示

相关 WebView加载网页不显示图片解决办法

相关 vue + 图片加载 + 默认图片

相关 vue异步图片不显示？模块化引入之

相关 Tippecanoe矢量切片