首页 / 浏览问题 / 云GIS / 问题详情
vue+openlayers加载矢量切片显示不完整(图片支零破碎)
2EXP 2020年04月24日

大家,好:

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

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

缩放后:

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

缩放后(不同地方看着都有缺失一样):

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

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

1个回答

您好,请问您再index文件中添加了<link href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" rel="stylesheet">这css文件没
3,352EXP 2020年04月26日

测试了下不行。

没测试之前:原有的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):

库的版本如下:

...