Question

大家，好：

最近一个项目，用的是vue+openlayers（版本：^6.2.1），客户需要加载supermap发布的矢量切片服务，所以就想写个demo测试下，看了官网的supermap for openlayers的demo，也下载了官方源码，因为把源码里涉及到矢量切片的几个文件复制放到了自己的demo工程中，也能正常跑起来，但显示的效果会有问题，想知道如何解决这样的问题。

发布的矢量切片服务预览如下：

缩放后：

通过工程里运行起来（可以发现显示不完整，有些地方像是被扣掉了一样，比如河北省）：

缩放后（不同地方看着都有缺失一样）：

看到该请求的mvt格式的文件也都请求了，如下：

所以比较困惑，希望有清楚的帮个忙，不胜感激！

Answer 1

您好，请问您再index文件中添加了<link href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" rel="stylesheet">这css文件没

Comments

测试了下不行。

没测试之前：原有的vue工程中，引入ol的库，在测试页面上css样式也添加了，如下图：

展示地图显示缺失；

按照你说的，又测试了下，在main.js中加入：

let css = '<link href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" rel="stylesheet">';

document.writeln(css);

仍然不对。

---

您需要贴一下下，您那边对接的代码的，我这边贴我的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);  
     })
            
 

 
     }

---

我重新创建了个工程，把你这边的代码拷贝进去，单独运行，跑不起来，会报错（我现在不确定会不会和版本有关系，比如ol的版本，比如supermap/iclient-ol的版本）

报错信息如下（node_modules/@supermap/iclient-ol/overlay/vectortile/MapboxStyles.js）：

库的版本如下：