AntV L7地图实现“省、市、区”指定区域高亮显示，支持动态切换

vivi____

于 2024-03-11 16:48:17 发布

阅读量396

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/vivi____/article/details/136615639

版权

区县地图数据来源：行政区划数据

简介

DistrictData SDK 通过前端 JS SDK 更好的使用行政区划，无需下载数据，数据服务托管在 npm 服务器。

npm 安装

npm i district-data

使用

option

version 数据版本

import { RDBSource } from 'district-data';

const source = new RDBSource({
    version: 2023,
});

这样就配置好了区县数据，接下来只需要在antV的地图中引入

初始化地图

initMap() {
            const _this = this
            scene = new Scene({
                id: 'map1',
                map: new GaodeMap({
                    style: 'light',
                    center: [120.532222, 31.278056],
                    zoom: 4,
                    doubleClickZoom: false,
                    token: '高德开放平台你申请的Web端Key',
                    features: ['bg', 'point',],
                }),
                logoVisible: false,
            });

            const getColorByAdcode = function (adcode) {
                // 设置区块颜色，调用接口查询已激活的区块的adcode，与adcode对应，将其设置为激活颜色，否则设置为灰色
                let color = ''
                _this.activeList.map((item) => {
                    if (item.area_code == adcode) {
                        color = _this.defaultColor

                    }
                })
                return color
            };
            // 绘制高亮的区县矢量图（这里的source就是上文中的区县数据）
            source.getData({ level: 'county' }).then((data) => {
                this.districtData = data
                const fill = new PolygonLayer({
                    name: 'baseLayer',
                    autoFit: true,
                })
                    .source(data)
                    .shape('fill')
                    .color('adcode', getColorByAdcode) 
                scene.addLayer(fill);
            });
            // 绘制省级边界
            source.getData({ level: 'province' }).then((data) => {
                const line3 = new LineLayer({
                    name: 'proLayer'
                })
                    .source(data)
                    .shape('line')
                    .size(0.2)
                    .color('#999');
                scene.addLayer(line3);
            });
            const zoom = new Zoom();
            const fullscreen = new Fullscreen();
            scene.addControl(zoom);
            scene.addControl(fullscreen);
        },

动态更新的方法

update() {
    const getActiveColorByAdcode = function (adcode) {
        // 设置区块颜色，调用接口查询已激活的区块的adcode，与adcode对应，将其设置为激活颜色，否则设置为灰色
        let color = ''
        activeFilter.map((item) => {
        if (item.area_code === adcode + '') {
            color = 'rgba(19, 194, 194, 0.6)'
                }
            })
            selectAreaList.map((item) => {
                if (item.area_code === adcode + '') {
                    color = 'rgba(91, 78, 233, 0.6)'
                }
            })
            return color
        };
    setTimeout(() => {
        baseLayer.color('adcode', getActiveColorByAdcode)
        scene.render()
    }, 500);
}