map是openlayer的核心组件,为了保证地图的初始化,需要view
,一个以上layer
,还有一个承载地图的目标容器target
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css"type="text/css">
<style>
.map { /*容器必须指定宽度和高度*/
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
view: new ol.View({}),
layers: [
new ol.TileLayer({})
],
target: 'map'
});
</script>
属性
var map = new ol.Map({
view: new ol.View({}), //视图
layers: [
new ol.TileLayer({}) //图层
],
target: 'map', //渲染容器
overlays: new ol.Overlay({})//覆盖层,放置标签,图标等
controls: [
new ol.control.Control({})
] //地图控件
interactions:[//最初添加到映射中的交互 如未设置 使用默认交互
new ol.interaction.Interaction({
handleEvent
})
]
});
事件:
map.on('事件', e => {});
change
:???
change:layerGroup
:地图图层增删时触发
change:size
:地图窗口发生变化就会触发,与我们常用的窗口resize接近。size是在地图窗口发生变化时触发,如网页的最大化最小化就会触发。在setTarget时,由于地图窗口绑定了别的div,也触发了size改变事件。
change:target
:地图绑定的div发生更改时触发,如map.setTartget方法就会触发该事件。
change:view
:地图view对象发生变化触发。
singleclick
:地图单击事件。
dblclick
:地图双击事件。
click
:地图点击事件。
movestart
:地图开始移动发生
moveend
:地图移动结束发生
pointerdrag
:鼠标拖拽事件。
pointermove
:鼠标移动事件。
postcompose
:地图渲染中。
precompose
:准备渲染,未渲染。
postrender
:渲染全部结束。
rendercomplete
:渲染全部结束。
propertychange
: Map对象中任意的property值改变时触发。
方法
map.方法()
addControl(control)
:添加地图控件
removeControl(control)
:从地图中移除已给定的控件
addInteraction(interaction)
:添加使用交互
removeInteraction(interaction)
:从地图中移除已给定的交互
addLayer(layer)
:添加图层
removeLayer(layer)
:从地图中移除已给定的图层
addOverlay(overlay)
:添加覆盖层
removeOverlay(overlay)
:从地图中移除已给定的叠加层
changed
:???
dispatchEvent
:???
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)
设置地图尺寸
getTarget()
获取呈现此映射的目标。注意,这将返回作为选项或setTarget中输入的内容。如果这是一个元素,它将返回一个元素;如果是字符串,它会返回这个字符串
setTarget(target)
设置要将地图呈现的目标元素
getTargetElement()
获取呈现此映射的DOM元素。与getTarget相反,这个方法总是返回一个元素,如果映射没有目标,则返回null
getView()
获取地图视图。视图管理中心和分辨率等属性。
setView(view)
设置地图视图
getViewport()
获取作为map视图端口的元素
hasFeatureAtPixel(pixel, opt_options)
检测在viewport上是否与一个像素相交。可以通过opt_layerFilter配置在检测中包含的层。
网友评论