# olmaps **Repository Path**: leigy/olmaps ## Basic Information - **Project Name**: olmaps - **Description**: olmap based on openlayers，基于ol5封装，可切换谷歌和高德地图，可用于vue开发环境 - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-07-10 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README README

Olmaps API

基于openlayers5的封装

默认传入和返回的经纬度都是EPSG:4326坐标体系，如使用其他的坐标系需要经过转换。地图内部使用的EPSG:3857坐标系。

使用

npm install olmaps --save

<div id="map" style="width: 500px;height: 500px"></div>

import Olmaps from 'olmaps'

const olmaps =new Olmaps()
olmaps.getZoom()
olmaps.addCircle({
  center: [116.39786526, 39.92421163],
  radius: 100
})

1.基本操作

初始化
const olmaps =new Olmaps({
  target: 'map'
  center: [116.39786526, 39.92421163],
  zoom: 16 ,
  minZoom: 10,
  maxZoom: 20
})
variable description default
target dom元素的id map
center 初始化地图中心点坐标 无
zoom 地图初始化层级 16
minZoom 最小缩放层级 10
maxZoom 最大缩放层级 20
mapSrc 自定义图层 []
设置地图中心点
olmaps.setMapCenter([116.39786526, 39.92421163])
切换地图类型
olmaps.setMapType('0')
variable description
type '0' 谷歌行政图 '1' 谷歌影像图 '2' 高德行政图 '3' 高德影像图
支持自定义图层
const olmaps = new Olmaps({
  zoom: 15,
  mapSrc: [
    {
      name: '高德道路地图', // 名称
      src: 'http://mt1.google.cn/vt/lyrs=h@298&hl=zh-CN&gl=cn&scale=1&z={z}&y={y}&x={x}',// 地址
      visible: true, // 是否显示
      id: '66' // 类型id 必须唯一
    }
  ]
})
获取当前缩放层级
const zoom = olmaps.getZoom()
variable description
zoom 缩放层级
获取当前中心点坐标
const center = olmaps.getCenter()
// 出参
[116.39786526, 39.92421163]
获取请求地址
const resultUrl = olmaps.getRequestUrl(callback)
variable description
google 谷歌
gaode 高德
放大一个层级
olmaps.zoomIn()
缩小一个层级
olmaps.zoomOut()
设置层级大小
olmaps.zoomTo(15)
获取2个经纬度直接的直线距离
const dis = olmaps.getCoordinateLength([
  ["116.39786526", "39.92421163"],
  ["116.39593675", "39.92629634"]
])

2.绘制覆盖物

绘制点标记 
const markerInfo = olmaps.addMarker([
  {
    "latitude":"39.92421163",
    "longitude":"116.39786526",
    "name":"单杆-1",
    "type": "",
    "drag": true
  },
  {
    "latitude":"39.92629634",
    "longitude":"116.39593675",
    "name":"单杆-10",
    "type": ""
  }
])

// markerInfo
{
  "latitude":"28.174730774025367",
  "longitude":"112.9790183901787",
  "name":"单杆-10", 
  "type": "",
  olId: 'uuid'
}
variable description default
latitude 纬度
longitude 经度
name 点位名称
type 点位类型
drag true可拖拽 false不可拖拽 false
olId 点位标识
画线：实线和虚线用type做区分
// 入参
const info = olmaps.addLine([
  {
    "data":[
      ["116.39786526","39.92421163"],
      ["116.39593675","39.92629634"]
    ],
    "color":"green",
    "textColor":"green",
    "showDistance":true,
    "type": "dash"
  },
  {
    "data":[
      ["116.39593675","39.92629634"],
      ["116.39670252","39.92647015"]
    ],
    "color":"red",
    "textColor":"green",
    "showDistance":false,
    "type": "line"
  },
  {
    "data":[
      ["116.39670252","39.92647015"],
      ["116.39473110","39.92293218"]
    ],
    "color":"green",
    "textColor":"red",
    "showDistance":true,
    "type": "line"
  }
])


// result -> info
[
  {
    "data":[
      ["116.39786526","39.92421163"],
      ["116.39593675","39.92629634"]
    ],
    "color":"green",
    "textColor":"green",
    "showDistance":true,
    "type": "dash",
    "olId": "d1afa649-6b73-4fad-ab49-801e256da11b"
  },
  {
    "data":[
      ["116.39593675","39.92629634"],
      ["116.39670252","39.92647015"]
    ],
    "color":"red",
    "textColor":"green",
    "showDistance":false,
    "type": "line",
    "olId": "d1afa649-6b73-4fad-ab49-801e256da11b"
  },
  {
    "data":[
      ["116.39670252","39.92647015"],
      ["116.39473110","39.92293218"]
    ],
    "color":"green",
    "textColor":"red",
    "showDistance":true,
    "type": "line",
    "olId": "d1afa649-6b73-4fad-ab49-801e256da11b"
  }
]
variable type description default
data Array 经纬度数组集合 无
type String line 实线 dash 虚线 line
color 16进制 / rgba 线条颜色 red
textColor 16进制 / rgba 距离的字体颜色 green
showDistance Boolean 是否显示距离 true
olId String 点位标识
绘制圆形
const info = olmaps.addCircle({
  center: [116.39786526, 39.92421163],
  radius: 100
})

// return -> info
["689dc349-2bfa-4eed-8173-82cc2c76cacb"]
variable type description
center Array 中心点经度纬度
radius String 圆的半径（单位米）
绘制多边形 
const info = olmaps.addPolygon([
  ["116.39786526","39.92421163"],
  ["116.39593675","39.92629634"],
  ["116.39670252","39.92647015"],
  ["116.39473110","39.92293218"]
])

// return
["689dc349-2bfa-4eed-8173-82cc2c76cacb"]
描点（描边） 
const info = olmaps.addMultiPolygon({
  data: [
    [
      ["116.39786526","39.92421163"],
      ["116.39593675","39.92629634"],
      ["116.39670252","39.92647015"],
      ["116.39473110","39.92293218"]
    ]
  ],
  name: '',
  id: ''
})
opts type description
data Array 经纬度集合
name String
id String 唯一标识
点线集合
const info = olmaps.calculateGroup({
  "data":[
    ["116.39786526","39.92421163"],
    ["116.39593675","39.92629634"]
  ],
  "color":"green",
  "textColor":"red",
  "showDistance":true,
  "type": "dash"
})

// return
[
  "addf8144-ce43-4143-9dfc-02ff85d2e920-startDI", 
  "addf8144-ce43-4143-9dfc-02ff85d2e920-endDI", 
  "addf8144-ce43-4143-9dfc-02ff85d2e920-lineDI"
]

3.删除操作

删除单个或多个覆盖物
olmaps.removeFeature([
  '81f2e09f-ce04-42ac-92f1-98c3d51cc585'
  '81f2e09f-ce04-42ac-92f1-98c3d51cc586'
])


olmaps.clear()

4.事件监听

地图移动的监听
olmaps.on('change', function(result) {
})
// result
{
  center: [116.3945817898568, 39.89847346897744],
  zoom: 16
}
标记拖动回调
olmaps.on('markerDrag', function(result) {
})
// result
{
  "oldCoordinates":[116.39786526,39.92421163],
  "coordinates":[116.39917417799927,39.92202294744385],
  "olId":"68b22fa0-34cd-49bb-8083-a0a36543fa77"
}
variable description
coordinates 返回拖动后坐标
oldCoordinates 拖动前坐标
olId 被拖动点位标识
标记点击回调
olmaps.on('markerClick', function(result) {
})
// result
{
  "coordinates":[116.39786526,39.92421163],
  "olId":"68b22fa0-34cd-49bb-8083-a0a36543fa77"
}
标记长按回调
olmaps.on('markerLongClick', function(result) {
})
// result
{
  "coordinates":[116.39786526,39.92421163],
  "olId":"68b22fa0-34cd-49bb-8083-a0a36543fa77"
}
olmaps.map

返回map实例，map上的其他操作参考openlayers的官方API

5.工具方法

olmaps.addLayer()
olmaps.getAllFeatures()
olmaps.transformLonLat()
olmaps.transProj()

添加图层

olmaps.addLayer(olmaps, features)

获取map所有覆盖物

olmaps.getAllFeatures(olmaps.map)

转换经纬度到默认坐标系

4326转换成3857
olmaps.transformLonLat([116.39786526, 39.924211629999974])

坐标系互转

olmaps.transProj(lonLatArr, oldproj='EPSG:3857', newproj='EPSG:4326')