# Vue2olSourceIiif

ol/source/IIIF (opens new window)的 vue 组件

Since: v1.0.0

# 基础用法

<template>
  <vue2ol-map style="height:400px;" @init="handleMapInit">
    <vue2ol-view :zoom="zoom" :center="center" :options="viewOptions">
    </vue2ol-view>
    <vue2ol-layer-tile>
      <vue2ol-source-iiif
        v-if="iifOptions"
        :options="iifOptions"
        @init="handleInit"
      >
      </vue2ol-source-iiif>
    </vue2ol-layer-tile>
  </vue2ol-map>
</template>

<script>
import View from "ol/View";
import IIIFInfo from "ol/format/IIIFInfo";
let url =
  "https://iiif.ub.uni-leipzig.de/iiif/j2k/0000/0107/0000010732/00000072.jpx/info.json";

export default {
  data() {
    return {
      zoom: 4, //级别
      center: [-10997148, 4569099], //中心点
      viewOptions: {
        projection: "EPSG:3857" //坐标系
      },
      iifOptions: null,
      map: null
    };
  },
  mounted() {
    fetch(url).then(response => {
      response.json().then(imageInfo => {
        const options = new IIIFInfo(imageInfo).getTileSourceOptions();
        if (options === undefined || options.version === undefined) {
          return;
        }
        options.zDirection = -1;
        this.iifOptions = options;
      });
    });
  },
  methods: {
    handleInit(iiifTileSource) {
      this.map.setView(
        new View({
          resolutions: iiifTileSource.getTileGrid().getResolutions(),
          extent: iiifTileSource.getTileGrid().getExtent(),
          constrainOnlyCenter: true
        })
      );
      this.map.getView().fit(iiifTileSource.getTileGrid().getExtent());
    },
    handleMapInit(map) {
      this.map = map;
    }
  }
};
</script>

Copy

# Props

名称	描述	类型	取值范围	默认值
properties	属性	object	-
options	对应 openlayers 对象的实例化参数选项,其他没有在 props 中列举的参数，如果有传入 props 并且与默认值不同，则以 props 中的值为准，否则使用 options 中的值	object	-	{}
parentLayer	图层,如果为 null 则从 parent 中获取	{import('ol/layer/BaseLayer').default}	-
attributes	属性	{import('ol/source/Source').AttributionLike\|undefined}	-
projection		string\|object	-
tileLoadFunction		{import('ol/Tile').LoadFunction\|undefined}	-
tileUrlFunction		{import('ol/Tile').UrlFunction\|undefined}	-
url		string	-
urls		{string[]}	-

# Events

名称	属性	描述
init	mapObject `import('ol/source/IIIF').default` - 地图元素	地图元素初始化完时触发
append	mapObject `import('ol/source/IIIF').default` - 地图元素	地图元素添加到地图时触发
ready	mapObject `import('ol/source/IIIF').default` - undefined	组件就绪时触发

# Slots

Name	Description	Bindings
default

← Vue2olSourceGeotiff Vue2olSourceTilearcgisrest →