239 lines
9.0 KiB
Markdown
239 lines
9.0 KiB
Markdown
|
---
|
|||
|
|
title: View 示例
|
|||
|
|
date: 2021-09-08
|
|||
|
|
author: ac
|
|||
|
|
tags:
|
|||
|
|
- OpenLayers
|
|||
|
|
categories:
|
|||
|
|
- GIS
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## [View Animation](https://openlayers.org/en/latest/examples/animation.html) 示例
|
|||
|
|
|
|||
|
|
> 开始学`ol`会觉得很奇怪，因为从`ArcGIS API for JS 3.x`刚转过来，它里面并没有将控制分辨率、缩放级别、地图范围、投影等分离出来，这些相关的API全在map对象里面，而`ol`将它们封装到了`View`中。
|
|||
|
|
|
|||
|
|
### 1 View对象
|
|||
|
|
|
|||
|
|
`View`对象是代表地图的简单`2D`视图，可以用于更改地图中心、分辨率、和旋转的对象；其中的projection属性，确定地图的坐标系（默认是墨卡托投影`EPSG:3857`）。
|
|||
|
|
|
|||
|
|
View有三种状态：
|
|||
|
|
|
|||
|
|
- center：视图的初始中心。
|
|||
|
|
- resolution：视图的初始分辨率。单位是projection每像素的单位（例如米/像素），所有关于地图缩放有关的计算都是使用`resolution`。
|
|||
|
|
- rotation：视图的初始旋转（弧度）（顺时针正旋转，0表示北）。
|
|||
|
|
|
|||
|
|
跟地图缩放有关的还有`zoom`属性，但实际上`zoom`没有封装在`view`对象中，不过`view`中还是提供了`setZoom()`和`getZoom()`方法访问`zoom`属性。
|
|||
|
|
|
|||
|
|
### 2 状态的限制
|
|||
|
|
|
|||
|
|
通过`setCenter`、`setResolution`和`setRotation`方法可以改变view的状态。但地图不可能无限的放大或缩小，所以使用`resolutions`设置地图的所有层级的分辨率或使用`maxResolution`、`MaxZoom`和`zoomFactor`限制缩放的大小。如果设置了`resolutions`属性，其他三个属性将失效。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 3 Animation动画
|
|||
|
|
|
|||
|
|
当改变view状态的时候，可以使用`animate(option)`方法从原来的状态平滑的过渡到另一个状态。
|
|||
|
|
|
|||
|
|
`option`配置对象，以`JSON`对象的方式配置参数，同时也可以有多个配置对象形成链式连续的动画效果。
|
|||
|
|
|
|||
|
|
| type | Description |
|
|||
|
|
| :--------: | ------------------------------------------------------------ |
|
|||
|
|
| center | 动画结束后view的中心 |
|
|||
|
|
| zoom | 动画结束后view的缩放级别，优先于`resolution` |
|
|||
|
|
| resolution | 动画结束后view的地图分辨率，如果设置了`zoom`则该配置项会被忽略 |
|
|||
|
|
| rotation | 动画结束后view的旋转角度，顺时针正旋转，0表示北 |
|
|||
|
|
| anchor | 锚点，是一个Coordinate类型的参数，用于固定某点进行动画 |
|
|||
|
|
| duration | 动画的过渡时间，单位为毫米 |
|
|||
|
|
| easing | 动画使用的缓冲函数。该函数将为每一帧调用，并带有表示动画持续时间的一小部分的数字。应该返回一个0到1之间的数字，表示向目标状态的进展。 |
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<!doctype html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<style>
|
|||
|
|
.map {
|
|||
|
|
height: 400px;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
|
|||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css">
|
|||
|
|
<title>View</title>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<h2>My Map</h2>
|
|||
|
|
<div id="map" class="map"></div>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
|
|||
|
|
window.onload =function(){
|
|||
|
|
var shenzhen = [113.958334,22.535640];
|
|||
|
|
/*
|
|||
|
|
* 地图表现:必备三要素，
|
|||
|
|
* 图层（Layer）
|
|||
|
|
* 视图（View）
|
|||
|
|
* 目标容器（target）
|
|||
|
|
* */
|
|||
|
|
var map = new ol.Map({
|
|||
|
|
view:new ol.View({
|
|||
|
|
center:ol.proj.fromLonLat(shenzhen),
|
|||
|
|
zoom:8,
|
|||
|
|
minzoom:6,
|
|||
|
|
maxzoom:12,
|
|||
|
|
rotation:Math.PI/6
|
|||
|
|
}),
|
|||
|
|
layers:[
|
|||
|
|
new ol.layer.Tile({
|
|||
|
|
source:new ol.source.OSM()
|
|||
|
|
})
|
|||
|
|
],
|
|||
|
|
target:"map"
|
|||
|
|
});
|
|||
|
|
map.on("click",function (e) {
|
|||
|
|
var point = e.coordinate;
|
|||
|
|
console.log("x:"+point[0]+",y:"+point[1]);
|
|||
|
|
});
|
|||
|
|
/*
|
|||
|
|
*View对象：
|
|||
|
|
*View对象是代表地图的简单2D视图，可以用于更改地图中心、分辨率、和旋转的对象；
|
|||
|
|
* projection属性，确定中心的坐标系（默认是墨卡托投影EPSG:3857）
|
|||
|
|
*
|
|||
|
|
* View三种状态：
|
|||
|
|
* center：视图的初始中心。如果未设置用户投影，则使用projection选项指定中心的坐标系，如果未设置，则不会获取图层源，但是稍后可以使用设置中心#setCenter。
|
|||
|
|
* resolution：视图的初始分辨率。单位是projection每像素的单位（例如米/像素）
|
|||
|
|
* rotation：视图的初始旋转（弧度）（顺时针正旋转，0表示北）。
|
|||
|
|
*
|
|||
|
|
* 常用属性还有：zoom,resolutions。如果设置了resolutions，则maxResolution，minResolution， minZoom，maxZoom，和zoomFactor选项都将被忽略。
|
|||
|
|
*/
|
|||
|
|
//地图视图的初始化参数
|
|||
|
|
var view = map.getView();
|
|||
|
|
var zoom = view.getZoom();
|
|||
|
|
var center = view.getCenter();
|
|||
|
|
var rotation = view.getRotation();
|
|||
|
|
|
|||
|
|
document.getElementById("zoom-out").onclick = function(e){
|
|||
|
|
var view = map.getView();
|
|||
|
|
var zoom = view.getZoom();
|
|||
|
|
view.setZoom(zoom - 1);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
document.getElementById("zoom-in").onclick = function(e){
|
|||
|
|
var view = map.getView();
|
|||
|
|
var zoom = view.getZoom();
|
|||
|
|
view.setZoom(zoom + 1);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
document.getElementById("panto").onclick = function(e){
|
|||
|
|
var view = map.getView();
|
|||
|
|
//参数为ol.Coordinate
|
|||
|
|
var mak = ol.proj.fromLonLat(shenzhen);
|
|||
|
|
view.setCenter(mak);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
document.getElementById("reset").onclick = function(e){
|
|||
|
|
view.setCenter(center);
|
|||
|
|
view.setZoom(zoom);
|
|||
|
|
view.setRotation(rotation);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// var shenzhen = [1280091112800911.302100137,2611260.0825854577];
|
|||
|
|
/*
|
|||
|
|
animate(var_args)
|
|||
|
|
例子： view.animate({zoom: view.getZoom() + 1});
|
|||
|
|
view.animate({zoom: 10}, {center: [0, 0]});将多个动画放在一起，先缩放后平移
|
|||
|
|
|
|||
|
|
参数：center、zoom、resolution、rotation、duration、easing、anchor
|
|||
|
|
默认情况下，动画持续一秒钟，并 in-and-out easing缓进缓出，
|
|||
|
|
duration：设置动画持续时间（单位：毫秒）；
|
|||
|
|
easing：设置动画进出方式；
|
|||
|
|
anchor锚点：用于rotation或resolution固定旋转的原点；
|
|||
|
|
**/
|
|||
|
|
document.getElementById("rotate-left").onclick = function (e) {
|
|||
|
|
view.animate({
|
|||
|
|
rotation:view.getRotation()+Math.PI/2
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
document.getElementById("rotate-right").onclick = function (e) {
|
|||
|
|
view.animate({
|
|||
|
|
rotation:view.getRotation()-Math.PI/2
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
document.getElementById("fly-to-shenzhen").onclick = function () {
|
|||
|
|
var rotation = view.getRotation();
|
|||
|
|
flyTo(shenzhen,function () {
|
|||
|
|
console.log("执行完回调");
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
function flyTo(location, done) {
|
|||
|
|
var duration = 2000;
|
|||
|
|
var zoom = view.getZoom();
|
|||
|
|
var parts = 2;
|
|||
|
|
var called = false;
|
|||
|
|
function callback(complete) {
|
|||
|
|
--parts;
|
|||
|
|
if (called) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (parts === 0 || !complete) {
|
|||
|
|
called = true;
|
|||
|
|
done(complete);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
view.animate({
|
|||
|
|
center: ol.proj.fromLonLat(shenzhen),
|
|||
|
|
duration: duration
|
|||
|
|
}, callback);
|
|||
|
|
view.animate({
|
|||
|
|
zoom: zoom - 1,
|
|||
|
|
duration: duration / 2
|
|||
|
|
}, {
|
|||
|
|
zoom: zoom,
|
|||
|
|
duration: duration / 2
|
|||
|
|
}, callback);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 注意：当多个option配置对象时，每个状态（zoom，resolution，rotation）都是相对原始状态的
|
|||
|
|
*/
|
|||
|
|
document.getElementById("rotate-around-shenzhen").onclick = function(){
|
|||
|
|
var rotation = view.getRotation();
|
|||
|
|
view.animate({
|
|||
|
|
rotation: rotation + Math.PI,//是原始状态旋转180
|
|||
|
|
anchor: ol.proj.fromLonLat(shenzhen),
|
|||
|
|
easing: ol.easing.easeIn
|
|||
|
|
},{
|
|||
|
|
rotation: rotation + 2*Math.PI,//是原始状态旋转360
|
|||
|
|
anchor: ol.proj.fromLonLat(shenzhen),
|
|||
|
|
easing: ol.easing.easeOut
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<hr>
|
|||
|
|
<div>
|
|||
|
|
<p>View动画animation</p>
|
|||
|
|
<p>让View平滑地改变状态（中心点、缩放级别、旋转）</p>
|
|||
|
|
<button id="zoom-out">放大</button>
|
|||
|
|
<button id="zoom-in">缩小</button>
|
|||
|
|
<button id="panto">定位</button>
|
|||
|
|
<button id="reset">复位</button>
|
|||
|
|
<button id="rotate-left" title="Rotate clockwise">↻</button>
|
|||
|
|
<button id="rotate-right" title="Rotate counterclockwise">↺</button>
|
|||
|
|
<button id="rotate-around-shenzhen">Rotate around shenzhen</button>
|
|||
|
|
<button id="fly-to-shenzhen">Fly to ShenZhen</button>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|