v3-ol-map

vue3 OpenLayers组件

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

• 地图 ol-mao
• 配置项 ol-config
• 控制类 controls
  • 鹰眼 ol-overview
  • 比例尺 ol-scale-line
  • 全屏 ol-full-screen
  • 缩放滚轮 ol-zoom-slider
  • 鼠标位置 ol-mouse-position
• 图层
  • 矢量图层 ol-vector
  • 基于WebGL的矢量图层 ol-webgl-vector
    • WFS图层 ol-wfs
  • 瓦片图层 ol-tile
  • 图像图层 ol-image
    • WMS图层 ol-wms
  • TIFF图层 ol-tiff
  • 热力图 ol-heatmap
  • 聚合图层 ol-cluster
• 图层要素 ol-feature
• 弹框 ol-overlay
• 路径规划 ol-route
• 结合echarts ol-echarts (基于ol-echarts实现)
• 风场 ol-wind （基于ol-wind实现）
• 轨迹动画 ol-path
• 交互类 interaction
  • 绘制 ol-draw
  • 测量 ol-measure
  • 拖拽旋转和缩放 ol-drag-rotate-and-zoom
• 兴趣点/面 ol-pin

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

• tile组件tile-type移除部分类型，具体支持类型查看(文档待补充...)。
• 图形图层组件

示例

安装

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>

配置

全局配置

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

const app = createApp(App)

app.use(VOlMap, {
 tdt: {
    ak: "88e2f1d5ab64a7477a7361edd6b5f68a", // 天地图ak
  },
});

使用组件

<script setup lang="ts">
const config = {
   ak: "316cf152e80bd8a121b23746a5803c8b",
};
</script>

<template>
   <ol-config :tdt="config">
      <ol-map target="map1" class="map" width="50%">
        <ol-tile tile-type="TDT"></ol-tile>
      </ol-map>
    </ol-config>
</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,
}
</script>

<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没有生效。