V3-ol-map NPM | npm.io

v3-ol-map

vue3 OpenLayers组件

功能上基本基本和vue3版本的v-ol-map一致。

地图 ol-mao
鹰眼 ol-overview
图层
- 矢量图层 ol-vector
- 瓦片图层 ol-tile
- 图像图层 ol-image
- 热力图 ol-heatmap
- 聚合图层 ol-cluster
- ~~图形图层~~
弹框 ol-overlay
路径规划 ol-route
结合echarts
轨迹动画 ol-path
绘制 v-draw
测量 v-measure

相较于v-ol-map,暂不支持的设置和功能:

通过设置city属性直接定位到城市中心点。（不打算支持了，占用太大体积了）
tile组件tile-type移除部分类型，具体支持类型查看(文档待补充...)。

安装

npm安装

npm install v3-ol-map

pnpm安装

pnpm install v3-ol-map

使用

<script setup>
import { OlMap, OlTile } from "v-3-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组件的方法。

但是！又例如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,
});
</script>

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

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

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

const view:VMap["view"] = {
  center: [0, 0],
  zoom: 2,
}

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

可以理解成组件做了这样的操作：

组件接收参数：props: { Y: as PropType<import("ol/X/Y").Options> }
重组类new X({Y:new Y(props.Y)})
使用：const options = {y: ... } <ol-x :y="options.y" />

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

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

const source = {
  tileGrid: {
    origin: [0, 0],
  }
}
</script>

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

可能的问题

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

可能发生了以下问题：

组件接收参数：props: { Y as PropType<import("ol/X/Y").Options extends Z= import("ol/X/Y/Z").Options> }
问题：类ol/X/Y中包含属性Z的值接受的是一个类，new X({Y:new Y({...props.Y,Z:new Z(props.Y.Z)})})，但是组件没有解构并重组参数，所以props.Y.Z没有生效。