帮我写一份可以综合运用Openlayers5中的动画效果(反弹、旋转、自旋、飞行、螺旋等),实现随意四个地点的动画跳转定位的代码
时间: 2024-05-15 15:17:17 浏览: 9
可以的,以下是一份可以综合运用Openlayers5中的动画效果的代码,实现随意四个地点的动画跳转定位:
```javascript
var map = new ol.Map({
target: 'map',
view: new ol.View({
zoom: 2,
center: ol.proj.fromLonLat([0, 0])
})
});
function flyTo(location, done) {
var duration = 2000;
var zoom = map.getView().getZoom();
var parts = 2;
var called = false;
function callback(complete) {
--parts;
if (called) {
return;
}
if (parts === 0 || !complete) {
called = true;
done(complete);
}
}
map.getView().animate({
center: location,
duration: duration
}, callback);
map.getView().animate({
zoom: zoom - 2,
duration: duration / 2
}, {
zoom: zoom,
duration: duration / 2
}, callback);
}
var locations = {
'北京': [116.396255, 39.906078],
'伦敦': [-0.127758, 51.507351],
'纽约': [-74.005973, 40.714352],
'悉尼': [151.209295, -33.865143]
};
var locationList = document.getElementById('location-list');
for (var name in locations) {
var li = document.createElement('li');
li.textContent = name;
locationList.appendChild(li);
li.addEventListener('click', function() {
var name = this.textContent;
flyTo(ol.proj.fromLonLat(locations[name]), function() {});
}, false);
}
```
笑话:为什么熊猫站的那么稳?因为有竹子撑腰。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)