openLayers 3知识回顾

时间  2019-11-17
标签 openlayers 知识 回顾 繁體版
原文   原文链接

openlayers 知识

前段时间帮助同事重构一个地图类的项目，而后就学习了openLayer3这个框架，可是官网上没有中文版，也没有详细的例子解释，我只能遇到看不懂的就翻译成中文来用，为了方便之后再用这个ol，可以更快的上手，就花了几天的时间总结了ol的知识，ol功能很丰富，API也不少，没有写太多，只是写了怎么用的，只要学会了根本，就能够很快的使用API去操做map。

另外，在总结知识的同时，还写了demo，加深本身的理解，你们以为不错的话，给个star～ GitHubjavascript

那么开始吧！

目录

var map = new ol.Map({
    target:'map',
    layers:[],
    view:views,
    interactions:interactions,
    controls:controls,
})

map是openlayers的核心组件，全部的操做方法以及渲染都是挂载到map上面。建立的map对象须要传一个对象进去，最多见的就有如下几个属性，数据库

* target --> 地图的挂载元素，就是在html元素里声明的id
* layers --> 层，是个数组，能够放不少层，若是未定义，则将呈现没有图层的地图，图层是按照提供的顺序渲染的，所以，若是您但愿（例如）矢量图层显示在图块图层的顶部，则它必须位于图块图层以后。
* view  --> map的视图，
* interactions --> 交互，好比鼠标事件致使放大，缩小，旋转之类的，默认都是true
* controls --> 控件，相似与按钮，有放大，缩小，全屏等的按钮

最简单的显示地图：json

document.body.innerHTML = `<div id="map" style="height:400px;width:100%"></div>`;

var map = new ol.Map({
    target:'map',
    layers:[new ol.layers.Tile({
        source: new ol.source.OSM()
    })],
    view: new ol.View({
        center:[0,0],
        projection: 'EPSG:4326',
        zoom:10,
    }),
    interactions: ol.interaction.defaults({
        doubleClickZoom:false,
        altShiftDragRotate:false
    }),
    controls: ol.control.defaults({
        attribution: false,
    })
})

map

这个map不是里面的Map，而是初始化后的map，map = new ol.Map()；在openlayers3 的API中，有不少方法，能够经过方法去操做layers，view，interactions，controls。
打印map,能够发现map里面有不少属性，能够简单知道map上有多少个层，target是谁，size是多少等等，也能够经过API方法去获取api

var target = map.getTarget();    // 获取 target的值  -- map
var size = map.getSize();  // 获取可视区域的宽高。

一样的，也能够在map上设置数组

map.addControl(new ol.control.FullScreen()); // 添加全屏控件
map.addLayers( new ol.layer.Vector({
    source:new ol.Source.Vector()
}))  // 添加一个矢量图层

*map里有一个函数方法，能够经过点击某个图层或某个点而获取到当前的层和信息。
forEachFeatureAtPixel(pixel, callback, opt_options)
params: pixel：坐标
callback：回调函数，将使用两个参数调用回调，第一个是feature，第二个是layers
opt_options：可选

map.on('click',function(e){
    var feature = map.forEachFeatureAtPixel(e.pixel,function(f){
        return f;
    })
    console.log(feature);   // ol.Feature
})

view

视图.View对象表示地图的简单2D视图。这是用于更改地图的中心，分辨率和旋转的对象。
一个视图是由三种状态肯定：center，resolution，zoom和rotation。每一个状态具备相应的获取和设置。

  • center：初始坐标，好比：成都的位置 [104.06, 30.67],这样地图初始化会以成都为中心展开(projection:'EPSG:4326')。
  • projection：一个视图有一个projection。投影肯定中心的坐标系，其单位肯定分辨率的单位（每像素的投影单位）。
    projection有两种值，默认投影是球形墨卡托（EPSG：3857），是地图的xy坐标，另外一种就是经纬度坐标，（EPSG:4326）是WGS84的一种。
    经过一个方法能够进行EPSG:3857与EPSG:4326转化。
    经纬度转至xy(EPSG:4326->EPSG:3857)
    ol.proj.transform(coordinates,'EPSG:4326','EPSG:3857')
    xy转至经纬度(EPSG:3857->EPSG:4326)
    ol.proj.transform(coordinates,'EPSF:3857','EPSG:4326')
  • zoom:计算视图初始分辨率的缩放级别。至于resolution初始分辨率，在其未声明时，zoom起做用。对应的它也有maxZoom，minZoom。
  • rotation:初始旋转度，默认是0，（顺时针正向旋转，0表示北向）,弧度制
var view = new ol.View({
    center:[104.06,30.67],
    projection:'EPSG:4326',
    // center: ol.proj.transform([104.06,30,67],'EPSG:4326','EPSG:3857');    // 这个和上面的结合体。
    zoom:10,
    rotation:Math.PI/10,
})

视图对应的也有get和set系列的方法，用于获取和设置zoom，center，rotation等等，除此以外，还有约束方法，constrainRotation(),约束旋转度，API上有详细解释。

map.getView()   // 就是当前视图，view
view.getZoom()  // 获取缩放级别;
view.getCenter() // 获取初始中心坐标
view.setCenter([20,30])  // 设置初始中心[20,30]，也能够用ol.proj.transform
view.constrainRotation(2,5) // 获取此视图的约束旋转

layers

层，是一个对象数组，将那些与数据显示方式相关的属性组合在一块儿，造成一个层，openlayer就是由一个一个的层造成的，包括地图，瓦片地图，图片，图形都是由layer造成而呈如今map上的
简单的来讲，layer能够是一个地图，也能够是一个图形，也能够是个图片，由于是个数组，能够互相叠加的，[map,image,shape]，在相同位置的状况下，后者会覆盖前者。

layer

根据这个图片可知，layers有三种形式

  • ol.layer.Tile 瓦片，瓦片地图源于一种大地图解决方案，针对一整块很是大的地图进行切片，分红不少相同大小的小块地图，在用户访问的时候，再一块一块小地图加载，拼接在一块儿，从而还原成一整块大的地图。这样作的优势在于，用户在同一时间，同一个可见视图内，只能看到地图的一部分，而不是所有。提升用户体验。一般用这个做为底图。
  • ol.layer.Image 对应的是一整张图，而不像瓦片那样不少张图，从而无需切片，也能够加载一些地图，适用于一些小场景地图
  • ol.layer.Vector 矢量，使用直线和曲线来描述图形，这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等，它们都是经过数学公式计算得到的。因为矢量图形可经过公式计算得到，因此矢量图形文件体积通常较小。矢量图形最大的优势是不管放大、缩小或旋转等不会失真。

每一个形式都须要一个source，数据源，因此每个形式都对应一个数据源，Source和Layer是一对一的关系，有一个Source，必然须要一个Layer，而后把这个Layer添加到Map上，就能够显示出来了。

ol.layer.Tile

对于瓦片数据源，也有不少属性，

  • opacity，改变透明度，默认是1
  • visible，可视，默认是true
  • zIndex，图层渲染的z-index。在渲染时，将按照Z-index而后按位置对图层进行排序
  • source 有不少形式，
  • 在线服务的Source
    • ol.source.OSM
    • ol.source.BingMaps
    • ol.source.TileImage
  • 支持协议标准的Source，包括ol.source.TileArcGISRest，ol.source.TileWMS，ol.source.WMTS，ol.source.UTFGrid，ol.source.TileJSON。若是要使用它们，首先你得先学习对应的协议，以后必须找到支持这些协议的服务器来提供数据源，这些服务器能够是地图服务提供商提供的，也能够是本身搭建的服务器，关键是得支持这些协议。
  • ol.source.XYZ，并且如今不少地图服务（在线的，或者本身搭建的服务器）都支持xyz方式的请求。国内在线的地图服务，高德，天地图等，均可以经过这种方式加载的
var OSMtile = new ol.layer.Tile({ 
    source:new ol.source.OSM()  
})
var qqTile = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}'
    }),
})
map.addLayer(OSMtile);  // 添加open street Map做为底图
map.addLayer(qqTile)  // 添加腾讯地图

map.addLayer()这个方法就至关于初始化中的layers的数组中添加同样,以下代码，这俩是等价的，只不事后者更灵活些。

var map = new ol.Map({
    layers:[OSMtile,qqTile]
})  // 等价于下面
map.addLayer(OSMtile); 
map.addLayer(qqTile)

ps！当添加地图做为底图时，会发现腾讯底图覆盖率OSM地图，是由于layer是一个数组，遵遁先来先渲染，后来居上的原则。
layer也有get/set方法，用来设置或获取属性，其实经过API就能够知道响应方法去操做。

ol.layer.Image

关于静态图片层，运用的很少，通常做为写死的，不常常换的实例中。
一样，ol.layer.Image也有数据源，通常就是ol.source.ImageStatic，ol.source.ImageCanvas等等。

var center = ol.proj.transform([104.06667, 30.66667], 'EPSG:4326', 'EPSG:3857');
// 计算静态图映射到地图上的范围，图片像素为 550*344，保持比例的状况下，把分辨率放大一些
var extent = [center[0]- 550*1000/2, center[1]-344*1000/2, center[0]+550*1000/2, center[1]+344*1000/2];
var imageStatic = new ol.layer.Image({
    source: new ol.source.ImageStatic({
        url: '..／pandaBase.jpg', // 静态图
        imageExtent: extent     // 映射到地图的范围
    })
})
map.addLayer(imageStatic);
ol.layer.Vector
矢量图层，是用来渲染矢量数据的图层类型，在OpenLayers里，它是能够定制的，能够控制它的透明度，颜色，以及加载在上面的要素形状等。经常使用于从数据库中请求数据，接受数据，并将接收的数据解析成图层上的信息。好比将鼠标移动到中国，相应的区域会以红色高亮显示出来，高亮即是矢量图层的行为

既然是个矢量图，能够改变大小，颜色，以及形状。包含source数据源类，style类设置样式，以及其余的zIndex，opacity等等。
Feature类是Vector类用来在地图上展现几何对象，是Vector图层类一个属性。这个属性是个*要素数组*。

source

对应的数据源ol.source.Vector也是个对象。最多见属性的是features和format以及url。一般url和format一块，url按理传来的是geojson格式的矢量图，须要format格式化一下。最经常使用仍是features。
ol.Feature

  • feature 具备几何和其余属性属性的地理要素的矢量对象，相似于GeoJSON等矢量文件格式中的要素。
  • Geometry类是feature对象的基本组成部分，Vector类采用Geometry类来存储一个要素的几何信息.经过feature名.getGeometry()获取
  • feature类有两个部分，Geometry对象和attributes属性,attributes包含要素相关的数据。好比：{type:'circle'},经过getProperties().attributes去获取。
    geometry
  • new ol.geom.Point([x1,y1]) 点
  • new ol.geom.LineString([[x1,y1],[x2,y2]]) 线
  • new ol.geom.LinearRing()
  • new ol.geom.MultiLineString([[[x1,y1],[x2,y2]],[[x3,y3],[x4,y4]],[...]]) 多条线
  • new ol.geom.MultiPoint([[x1,y1],[x2,y2],[...]]) 多个点
  • new ol.geom.Polygon([[[x1,y1],[x2,y2],[x3,y3],[x4,y4],[...],[x1,y1]]]) 几何
    若是这些坐标是经纬度坐标的话，都须要坐标转换applyTransform(ol.proj.getTransform('EPSG:4326', 'EPSG:3857')),(部分图形展现请看demo)
var polygon = new ol.geom.Polygon([[[110, 39], [116, 39], [116, 33], [110, 33], [110, 39]]]);
polygon.applyTransform(ol.proj.getTransform('EPSG:4326', 'EPSG:3857')); // 坐标转换
var square = new ol.Feature({
    geometry:polygon
})
layer.getSource().addFeature(square)
style
一个style对象，包含Style类，有7个属性：
  • geometry 返回要为此样式渲染的几何的要素属性或几何或函数
  • fill 填充样式。
  • image 图像样式
    • icon : new ol.style.Icon()
      • anchor :[0.5，0.5]锚点，
      • color
      • src :图标源
      • ...
    • circle: new ol.style.Circle()
      • fill :new ol.style.Fill()
      • radius : 半径
      • stroke :new ol.style.Stroke()
    • regularShape :new ol.style.RegularShape()
      • fill :new ol.style.Fill()
      • points : 点数，几个点
      • radius : 半径
      • radius1 : 外半径
      • radius2 : 内半径
      • angle 0 形状的角度以弧度表示。值为0将使其中一个形状的点朝上。
      • stroke :new ol.style.Stroke()
      • rotation : 0 旋转度
      • ...
  • renderer 自定义渲染器。配置时fill，stroke和image将被忽略，而且将为每一个几何体的每一个渲染帧调用提供的函数。
  • stroke 边线样式
    • color 颜色
    • lineCap :butt, round, square 线帽
    • lineJoin :bevel, round, miter. 线条链接形状
    • width 宽度
  • text 文字样式
    • font :'10px sans-serif'
    • text
    • textAlign left'，'right'，'center'，'end' start'
    • fill :new ol.style.Fill()
    • stroke :new ol.style.Stroke()
    • backgroundFill
    • padding
  • zIndex 层级
    // set*()在从新呈现使用该样式的要素或图层以前，经过方法对样式或其子项所作的任何更改都不会生效
// 最简单的呈现方式，复杂的请参考demo
var layer = new ol.layer.Vector({
    source: new ol.source.Vector({
        features:[new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857')),
        })]
    }),
    style: new ol.style.Style({
        image: new ol.style.Circle({
            radius: 30,
            fill: new ol.style.Fill({
                color: 'red'
            })
        })
    }),
    opacity:0.5
})
map.addLayer(layer)

一个层layer有一个featrue，也能够有多个feature，由于Feature类是Vector类用来在地图上展现几何对象，是Vector图层类一个属性。这个属性是个*要素数组*。
对于style样式问题，feature的style的层级比layer.Vector的层级要高，因此feature的style会覆盖layer的style。
ps：feature中的样式不能以属性名的形式写，由于feature类中没有style属性名，只有geometry,因此要以方法的形式去添加，setStyle()。

其实关于layer，vector，API上都有其方法，包括set／get，虽然类有不少子类，子类又有不少子子类，也无妨，只要抓住想要操做的是哪个部分就行，是feature，仍是layer，仍是geometry等等。

styleFunction
在feature中可使用styleFunction来设置本身为所欲为的样式，经过官网API文档能够看到，其类型为ol.FeatureStyleFunction，函数仅带有一个参数resolution，在函数体内this指的是当前的feature，根据文档说明，这个函数要返回一个style数组。
除了feature能够设置样式以外，layer也是能够设置样式的，一样地也支持styleFunction，可是须要注意的是，其定义和feature的不同，类型为ol.style.StyleFunction，该函数具备两个参数，第一个参数为feature，第二个参数为resolution，一样地，该函数须要返回style数组。

var layer = new ol.layer.Vector({
    source: new ol.source.Vector()
})
var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
        source: new ol.source.OSM()
        }), 
        layer
    ],
    target: 'map',
    view: new ol.View({
        projection: 'EPSG:4326',
        center: [104, 30],
        zoom: 10
    })
});

var anchor = new ol.Feature({
    geometry: new ol.geom.Point([104, 30])
});
// 应用style function，动态的获取样式
anchor.setStyle(function(resolution){
    return [new ol.style.Style({
        image: new ol.style.Icon({
        src: '../img/anchor.png',
        scale: map.getView().getZoom() / 10
        })
    })];
});

layer.getSource().addFeature(anchor);

controls

地图控件，包括缩放按钮，标尺，版权说明，指北针等等，不会随着地图的放大而放大，缩小而缩小，就至关于position:fixed同样，固定在某个地方。 在实现上，并非在画布上绘制的，而是使用传统的HTML元素来实现的，便于同地图分离，也便于界面实现。
在openlayers 3 中，默认状况下，在地图上是不会显示这么多地图控件的，只会应用ol.control.defaults()这个函数返回的地图控件，默认包含了ol.control.Zoom，ol.control.Rotate和ol.control.Attribution这个控件。
OpenLayers 3目前内置的地图控件类都在包ol.control下面：

  • ol.control.Attribution: 右下角的地图信息控件
  • ol.control.FullScreen: 全屏控件
  • ol.control.MousePosition: 鼠标位置控件
  • ol.control.OverviewMap: 鸟瞰图控件
  • ol.control.Rotate: 指北针控件
  • ol.control.ScaleLine: 比例尺控件
  • ol.control.Zoom: 缩放按钮控件
  • ol.control.ZoomSlider: 缩放滚动条控件
  • ol.control.ZoomToExtent: 放大到设定区域控件
var map = new ol.Map({
    target:'map',
    layers:[new ol.layers.Tile({
        source: new ol.source.OSM()
    })],
    view: new ol.View({
        center:[0,0],
        projection: 'EPSG:4326',
        zoom:10,
    })
    controls: ol.control.defaults({
        attribution: false, // 信息false
        rotate: false,    // 旋转false
        zoom: false      //   缩放false
    })
})

map.getControls()是获取控件的信息,
若是想要添加其余的控件，可使用map中的一个方法，map.addControl()

map.addControl(ol.control.OverviewMap)  // 添加鸟瞰图控件

控件不是在画布上绘制的，而是用html实现的，因此样式问题能够按照css+html的形式去修改。

interactions

交互，就是人与机之间的交互模式，好比用鼠标左键双击地图能够放大地图，按住鼠标左键拖动地图能够移动浏览地图，用滚动鼠标中间的滑轮能够放大缩小地图等等。这些都是openLayers内置的，其实也能够本身去interact。

内置的交互

内置的交互在map中都是默认的。

var map = new ol.Map({
    interactions: ol.interaction.defaults().extends()
    // .... 其他代码
})

ol.interaction.defaults()默认包含如下交互：

  • 鼠标
    • 按住alt+shift键，用鼠标左键拖动地图，就能让地图旋转，对应的交互类为ol.interaction.DragRotate。
    • 用鼠标左键双击地图，就能够放大地图，对应的交互类为ol.interaction.DoubleClickZoom。
    • 用鼠标左键，拖拽地图，就能够平移地图，对应的交互类为ol.interaction.DragPan。
    • 滚动鼠标中间的滑轮，就能够缩放地图，对应的交互类为ol.interaction.MouseWheelZoom。
    • 按住shift键，同时用鼠标左键在地图上拖动，就能够放大地图，对应的交互类为ol.interaction.DragZoom。
  • 触摸屏
    • 在触摸屏上，用两个手指在触摸屏上旋转，就能够旋转地图，对应的交互类为ol.interaction.PinchRotate。
    • 在触摸屏上，用两个手指在触摸屏上缩放，就能够缩放地图，对应的交互类为ol.interaction.PinchZoom。
  • 键盘（注意：须要设置tabindex，才能使div得到键盘事件,就是在声明id的那个div中添加：tabindex="0"）
    • 用键盘上的上下左右键，就能够平移地图，对应的交互类为ol.interaction.KeyboardPan。
    • 用键盘上的+/-键，就能够缩放地图，对应的交互类为ol.interaction.KeyboardZoom。

若是想要取消某个交互事件

var map = new ol.Map({
    interactions: ol.interaction.defaults({
        mouseWheelZoom: false, // 取消滚动鼠标中间的滑轮交互
        shiftDragZoom: false, // 取消shift+wheel左键拖动交互
    })
    // .... 其他代码
})

extend()为扩展

var map = new ol.Map({
    interactions: ol.interaction.defaults().extend()
    // .... 其他代码
})

map.getInteraction()是获取控件的信息,
若是想要添加其余的交互，可使用map中的一个方法，map.addInteraction()

map.addInteraction(new ol.interaction.MouseWheelZoom);

关于new Interaction(),总共有7个子类，能够用在extend([])中，也能够用addInteraction()

  • DoubleClickZoom interaction，双击放大交互功能；
  • DragAndDrop interaction，以“拖文件到地图中”的交互添加图层；
  • DragBox interaction，拉框，用于划定一个矩形范围，例子经常使用于放大地图；
  • DragPan interaction，拖拽平移地图；
  • DragRotateAndZoom interaction，拖拽方式进行缩放和旋转地图；
  • DragRotate interaction，拖拽方式旋转地图；
  • DragZoom interaction，拖拽方式缩放地图；
  • Draw interaction，绘制地理要素功能；
  • KeyboardPan interaction，键盘方式平移地图；
  • KeyboardZoom interaction，键盘方式缩放地图；
  • Select interaction，选择要素功能；
  • Modify interaction，更改要素；
  • MouseWheelZoom interaction，鼠标滚轮缩放功能；
  • PinchRotate interaction，手指旋转地图，针对触摸屏；
  • PinchRoom interaction，手指进行缩放，针对触摸屏；
  • Pointer interaction，鼠标的用户自定义事件基类；
  • Snap interaction，鼠标捕捉，当鼠标距离某个要素必定距离以内，自动吸附到要素。

这些子类均可以查API，有详细解释。这些子类中，有个经常使用的属性condition或方法handleEvent(mapBrowserEvent)

condition

表明的是事件名称，好比：click，doubleClick，主要是依据ol.events。主要有如下几种，默认是singleClick

  • altKeyOnly 仅按下alt键则返回true
  • shiftKeyOnly 仅按下shift键则返回true
  • altShiftKeysOnly 仅按下alt键+shift则返回true
  • always
  • never
  • click，只要是点击，包括singleClick，doubleClick都返回true
  • doubleClick
  • singleClick
  • focus 若是地图具备焦点，则返回true。此条件须要具备tabindex属性的地图目标元素，例如
    。
  • mouseOnly 从鼠标设备发起为true
  • noModifierKeys 没有组合键则返回true
  • pointerMove 指针移动时返回true
  • targetNotEditable 若是目标元素不可编辑，则返回true,即不是input,select或textarea元素false。
  • platformModifierKeyOnly
  • primaryAction 从一个主指针在与表面接触或起源若是按下鼠标左键

handleEvent(mapBrowserEvent)

function (mapBrowserEvent){
    return ol.events.condition.click(mapBrowserEvent) && ol.events.condition.shiftKeyOnly(mapBrowserEvent);
}
Select

是个选择图形的类，用于交互.
new ol.interaction.Select(options)
options是个对象参数，包括：

  • style
  • layers 应从中选择要素的图层列表。或者，能够提供过滤功能。将为地图中的每一个图层调用该函数，并应返回true您想要选择的图层。若是该选项不存在，则全部可见图层都将被视为可选择。
  • condition 类型为 ol.events.ConditionType，规定了什么状况下触发 select 操做，默认不须要特殊条件进行触发。
  • addCondition
  • removeCondition
  • toggleCondition 获取module:ol/MapBrowserEvent-MapBrowserEvent和返回布尔值的函数，以指示是否应该处理该事件。这是condition事件的补充。默认状况下， module:ol/events/condition-shiftKeyOnly即按下shift以及condition事件，若是当前未选中，则将该功能添加到当前选择，若是是，则将其删除。见add而remove 若是你想使用的，而不是一个触发不一样的事件。
  • multi 用于肯定默认行为是否应仅在单击的地图位置选择单个feature或全部（重叠）feature。默认值false表示单选。
  • features
  • filter 过滤 见demo
  • wrapX 当地图水平显示多个相同位置时，是否显示多个勾绘任务，默认为 false
    select点击事件
selectSingleClick.on('select', function (event) {
    console.log(event)
})

该select也有set／get方法，用来获取或者设置属性，好比获取选中的features，获取全部属性名称和值的对象getProperties。

Draw

是个绘制图形的类，默认支持绘制的图形类型包含 Point（点）、LineString（线）、Polygon（面）和Circle（圆）。触发的事件包含 drawstart和drawend，分别在勾绘开始时候（单击鼠标）和结束时候触发（双击鼠标）。
new ol.interaction.Draw(options)
options是个对象参数，包括：

  • type: 几何类型（加粗为默认）
    • Point
    • LineString
    • LinearRing
    • Polygon
    • MultiPoint
    • MultiLineString
    • MultiPolygon
    • GeometryCollection
    • Circle
  • source 数据源,若是想要保存绘制的图形，须要有一个载体来存储绘制的图形，好比新建一个layer，这个layer的source就是该绘制的source。 
    • var drawLayer = new ol.layer.Vector({
      source:new ol.source.Vector()
  }) // 新建一个层
  map.addLayer(drawLayer)
  var draw = new ol.interaction.Draw({
      source: drawLayer.getSource(), // 数据源就是新建层的数据源
      type: 'Point',
  })
  map.addInteraction(draw);
  • style
  • stopClick
  • condition 类型为 ol.events.ConditionType，规定了什么状况下触发 draw 操做，默认不须要特殊条件进行触发。
  • clickTolerance: 数值类型，单位是像素，判断用户鼠标（PC）或者手指（移动设备）的行为是添加点，仍是按住鼠标或者手指不松开进行拖拽地图，默认值是 6 像素，也就是说当按下鼠标和抬起鼠标左键之间的这段时间段内，若是地图被拖动没有超过 6 像素，那么默认为添加一个点，相反若是超过了 6 像素，那么不会添加点，只是平移一下地图。
  • snapTolerance 数值，像素为单位，默认值是 12 像素，当必定位置内最后一个点吸附到第一个点,对多边形时有用
  • features
  • maxPoints 表示绘制单个要素（面和线）最多的点数限制，默认没有限制
  • minPoints 表示绘制单个要素（面和线）须要的最少点数，面默认为 3，线默认为 2
  • geometryName 字符串类型，绘制的 geometry 的名称。
  • geometryFunction 由于默认type只有四种：Point（点）、LineString（线）、Polygon（面）和Circle（圆），此方法就是能够用来绘制规则或者本身想要绘制的图形的方法，该函数有两个参数，一个是坐标集合、一个是勾绘的 geometry 类型，返回构造好的 geometry 对象，用来初始化要素。 
    • var draw = new ol.interaction.Draw({ // 绘制矩形
      type: 'LineString',
      maxPoints: 2,
      geometryFunction: function(coordinates, geometry){
          if(!geometry){
              geometry = new ol.geom.Polygon(null);
          }
          var start = coordinates[0];
          var end = coordinates[1];
          geometry.setCoordinates([
              [start, [start[0], end[1]], end, [end[0], start[1]], start]
          ]);
          return geometry;
      }
      // 其他代码块
  })
    • 上面的例子用LineString的形式去绘制矩形，这里的原理就是捕捉鼠标点击的点，而后获取限制的两个点的坐标，用来初始化一个矩形框。
  • wrapX 当地图水平显示多个相同位置时，是否显示多个勾绘任务，默认为 false
  • freehand 默认是false，是否以曲线的形式，不是规范化的，看demo-freehandDraw.html
  • freehandCondition 类型同condition，也是 ol.events.ConditionType，这个选项规定了什么状况下触发不用重复点击绘制模式，即拖拽鼠标就能够绘制图形的模式，默认状况下是按下 shift 按键，这种模式对于不容易绘制的曲线比较方便，并且释放 shift 状况下，若是没有完成绘制，能够继续使用点击绘制。(就是须要辅助键，例如shift，ctrl时，会以曲线形式绘画)--demo-secondDraw.html，按shift绘画能够发现。
    drawstart/drawend
// 绘制结束时进行回调
draw.addEventListener('drawend', function (evt) {
    // 获取绘制图形的全部坐标点（终止点是起始点）
    var feature = evt.feature
    var geometry = feature.getGeometry()
    var coordinate = geometry.getCoordinates()
    // console.log(coordinate)
    var lent = coordinate[0].length // 坐标点个数
})
Modify

用于修改要素几何的交互。要修改已添加到现有源的功能，请使用该source选项构建修改交互，若是要修改集合中的要素（例如，选择交互使用的集合），请使用该features选项构建交互。必须使用source或features构建交互
默认状况下，交互将容许在alt 按下键时删除顶点。要配置具备不一样删除条件的交互，请使用该deleteCondition选项。
new ol.interaction.Modify(options)
options是一个参数对象，以下：

  • condition
  • style
  • source
  • features
  • wrapX
  • insertVertexCondition 一个函数，它接受module:ol/MapBrowserEventMapBrowserEvent并返回一个布尔值，以指示是否能够将新顶点添加到草图要素中。默认是module:ol/events/condition-always。 同deletCondition
  • deleteCondition 获取module:ol/MapBrowserEventMapBrowserEvent和返回布尔值的函数，以指示是否应该处理该事件。默认状况下， module:ol/events/condition-singleClick与 module:ol/events/conditionaltKeyOnly在顶点缺失的结果。看demo-modifyDifficult.html（先选中后操做）
Snap

在修改或绘制矢量要素时处理矢量要素的捕捉。这些功能能够来自一个module:ol/source/Vector或module:ol/Collection-Collection 任何交互对象，容许用户使用鼠标与功能进行交互能够从捕捉中受益，只要它以前添加。

快照交互会修改地图浏览器事件coordinate和pixel 属性，以强制对其进行的任何交互进行快照。
new ol.interaction.Snap(options) 看API
options:

  • features 应提供此选项或来源。
  • edge 抓住边缘。默认值时true
  • vertex 捕捉到顶点。默认值是true
  • source 捕捉此来源的功能。应提供此选项或功能

官方例子Snap Interaction

事件
简单例子
var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
        source: new ol.source.OSM()
        })
    ],
    target: 'map',
    view: new ol.View({
        center: ol.proj.transform(
            [104, 30], 'EPSG:4326', 'EPSG:3857'),
        zoom: 10
    })
});

// 监听singleclick事件
map.on('singleclick', function(event){
    // 经过getEventCoordinate方法获取地理位置，再转换为wgs84坐标，并弹出对话框显示
    alert(ol.proj.transform(map.getEventCoordinate(event), 'EPSG:3857', 'EPSG:4326'));
})

任意的事件应用，必然会有三个步骤：

  • 找准事件发送者，好比上面这个例子，map就是事件发送者。 如何找到它呢？ 通常都是要交互的对象。
  • 找准事件名称，好比上面例子中的singleclick，切忌不要随便想象，或者按照惯例来写名称-condition，

  • 编写事件响应函数，在OpenLayers中，事件发送者都会有一个名字为on的函数，调用这个函数，就能监听指定的事件，响应函数listener具备一个参数event，这个event类就对应于API文档中事件名称后边括号里的类。
    forEachFeatureAtPixel(pixel, callback, opt_options)

    注销事件
  • // 建立事件监听器
  var singleclickListener = function(event){
      alert('...');
      // 在响应一次后，注销掉该监听器
      map.un('singleclick', singleclickListener);
  };
  map.on('singleclick', singleclickListener);
  • // 使用once函数，只会响应一次事件，以后自动注销事件监听
  map.once('singleclick', function(event){
      alert('...');
  })
    自定义事件

    要添加自定义事件，须要知道这样一个事实：ol.Feature继承于ol.Object，而ol.Object具备派发事件(dispatchEvent)和监听事件(on)的功能。

  • dispatchEvent(event) 分发一个事件，并调用侦听此类事件的全部监听器，event参数能够是字符串，也能够是具备type属性的Object

  • on(type, listener) 触发type类型的监听器。

// 为地图注册鼠标移动事件的监听
map.on('pointermove', function (event) {
    map.forEachFeatureAtPixel(event.pixel, function (feature) {
        // 为移动到的feature发送自定义的mousemove消息
        feature.dispatchEvent({ type: 'mousemove', event: event });
        // feature.dispatchEvent('mousemove');
    });
});

// 为feature1(以前建立的一个feature)注册自定义事件mousemove的监听
feature1.on('mousemove', function (event) {
    // 修改feature的样式为半径100像素的园，用蓝色填充
    this.setStyle(new ol.style.Style({
        image: new ol.style.Circle({
            radius: 100,
            fill: new ol.style.Fill({
                color: 'blue'
            })
        })
    }));
});
dispatchEvent的参数具备type和event属性，必须这样构造吗？在回答这个问题以前，须要先看一下API文档，发现参数类型为goog.events.EventLike，说明它其实用的是google的closure库来实现的，经过closure库的源码咱们知道，派发的事件若是是一个对象，那么必须包含type属性，用于表示事件类型。其余的属性能够自由定义，好比此处定义了event属性，并设置对应的值，为的是让鼠标事件传递给feature1的监听函数。dispatchEvent的参数会被原封不动的传递给事件响应函数，对应代码`feature1.on('mousemove', function(event){}`里参数event，能够经过调试窗口看到此处的event和dispatchEvent的参数是同样的。注意事件名称是能够自定义的，只要派发和监听使用的事件名称是一致的就能够。

除了能够经过dispatchEvent({type: 'mousemove', event: event})这种形式派发一个事件以外，还能够经过dispatchEvent('mousemove')这中形式直接发送mousemove事件。

总结

openlayers功能不少，有的地方本身因时间有限尚未深刻了解，可是大部分是够用了,有大部分都是参考资料的，由于讲的很通透，因此就拿过来了。，对于openylayers3，必定多看看官方例子，例子有不少吸取的知识点，特别有用。有时间后会本身补上这一环节，你们若是有疑问或者我不对的地方请下方评论或私信。你们一块儿进步加油！

参考资料

openlayer3
OpenLayers 3 Primer

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程