antv地图下钻（单机高亮，双击下钻）

于 2024-10-13 20:47:07 发布
阅读量166 收藏
点赞数 2
CC 4.0 BY-SA版权
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/irisMoon06/article/details/142903977 
initMap() {
            chinaScene = new Scene({
                id: "mapChina",
                map: new Map({
                    style: "dark",
                    center: [103.99130938786305, 33.982243853450086],
                    zoom: 3.4,
                    pitch: 20,
                }),
                logoVisible: false,

            });
            chinaScene.setMapStatus({
                dragEnable: false, // 是否允许地图拖拽
                keyboardEnable: false, // 是否允许形键盘事件
                doubleClickZoom: false, // 双击放大
                zoomEnable: false, // 滚动缩放
                rotateEnable: false // 旋转
            })
            chinaScene.on("loaded", () => {
                let lineDown, lineUp, textLayer;
                fetch(
                    'https://gw.alipayobjects.com/os/bmw-prod/ecd1aaac-44c0-4232-b66c-c0ced76d5c7d.json'
                )
                    .then((res) => res.json())
                    .then((data) => {
                    });
                const texts = [];
                // data.features.map((option) => {
                this.chinaJson.features.map((option) => {

                    const { name, center } = option.properties;
                    const [lng, lat] = center;
                    texts.push({ name, lng, lat });
                    return "";
                });
                textLayer = new PointLayer({ zIndex: 9999 })
                    .source(texts, {
                        parser: {
                            type: "json",
                            x: "lng",
                            y: "lat",
                        },
                    })
                    .shape("name", "text")
                    .size(18)
                    .color("#fff")
                    .style({
                        textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left
                        spacing: 2, // 字符间距
                        padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
                        stroke: "#0ff", // 描边颜色
                        strokeWidth: 0.2, // 描边宽度
                        raisingHeight: 100000,
                        textAllowOverlap: true,
                        opacity: 1,
                    });
                chinaScene.addLayer(textLayer);
                lineUp = new LineLayer({ zIndex: 10 })
                    .source(this.chinaJson)
                    .shape("line")
                    .color("#6ce8fb")
                    .size(1.2)
                    .style({
                        raisingHeight: 106500,
                    });
                chinaScene.addLayer(lineUp);
                return "";
            });
            const layer = new PolygonLayer({
                // zIndex: -10
            })
                .source(this.chinaJson)
                .size(100000)
                .shape('extrude')
                .color('#fff')
                .select({
                    color: "#c8ab87"
                })
                .style({
                    mapTexture: this.provinceImg, //如果想使用纹理贴图，shap必须为extrude
                    // imagelayer: this.provinceImg, 
                    heightfixed: true,
                    pickLight: true,
                    sourceColor: "#333", //抬高高度的颜色
                    targetColor: "#fff",
                    opacity: 0.8,
                    // raisingHeight: 100000,
                    // zIndex: -10
                });
            let clickType = 1;
            layer.on("dblclick", e => {
                clickType = 2
                setTimeout(() => {
                    if (clickType == 2) {
                        console.log(e, '---双击');
                        this.mapScreenType = 2;
                        chinaScene.destroy()
                        const json = provinceJson.province.find(v => {
                            if(v.adcode == e.feature.properties.adcode) {
                                return v
                            }
                        })
                        // console.log(a,'---a');
                        setTimeout(() => {
                            this.initMapProvince(json)
                        }, 200);
                    }
                }, 200);
                // console.log(e, '---e1');
                // this.openPopup()
                // this.getProviceData(e.feature.properties.adcode)
            })
            layer.on("click", e => {
                clickType = 1

                setTimeout(() => {
                    if (clickType == 1) {
                        console.log(e, '---e11');
                        this.openPopup()
                        this.getProviceData(e.feature.properties.adcode)
                    }

                }, 200);

            })

            // const layer = new PolygonLayer({
            //     // zIndex: 1,
            // })
            //     .source(this.chinaJson)
            //     .size(0)
            //     .shape('fill')
            //     .color('#c0c0c0')
            //     .select({
            //         color: "#ff0"
            //     })
            //     .style({
            //         mapTexture: this.provinceImg, //如果想使用纹理贴图，shap必须为extrude
            //         heightfixed: true,
            //         pickLight: true,
            //         sourceColor: "#333", //抬高高度的颜色
            //         targetColor: "#fff",
            //         opacity: 0.8,
            //         zIndex: -10
            //     });
            // layer.on("click", v => {
            //     console.log(v, '---e');
            // })

            const layerColor = new PolygonLayer({
                zIndex: 9,
            })
                .source(this.chinaJson)
                .scale('density', {
                    type: 'quantile',
                })
                .shape('fill')
                .size(10000)

                .color('density', this.mapcolor)
                .style({
                    opacity: 0.8,
                    raisingHeight: 100000,

                })
            // layerColor.on("click", e => {
            //     console.log(e, '---e1');
            //     // this.openPopup()
            //     // this.getProviceData(e.feature.properties.adcode)
            // })
            const layerShadow = new PolygonLayer({
                zIndex: 10,
            })
                .source(this.chinaJson)
                // .scale('density', {
                //     type: 'quantile',
                // })
                .shape('fill')
                .size(1)

                .color('#1c302c')
                .style({
                    opacity: 1,
                    raisingHeight: -500000,

                })
            chinaScene.addLayer(layerColor);
            // chinaScene.addLayer(imgLayer);

            chinaScene.addLayer(layer);
            chinaScene.addLayer(layerShadow);


            // layerColor.on("click", v => {
            //     console.log(v, '---e');

            // })
        },
        initMapProvince(mapJson) {
            provinceScene = new Scene({
                id: "mapProvince",
                map: new Map({
                    style: "dark",
                    center: [mapJson.center[0], mapJson.center[1]],
                    zoom: mapJson.zoom,
                    pitch: 20,
                }),
                logoVisible: false,

            });
            provinceScene.setMapStatus({
                dragEnable: false, // 是否允许地图拖拽
                keyboardEnable: false, // 是否允许形键盘事件
                doubleClickZoom: false, // 双击放大
                zoomEnable: false, // 滚动缩放
                rotateEnable: false // 旋转
            })
            provinceScene.on("loaded", () => {
                let lineDown, lineUp, textLayer;
                fetch(
                    'https://gw.alipayobjects.com/os/bmw-prod/ecd1aaac-44c0-4232-b66c-c0ced76d5c7d.json'
                )
                    .then((res) => res.json())
                    .then((data) => {
                    });
                const texts = [];
                // data.features.map((option) => {
                    mapJson.features.map((option) => {

                    const { name, center } = option.properties;
                    const [lng, lat] = center;
                    texts.push({ name, lng, lat });
                    return "";
                });
                textLayer = new PointLayer({ zIndex: 9999 })
                    .source(texts, {
                        parser: {
                            type: "json",
                            x: "lng",
                            y: "lat",
                        },
                    })
                    .shape("name", "text")
                    .size(18)
                    .color("#fff")
                    .style({
                        textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left
                        spacing: 2, // 字符间距
                        padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
                        stroke: "#0ff", // 描边颜色
                        strokeWidth: 0.2, // 描边宽度
                        raisingHeight: 100000,
                        textAllowOverlap: true,
                        opacity: 1,
                    });
                provinceScene.addLayer(textLayer);
                lineUp = new LineLayer({ zIndex: 10 })
                    .source(mapJson)
                    .shape("line")
                    .color("#6ce8fb")
                    .size(1.2)
                    .style({
                        raisingHeight: 106500,
                    });
                provinceScene.addLayer(lineUp);
                return "";
            });
            const layer = new PolygonLayer({
                // zIndex: -10
            })
                .source(mapJson)
                .size(100000)
                .shape('extrude')
                .color('#fff')
                .select({
                    color: "#c8ab87"
                })
                .style({
                    mapTexture: this.provinceImg, //如果想使用纹理贴图，shap必须为extrude
                    // imagelayer: this.provinceImg, 
                    heightfixed: true,
                    pickLight: true,
                    sourceColor: "#333", //抬高高度的颜色
                    targetColor: "#fff",
                    opacity: 0.8,
                    // raisingHeight: 100000,
                    // zIndex: -10
                });
            let clickType = 1;
            // layer.on("dblclick", e => {
            //     clickType = 2
            //     setTimeout(() => {
            //         if (clickType == 2) {
            //             console.log(e, '---双击');

            //         }

            //     }, 200);
            //     // console.log(e, '---e1');
            //     // this.openPopup()
            //     // this.getProviceData(e.feature.properties.adcode)
            // })
            layer.on("click", e => {
                clickType = 1

                setTimeout(() => {
                    if (clickType == 1) {
                        console.log(e, '---e11');
                        this.openPopup()
                        this.getProviceData(e.feature.properties.adcode)
                    }

                }, 200);

            })

            // const layer = new PolygonLayer({
            //     // zIndex: 1,
            // })
            //     .source(this.chinaJson)
            //     .size(0)
            //     .shape('fill')
            //     .color('#c0c0c0')
            //     .select({
            //         color: "#ff0"
            //     })
            //     .style({
            //         mapTexture: this.provinceImg, //如果想使用纹理贴图，shap必须为extrude
            //         heightfixed: true,
            //         pickLight: true,
            //         sourceColor: "#333", //抬高高度的颜色
            //         targetColor: "#fff",
            //         opacity: 0.8,
            //         zIndex: -10
            //     });
            // layer.on("click", v => {
            //     console.log(v, '---e');
            // })

            const layerColor = new PolygonLayer({
                zIndex: 9,
            })
                .source(mapJson)
                .scale('density', {
                    type: 'quantile',
                })
                .shape('fill')
                .size(10000)

                .color('density', this.mapcolor)
                .style({
                    opacity: 0.8,
                    raisingHeight: 100000,

                })
            // layerColor.on("click", e => {
            //     console.log(e, '---e1');
            //     // this.openPopup()
            //     // this.getProviceData(e.feature.properties.adcode)
            // })
            const layerShadow = new PolygonLayer({
                zIndex: 10,
            })
                .source(mapJson)
                // .scale('density', {
                //     type: 'quantile',
                // })
                .shape('fill')
                .size(1)

                .color('#1c302c')
                .style({
                    opacity: 1,
                    raisingHeight: -500000,

                })
                provinceScene.addLayer(layerColor);
            // chinaScene.addLayer(imgLayer);

            provinceScene.addLayer(layer);
            provinceScene.addLayer(layerShadow);
        },

irisMoon06
关注
echarts+vue+antV实现简单的中国地图且省份数据下钻
weixin_52443895的博客
08-10 3781
echarts+vue实现简单的中国地图且数据下钻（简洁适合小白版），大家注意// 注册默认全国地图的json - this.$echarts.registerMap('china', chinaJson)这里的China不能用大写哦，要全小写
antV实现离线中国2D地图并叠加拓扑（一）
JS获取计算机信息
02-07 1963
实现离线中国地图，当前区域高亮。在此基础上叠加动态拓扑站点
vue-antv 地图（Marker）
aliceyang2012的专栏
12-08 671
这版和上一篇PointLayer功能相同，缺陷是不同类型的点之间会有遮挡。
antv-l7地图可视化，全国地图支持省级下钻、悬浮预警、时间区间搜索
07-15
antv-l7地图可视化，全国地图支持省级下钻、悬浮预警、时间区间搜索
antv中国地图展示
irisMoon06的博客
09-22 580
【代码】antv中国地图展示。
antv/l7 -- 地图功能
m0_67011584的博客
01-05 4038
/ 开启默认高亮效果// 开启并设置高亮颜色为红色zIndex: 4, // 设置显示层级}).size(2)// 设置点击生效});});
antv l7 绘制中国地图并在对应的地方添加marker
weixin_42418196的博客
09-02 1654
使用技术 @antv/l7 html代码 <template> <div class="map-wrapper"> <!-- <div class="title">全国用户地图分布</div> --> <div class="content"> <div id="map"></div> </div> <.
Antv L7 + mapbox 实现简单地图场景
07-18
Antv L7是阿里云推出的一款基于地图渲染库，主要用于大数据可视化的地图组件，而Mapbox则是一个强大的地图服务提供商，提供自定义地图样式和定位服务。两者结合，可以实现高度定制化和交互性的地图展示。 首先，...
antv l7 实现自定义地图 以及地图抬高图层 以及散点轮播显示弹窗 鼠标悬浮弹窗
10-31
在本项目中，我们将深入探讨如何使用蚂蚁金服的开源数据可视化库——antv L7，来实现自定义地图、地图抬高图层、散点轮播显示弹窗以及鼠标悬浮时的弹窗功能。antv L7 是一个基于 WebGL 的地图渲染库，特别适合进行大...
如何用Vue+Echarts制作世界地图下钻
m0_47912936的博客
06-01 2247
在疫情期间，地图对于我们掌握疫情的走势立了大功，那么怎样能够制作一个相似的地图模块呢？本文利用vue和echarts模拟了对于疫情地图的制作。 关于Vue和Echarts vue是一个轻量级的框架，他采用了MVVM的模式，也就是M(model)数据，VM 控制逻辑 和 V(view) 视图组成，相比之前的框架，vue更加的简洁，方便使用者解耦合。 之前JavaScript 代码可以看见其控制逻辑和视图是混合在一起的，不利于后期添加功能，耦合度过高。所以Vue提出了将视图，数据，控制逻辑分离的思想，在vue
地图下钻+散点图
10-19
echarts下钻和散点图demo。涉及到了get请求，放到服务器即可。
基于echarts的前端地图统计插件（只有全国的）
12-27
java web前端用到的地图统计插件 echarts 全国地图 统计
ECharts 中国各省市地图map
03-28
包括ECharts源码及压缩码 china.js 各省json 各市js 使用教程参考: https://echarts.baidu.com/api.html#echarts
echarts2的地图下钻和修改地图上的文字
06-20
echarts2的地图下钻和修改地图上的文字
antv/x6节点添加鼠标悬浮高亮和删除功能
.伊泽瑞尔
02-04 1823
antv/x6 节点node添加鼠标悬浮高亮和删除功能
在vue项目中使用AntV L7地图下钻，异步调用不重复生成
Grupass的博客
09-29 2486
【代码】在vue项目中使用AntV L7地图下钻，异步调用不重复生成。
antv g2绘制中国地图及每个省份区域单独展示
weixin_42418196的博客
09-02 3180
使用技术： antv g2 地图文件：https://gw.alipayobjects.com/os/antvdemo/assets/data/china-provinces.geo.json 该文件可以直接在线引入，也可以下载到本地使用，在这里我是直接下载到本地的 html代码 <template> <div class="map-wrapper"> <div class="content" ref="mapChart"> .
antv，图表和地图
秋来九月八
07-27 7521
前言 echarts是比较流行的图标和地图框架，文档清晰，灵活，满足各种自定义。众多的api接口，让使用者犹如大海捞针，每一个细节都需要通过api慢慢调整，耗费开发者大量的时间精力。 在这里补充一种新的图表地图框架，虽然做得不如echarts强大，适合快速开发节奏，让前端程序员在除了echarts以外还可以多一种选择。 antv antv是蚂蚁金服团队打造的图表和地图框架（用过antd的同学应该知道这个团队）。 官方网站：https://antv.vision/zh/about antv包含 G2（就是图表
下拉菜单，手动滑动，滚动内容，滑动条控制内容展示，scrollview，scrollbar
小花猫哒小栗子
09-19 946
一、需要引入的js文件 /* 用途项目：自定义滚动条实现 */ (function(win, doc, $){ // 定义的滚动条的构造函数 function CusScrollBar(options) { // 函数的调用 this._init(options); } // 对象的合并 $.extend(CusScrollBar.prototype, {...
全国地图下钻
最新发布
03-29
<think>嗯，用户想找全国地图下钻功能的实现方案或技术方案。首先，我需要理解什么是地图下钻。下钻通常指的是从全国地图点击某个区域，进入该区域的更详细视图，比如从全国到省，再到市，甚至区县。这种功能在数据可视化大屏中很常见，比如展示不同层级的数据分布。 接下来，我得回忆相关的技术方案。用户提到的引用中有几个相关资源，比如引用[3]提到基于ECharts和GeoJson实现地图视觉映射，这可能涉及到地图的层级切换。另外，引用[4]讨论了在Vue3/Nuxt3中使用百度地图WebGL实现3D效果，可能和下钻有关，但用户需要的是全国到下级的下钻，可能需要不同层级的GeoJson数据。 首先，数据源是关键。全国地图下钻需要各级行政区划的GeoJson数据，比如国家、省、市、区县。这些数据可以从阿里云DataV或第三方库获取。然后，地图组件方面，ECharts和AntV都是常用的可视化库，支持GeoJson加载和交互事件。比如ECharts的click事件可以触发下钻，更新地图数据和图表。 技术实现步骤可能包括：准备多级GeoJson数据，初始化地图，绑定点击事件，切换层级并重新渲染。此外，需要处理数据映射，比如不同层级的数据绑定，以及返回上级的按钮功能。 另外，用户可能关心性能优化，比如GeoJson的按需加载，防止初次加载过慢。引用[4]提到解决3D地图加载卡顿的问题，可能涉及代码分割或懒加载策略。同时，跨域问题也需要考虑，引用[4]提到CORS解决方案，可能需要后端配合或代理。 还有，用户可能需要地图类型的选择，比如2D或3D切换。引用[1]提到地理底图、卫星影像等类型，但下钻功能主要关注层级结构。不过如果结合3D效果，可能需要WebGL技术，如引用[4]中的百度地图WebGL实现。 最后，相关问题部分需要考虑用户可能进一步的问题，比如动态数据加载、性能优化、与后端交互等。需要确保回答覆盖这些潜在问题，并提供解决方案，比如使用ECharts的异步加载数据，或优化GeoJson文件大小。</think>### 全国地图下钻功能实现技术方案 #### 1. **核心实现原理** 全国地图下钻功能本质是通过**多层级地理数据绑定+交互事件触发视图更新**实现。技术流程如下： - **数据分层**：需准备全国、省、市、区县等层级的GeoJSON地理边界数据[^3] - **事件驱动**：通过地图点击事件触发层级切换，加载对应层级的GeoJSON并重新渲染 - **视觉映射**：结合ECharts/Mapbox等库的视觉映射（visualMap）功能，动态绑定不同层级的数据指标 #### 2. **具体实现步骤** **（1）数据准备** ```javascript // 示例：多层级GeoJSON文件结构 const geoData = { 'china': {/* 全国地理数据 */}, 'province': { 'guangdong': {/* 广东省边界数据 */}, 'zhejiang': {/* 浙江省边界数据 */} }, 'city': { 'guangzhou': {/* 广州市数据 */}, 'shenzhen': {/* 深圳市数据 */} } } ``` **（2）地图组件集成**（以ECharts为例） ```javascript // 初始化地图 const myChart = echarts.init(document.getElementById('map')); // 绑定点击事件 myChart.on('click', (params) => { if (params.componentType === 'series') { const regionName = params.name; drillDown(regionName); // 执行下钻逻辑 } }); ``` **（3）下钻逻辑实现** ```javascript function drillDown(region) { // 加载对应层级的GeoJSON fetch(`/geo/${region}.json`) .then(response => response.json()) .then(geoJson => { // 注册新地理数据 echarts.registerMap(region, geoJson); // 更新图表配置 myChart.setOption({ series: [{ map: region, data: getCurrentLevelData(region) // 获取当前层级数据 }] }); // 更新面包屑导航 updateBreadcrumb(region); }); } ``` #### 3. **关键技术点** - **数据优化**：使用TopoJSON替代GeoJSON可减少50%-80%文件体积 - **异步加载**：按需加载下级地理数据，提升初始加载速度[^4] - **状态管理**：通过Vuex/Pinia存储当前层级状态，支持返回上级功能 - **跨域处理**：配置Nginx反向代理或CORS解决地理数据跨域问题 #### 4. **推荐技术栈组合** | 技术模块 | 推荐方案 | 优势说明 | |----------------|---------------------------|------------------------------| | 地图渲染引擎 | ECharts 5+/Mapbox GL JS | 支持GeoJSON动态注册 | | 地理数据格式 | GeoJSON/TopoJSON | 标准化格式，兼容性强 | | 前端框架 | Vue3 + TypeScript | 响应式状态管理 | | 性能优化 | Web Worker + 数据预加载 | 避免主线程阻塞 | #### 5. **现成解决方案参考** - **AntV L7**：提供`DrillDown`插件，支持自动层级切换 - **百度地图WebGL版**：通过`BMapGL.Map`的`addOverlay`方法实现层级叠加[^4] - **ECharts扩展**：使用`echarts-extension-amap`插件与高德地图集成
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值