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

最新推荐文章于 2024-05-01 06:07:24 发布

1H1R1M

最新推荐文章于 2024-05-01 06:07:24 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/VarLInKe/article/details/115329371

版权

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