智能轮挡项目所用 openlayer api 说明

未分类

安装依赖

npm install ol -S 或
cnpm innstall ol -S
// 所用版本 v4.6.5

ol/map

import Map from 'ol/map'
地图类
this.map = new Map({
    target: "map",  // id选择器
    layers: [   // 图层数组,来自ol/layer下的实例
      this.cycleOsmLayer,
      this.routeLayer
    ],
    view: this.view, // 视图
})
// methods
this.map.setCenter(center) // 设置地图中心点
this.map.addLayer(this.defaultOsmLayer) // 添加图层
this.map.removeLayer(this.defaultOsmLayer) // 移除图层
this.map.addControl(this.scaleLineControl) // 添加控件
this.map.getControls() // 获取所有控件
this.map.removeControl(control) // 移除控件
this.map.addOverlay(sparklePoint) // 添加覆盖物 
this.map.getOverlayById(id) // 通过id获取覆盖物
this.map.removeOverlay(sparklePoint) // 移除覆盖物
this.map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
}, {hitTolerance: 2}) // 循环指定位置的图形与图层,一般配合事件使用,hitTolerance 点击偏差覆盖范围
// events
this.map.on("click", function(evt){})

http://openlayers.org/en/v4.6.5/apidoc/ol.Map.html

ol/view

import View from "ol/view"
视图类
this.view = new View({
    center: this.center, // 地图中心点
    zoom: this.zoom, // 初始缩放比例
    maxZoom: 21, // 最大缩放
    minZoom: 4, // 最小缩放
    // projection: "EPSG:4326", // 地图坐标类型
})
// methods
this.view.setZoom(this.nowZoom) // 设置视图缩放
this.view.getZoom() // 获取当前视图缩放
this.view.animate({
   center: [108.7610005,34.4365652],
   zoom: 18,
   duration: 2000,
}) // 移动视图
// events
this.view.on("change:resolution", evt => {}) // 缩放视图事件

http://openlayers.org/en/v4.6.5/apidoc/ol.View.html

ol/layer/tile

import Tile from "ol/layer/tile"
瓦片图层类
this.defaultOsmLayer = new Tile({
    source: new OSM(), // 远程瓦片地图
    zIndex: 0, // 图层层级
})

http://openlayers.org/en/v4.6.5/apidoc/ol.layer.Tile.html

ol/source/osm

import OSM from "ol/source/osm"
公共路网图类
new OSM({url: 'https://{a-c}.tile.thunderforest.com/transport/{z}/{x}/{y}@2x.png?apikey=6170aad10dfd42a38d4d8c709a536f38'})

http://openlayers.org/en/v4.6.5/apidoc/ol.source.OSM.html

ol/source/xyz

import XYZ from "ol/source/xyz"
XYZ图类
let gaodeSatelMapLayer = new Tile({
    source: new XYZ({
      url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&sty             le=6&x={x}&y={y}&z={z}",
    }),
 })

http://openlayers.org/en/v4.6.5/apidoc/ol.source.XYZ.html

ol/layer/vector

import LVector from 'ol/layer/vector'
自定义矢量图层类
this.pointLayer = new LVector({
    source: this.pointSource,
    zIndex: 8,
})

http://openlayers.org/en/v4.6.5/apidoc/ol.layer.Vector.html

ol/source/vector

import SVector from 'ol/source/vector'
自定义矢量资源类
this.pointSource = new SVector({
    features: this.pointMarkers
})
// methods
this.pointSource.clear() // 清空资源内的图形
this.pointSource.addFeatures(this.pointMarkers) // 添加图形到资源

http://openlayers.org/en/v4.6.5/apidoc/ol.source.Vector.html

ol/feature

import Feature from 'ol/feature'
自定义图形类
new Feature({
  id: pointItem.id,
  status: pointItem.status,
  latLng: pointItem.latLng,
  apronNo: pointItem.apronNo,
  modelNo: pointItem.modelNo,
  name: 'aircraft_point',
  info: pointItem.info,
  geometry: new Point(pointItem.latLng)
})
// methods
item.setStyle(new Style({
  image: this.pinIcon(item.values_.status),
  text: new Text({
    font: 'bold 10px "Open Sans", "Arial Unicode MS", "sans-serif"',
    fill: new Fill({
      color: '#666'
    }),
    text: item.values_.info,
    offsetY: -25,
  })
})) // 设置图形样式

http://openlayers.org/en/v4.6.5/apidoc/ol.Feature.html

ol/style/style

import Style from 'ol/style/style'
样式类

http://openlayers.org/en/v4.6.5/apidoc/ol.style.Style.html

ol/style/text

import Text from 'ol/style/text'
文字样式类

http://openlayers.org/en/v4.6.5/apidoc/ol.style.Text.html

ol/style/fill

import Fill from 'ol/style/fill'
填充样式类

http://openlayers.org/en/v4.6.5/apidoc/ol.style.Fill.html

ol/style/stroke

import Stroke from 'ol/style/stroke'
描边类

http://openlayers.org/en/v4.6.5/apidoc/ol.style.Stroke.html

ol/style/icon

import Icon from "ol/style/icon"
图标样式类
new Icon({
    crossOrigin: "anonymous",
    src: src,   // 图片地址
    rotation: rotation, // 旋转角度
    scale: scale, // 缩放比例
    anchor: anchor, // 锚点
 })

http://openlayers.org/en/v4.6.5/apidoc/ol.style.Icon.html

ol/geom/point

import Point from 'ol/geom/point'
点类
new Point(pointItem.latLng)

http://openlayers.org/en/v4.6.5/apidoc/ol.geom.Point.html

ol/geom/linestring

import LineString from 'ol/geom/linestring'
线类
new LineString([0,0])
// methods
this.gpsRouteLine.setCoordinates(path)

http://openlayers.org/en/v4.6.5/apidoc/ol.geom.LineString.html

ol/geom/polygon

import Polygon from 'ol/geom/polygon'
多边形类
new Polygon([railArr])

http://openlayers.org/en/v4.6.5/apidoc/ol.geom.Polygon.html

ol/proj

import proj from 'ol/proj'
工具类
proj.fromLonLat(coordinate, opt_projection) // 将EPSG:4326坐标转为EPSG:3857坐标
proj.transform(info.latLng, 'EPSG:3857', 'EPSG:4326') // 将EPSG:3857坐标转为EPSG:4326坐标

http://openlayers.org/en/v4.6.5/apidoc/ol.proj.html

ol/overlay

import Overlay from 'ol/overlay'
覆盖物类
var point_div = document.createElement('div')
point_div.className="css_animation"
var point_overlay = new Overlay({
    id: id, // 覆盖物id
    position: coordinate, // 坐标位置  
    element: point_div,  // 覆盖物元素
    positioning: 'center-center', // 覆盖物锚点
    stopEvent: false,  // 是否阻止事件传递
})