layer添加元素 openlayer_OpenLayers API整理

整理的Openlayers 的知识笔记，随着运用不断加深理解，也会不断更新。

GitHub：八至

一、创建地图

1、地图Map

创建地图底图：需要用new ol.Map({})

地图map是由图层layers、一个可视化视图view、用于修改地图内容的交互interaction以及使用UI组件的控件control组成的。

(1)、创建基本地图

let map = newol.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)、属性选项

newol.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:[//最初添加到映射中的控件 如未设置 使用默认控件

newol.control.Control({

element:,//元素是控件的容器元素(DOM)。只有在开发自定义控件时才需要指定这一点

render: ,//控件重新呈现时调用的函数

target: //如果想在映射的视图端口之外呈现控件，指定目标

})

],

interactions:[//最初添加到映射中的交互 如未设置 使用默认交互

newol.interaction.Interaction({

handleEvent

})

],

overlays:[newol.Overlay()

],

maxTilesLoading:16,//同时加载的最大瓷砖数 默认16

loadTilesWhileAnimating:false,// loadTilesWhileInteracting:false,//

moveTolerance:1,//光标必须移动的最小距离(以像素为单位)才能被检测为map move事件，而不是单击。增加这个值可以使单击地图变得更容易

pixelRatio:window.devicePixelRatio,// keyboardEventTarget:,//要监听键盘事件的元素

})

(3)、地图事件

地图事件含义

click

无拖动单击

dblclick

无拖动双击

moveend

移动地图结束时

movestart

移动地图开始时

pointerdrag

当拖动指针时触发

pointermove

当指针移动时触发。注意，在触摸设备上，这是在地图平移时触发的，因此与mousemove不同

postcompose

postrender

在映射帧呈现后触发

precompose

propertychange

当属性被更改时触发

rendercomplete

渲染完成时触发，即当前视图的所有源和tile都已加载完毕，所有tile都将淡出

singleclick

一个真正的无拖放和无双击的单击。注意，这个事件被延迟了250毫秒，以确保它不是双击

(4)、地图方法

地图方法功能

addControl(control)

将给定的控件添加到地图中

removeControl(control)

从地图中移除已给定的控件

addInteraction(interaction)

将给定的交互添加到地图中

removeInteraction(interaction)

从地图中移除已给定的交互

addLayer(layer)

将给定的图层添加到地图的顶部

removeLayer(layer)

从地图中移除已给定的图层

addOverlay(overlay)

将给定的叠加层添加到地图中

removeOverlay(overlay)

从地图中移除已给定的叠加层

forEachFeatureAtPixel(pixel, callback, opt_options)

检测与视图端口上的像素相交的特性，并对每个相交的特性执行回调。检测中包含的层可以通过opt_options中的layerFilter选项配置

forEachLayerAtPixel(pixel, callback, opt_options)

检测在视图端口上的像素处具有颜色值的层，并对每个匹配的层执行回调。检测中包含的层可以通过opt_layerFilter配置

getControls()

获取地图控件

getCoordinateFromPixel(pixel)

获取给定像素的坐标。这将返回地图视图投影中的坐标。

getEventCoordinate(event)

返回浏览器事件的视图投影中的坐标

getEventPixel(event)

返回浏览器事件相对于视图端口的地图像素位置

getFeaturesAtPixel(pixel, opt_options)

获取视图端口上与像素相交的所有特性

getInteractions()

获取地图交互

getLayerGroup()

获取与此地图关联的图层组

setLayerGroup(layerGroup)

设置与此地图关联的图层组

getLayers()

获取与此地图关联的图层的集合

getOverlayById(id)

通过其标识符获取覆盖(overlay. getId()返回的值)。注意，索引将字符串和数字标识符视为相同的。getoverlaybyid(2)将返回id为2或2的叠加层。

getOverlays()

获得地图叠加

getPixelFromCoordinate(coordinate)

获取坐标的像素。它接受地图视图投影中的坐标并返回相应的像素

getSize()

获取地图尺寸

setSize(size)

s设置地图尺寸

getTarget()

获取呈现此映射的目标。注意，这将返回作为选项或setTarget中输入的内容。如果这是一个元素，它将返回一个元素;如果是字符串，它会返回这个字符串

setTarget(target)

设置要将地图呈现的目标元素

getTargetElement()

获取呈现此映射的DOM元素。与getTarget相反，这个方法总是返回一个元素，如果映射没有目标，则返回null

getView()

获取地图视图。视图管理中心和分辨率等属性。

setView(view)

设置地图视图

getViewport()

获取作为map视图端口的元素

hasFeatureAtPixel(pixel, opt_options)

检测在viewport上是否与一个像素相交。可以通过opt_layerFilter配置在检测中包含的层。

2、图层Layers

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

const layer = new ol.layer.Vector({//这里定义的是图层类型(Image/Title/Vector)

source:new ol.source.Vector(),//矢量图层源 源是用于获取映射块的协议【必须】

style:[],//图层样式 【必须】

feature:[],//图层元素 【必须】

})

添加指定图层：map.addLayer(layer)；

移除指定图层：map.removeLayer(layer)；

图层是轻量级容器，从数据源Source获取数据。

Sourced子类分别有，分别对应不同图层类：

ol.source.ImageSource()

ol.source.TileSource()

ol.source.VectorSource()

Source主要有以下属性选项：

newol.source.VectorSource({

attributions:,// attributionsCollapsible:,//布尔值 默认为true

projection:,//投影系

state:'ready',//默认为'ready'

wrapX:false,//默认为false

})

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

new ol.layer.Tile/Image({//以下为图层的属性选项， 都可设置，所以皆有getter/setter

opacity:2,//透明度 区间范围为(0, 1) 默认为1

visible:true,//显示属性 布尔值 默认为true

extent:[],//图层渲染的边界范围。该层将不会在此范围之外呈现

zIndex:2,//图层渲染的索引层级。在渲染时，图层将被排序ÿ