Zoomify图像未与Vue.js和Openlayers一起显示

问题描述

我正在尝试将Openlayers与Vue.js一起使用以显示zoomify图像。我一直在关注此处（https://openlayers.org/en/latest/examples/zoomify.html）的zoomify示例。我有一个名为“ zoomifyImage”的目录，其中包含所有以正确的TileGroup {g} / {x}-{y}-{z}格式存储的图块。我的代码如下：

<template>
    <div id="content">
        <div id="map" class="map" ref="map"></div>
    </div>
</template>

<script>
import "ol/ol.css"
import Map from "ol/Map"
import View from "ol/View"
import TileLayer from "ol/layer/Tile"
import OSM from "ol/source/OSM"
import { defaults as defaultControls } from 'ol/control'
import ZoomSlider from 'ol/control/ZoomSlider'
import Projection from "ol/proj/Projection.js"
import Zoomify from 'ol/source/Zoomify'

export default {
    name: "App",data() {
        return {
            map: null,};
    },methods: {
        initMap() {
            // values for the image width and height
            var imgWidth = width
            var imgHeight = height

            var imgCenter = [imgWidth / 2,-imgHeight / 2];
            // var url = 'https://ol-zoomify.surge.sh/zoomify/'
            var url = "./data/zoomifyImage/"

            var proj = new Projection({
                code: 'ZOOMIFY',units: 'pixels',extent: [0,imgWidth,imgHeight]
            });

            var source = new Zoomify({
                url: url,size: [imgWidth,imgHeight],crossOrigin: 'anonymous'
            });

            let view = new View({
                projection: proj,center: imgCenter,zoom: 1,maxZoom: 18,-imgHeight,0]
            })

            var layer = new TileLayer({
                source: source,})

            this.map = new Map({
                layers: [layer],target: "map",view: view,controls: defaultControls().extend([new ZoomSlider()]) 
            })
        }
    },mounted() {
        this.initMap();
    }
};
</script>

<style lang='scss' scope="scoped">
.map {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  bottom: 0;
}
</style>

在url设置为“ ./data/zoomifyImage/”的情况下，显示的地图为空，但是当更改为示例网址“ https://ol-zoomify.surge.sh/zoomify/”时，将显示图像。我提供的网址路径是否有问题。如果有任何意见，将不胜感激！

编辑

我的目录结构如下：

src
  assets
  data
    zoomifyImage
      TileGroup0
      ...
  App.vue
  main.js

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）