网站开发技术说明文档,网站审核员做点啥,网站建设方案书 下载,网站活动推广方案本博客合集是我的openlayers学习笔记#xff0c;希望能帮助到刚开始接触openlayers的同学commnet 所用openlayers版本#xff1a;v5.3.0commnet 阅读本文前需要对前端知识有一定的了解comment 本文内容只提供参考#xff0c;建议结合openlayers官网的API和examples来学习com…本博客合集是我的openlayers学习笔记希望能帮助到刚开始接触openlayers的同学commnet 所用openlayers版本v5.3.0commnet 阅读本文前需要对前端知识有一定的了解comment 本文内容只提供参考建议结合openlayers官网的API和examples来学习comment 部分代码参考了老胡动画即过渡动画如果没有动画地图从一个view状态切换到另一个view状态是突变的、死板的动画能使过渡效果更自然。本节内容主要用到了view对象的animate方法下面以实例说明。创建几个功能测试按钮和一个地图容器↻↺平移到伦敦弹性平移到莫斯科弹跳平移到伊斯坦布尔旋转平移到罗马绕着罗马旋转飞行到伯尔尼来一段旅行复制代码创建地图对象和几个城市的伪墨卡托坐标变量还有一个为按钮添加点击事件的函数方便后续调用var london ol.proj.fromLonLat([-0.12755, 51.507222]);//伦敦var moscow ol.proj.fromLonLat([37.6178, 55.7517]);//莫斯科var istanbul ol.proj.fromLonLat([28.9744, 41.0128]);//伊斯坦布尔var rome ol.proj.fromLonLat([12.5, 41.9]);//罗马var bern ol.proj.fromLonLat([7.4458, 46.95]);//柏林var view new ol.View({center: istanbul,zoom: 6});var map new ol.Map({target: map,layers: [new ol.layer.Tile({preload: 4,source: new ol.source.OSM()})],//开启动画时允许加载瓦片数据loadTilesWhileAnimating: true,view: view});function onClick(id, callback) {document.getElementById(id).addEventListener(click, callback);}复制代码通过rotation参数设置地图的旋转动画在animate中传入想要变化的view的目标参数(如rotation、center)从当前状态变化到目标状态时如不指定动画类型地图会使用默认方式渲染动画。onClick(rotate-left, function() {//设置rotation参数的目标值为当前角度顺时针加90度地图会以默认方式渲染动画view.animate({rotation: view.getRotation() Math.PI / 2});});onClick(rotate-right, function() {//设置rotation参数的目标值为当前角度顺时针减90度地图会以默认方式渲染动画view.animate({rotation: view.getRotation() - Math.PI / 2});});复制代码入场动画和出场动画地图过渡的一段动画可以同时包括入场动画和出场动画在同一animate函数中指定。下面的例子中入场动画为先慢后快地以罗马为中心、将地图顺时针旋转180度出场动画为先快后慢地以罗马为中心、继续顺时针旋转至360度。onClick(rotate-around-rome, function() {var rotation view.getRotation();view.animate(//入场动画为顺时针旋转180度{rotation: rotation Math.PI,anchor: rome,//围绕罗马旋转easing: ol.easing.easeIn//擦除方式使用先慢后快的ol.easing.easeIn},//出场动画为顺时针旋转360度{rotation: rotation 2 * Math.PI,anchor: rome,easing: ol.easing.easeOut//擦除方式使用先快后慢的ol.easing.easeOut});});复制代码通过center参数设置地图的移动动画下面的例子展示了地图以默认动画从当前中心点平移到伦敦动画过程2秒onClick(pan-to-london, function() {view.animate({center: london,duration: 2000});});复制代码自定义动画easing可以自定义过渡效果函数返回值为0-1之间的小数代表起点到终点的变化进度。下面的例子先定义了一个弹跳动画函数并使用该函数让地图以弹跳动画从当前中心点平移到伦敦动画过程2秒function elastic(t) {return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) 1;}onClick(elastic-to-moscow, function() {view.animate({center: moscow,duration: 2000,easing: elastic});});复制代码综合应用1下面的例子展示了地图从当前中心点旋转、平移到罗马前半程为入场动画后半程为出场动画onClick(spin-to-rome, function() {var center view.getCenter();view.animate({center: [center[0] (rome[0] - center[0]) / 2,center[1] (rome[1] - center[1]) / 2],rotation: Math.PI,easing: ol.easing.easeIn}, {center: rome,rotation: 2 * Math.PI,easing: ol.easing.easeOut});});复制代码并发执行如果给一个过程设置了多个动画他们都是并行执行的。下面的动画类似于一只鸟的视角从当前中心点移动到另一个中心点(动画1)并且前半程缩小视角、后半程回到原视角(动画2)。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: location,duration: duration}, callback);view.animate({zoom: zoom - 1,duration: duration / 2}, {zoom: zoom,duration: duration / 2}, callback);}onClick(fly-to-bern, function() {flyTo(bern, function() {});});复制代码综合应用2下面的例子使用上面创建的“鸟视角飞跃函数”在多个城市之间跳跃function tour() {var locations [london, bern, rome, moscow, istanbul];var index -1;function next(more) {if (more) {index;if (index locations.length) {var delay index 0 ? 0 : 750;setTimeout(function() {flyTo(locations[index], next);}, delay);} else {alert(Tour complete);}} else {alert(Tour cancelled);}}next(true);}onClick(tour, tour);复制代码本节测试用例的界面如下
