代码编织梦想

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/VarLInKe/article/details/115329371

几种动态轨迹可视化效果实现方案-echarts、mapv、deck.gl_多多岛的小火车的博客-爱代码爱编程_echarts行车轨迹

0.前言 在越来越多的可视化需求中,对空间信息的展示,逐渐的由静转为动,通过还原一些真实的时空信息,如历史行车轨迹,渔船打捞作业,特种车辆运行轨迹回放等可以直观的查看时空分布规律,它是一种越来越重要的展示形式并且辅助我们做

mapbox地图的使用方法-总结_奋斗的小青年dyt的博客-爱代码爱编程_mapbox地图

今天刚好有时间就来总结下mapbox的用法吧 自己选择的路跪着也要走完 在使用mapbox之前需要到官网去注册账号,然后会拿到一个Access tokens,只有拿到了这个token你才能使用mapbox地图,

mapbox gl 3d模型贴图的贴图实现方式_我是梅长苏的博客-爱代码爱编程_mapbox fill-extrusion-pattern

this.map.on(‘load’, function() { that.map.addLayer({ ‘id’: ‘3d-buildings’, ‘source’: ‘composite’, ‘source-layer’

【vue - 工具 - mapboxgljs】07、vuecli+mapboxgl创建demo显示地图_汪 同 学 丶的博客-爱代码爱编程_vue+mapboxgl

vuecli+mapboxgl创建demo方法 一、获取token mapbox官网注册账号 个人中心account页面,获取accessToken 二、安装并引入使用 npm install --save mapb

mapbox 展示3d渐变建筑物_炉火纯青-旺的博客-爱代码爱编程_mapbox中建筑物呈现渐变色

<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>Display buildings in 3D</title> <meta name='viewport' content='in

mapbox-gl使用geojson实现三维建筑物效果-爱代码爱编程

1 引入mapbox-gl.js、mapbox-gl.css 2 vue中初始化地图 import {getJson} from "./geojson/json" async initMap() { // let

mapbox 线条发光效果 发光(如何实现 )?已实现-爱代码爱编程

这种效果如何实现的 这个是我由两个图层做出效果 颜色之类的可以修改 (如果想发光更亮就可以用更多图层,更低的透明度,加上模糊程度,最关键的白线色图层要最后再加) 1:先创建一个颜色为绿色 宽度为8的图层 模糊程度可以设置为3 map.addLayer({ "id": "route", "type": "line",

Cesium学习笔记-爱代码爱编程

Cesium学习笔记 Cesium是一个基于JavaScript的开源框架,可用于在浏览器中绘制3D的地球,并在其上绘制地图(支持多种格式的瓦片服务),该框架不需要任何插件支持,但是浏览器必须支持WebGL。 Cesium支持多种数据可视化方式,可以绘制各种几何图形、导入图片,甚至3D模型。同时,Cesium还支持基于时间轴的动态数据展示,例如,我们可

mapbox加载建筑物真型osm building-爱代码爱编程

效果如下,按住ctrl键和鼠标左键,可以倾斜旋转地图。   一、代码 代码如下,把mapboxgl.accessToken替换成自己的key: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>mapbo

mapbox地图的使用方法-爱代码爱编程

在使用mapbox之前需要到官网去注册账号,然后会拿到一个Access tokens,只有拿到了这个token你才能使用mapbox地图,我们可以用两种方式引入mapbox GL js 使用mapbox的cdn<script src='https://api.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js'

mapboxgl绘制3D线-爱代码爱编程

最近遇到个需求,使用mapboxgl绘制行政区划图层,要求把行政区划拔高做出立体效果,以便突出显示。 拿到这个需求后,感觉很简单呀,只需要用fill-extrusion方式绘制就可以啦,实现出来是这个样子的 效果有点丑,并且这里有个问题就是我的数据是区县数据,而绘制出的效果却没有区分出各个区县的边界 于是从下面两个方向做优化处理: 各区县按不同颜

使用mapboxgl 实现特定的地图效果_mapboxgl 为指定区域添加地面模型-爱代码爱编程

使用mapboxgl 实现特定的地图效果 最近完成的一个项目,dashboard 地图模块的需要和第三方对接,对接要求使用mapboxgl 来对接。以前的项目一直用leaflet库来处理地图需求,mapboxgl 库对我来