地图

openalyers

更新日志

使用方法

npm i @cowave-cli/map

  // vite.config.ts
  ...
  autoComponent({
    resolvers: [MapResolver(), ...], // 自动导入 ElementPlus 等组件
    dirs: ['src/components/base'],
    dts: 'src/auto-component.d.ts' // 创建TS
  })
  ...

const map = ref()

<c-ol ref="map" :xyz="['/tile?x={x}&y={y}&z={z}']"></c-ol>

属性

| 属性名 | 类型 | 描述 | 默认值 | | ------------- | --------------- | ---------------------------------------- | --------- | | xyz | array | 瓦片图层 XYZ 地址 | [ ] | | option | number | new Map(其他属性 option) | {} | | copyright | boolean | 是否显示版权信息 | true | | center | [number,number] | 中心点坐标（双向绑定） | [105, 38] | | zoom | number | 缩放比例 （双向绑定） | 4 | | mousePosition | [number,number] | 配合 mousemove 事件-鼠标坐标（双向绑定） | |

方法

| 方法名称 | 参数 | 返回值 | 说明 | | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | --------------------- | | getMap | | Map | 获取地图实例 | | getZoom | | number | 获取地图缩放级别 | | getCenter | | [number, number] | 获取地图中心点坐标 | | change | { 经度 longitude, 纬度 latitude, 动画时长 duration, 缩放比例 zoom } | | 设置地图中心点和缩放 | | addTileLayer | urls:string | string[] | | 添加矢量图层 | | removeTileLayer | urls:string | string[] | | 根据 url 删除矢量图层 | | addOverlay | (element: HTMLElement, opt?: any) | Overlay | 添加弹框 | | clearOverlay | | | 清除所有标注 | | createGeoJson | originalData: OriginalData 源数据, type: Graph, key?: 标识 | GeoJson | 生成 geojson 数据 | | loadCluster | 数据 geojson: GeoJson, 样式 style: (feature?: any) => Style, layer 属性 layerOpt?: { name?: string, zIndex?: number, [props: string]: any } | BaseLayer | 加载聚合图层 | | loadGeoJson | 数据 geojson: GeoJson, 样式 style: (feature?: any) => Style, layer 属性 layerOpt?: { name?: string, zIndex?: number, [props: string]: any } | BaseLayer | 加载 geojson 图层 | | removeLayer | | | 清除图层 |

| 类型 | 说明 | | ------------ | ----------------------------------------------------------------------- | | OriginalData | 源数据类型 | | GeoJson | geojson 数据类型 | | Graph | geojson 图层类型 'Point' | 'LineString' | 'MultiPolygon' | 'Polygon' |

// GeoJson
interface GeoJson {
  type: string;
  crs: any;
  features: any;
}
// OriginalData
interface OriginalData {
  coordinates: any;
  [propName: string]: any;
}
// eg
// Point
const points = [
  { name: '1', no: '234890', coordinates: [116, 32] },
  { name: '1', no: '234890', coordinates: [129, 32] },
]
// LineString
const lines = [
  {
    name: '路线',
    coordinates: [
      [116, 32],
      [129, 32],
    ],
  },
]
// Polygon
const polygon = [
  {
    name: '区域',
    coordinates: [
      [
        [116, 32],
        [132, 55],
        [129, 32],
      ],
    ],
  },
]
// MultiPolygon
const multiPolygon = [
  {
    name: '区域',
    coordinates: [
      [
        [
          [116, 32],
          [132, 55],
          [129, 32],
        ],
      ],
      [
        [
          [55, 32],
          [44, 55],
          [33, 32],
        ],
      ],
    ],
  },
]

事件

| 事件名 | 参数 | 说明 | | --------- | --------------------------------------------------- | ----------------------- | | init | | 初始化地图后的 callback | | click | features, e: {pixel, coordinate,...} | 点击地图时触发 | | mousemove | features, e: {pixel, coordinate,...}, mousePosition | 移动鼠标时触发 |