new ol.Map

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,639评论 6 513
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,093评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 167,079评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,329评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,343评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,047评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,645评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,565评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,095评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,201评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,338评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,014评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,701评论 3 332
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,194评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,320评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,685评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,345评论 2 358

推荐阅读更多精彩内容

  • Core Animation编程指南 关于Core Animation Core Animation自身并不是一个...
    钱嘘嘘阅读 1,173评论 0 12
  • Map是OpenLayers的核心组件,使用Map的构造函数可以创建一个地图对对象,用于添加在网页中的div容器中...
    写前端的大叔阅读 2,283评论 0 0
  • 卷首语 欢迎来到 objc.io 的第三期! 这一期都是关于视图层的。当然视图层有很多方面,我们需要把它们缩小到几...
    评评分分阅读 1,770评论 0 18
  • 书写的很好,翻译的也棒!感谢译者,感谢感谢! iOS-Core-Animation-Advanced-Techni...
    钱嘘嘘阅读 2,299评论 0 6
  • 记不清这一二年喜欢过多少人了 有明星也有现实中的 都说我们可以因为一件事情而去喜欢上一个人也可以因为一件事去讨厌一...
    任先生好阅读 110评论 0 0