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配置在检测中包含的层。








网友评论