美文网首页
new ol.Map

new ol.Map

作者: 扶不起的蝌蚪 | 来源:发表于2020-04-09 17:03 被阅读0次

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

相关文章

  • new ol.Map

    map是openlayer的核心组件,为了保证地图的初始化,需要view,一个以上layer,还有一个承载地图的目...

  • openlayer使用

    1,在opeblayer中,ol.map是核心组件 2,加载在map上的layer是个数组,是按顺序加载的,数组后...

  • New place, New day, New life

    今早五点钟醒来 —可并不是澳大利亚的五点钟 而是在美国奥兰多Orlando的时间:八月七号的早晨五点钟。现在的澳洲...

  • New month,new start and new self

    今日复盘 1.早起5:26√ 2.口语晨读√ 3.演讲练习×(出席升国旗活动,推掉) 4.健身√ 5.大物复习+作...

  • I see

    New year, new life, new ways and new opportunities. It’s ...

  • git中拉代码下来冲突中的<<<<<<< head

    <<<<<<< HEAD new new new new code ======= old old old cod...

  • a new voice, a new world

    昨晚的西部世界出现了一个新的世界,一个幕府世界,但剧情和西部世界甜水镇的剧情是差不多,而拍摄的是镜像,这就像两个平...

  • NEW LIFE, NEW START

    即将踏上一段新的征途,告别了过去的自己,我,在这里,在一个新的起点。 三年前,我满怀斗志,却渐渐迷...

  • New job,new start

    我换工作了。简短的一句话里饱含着无数无奈,我不能大声宣扬,我也没有告诉多少人,包括生命里重要的那些人,也包括以前的...

  • A  new life  OR   A new star

    鲁迅先生弃医从文的时候,在日本办的杂志名称叫作《新生》,我总觉着,中文中“新的开始”不如英文中“A new l...

网友评论

      本文标题:new ol.Map

      本文链接:https://www.haomeiwen.com/subject/sfycmhtx.html