Openlayers 常见API

一、创建地图

1、地图Map

创建地图底图：需要用new Ol.map({})
地图map是由图层layers、一个可视化视图view、用于修改地图内容的交互interaction以及使用UI组件的控件control组成的

(1).创建基本地图

let map = new ol.Map({
    target: 'map',//对象指向
    layers: [//图层
      new ol.layer.Tile({//这里定义的是平铺图层
        source: new ol.source.OSM()//图层源 定义图层映射协议
      })
    ],
    view: new ol.View({//视图
      center: ol.proj.fromLonLat([37.41, 8.82]),//地图中心
      zoom: 4//缩放层级
    })
  });

(2).属性选项

new ol.Map({
    target: 'map',//对象映射：要将`map`对象附加到div，` map`对象将`target`作为参数，值是`div`的`id`
    layers: [//图层
      new ol.layer.Tile({//这里定义的是平铺图层
        source: new ol.source.OSM()//图层源 定义图层映射协议
      })
    ],
    view: new ol.View({//视图
      center: ol.proj.fromLonLat([37.41, 8.82]),//地图中心
      zoom: 4//缩放层级
    }),
    controls:[//最初添加到映射中的控件  如未设置 使用默认控件
        new ol.control.Control({
            element:,//元素是控件的容器元素(DOM)。只有在开发自定义控件时才需要指定这一点
            render: ,//控件重新呈现时调用的函数
            target: //如果想在映射的视图端口之外呈现控件，指定目标
        })
    ],
    interactions:[//最初添加到映射中的交互 如未设置 使用默认交互
        new ol.interaction.Interaction({
            handleEvent
        })
    ],
    overlays:[
        new ol.Overlay()
    ],
    maxTilesLoading:16,//同时加载的最大瓷砖数 默认16
    loadTilesWhileAnimating:false,//
    loadTilesWhileInteracting:false,//   
    moveTolerance:1,//光标必须移动的最小距离(以像素为单位)才能被检测为map move事件，而不是单击。增加这个值可以使单击地图变得更容易
    pixelRatio:window.devicePixelRatio,//
    keyboardEventTarget:,//要监听键盘事件的元素
})

(3).地图事件

1、click 无拖动单击
2、dbclick 无拖动双击
3、moveend 移动地图结束时
4、movestart 移动地图开始时
5、 pointerdrag 当拖动指针时触发
6、 pointermove 当指针移动时触发。
7、propertychange 当属性被更改时触发
8、rendercomplete 渲染完成时触发，即当前视图的所有源和title，所有title都将淡出。
9、change 对象版本号变化时会触发

(4).地图方法

1、addControl(control)/removeControl：将给定的控件添加（移除）到地图上
2、addInteraction（interaction）/removeInteraction 将给定的交互添加（移除）到地图上
3、addLayer(layer)/removeLayer 将给定图层添加（移除）到地图上
4、addOverlay(overlay)/removeOverlay ：将给定的叠加图层添加到（移除）到地图上（删除或者添加指定的覆盖物）
5、forEachFeatureAtPixel(pixel,callback,option) :（通常用于处理用户与地图交互时的事件，如鼠标点击、悬停等）用于在指定像素位置上遍历地图上的要素并执行相应的操作。
6、getControls() :获取地图控件
7、getPixelFromCoordinate(event)/getCoordinateFromPixel(pixel):通过坐标获取像素位置/ 通过像素位置获取坐标
8、getLayerGroup/setLayerGroup(layerGroup)获取与此地图关联的图层组/设置与此地图关联的图层组
9、getLayers()获取与此地图关联的图层的集合
10、getOverlayById(id) 通过其标识符获取覆盖(overlay. getId()返回的值)。注意，索引将字符串和数字标识符视为相同的。getoverlaybyid(2)将返回id为2或2的叠加层
11、getOverlays() 获取地图叠加层。
12、getSize/setSize(size)（）获取/设置地图的尺寸
13、getTarget（）获取目标元素，获取渲染此地图的 DOM 元素。与此相反， 如果地图没有目标，则getTarget始终返回Element, 或。null。
14、setTartget(target)设置要将地图呈现的目标元素
15、getTargetElement 获取呈现此映射的DOM元素，这个方法总是返回一个元素，如果映射没有目标，则返回null
16、getView/setView(view) 获取（设置）地图视图，视图管理中心和分辨率等
17、getViewport()获取作为map视图端口的元素
18、hasFeatureAtPixel(pixel,option):获取鼠标光标处是否有要素信息
19、on 用于给地图添加事件
20、once添加只执行一次的时间
21、set 设置键值对；unset删除设置的键值对属性
22、updateSize 更新地图的尺寸

2、图层layers

定义图层：地图图层layers:[] 组定义映射中可用的图层组，用来盛放地图上的各种元素，其在地图上的显示顺序是按照数组中的元素从下到上呈现的，可以直接在创建地图时定义图层，多个图层的时候可以单独定义。

//这里定义的是图层类型
const layer=new VectorLayer({
	source:vectorSource,//矢量图层源 （必须）
	style:[],//图层样式（必须）
	feature:[],//图层元素（必须）
})

1、添加/删除指定图层：map.addLayer/removeLayer(layer)
2、图层是轻量级容器从 数据源source获取数据
3、source子类分别对应不同图层类：

• ol.source.ImageSource()
• ol.source.TileSource()
• ol.source.VectorSource()

Source主要有以下属性：

new Ol.si=ource.VectorSource({
	attributions:,//
    attributionsCollapsible:,//布尔值  默认为true 
    projection:,//投影系
    state:'ready',//默认为'ready'
    wrapX:false,//默认为false
})

ol.layer.Tile()和ol.layer.Image()图层都具有相同的属性如下

new ol.layer.Tile/Image({
	opacity:.2,//透明度 区间范围为（0,1）默认为1
	visible:true,
	extent:[],//图层范围的边界范围
	zIndex:2,//图层渲染的层级
	minResolution:1,//最小分辨率
	maxResolution:6, //最大分辨率
	reload:0, //预加载
	source:new ol.source.TileSource()/ImageSource()//图层源,
	map:  ,//把图层覆盖在地图上，地图不会在它的图层集合中管理这个图层，这个图层将被呈现在顶部，这对于临时层非常有用。
})

1. ol.layer.Tile() 平铺图层
2. ol.layer.image() 图像图层
3. 矢量图层

new ol.layer.Vector({//以下为图层的属性选项， 都可设置，所以皆有getter/setter
	opacity:2,//透明度 区间范围为(0, 1) 默认为1
    visible:true,//显示属性 布尔值 默认为true
    extent:[],//图层渲染的边界范围。该层将不会在此范围之外呈现
    zIndex:2,//图层渲染的索引层级。在渲染时，图层将被排序，首先是z-idnex，然后是位置，当为undefined时，对于添加到映射的layers集合中的层，zIndex为0，或者当使用该层的setMap()方法时，zIndex为无穷大
    minResolution:3,//该层可见的最小分辨率(包括在内)
    maxResolution:6,//该层可见的最大分辨率（包括在内）
    renderOrder:,//呈现顺序。函数用于在呈现前对特性进行排序。默认情况下，特性是按照创建它们的顺序绘制的。使用null来避免排序，但是得到一个未定义的绘制顺序
    renderBuffer:100,//默认为100 缓冲区
    renderMode:'vector',//默认为'vector' 矢量图层的渲染模式
    source:new ol.source.VectorSource(),//图层源
    map:  ,//把图层覆盖在地图上，地图不会在它的图层集合中管理这个图层，这个图层将被呈现在顶部，这对于临时层非常有用
    declutter:false,//默认为false 整理图片和文字。清理应用于所有图像和文本样式，优先级由样式的z-index定义。z-index指数越低，优先级越高
    style:new ol.style.Style(),//图层样式
    updateWhileAnimating:false,//默认为false 
    updateWhileInteracting:false,//默认为false
})

其中渲染模式有两种:
image : 矢量图层被渲染为图像，性能很好，但是点符号和文本总是随着视图的旋转 动画中会被缩放。
vector:矢量图层为呈现为向量，即使在动画中也能精准的渲染，性能较慢。

Feature

Feature 用于地理特征的矢量元素，具有几何geometry和其他属性，类似于矢量文件格式(如GeoJSON)中的特性。
1、添加矢量元素：addFeature(feature)
2、移除矢量图层 clear()

const feature=new ol.Feature({
	geometry: new ol.geom.Polygon(polyCoords),
	labelPoint:new ol.geom.Point(labelCoords),
	style:new ol.style.Style({}),
	name: ‘My Polygon’
})

3、一个feature只有一个默认几何属性geometry，可以有任意数量的命名集合图形：

• 获取默认几何属性： feature.getGeometry()

• 设置几何属性：feature.setGeometry(geometry)

• 设置几何属性名：feature.setGeometryName(name)

• 矢量元素要呈现的几何图形的特征属性、几何图形或函数由geometry属性选项设定，主要有以下几种子类模型：
  1、ol.geom.Circle():圆形
  2、ol.geom.Geometry() 几何图形
  3、ol.geom.LinearRing 环线
  4、ol.geom.LineString 线段

• feature的稳定标志符ID:
  设置feature的ID：
  feature.setId(id)；
  当id可能相同时，可以加以区分：feature.setId(id+''featureName");
  获取的featureID:
  vector.getSource().getFeatureById()/vectorsource.getFeatureById()

• feature的set(key,value,option)
  设置key: feature.set(“keyName”,name) keyName是字符串
  获取key: feature.get(“keyName”)

Style

矢量特征呈现样式的容器。在重新呈现使用样式的特性或图层之前，通过set*()方法对样式及其子元素所做的任何更改都不会生效。

new ol.style.Style({
	geometry:new geom.LineString(),
	fill:new style.Fill({
		//填充样式
		color:color
	}),
	image:new style.Image({
		 opacity:,//数值
        rotateWithView:,//布尔值
        rotation:,//数值
        scale:
	}),
	image:new style.Icon({//可以使用图片资源
		anchor:[0.5，0.5]，//锚。默认值是图标中心 默认值是[0.5,0.5]
        anchorOrigin:'top-left',//锚的原点:左下角、右下角、左上方或右上方。默认是左上
        anchorXUnits:'fraction',//指定锚点x值的单位。'fraction'的值表示x值是图标的'fraction'。'pixels'的值表示像素中的x值,默认为'fraction'
        anchorYUnits:'fraction',//指定锚点y值的单位。'fraction'的值表示y值是图标的'fraction'。'pixels'的值表示像素中的y值,默认为'fraction'
        color:color,//颜色、渐变或图案
        crossOrigin:,
        img:,//图标的图像对象  如果没有提供src选项，则必须已经加载了提供的图像
        imgSize:,//
        offset:[0,0].//偏移值，默认为[0,0]
        offsetOrigin:'top-left',//偏移量的原点，bottom-left, bottom-right, top-left or top-right. 默认是`top-left`
        opacity:1,//默认是1  （0，1）
        scale:1,//默认是1
        rotation：0，//以弧度旋转(顺时针方向正旋转) 默认为0
        size：,//图标大小(以像素为单位)。可与偏移量一起用于定义要从原点(sprite)图标图像使用的子矩形
        src:'',//图像URL源
        rotateWithView：false,//是否旋转视图中的图标  默认为false 
	}),
	stroke:new ol.style.Stroke({
		//描绘
		width:,//宽
		color:color//颜色、渐变或图案
		lineCap:'round',//线帽风格  butt, round, 或者 square 默认 round
        lineJoin:'round',//线连接方式 bevel, round, 或者 miter 默认 round
        lineDash： []，//线间隔模式 这个变化与分辨率有关 默认为undefined Internet Explorer 10和更低版本不支持
        lineDashOffset:0,//线段间隔偏移 默认0
        miterLimit:10,// 默认10
	}),
	text:new ol.style.Text({
		//文字
		 font:'',//默认是'10px sans-serif'
        text:'',//文本内容
        textAlign：'center',//文本对齐 'left', 'right', 'center', 'end' 'start'.针对于placement: 'point',默认为'center'；针对于placement: 'line'，默认是让渲染器选择不超过maxAngle的位置
        textBaseline:'middle',//文本基线  'bottom', 'top', 'middle', 'alphabetic', 'hanging', 'ideographic' 默认'middle'
        placement:'',//文本布置
        scale：，
        padding:[0,0,0,0],//文本周围的像素填充。数组中值的顺序是[top, right, bottom, left]
        fill:new ol.style.Fill(),//如果未设置，默认未#333
        stroke:new ol.style.Stroke(),
        offsetX:0,//水平文本偏移量(以像素为单位)。正值将把文本右移。默认0
        offsetY:0,//垂直文本偏移量(以像素为单位)。正值会将文本向下移动。默认0
        rotation：0，//默认0
        rotateWithView:false,
        backgroundFill:  ,//当placement:“point”时，填充文本背景的样式。默认为无填充 
        backgroundStroke: ,//当placement:“point”时，描绘文本背景的样式。默认为无描绘
	})
})

ol.geom.Geomtry()

方法 ： 

1、getProperties()获取一个包含所有属性名和值的对象
2、getClosestPoint(point,option) 将几何图形的最近点作为坐标返回到经过的点。
3、getExtent() 获取几何的范围
4、getKeys()获取几何的属性名称列表
5、intersectsCoordinate(coordunate) 判断该集合是否包含指定的坐标 返回true 或者false

ol.geom.Circle()

方法 ：
1、getCenter()返回中心坐标
2、applyTransform（transformFn） 对几何图形的每个坐标应用一个变换函数，在适当的位置修改几何图形。不想修改的时候需要克隆一个，再用此函数。
3、getFirstCoordinate（）返回几何图形的第一个坐标
4、getLastCoordinate()返回几何图形的最后一个坐标
5、setCenter(center) 将圆心设置为 coordinate
6、setCenterAndRadius(center,radius,option) 设置圆的中心(coordinate)和半径（number）

ol.geom.LineString(coordinates, opt_layout)

new ol.geom.lineString({
	coordinates:[],//坐标，
	layout:layout
})

方法：

1、appendCoordinate(coordinate) 将经过的坐标追加到linestring的坐标里
2、applyTransform(transformFn)
对几何图形的每个坐标应用一个变换函数。在适当的位置修改几何图形。如果不想修改几何图形，请首先clone()它，然后在克隆上使用此函数
3、forEachSegment(callback)遍历每条线段，调用提供的回调函数，如果回调函数返回一个真值，则函数立即返回该值。否则函数返回false
4、getCoordinates/setCoordinates()返回线段的坐标/设置线段的坐标
5、getLastCoordinate()返回几何图形的第一个坐标

ol.geom.Point(coordinates, opt_layout)

new ol.geom.Point

方法
1、applyTransform(transformFn)
对几何图形的每个坐标应用一个变换函数。在适当的位置修改几何图形。如果不想修改几何图形，请首先clone()它，然后在克隆上使用此函数
2、getCoordinates()返回点的坐标
3、setCoordinates(coordinates, opt_layout)设置点的坐标
4、getFirstCoordinate()返回几何图形的第一个坐标
5、getLastCoordinate()返回几何图形的最后一个坐标
6、getLayout()返回几何图形的Layout
7、getType()得到这个几何图形的类型

3、视图View

设置视图View由三种状态决定:center中心、resolution分辨率、rotation旋转，每个状态都有相应的 get和set。可以在视图里定义中心点、层级、分辨率、旋转以及地图投影等。

中心点

let center=ol.proj.fromLonLat([longitude, latitude]) //未限制地图范围时
let center=ol.proj.transform([minX, minY, maxX, maxY]，'EPSG:4326', 'EPSG:3857')  //限制地图显示范围时设置中心点， x代表经度，Y代表纬度。

ol.proj.transform([], “EPSG:”, “EPSG:”)是经纬度投影转换
获取中心 map.getView().getCenter()
设置中心 map.getView(),setCenter(center)

投影projection

视图拥有projection投影，投影决定了中心的坐标系，其单位决定了分辨率的单位(每个像素的投影单位)。默认投影为球面墨卡托(EPSG:3857)。
获取投影 map.getView().getProjection()
设置投影： map.getView().setProjection()

分辨率 resolution

视图的初始分辨率，单位是每像素的投影单位(例如米每像素)。另一种方法是设置缩放zoom。缩放可以设置：最大层级maxZoom、最小层级minZoom以及当前层级zoom

let view = new ol.View({
    // center: center,
    zoom: curZoom,
    minZoom: minZoom,
    maxZoom: maxZoom,
});

1、map.getView().getResolution()：获取分辨率
2、map.getView().getResolutionForExtent(extent, opt_size) :获取给定范围(以映射单元为单位)和大小(以像素为单位)的分辨率
3、map.getView().getMaxResolution()/getMinResolution() ： 获取视图最大值/最小值分辨率

交互动作 interaction

通常只用于创建子类，而不在应用程序中实例化。
用于更改映射状态的用户操作。有些类似于控件，但不与DOM元素关联。
虽然交互没有DOM元素，但是它们中的一些会呈现向量，因此在屏幕上是可见的。
添加交互动作使用：map.addInteraction(interaction);

一、可实例化子类：

1、doubleclickzoom interaction双击放大交互功能
2、draganddrop以拖拽文件到地图中的交互添加图层
3、dragbox 用于划定一个矩形范围，常用于放大地图。
4、dragpan 拖拽平移地图
5、draw 绘制地理要素功能
6、interaction defaults默认添加的交互功能
7、select 选择要素功能
8、modify更改要素

二、绘制ol.interaction.Draw()

用于绘制几何图形的交互功能

• feature :绘制的要素的目标集合
• source:绘制的要素的目标图层源
• snapTolerance：自动吸附完成点的像素距离，也就是说当鼠标位置距离闭合点小于该值设置的时候，会自动吸附到闭合点，默认值是 12
• type：绘制的地理要素类型，ol.geom.GeometryType类型，包含 Point、 LineString、 Polygon、MultiPoint、MultiLineString 或者 MultiPolygon
• minPointsPerRing：绘制一个多边形需要的点数最小值，数值类型，默认是 3
• style：要素素描的样式
• geometryName：绘制的地理要素的名称，string类型

修改ol.interaction.Modify()

用于修改矢量元素几何图形的交互功能。
若想修改已添加到存在的矢量源中的矢量元素，需要使用modify选项构建修改交互动作。
如若想修改集合中的矢量元素（比如用选择交互的集合），需要使用features选项构建交互。该交互必须使用source或者features构建。
默认情况下，当按下alt键时，交互允许删除顶点。想要使用不同的删除条件配置交互，请使用deleteCondition选项。

控件Control

控件是一个可见的小部件，其DOM元素位于屏幕上的固定位置。它们可以包含用户输入(按钮)，或者只是提供信息;位置是使用CSS确定的。这是一个虚基类，不负责实例化特定的控件。
默认情况下，这些元素被放置在具有CSS类名称ol-overlaycontainer-stopevent的容器中，但是可以使用任何外部DOM元素。

const myControl=new control.Control({
	element:myElement
})
map.addControl(myControl)

主要的属性选项

1、Element ：DOM元素
2、render：：重新呈现控件时调用的函数。这在requestAnimationFrame回调中调用
3、Target ： DOM元素，想要控件在映射的视图端口之外呈现，需要指定目标对象

控件功能

1、controldefaults() 地图默认包含的控件，包含缩放、旋转等控件
2、fullscreencontrol（）全屏控件
3、mousepositioncontrol()鼠标位置控件，显示鼠标所在地图位置的坐标，可以自定义投影
4、overviewmapcontrol()地图全局视图控件
5、rotatecontrol()地图旋转控件
6、scalelinecontrol()比例尺控件
7、zoomcontrol()缩放控件

叠加层Overlay

要显示在地图上方并附加到单个地图位置的元素。与控件不同的是，他们不在屏幕上固定的位置，而是绑定在地理坐标上，因此平移或者拖动将移动Overlay，而不是控件

	<div id="map">
    <div id="popup">
        
    </div>
</div>
let popup = new ol.Overlay({
    element:document.getElementById('popup'),
    ...
});
popup.setPosition(coordinate);
map.addOverlay(popup);

Overlay选项

1、id:设置Overlay的Id
获取 id ： map.getOverlayById(id)/Overlay.getId()
2、Element ： Overlay元素，DOM元素
获取和设置： Overlay.getElement()/setElement(element)
3、offset 偏移量 ： 偏移量(以像素为单位)，用于定位 overlay ，数组类型，默认为[0, 0]
获取和设置： overlay.getOffset()/overlay.setOffset(offset)
4、position：地图投影中的位置
获取： Overlay.getPosition()
设置： Overlay.setPosition(position)