Mapboxgl + TweenJS 实现图层属性的动画效果（地块抬升）

（1）主要过程：使用统一的数据源，通过mapboxgl.setFilter方法对选中的图层进行筛选；在图层属性变化的过程中（setPaintProperty）使用TweenJS动画补间实现动态变化

（2）效果：

（3）代码

HTML 、CSS：

<!DOCTYPE html>
<html lang="ZH-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>mapbox地块点击抬升动画效果</title><link rel="stylesheet" href="../lib/js/geoglobe/mapbox-gl.css" type="text/css" /><script type="text/javascript" src="../lib/js/geoglobe/mapbox-gl.js"></script><script type="text/javascript" src="../lib/js/tween/tween.umd.js"></script></head><style>html,body {height: 100vh;width: 100%;padding: 0;margin: 0;}#map {width: 100%;height: 100%;}</style><body><div id="map"></div><script src="./data/wuhanPolygon.js"></script> <!-- 行政区划数据 --><script src="./js/mapboxClickUp.js"></script></body>
</html>

完整 JS：

let map;
// mapbox token 请自行到官网申请
mapboxgl.accessToken = '***************************';
const colorStops = {stops: [[0, '#ffffcc'],[1, '#a1dab4'],[2, '#41b6c4'],[3, '#2c7fb8'],[4, '#ffffcc'],[5, '#253494'],[6, '#fed976'],[7, '#feb24c'],[8, '#fd8d3c'],[9, '#f03b20'],[10, '#bd0026'],[11, '#253494'],[12, '#ffffcc'],],property: 'FID',
};
let featureArr = ['', '']; // 用于要素筛选map = new mapboxgl.Map({container: 'map',style: {version: 8,sources: {},layers: [],},center: [114.31369190771244, 30.57799365914005],zoom: 8.5,pitch: 45,
});init();
animate();function init() {map.on('load', () => {mapLoadInit();addStateLayer();});map.on('click', (e) => {console.log([e.lngLat.lng, e.lngLat.lat]);console.log(map.getZoom());});
}
// 添加底图图层
function mapLoadInit() {map.addLayer({id: 'static-layer',type: 'raster',source: {type: 'raster',tiles: ['https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',],tileSize: 256,},paint: {'raster-opacity': 1,},});
}
function addStateLayer() {// 数据处理。行政区划数据是用arcgis导出的，需要把json格式转化为mapboxgl支持的格式let wuhanFeatures = [];wuhanPolygon.features.forEach((element) => {wuhanFeatures.push({type: 'Feature',properties: element.attributes,geometry: {type: 'Polygon',coordinates: element.geometry.rings,},});});map.addSource('wuhan', {type: 'geojson',data: {type: 'FeatureCollection',features: wuhanFeatures,},});map.addLayer({id: 'wuhan',source: 'wuhan',type: 'fill',paint: {'fill-color': colorStops,'fill-opacity': 0.5,},});// 三维图层map.addLayer({id: 'wuhan_extrusion',source: 'wuhan',type: 'fill-extrusion',paint: {'fill-extrusion-color': colorStops,'fill-extrusion-opacity': 0,'fill-extrusion-height': 0,'fill-extrusion-base': 0,},});map.on('click', 'wuhan', (e) => {let featureName = e.features[0].properties.District;// 保留前一次点击和当前点击的要素名称featureArr.push(featureName);featureArr.shift();// 筛选前一次点击和当前点击的要素，前一次点击的要素做下降动画，当前点击要素做抬升动画tweenDown();});// 修改鼠标移入图层的样式map.on('mouseenter', 'wuhan', () => {map.getCanvas().style.cursor = 'pointer';});map.on('mouseleave', 'wuhan', function () {map.getCanvas().style.cursor = '';});
}//  动画补间
function tweenUp() {map.setFilter('wuhan_extrusion', ['==', 'District', featureArr[1]]);let object = { b: 0, o: 0 };new TWEEN.Tween(object).to({ b: 5000, o: 0.8 }, 2000).easing(TWEEN.Easing.Quadratic.InOut).onStart(() => {}).onUpdate(() => {map.getLayer('wuhan_extrusion') &&map.setPaintProperty('wuhan_extrusion', 'fill-extrusion-height', object.b);map.getLayer('wuhan_extrusion') &&map.setPaintProperty('wuhan_extrusion', 'fill-extrusion-opacity', object.o);}).onComplete(() => {}).start();
}
function tweenDown() {map.setFilter('wuhan_extrusion', ['==', 'District', featureArr[0]]);let object = { b: 5000, o: 0.8 };new TWEEN.Tween(object).to({ b: 0, o: 0 }, 400).onUpdate(() => {map.getLayer('wuhan_extrusion') &&map.setPaintProperty('wuhan_extrusion', 'fill-extrusion-height', object.b);map.getLayer('wuhan_extrusion') &&map.setPaintProperty('wuhan_extrusion', 'fill-extrusion-opacity', object.o);}).onComplete(() => {tweenUp();}).start();
}function animate() {requestAnimationFrame(animate);TWEEN.update();
}

（4）目前还存在的问题：每次点击图层后会闪一下，推测是筛选图层或者是动画函数的逻辑问题，后续再优化吧

Mapboxgl + TweenJS 实现图层属性的动画效果（地块抬升）相关推荐

MapboxGL——marker轨迹动画效果，自定义速度。暂停继续轨迹运动
轨迹运动的核心是不断变动marker的坐标. 最终效果: 主要参考了 Mapbox实现动态轨迹_mapbox 轨迹_二五25的博客-CSDN博客 mapbox轨迹动画效果_mapbox动画_Chao ...
QGIS 3.14|地震数据动画效果实战（二）动画设置篇
01 设置图层Temporal属性在QGIS 3.14中,图层的属性对话框首次加入了 Temporal标签页,提供图层的时间设置. 右键点击[图层]面板中的"quake2020" ...
[Mapbox GL]点的动画效果
更新每帧的GeoJSON资源实现点的动画效果 <!DOCTYPE html> <html> <head><meta charset='utf-8' /> ...
android 动画x轴旋转,Android Roate3dAnimation实现围绕y轴竖直方向或者绕x轴方向旋转的3d动画效果...
概要: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Roate3dAnim ...
【骚气的动效】外发光涟漪波纹动画、向外辐射动画效果，通常用于地图上面某一个扩散点效果
第一种:两轮外发光叠加,第二轮外发光结束后再出现第一轮 /* 外发光动画.向外辐射动画效果 */$orangeColor: rgba(251, 193, 105, 0.6); %out-glow {& ...
模仿滴滴单车解锁的时候，从0%到90%的欺骗加载动画效果
/**欺骗加载动画效果-*/var text = '已解锁{value}%';var interval;var __fakeLoading = function (callback, time, pe ...
Javascript动画效果（四）
Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...
Android动画效果translate、scale、alpha、rotate详解
动画类型 Android的animation由四种类型组成 XML中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面 ...
android联动动画,利用 CollapsingToolbarLayout 完成联动的动画效果
最近项目中需要实现个动画效果,研究了下这里做下简单的分享. 效果图如下: 示例.gif 最初的想法是自己去利用 Android 的嵌套滚动机制,去实现上面的嵌套滚动效果.但最后为了开发效率直接利用了 ...

Mapboxgl + TweenJS 实现图层属性的动画效果（地块抬升）

Mapboxgl + TweenJS 实现图层属性的动画效果（地块抬升）相关推荐

最新文章

热门文章