mapbox 高亮相同特征的要素数据

最新推荐文章于 2024-08-07 17:19:12 发布

炉火纯青-旺

最新推荐文章于 2024-08-07 17:19:12 发布

阅读量743

点赞数 29

文章标签：前端

本文链接：https://blog.csdn.net/qq_34870529/article/details/136028577

版权

一、完整代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Highlight features containing similar data</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.1.2/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.1.2/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<style>
    .map-overlay {
        font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        border-radius: 3px;
        position: absolute;
        width: 25%;
        top: 10px;
        left: 10px;
        padding: 10px;
        display: none;
    }
</style>

<div id="map"></div>
<div id="map-overlay" class="map-overlay"></div>

<script>
	// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
	mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    const map = new mapboxgl.Map({
        container: 'map',
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        style: 'mapbox://styles/mapbox/streets-v12',
        center: [-98, 38.88],
        minZoom: 2,
        zoom: 3
    });

    const overlay = document.getElementById('map-overlay');

    // Create a popup, but don't add it to the map yet.
    const popup = new mapboxgl.Popup({
        closeButton: false
    });

    // Because features come from tiled vector data,
    // feature geometries may be split
    // or duplicated across tile boundaries.
    // As a result, features may appear
    // multiple times in query results.
    function getUniqueFeatures(features, comparatorProperty) {
        const uniqueIds = new Set();
        const uniqueFeatures = [];
        for (const feature of features) {
            const id = feature.properties[comparatorProperty];
            if (!uniqueIds.has(id)) {
                uniqueIds.add(id);
                uniqueFeatures.push(feature);
            }
        }
        return uniqueFeatures;
    }

    map.on('load', () => {
        // Add a custom vector tileset source. The tileset used in
        // this example contains a feature for every county in the U.S.
        // Each county contains four properties. For example:
        // {
        //     COUNTY: "Uintah County",
        //     FIPS: 49047,
        //     median-income: 62363,
        //     population: 34576
        // }
        map.addSource('counties', {
            'type': 'vector',
            'url': 'mapbox://mapbox.82pkq93d'
        });
        // Add transparent county polygons
        // for default display.
        map.addLayer(
            {
                'id': 'counties',
                'type': 'fill',
                'source': 'counties',
                'source-layer': 'original',
                'paint': {
                    'fill-outline-color': 'rgba(0,0,0,0.1)',
                    'fill-color': 'rgba(0,0,0,0.1)'
                }
            },
            // Place polygons under labels, roads and buildings.
            'building'
        );

        // Add filled county polygons
        // for highlighted display.
        map.addLayer(
            {
                'id': 'counties-highlighted',
                'type': 'fill',
                'source': 'counties',
                'source-layer': 'original',
                'paint': {
                    'fill-outline-color': '#484896',
                    'fill-color': '#6e599f',
                    'fill-opacity': 0.75
                },
                // Display none by adding a
                // filter with an empty string.
                'filter': ['in', 'COUNTY', '']
            },
            // Place polygons under labels, roads and buildings.
            'building'
        );

        map.on('mousemove', 'counties', (e) => {
            // Change the cursor style as a UI indicator.
            map.getCanvas().style.cursor = 'pointer';

            // Use the first found feature.
            const feature = e.features[0];

            // Query the counties layer visible in the map.
            // Only onscreen features are returned.
            // Use filter to collect only results
            // with the same county name.
            const relatedCounties = map.querySourceFeatures('counties', {
                sourceLayer: 'original',
                filter: ['in', 'COUNTY', feature.properties.COUNTY]
            });

            // Remove duplicates by checking for matching FIPS county ID.
            const uniqueCounties = getUniqueFeatures(relatedCounties, 'FIPS');

            // Total the populations of all features.
            const populationSum = uniqueCounties.reduce((memo, feature) => {
                return memo + feature.properties.population;
            }, 0);

            // Render found features in an overlay.
            const title = document.createElement('strong');
            title.textContent =
                feature.properties.COUNTY +
                ' (' +
                uniqueCounties.length +
                ' found)';

            const population = document.createElement('div');
            population.textContent =
                'Total population: ' + populationSum.toLocaleString();

            overlay.innerHTML = '';
            overlay.style.display = 'block';

            overlay.appendChild(title);
            overlay.appendChild(population);

            // Add features with the same county name
            // to the highlighted layer.
            map.setFilter('counties-highlighted', [
                'in',
                'COUNTY',
                feature.properties.COUNTY
            ]);

            // Display a popup with the name of the county.
            popup
                .setLngLat(e.lngLat)
                .setText(feature.properties.COUNTY)
                .addTo(map);
        });

        map.on('mouseleave', 'counties', () => {
            map.getCanvas().style.cursor = '';
            popup.remove();
            map.setFilter('counties-highlighted', ['in', 'COUNTY', '']);
            overlay.style.display = 'none';
        });
    });
</script>

</body>
</html>

二、效果截图

三、代码分析

添加矢量瓦片数据源

map.addSource('counties', {
    'type': 'vector',
    'url': 'mapbox://mapbox.82pkq93d'
});

添加矢量瓦片底图图层


// Add transparent county polygons
// for default display.
map.addLayer(
    {
        'id': 'counties',
        'type': 'fill',
        'source': 'counties',
        'source-layer': 'original',
        'paint': {
            'fill-outline-color': 'rgba(0,0,0,0.1)',
            'fill-color': 'rgba(0,0,0,0.1)'
        }
    },
    // Place polygons under labels, roads and buildings.
    'building'
);

添加矢量瓦片高亮图层

map.addLayer(
    {
        'id': 'counties-highlighted',
        'type': 'fill',
        'source': 'counties',
        'source-layer': 'original',
        'paint': {
            'fill-outline-color': '#484896',
        'fill-color': '#6e599f',
        'fill-opacity': 0.75
        },
        // Display none by adding a
        // filter with an empty string.
        'filter': ['in', 'COUNTY', '']
    },
    // Place polygons under labels, roads and buildings.
    'building'
);

底图图层添加鼠标移入事件

map.on('mousemove', 'counties', (e) => {

}

底图图层鼠标移出事件

map.on('mouseleave', 'counties', () => {

}

获取相关联要素数据信息

// 1 鼠标移入图层后修改鼠标手势
map.getCanvas().style.cursor = 'pointer';

// 2 获取鼠标移入第一个要素
const feature = e.features[0];

// 3 根据第一个要素的属性信息，根据图层获取与该属性相同的要素
const relatedCounties = map.querySourceFeatures('counties', {
    sourceLayer: 'original',
    filter: ['in', 'COUNTY', feature.properties.COUNTY]
});

// 4 对关联关联要素数据进行去重
const uniqueCounties = getUniqueFeatures(relatedCounties, 'FIPS');

function getUniqueFeatures(features, comparatorProperty) {
    const uniqueIds = new Set();
    const uniqueFeatures = [];
    for (const feature of features) {
        const id = feature.properties[comparatorProperty];
        if (!uniqueIds.has(id)) {
            uniqueIds.add(id);
            uniqueFeatures.push(feature);
        }
    }
    return uniqueFeatures;
}

// 5 获取去重后关联图层人口总和
const populationSum = uniqueCounties.reduce((memo, feature) => {
    return memo + feature.properties.population;
}, 0);

// 6 创建dom展示人口相关信息
const title = document.createElement('strong');
title.textContent =
    feature.properties.COUNTY +
    ' (' +
    uniqueCounties.length +
' found)';
 
const population = document.createElement('div');
population.textContent =
    'Total population: ' + populationSum.toLocaleString();
 
overlay.innerHTML = '';
overlay.style.display = 'block';
 
overlay.appendChild(title);
overlay.appendChild(population);

// 7 修改高亮图层过滤条件显示高亮要素
map.setFilter('counties-highlighted', [
    'in',
    'COUNTY',
    feature.properties.COUNTY
]);

// 8 根据过滤条件清空高亮要素
map.setFilter('counties-highlighted', ['in', 'COUNTY', '']);