olmaps v1.2.3

Olmaps API

基于 openlayers5 的封装

默认传入和返回的经纬度都是 EPSG:4326 坐标体系，如使用其他的坐标系需要经过转换，地图内部使用的 EPSG:3857 坐标系。代码中所有瓦片数据均来源于网络，仅用做学习之用，如有侵权可联系 44021987@qq.com 删除，谢谢！

1、使用

• 浏览器直接引入 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()
console.log(olmaps.getZoom())

const olmaps =new Olmaps({
  target: 'map'
  center: [116.39786526, 39.92421163],
  zoom: 16 ,
  minZoom: 10,
  maxZoom: 20,
  // 自定义图层，根据唯一标识id切换，id不可重复
  mapSrc: [
    {
      name: '谷歌地图',
      src: `http://mt0.google.cn/vt/lyrs=m@298&hl=zh-CN&gl=cn&scale=${scale}&z={z}&y={y}&x={x}`,
      visible: true,
      id: '0' // 唯一标识
    }
  ]
})

2、api

setMapCenter

设置地图中心点

olmaps.setMapCenter([116.39786526, 39.92421163])

setMapType

切换地图类型

• 默认支持以下四种类型地图

olmaps.setMapType('0')

添加自定义图层

• 支持添加多个，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 必须唯一
    },
  ],
})

getZoom

获取当前缩放层级

const zoom = olmaps.getZoom()

getCenter

获取当前中心点坐标

const center = olmaps.getCenter()
// 出参
[116.39786526, 39.92421163]

获取请求地址

const resultUrl = olmaps.getRequestUrl(callback)

zoomIn

放大一个层级

olmaps.zoomIn()

zoomOut

缩小一个层级

olmaps.zoomOut()

zoomTo

设置层级大小

olmaps.zoomTo(15)

getCoordinateLength

获取 2 个经纬度之间的直线距离

const dis = olmaps.getCoordinateLength([
  ["116.39786526", "39.92421163"],
  ["116.39593675", "39.92629634"]
])

transformLonLat

4326 坐标系转 3857

const res = transformLonLat([116.39786526, 39.92421163])

transProj

坐标系互转，默认从 3857 转 4326

const res = transProj(
  lonLatArr,
  (oldproj = 'EPSG:3857'),
  (newproj = 'EPSG:4326')
)

addLayer

添加 layer

getZoomWidthDis

传入一个距离，获取视野范围内最适合的层级

mapExtent

获取视野范围 4 个角的经纬度

addMarker 绘制点标记

@demo

const markerInfo = olmaps.addMarker([
  {
    "latitude":"39.92421163",
    "longitude":"116.39786526",
    "name":"单杆-1",
    "type": "",
    "drag": true,
    id: '1'
  },
  {
    "latitude":"39.92629634",
    "longitude":"116.39593675",
    "name":"单杆-10",
    "type": "",
    id: '2'
  }
])

@params

@params {Array} 需要添加的点位集合

@returns

@returns {Array} ids 返回唯一标识id集合

addLine 绘制线集合

@demo

// 入参
const info = olmaps.addLine([
  {
    data: [
        ['116.39593675', '39.92629634'],
        ['116.39670252', '39.92647015']
      ],
      color: '#3300fe',
      textColor: '#3300fe',
      showDistance: true,
      type: 'line',
      name: '///',
      text: {
        offsetY: -7
      },
      icon: [
        {
          coordinate: ['116.39593675', '39.92629634'],
          config: {
            src: 'http://192.168.60.189:8099/images/u20867.png',
            anchor: [-3, 0.5],
            // rotateWithView: true,
            scale: 0.7
          }
        },
        {
          coordinate: ['116.39670252', '39.92647015'],
          config: {
            src: 'http://192.168.60.189:8099/images/u20867.png',,
            anchor: [3, 0.5]
            scale: 0.7
          }
        }
      ]
  },
  {
    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',
  },
])

@params

@returns

@returns {Array} ids 返回唯一标识id集合

addCircle 绘制圆形

一次只绘制一个

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

// @returns {array} ids
["689dc349-2bfa-4eed-8173-82cc2c76cacb"]

addPolygon 绘制多边形

绘制多边形(一次只绘制一个)

@demo

const info = olmaps.addPolygon({
  data: [
    ['116.39786526', '39.92421163'],
    ['116.39593675', '39.92629634'],
    ['116.39670252', '39.92647015'],
    ['116.39473110', '39.92293218'],
  ],
  id: '887777',
  fill: 'yellow',
})

// @returns {array} ids
['689dc349-2bfa-4eed-8173-82cc2c76cacb']

@params

addMultiPolygon 描点（描边）

特别注意这里需要传入 data 的数组格式

@demo

const info = olmaps.addMultiPolygon({
  data: [
    [
      ["116.39786526","39.92421163"],
      ["116.39593675","39.92629634"],
      ["116.39670252","39.92647015"],
      ["116.39473110","39.92293218"]
    ]
  ],
  name: '',
  id: ''
})

// @returns {array} ids
['689dc349-2bfa-4eed-8173-82cc2c76cacb']

@params

点线集合

• 绘制一组实时显示距离的点线集合
• 返回 id 集合用于删除该组数据

removeFeature 删除覆盖物

• 所有增加的覆盖物都可通过此方法单独删除
• ids 为标识集合

olmaps.removeFeature([
  '81f2e09f-ce04-42ac-92f1-98c3d51cc585'
  '81f2e09f-ce04-42ac-92f1-98c3d51cc586'
])

clear 清除 所有覆盖物

olmaps.clear()

getAllFeatures 获取所有覆盖物

olmaps.getAllFeatures()

3、Events

click

this.olmap.on('click', data => {
	console.log('地图被点击了', data)
})
result
{coordinate: Array(2), id: "a41a1590-a659-426f-aa3d-b27b7e09081f", olId: "a41a1590-a659-426f-aa3d-b27b7e09081f", type: "icon"}

change

• 返回移动后的地图中心点坐标

olmaps.on('change', function(result) {
})
// result
{
  center: [116.3945817898568, 39.89847346897744],
  zoom: 16
}

pointermove 鼠标hover事件

markerDrag 标记拖动回调

olmaps.on('markerDrag', function(result) {
})
// result
{
  "oldCoordinates":[116.39786526,39.92421163],
  "coordinates":[116.39917417799927,39.92202294744385],
  "olId":"68b22fa0-34cd-49bb-8083-a0a36543fa77"
}

markerClick 标记点击回调

olmaps.on('markerClick', function(result) {
})
// result
{
  "coordinates":[116.39786526,39.92421163],
  "olId":"68b22fa0-34cd-49bb-8083-a0a36543fa77"
}

markerLongClick 标记长按回调

olmaps.on('markerLongClick', function(result) {
})
// result
{
  "coordinates":[116.39786526,39.92421163],
  "olId":"68b22fa0-34cd-49bb-8083-a0a36543fa77"
}

olmaps.map

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