您的位置：首页 > 运维架构

OpenLayers3-10-Advanced View Positioning

2016-01-22 00:31 393 查看

原文地址：http://openlayers.org/en/v3.13.0/examples/center.html

This example demonstrates how a map’s view can be adjusted so a geometry or coordinate is positioned at a specific pixel location. The map above has top, right, bottom, and left padding applied inside the viewport. The view’s fit method is used to fit a geometry in the view with the same padding. The view’s centerOn method is used to position a coordinate (Lausanne) at a specific pixel location (the center of the black box).

Use Alt+Shift+Drag to rotate the map.

Related API documentation:

ol.Map,ol.View,ol.control,ol.format.GeoJSON,ol.geom.Point,ol.geom.SimpleGeometry,ol.layer.Tile,ol.layer.Vector,ol.source.OSM,ol.source.Vector,ol.style.Circle,ol.style.Fill,ol.style.Stroke,ol.style.Style

翻译：

这个例子演示了地图的视角如何根据一个在放置在特定像素点的地理信息或者坐标进行调整。在视野框的上下、左右都有一定的缩进。视野适应方法通常是对一个地理信息对上下左右有相同的缩进。视野centerOn方法通常是将坐标（Lausanne）放在特定位置（黑盒的中心）。

相关的api文档包括：

ol.Map,ol.View,ol.control,ol.format.GeoJSON,ol.geom.Point,ol.geom.SimpleGeometry,ol.layer.Tile,ol.layer.Vector,ol.source.OSM,ol.source.Vector,ol.style.Circle,ol.style.Fill,ol.style.Stroke,ol.style.Style

<!DOCTYPE html>
<html>
<head>
<title>Advanced View Positioning</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.13.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.13.0/build/ol.js"></script>
<style>
.mapcontainer {
position: relative;
margin-bottom: 20px;
}
.map {
width: 1000px;
height: 600px;
}
div.ol-zoom {
top: 178px;
left: 158px;
}
div.ol-attribution {
bottom: 30px;
right: 50px;
}
.padding-top {
position: absolute;
top: 0;
left: 0px;
width: 1000px;
height: 170px;
background: rgba(255, 255, 255, 0.5);
}
.padding-left {
position: absolute;
top: 170px;
left: 0;
width: 150px;
height: 400px;
background: rgba(255, 255, 255, 0.5);
}
.padding-right {
position: absolute;
top: 170px;
left: 950px;
width: 50px;
height: 400px;
background: rgba(255, 255, 255, 0.5);
}
.padding-bottom {
position: absolute;
top: 570px;
left: 0px;
width: 1000px;
height: 30px;
background: rgba(255, 255, 255, 0.5);
}
.center {
position: absolute;
border: solid 1px black;
top: 490px;
left: 560px;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div class="mapcontainer">
<div id="map" class="map"></div>
<!--添加上下左右4个方向的覆盖物-->
<div class="padding-top"></div>
<div class="padding-left"></div>
<div class="padding-right"></div>
<div class="padding-bottom"></div>
<!--添加黑盒-->
<div class="center"></div>
</div>
<button id="zoomtoswitzerlandbest">Zoom to Switzerland</button> (best fit),<br/>
<button id="zoomtoswitzerlandconstrained">Zoom to Switzerland</button> (respect resolution constraint).<br/>
<button id="zoomtoswitzerlandnearest">Zoom to Switzerland</button> (nearest),<br/>
<button id="zoomtolausanne">Zoom to Lausanne</button> (with min resolution),<br/>
<button id="centerlausanne">Center on Lausanne</button>
<script>
//加载Switzerland的geojson作为Vector的数据源
var source = new ol.source.Vector({
url: 'data/geojson/switzerland.geojson',
format: new ol.format.GeoJSON()
});
//设置样式
var style = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.6)'
}),
stroke: new ol.style.Stroke({
color: '#319FD3',
width: 1
}),
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.6)'
}),
stroke: new ol.style.Stroke({
color: '#319FD3',
width: 1
})
})
});
var vectorLayer = new ol.layer.Vector({
source: source,
style: style
});
var view = new ol.View({
center: [0, 0],
zoom: 1
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vectorLayer
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: view
});

var zoomtoswitzerlandbest = document.getElementById('zoomtoswitzerlandbest');
zoomtoswitzerlandbest.addEventListener('click', function() {
var feature = source.getFeatures()[0];
var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
var size = /** @type {ol.Size} */ (map.getSize());
//padding 就是上面4个div的padding手动设置的 按上/左/右/下 四个参数
//constrainResolution 默认关闭 更合适的解
view.fit(polygon, size, {padding: [170, 50, 30, 150], constrainResolution: false});
}, false);

var zoomtoswitzerlandconstrained =
document.getElementById('zoomtoswitzerlandconstrained');
zoomtoswitzerlandconstrained.addEventListener('click', function() {
var feature = source.getFeatures()[0];
var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
var size = /** @type {ol.Size} */ (map.getSize());
view.fit(polygon, size, {padding: [170, 50, 30, 150]});
}, false);

var zoomtoswitzerlandnearest =
document.getElementById('zoomtoswitzerlandnearest');
zoomtoswitzerlandnearest.addEventListener('click', function() {
var feature = source.getFeatures()[0];
var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
var size = /** @type {ol.Size} */ (map.getSize());
//nearest Get the nearest extent. Default is false
view.fit(polygon, size, {padding: [170, 50, 30, 150], nearest: true});
}, false);

var zoomtolausanne = document.getElementById('zoomtolausanne');
zoomtolausanne.addEventListener('click', function() {
var feature = source.getFeatures()[1];
var point = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
var size = /** @type {ol.Size} */ (map.getSize());
view.fit(point, size, {padding: [170, 50, 30, 150], minResolution: 50});
}, false);

var centerlausanne = document.getElementById('centerlausanne');
centerlausanne.addEventListener('click', function() {
var feature = source.getFeatures()[1];
var point = /** @type {ol.geom.Point} */ (feature.getGeometry());
var size = /** @type {ol.Size} */ (map.getSize());
//手动设定的center的位置
view.centerOn(point.getCoordinates(), size, [570, 500]);
}, false);
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航