v3-ol-map

vue3 OpenLayers组件

vue2版本：v-ol-map

文档与示例

文档地址

安装

npm安装

npm install v3-ol-map

pnpm安装

pnpm install v3-ol-map

使用

完整引入

// main.ts
import { createApp } from 'vue'
import VOlMap from "v3-ol-map";
import App from './App.vue'

const app = createApp(App)

app.use(VOlMap)
app.mount('#app')

按需引入

<script setup>
import { OlMap, OlTile } from "v3-ol-map";
</script>

<template>
  <div>
    <ol-map>
      <ol-tile tile-type="TDT" />
    </ol-map>
  </div>
</template>

说明

一点设计思路：尽量使用ol原生api，通过props传递参数。 例如：

把ol/Map的属性直接作为ol-map组件的属性，把ol/Map的方法作为ol-map组件的方法。

但是！view属性值其实是一个独立的类，通过原生代码实现是这样的:

<script setup lang="ts">
import { Map } from "ol";
import { View } from "ol/View";

const view = new View({
  center: [0, 0],
  zoom: 2,
});

const map = new Map({
  target: "map",
  view: view, // 注意这里view其实是一个类
});
</script>

<template>
  <div id="map"></div>
</template>

我们希望可以直接解构View，直接把View类的Options，直接当成ol-map的参数值，这样代码看起来会简洁很多，所以组件中实现如下：

<script setup lang="ts">
import { OlMap, VMap } from "v-3-ol-map";

// 抽出ol.View的Options
const view:VMap["view"] = {
  center: [0, 0],
  zoom: 2,
}
</script>

<template>
   <ol-map :view="view" />
</template>

类似的设计在各组件中都有体现，如ol-vector、ol-tile组件的source属性，甚至会对source属性进行二次解构，例如将source.tileGrid的Options作为source.tileGrid的属性值传递。

<script setup lang="ts">
import { OlMap, VMap, OlTile } from "v-3-ol-map";

// 一次解构：抽出ol/source/Tile的Options
const source = {
  // 二次解构：抽出ol/tilegrid/TileGrid的Options
  tileGrid: {
    origin: [0, 0],
  }
}
</script>

<template>
  <ol-map>
    <ol-tile :source="source" />
  </ol-map>
</template>

可能的问题

需要解构的类很多，组件还没有完全实现，所以在使用中遇到没生效的参数可能就是组件内部没有解构并重组参数造成的。