osm-utils-zhy

一个基于OpenLayers+OpenStreetMap的地图业务封装，开箱即用，支持天地图底图、地理/逆地理编码、关键字搜索、Marker 管理、事件绑定等常用能力。

示例

<template>
  <!-- 地图容器 -->
  <div id="ol-map" class="map"></div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import { useOlMap } from "osm-utils-zhy";
const {
  addMarker,
  clearAll,
  clearSingle,
  onMapEvent,
  geoCodertianditu,
  mapInstance,
  search,
  initMap,
  setCenter,
} = useOlMap({
  target: "ol-map",
  center: [116.397428, 39.90923],
  zoom: 12,
});

onMounted(() => {
  /** 初始化完成，点击标点 */
  initMap().then((res) => {
    const offMove = onMapEvent("click", ([lon, lat], evt) => {
      let feature = addMarker(lon, lat, {
        html: "<h1>text</h1>",
        img: new URL("./marker.png", import.meta.url).href,
      });
    });
    // // 不再需要时,取消监听
    // offMove();
  });
});
</script>

<style scoped>
.map {
  width: 100vw;
  height: 100vh;
}
</style>

useOlMap 的 Props 配置项

| 字段 | 类型 | 默认值 | 说明 | | ------------ | ------------------ | ------------------------ | ------------------ | | target | string | — | 地图容器 DOM id（必填） | | keytk | string | — | 天地图 token（必填） | | center | [number, number] | [108.95, 34.27] | 初始中心 [lon, lat] | | zoom | number | 12 | 初始层级 | | minZoom | number | 3 | 最小层级 | | maxZoom | number | 18 | 最大层级 | | mapUrl | string | — | 自定义瓦片地址，留空自动使用 OSM | | controls | Array | [] | 额外控件实例 | | interactions | Object | {} | 交互行为配置，会与默认配置合并 |

方法介绍

| 名称 | 类型 | 说明 | | ---------------- | ------------------------------------- | ------------------------------- | | mapInstance | Ol/Map | OpenLayers 地图实例（响应式 ref.value） | | initMap | () => Promise<Map> | 初始化/重建地图 | | addMarker | (lng, lat, contain) => Feature | 添加标记；contain: { html?, img? } | | setCenter | (lon, lat, zoom?, animate?) => void | 设置中心；默认带动画 | | onMapEvent | (eventType, handler) => () => void | 监听地图事件；返回卸载函数 | | geoCodertianditu | (GeoQuery) => Promise<GeoResult> | 正/逆地理编码 | | search | (keyword) => Promise<GeoResult[]> | 天地图关键字搜索 | | clearAll | () => void | 清空所有 Marker 及 Overlay | | clearSingle | (feature) => void | 删除单个 Marker |