OpenLayers 比较有用的对象和属性
OpenLayers 比较有用的对象和属性
1.ol.interaction.Pointer
是管理地图down、move、up事件的基类，也用于管理地图拖拽事件。
构造函数结构如下：
new ol.interaction.Pointer(opt_options)
options包括的属性有：
handleDownEvent：处理地图的down事件。如果该事件返回true，drag队列开始执行。
handleDragEvent：处理地图的drag事件。当down事件返回true，鼠标在拖拽过程中该事件一直被触发。
handleEvent：当地图通知浏览器触发交互时调用该函数，通过返回FALSE，可终止其他交互事件的传播。
handleMoveEvent：在拖拽的过程中触发move事件。
handleUpEvent：捕获鼠标up事件。
2.updateWhileAnimating和updateWhileInteracting属性
默认情况下，当在和地图交互或者动画过程中，tile和vector图层会等待这些过程执行完后才会更新。我们可以通过两个属性禁止这样的现象，在vector图层中，必须在layer级别控制。而像tiled图层可以直接通过map级别控制。代码如下：
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://demo.opengeo.org/geoserver/wms',
params: {
layers: 'ne_50m_land',
format: 'image/png'
},
wrapX: false
}),
name: 'Natural Earth Land'
}),
new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.GeoJSON({
defaultDataProjection: 'EPSG:4326'
}),
url: '../../res/world_countries.geojson',
wrapX: false
}),
name: 'World Countries',
headers: {
pop_est: 'integer',
gdp_md_est: 'integer'
},
type: 'polygon',
updateWhileAnimating: false,
updateWhileInteracting: false
})
],
view: new ol.View({
center: [0, 0],
zoom: 2,
extent: ol.proj.get('EPSG:3857').getExtent()
}),
loadTilesWhileAnimating: true,
loadTilesWhileInteracting: true
});
3.限制地图大小属性
只要继承至ol.layer.Base对象的图层都可通过wrapX:false限制图层在x轴方向重复；另外也可通过设置view的extend属性。
wrapX限制
var map = new ol.Map({
[…]
new ol.layer.Tile({
source: new ol.source.TileWMS({
[…]
wrapX: false
[…]
new ol.layer.Vector({
source: new ol.source.Vector({
[…]
wrapX: false
}),
extent显示
view: new ol.View({
[…]
extent: ol.proj.get('EPSG:3857').getExtent()
}),
4.分辨率resolution运算
在web地图中，分辨率表示一个像素点表示的单位长度。下面通过一个计算中心点的例如来说明resolution的运算。
map.getView().on('propertychange', function (evt) {
var projExtent = this.getProjection().getExtent();
if (projExtent) {
var currentCenter = this.getCenter();
var currentResolution = this.getResolution();
var mapSize = map.getSize();
var newExtent = [projExtent[0] + currentResolution * mapSize[0] / 2,
projExtent[1] + currentResolution * mapSize[1] / 2,
projExtent[2] - currentResolution * mapSize[0] / 2,
projExtent[3] - currentResolution * mapSize[1] / 2];
if (!(new ol.geom.Point(currentCenter).intersectsExtent(newExtent))) {
currentCenter[0] = Math.min(Math.max(currentCenter[0], newExtent[0]), newExtent[2]);
currentCenter[1] = Math.min(Math.max(currentCenter[1], newExtent[1]), newExtent[3]);
this.setCenter(currentCenter);
}
}
});
说明：上面是view各个属性发生变化时触发的事件，view.getProjection()获取投影系对象proj，proj.getExtent()获取投影系的边界。view.getResolution()获取当前视图的分辨率,currentResolution*mapSize[0]表示整个视图在经度方向的总长度。geom.intersectsExtent判断geom是否在extent边界总。
5.使用unByKey注销事件
在很多ol.control.Control控件中我们会注册一些事件，但经常忽略注销，下面的方式是比较通用的注销事件方式：
ol.control.NavigationHistory.prototype.setMap = function (map) {
ol.control.Control.prototype.setMap.call(this, map);
if (map === null) {
ol.Observable.unByKey(this.get('eventId'));
} else {
this.set('eventId', map.on('moveend', function (evt) {
if (this.get('shouldSave')) {
var view = map.getView();
var viewStatus = {
center: view.getCenter(),
resolution: view.getResolution(),
rotation: view.getRotation()
};
var historyArray = this.get('history');
var currIndex = this.get('index');
historyArray.splice(currIndex + 1, historyArray.length - currIndex - 1);
if (historyArray.length === this.get('maxSize')) {
historyArray.splice(0, 1);
} else {
currIndex += 1;
}
historyArray.push(viewStatus);
this.set('index', currIndex);
} else {
this.set('shouldSave', true);
}
}, this));
}
};
当控件和地图分离时，map会被设置为null，这个时候可调用ol.Observable.unByKey方法取消对事件的监听。
6.如何改变地图的投影系
首先要创建一个新的视图View，设置view的center、zoom、projection、extent属性。然后调用map的setView重新替换地图的视图。
var view = _this.getMap().getView();
var oldProj = view.getProjection();
var newProj = ol.proj.get(this.value);
var newView = new ol.View({
center: ol.proj.transform(view.getCenter(), oldProj, newProj),
zoom: view.getZoom(),
projection: newProj,
extent: newProj.getExtent()
});
_this.getMap().setView(newView);
其次需要替换所有图层的投影系，遍历所有的图层，按照图层的类型采用不同的替换方式。
_this.getMap().getLayers().forEach(function (layer) {
_this.changeLayerProjection(layer, oldProj, newProj);
});
这里的changeLayerProjection是自定义的一个函数，用来处理当个图层的坐标系。
ol.control.Projection.prototype.changeLayerProjection = function (layer, oldProj, newProj) {
if (layer instanceof ol.layer.Group) {
layer.getLayers().forEach(function (subLayer) {
this.changeLayerProjection(subLayer, oldProj, newProj);
});
} else if (layer instanceof ol.layer.Tile) {
var tileLoadFunc = layer.getSource().getTileLoadFunction();
layer.getSource().setTileLoadFunction(tileLoadFunc);
} else if (layer instanceof ol.layer.Vector) {
var features = layer.getSource().getFeatures();
for (var i = 0; i < features.length; i += 1) {
features[i].getGeometry().transform(oldProj, newProj);
}
}
};
layer存在多种类型，所有需要判断类型分别处理。如果是ol.layer.Group类型，则继续遍历分组中的每个图层；如果图层类型为ol.layer.Tile瓦片类型，这需要getTileLoadFunction获取加载函数，重新设置下（由于瓦片图层有缓存，如果不重新设置加载方式，瓦片图层还是会从老的坐标系加载瓦片，通过setTileLoadFunction重新设置下加载函数可清理掉瓦片缓存）；如果图层类型为ol.layer.Vector，需要遍历source中的所有feature,调用feature下geometry的tranform把老坐标系的坐标转换为新坐标系的坐标。
7.openlayers三种渲染方式
DOM渲染
DOM渲染是一种支持预THML5浏览器的传统渲染方式。主要限制在于不能显示vector图层，因为vector图层是使用canvas渲染的。仅仅tile和image图层能被DOM元素创建。如果必须支持传统的浏览器（不支持canvas），那么openlayers 2是一个不错的选择。
Canvas渲染
是openlayers 3默认的渲染方式，每个图层画在单独的canvas元素上。
WEBGL
WEBGL是浏览器对OpenGL的一个现实，浏览器有能力使用硬件加速渲染。该技术广泛用在3D客户端应用。
8.导出图层的必备参数
crossOrigin,ol.source.TileWMS的构造函数有一个参数叫做crossOrigin,如果我们想导出地图图片，必须要设置这个参数：
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://demo.opengeo.org/geoserver/wms',
params: {
layers: 'nlcd',
format: 'image/png'
},
wrapX: false,
crossOrigin: 'anonymous'
}),
name: 'Land Cover'
})
9.WEBGL
https://webglfundamentals.org/
10.ol.Geolocation
获取地理位置对象，一个HTML5的帮助类，提供HTML5 Geolocation功能。跟踪终端设备的位置。例如：
var geoloc = new ol.Geolocation({
projection: map.getView().getProjection(),
tracking: true
});
var geoCaching = new ol.layer.Vector({
source: new ol.source.Vector()
});
map.addLayer(geoCaching);
geoloc.once('change:position', function (evt) {
var altitude = this.getAltitude() || 100;
var myPos = this.getPosition();
map.getView().setCenter(myPos);
map.getView().setZoom(17);
for (var i = 0; i < 50; i += 1) {
geoCaching.getSource().addFeature(new ol.Feature({
geometry: new ol.geom.Point([myPos[0] - 500 + Math.random() * 1000, myPos[1] - 500 + Math.random() * 1000, altitude - 150 + Math.random() * 300]),
loot: 'Treasures of the Seven Seas'
}));
}
});
说明：geoloc不需要添加到地图对象上，只需要设置投影系参数。如果想监听实时位置，可注册change: position事件。geoloc的getAltitude方法获取海拔高度。
Geolocation对象除projection、tracking参数外，还有一个trackingOptions参数，可设置如下：
var geoloc = new ol.Geolocation({
projection: map.getView().getProjection(),
tracking: true,
trackingOptions: {
enableHighAccuracy: true,
maximumAge: 2000
}
});
enableHighAccuracy允许高精准定位，maximumAge设置定位间隔时间，单位为毫秒。
11.Openlayers 3 shp插件使用
shp插件支持导入shp文件到openlayers上直接展示。代码如下：
layerTree.prototype.addVectorLayer = function (form) {
var file = form.file.files[0];
var currentProj = this.map.getView().getProjection();
var fr = new FileReader();
var sourceFormat = new ol.format.GeoJSON();
var source = new ol.source.Vector();
fr.onload = function (evt) {
var vectorData = evt.target.result;
var dataProjection = form.projection.value ||
sourceFormat.readProjection(vectorData) || currentProj;
shp(vectorData).then(function (geojson) {
source.addFeatures(sourceFormat.readFeatures(geojson, {
dataProjection: dataProjection,
featureProjection: currentProj
}));
});
};
fr.readAsArrayBuffer(file);
var layer = new ol.layer.Vector({
source: source,
name: form.displayname.value
});
this.addBufferIcon(layer);
this.map.addLayer(layer);
this.messages.textContent = 'Vector layer added successfully.';
return this;
};
12.ol.style.Icon
如何定位图标，参考下面代码：
style: new ol.style.Style({
image: new ol.style.Icon({
/*anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',*/
src: '../../res/marker.png'
})
})
13.Cesium使用
openlayers团队封装了ol3cesium js库，ol3cesium包含了ol.js代码，所有我们在使用ol3cesium的时候不用再引用ol.js了。例如：
<script type="text/javascript" src="../../js/ol3-cesium-
1.10.0/Cesium/Cesium.js"></script>
<script type="text/javascript" src="../../js/ol3-cesium-
1.10.0/ol3cesium.js"></script>
如果我们自定义了ol.js，我们可以在ol3cesium.js引用的后面再引用ol.js即可。例如：
<script type="text/javascript" src="../../js/ol3-cesium-1.10.0/ol3cesium.js"></script>
<script type="text/javascript" src="../../ol/ol.js"></script>
Cesium场景的可视化非常智能，我们仅仅需要额外定义一个海拔瓦图源即可。创建代码如下：
setTimeout(function () {
var ol3d = new olcs.OLCesium({map: _this.getMap()});
var scene = ol3d.getCesiumScene();
scene.terrainProvider = new Cesium.CesiumTerrainProvider({
url: 'http://assets.agi.com/stk-terrain/world'
});
_this.set('cesium', ol3d);
}, 0);
可调用cesium.setEnabled方法设置是否可用，setBlockCesiumRendering方法设置是否在后台渲染。 可通过这两个方法在2D和3D之间切换。
controlButton.addEventListener('click', function (evt) {
var cesium = _this.get('cesium');
if (cesium.getEnabled()) {
cesium.setBlockCesiumRendering(true);
cesium.setEnabled(false);
} else {
cesium.setBlockCesiumRendering(false);
cesium.setEnabled(true);
}
});
14.openlayers 编译环境
phtyon必须是2.*的版本，并且配置PYTHON环境变量
转载自：https://blog.csdn.net/qq_36178899/article/details/81533940
