[TOC]
基于openlayers5的封装
默认传入和返回的经纬度都是EPSG:4326坐标体系,如使用其他的坐标系需要经过转换。地图内部使用的EPSG:3857坐标系。
- 浏览器直接引入dist目录下index.js
- npm 安装
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
})
- 初始化地图
- 返回map实例
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' 高德影像图 |
- 支持添加多个,type为切换地图类型时使用
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 |
---|---|
谷歌 | |
gaode | 高德 |
olmaps.zoomIn()
olmaps.zoomOut()
olmaps.zoomTo(15)
const dis = olmaps.getCoordinateLength([
["116.39786526", "39.92421163"],
["116.39593675", "39.92629634"]
])
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 | 点位标识 |
// 入参
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"]
- 特别注意这里需要传入data的数组格式
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 | 唯一标识 |
- 绘制一组实时显示距离的点线集合
- 返回id集合用于删除该组数据
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"
]
- 所有增加的覆盖物都可通过此方法单独删除
- ids为标识集合(只删除一个也传list)
olmaps.removeFeature([
'81f2e09f-ce04-42ac-92f1-98c3d51cc585'
'81f2e09f-ce04-42ac-92f1-98c3d51cc586'
])
- 清除map中所有覆盖物
olmaps.clear()
- 返回移动后的地图中心点坐标
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"
}
返回map实例,map上的其他操作参考openlayers的官方API
olmaps.addLayer()
olmaps.getAllFeatures()
olmaps.transformLonLat()
olmaps.transProj()
olmaps.addLayer(olmaps, features)
olmaps.getAllFeatures(olmaps.map)
4326转换成3857 olmaps.transformLonLat([116.39786526, 39.924211629999974])
olmaps.transProj(lonLatArr, oldproj='EPSG:3857', newproj='EPSG:4326')