antV L7 控制不同图层的显隐

最新推荐文章于 2024-04-03 11:29:11 发布
最新推荐文章于 2024-04-03 11:29:11 发布
阅读量770 收藏 3
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Working_hard_111/article/details/132555823
版权

在项目中，地图上使用的图层过多，也许会导致看起来很杂乱，有时候会要求做一个组件出来，控制各个图层的显隐。下方为一个demo例子

 

 主要是通过图层的show方法和hide方法，也可以使用setOptions的方法来处理

本demo控制的图层为3个PointLayer(可根据自己项目选择不同类型），地图实例使用的是高德地图

一、搭建项目构造
<div class="antBox">
        <div class="top">
            <el-button type="warning" @click="toHome()">返回首屏</el-button>
        </div>
        <div class="main">
            <div class="layers">
                <el-checkbox-group v-model="checkData" @change="checkDataChange">
                    <el-checkbox v-for="item in checkList" :key="item.value" :label="item.value" style="color: #fff;">{{
                        item.label }}</el-checkbox>
                </el-checkbox-group>
            </div>
            <div id="mapBox"></div>
        </div>
    </div>
二、引用自己需要的各项数据
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { PointLayer, PolygonLayer, Scene } from '@antv/l7'
import { GaodeMap } from '@antv/l7-maps'
import { load } from "@amap/amap-jsapi-loader";
import sichuanMap from '@/assets/json/sichuan.json' //四川地图json数据
import node1 from '@/assets/imgs/points/node.png'   //节点图片1
import node2 from '@/assets/imgs/points/nodeActive.png' //节点图片2
三、创建地图实例和地图对象
//初始化地图
async function initMap() {
    //先获取高德的地图
    let AMap = await load({
        key: "自己注册的key",
        version: "2.0",
        plugins: [
            "AMap.DistrictSearch",
            "AMap.DistrictLayer",
            "AMap.TileLayer",
            "AMap.Polygon",
            "AMap.GeoJSON",
            "AMap.Weather",
        ],
    })
    let gaodeMap = new AMap.Map('mapBox', {
        center: [103.82112953, 30.12207207],
        zoom: 6,
        pitch: "30",
        viewMode: "2D",
        layers: [
            new AMap.TileLayer.Satellite()      // 卫星图层
        ]
    })

    scene.value = new Scene({
        id: 'mapBox',
        logoVisible: false,
        map: new GaodeMap({
            mapInstance: gaodeMap,  //地图实例使用高德地图(如使用官方地图可忽略115-136行的代码)
        })
    })
    //避免异步出现问题
    setTimeout(() => {
        let sichuanLayer = new PolygonLayer()
            .source(sichuanMap)
        scene.value.addLayer(sichuanLayer)
    }, 200)
 scene.value.on('loaded', () => {
        addLayers() //注册各种图层节点
    })
四、创建要控制显隐的图层
let entPointsLayer: any;  //企业节点
let camerasLayer: any;   //监控节点
let atmospheresLayer: any    //大气节点
//注册图片
function addLayers() {
    //图片注册
    scene.value.addImage('node1', node1)
    scene.value.addImage('node2', node2)
    //创建企业标记点
    entPointsLayer = new PointLayer({
        name: 'entPoints',
        visible: false,
        zIndex: 2
    })
        .source(nodesData.value.enterprise, {
            parser: {
                type: 'json',
                x: 'lng',
                y: 'lat'
            }
        })
        .shape('url', ['node1', 'node2'])
        .size(22)
    //创建监控标记点
    camerasLayer = new PointLayer({
        name: 'camPoints',
        visible: false,
        zIndex: 2
    })
        .source(nodesData.value.camera, {
            parser: {
                type: 'json',
                x: 'lng',
                y: 'lat'
            }
        })
        .shape('url', ['node1', 'node2'])
        .size(22)
    //创建大气监测标记点
    atmospheresLayer = new PointLayer({
        name: 'atmPoints',
        visible: false,
        zIndex: 2
    })
        .source(nodesData.value.atmosphere, {
            parser: {
                type: 'json',
                x: 'lng',
                y: 'lat'
            }
        })
        .shape('url', ['node1', 'node2'])
        .size(22)

    scene.value.addLayer(entPointsLayer)
    scene.value.addLayer(camerasLayer)
    scene.value.addLayer(atmospheresLayer)
}
五、多选框控制事件
//多选框选择事件
function checkDataChange(val: any) {
    //初始化时将所有节点隐藏
    entPointsLayer.hide()
    camerasLayer.hide()
    atmospheresLayer.hide()
    //判断多选框内选中的值
    if (val && val.length > 0) {
        val.forEach((item: any) => {
            if (item === 1) {
                entPointsLayer.show()
            } else if (item === 2) {
                camerasLayer.show()
            } else {
                atmospheresLayer.show()
            }
        })
    } else {        //如果一个值都没选，则将所有节点隐藏
        entPointsLayer.hide()
        camerasLayer.hide()
        atmospheresLayer.hide()
    }
}
六、完整代码展示(含demo数据)
<template>
    <div class="antBox">
        <div class="top">
            <el-button type="warning" @click="toHome()">返回首屏</el-button>
        </div>
        <div class="main">
            <div class="layers">
                <el-checkbox-group v-model="checkData" @change="checkDataChange">
                    <el-checkbox v-for="item in checkList" :key="item.value" :label="item.value" style="color: #fff;">{{
                        item.label }}</el-checkbox>
                </el-checkbox-group>
            </div>
            <div id="mapBox"></div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { PointLayer, PolygonLayer, Scene } from '@antv/l7'
import { GaodeMap } from '@antv/l7-maps'
import { load } from "@amap/amap-jsapi-loader";
import sichuanMap from '@/assets/json/sichuan.json' //四川地图json数据
import node1 from '@/assets/imgs/points/node.png'   //节点图片1
import node2 from '@/assets/imgs/points/nodeActive.png' //节点图片2
let router = useRouter()
let scene: any = ref(null)

let checkData = ref([])
//多选框里的值
let checkList = ref([
    {
        value: 1,
        label: '企业'
    },
    {
        value: 2,
        label: '监控设备'
    },
    {
        value: 3,
        label: '气象设备'
    },
])
//模拟各项点位数据
let nodesData = ref({
    //企业数据
    enterprise: [
        {
            id: 1,
            lat: 30.524388,
            lng: 103.914649,
            name: '一号企业',
            url: 'node1'
        },
        {
            id: 2,
            lat: 30.320546,
            lng: 103.110594,
            name: '二号企业',
            url: 'node1'

        },
        {
            id: 3,
            lat: 30.928156,
            lng: 103.517203,
            name: '三号企业',
            url: 'node1'
        },
    ],
    //摄像头数据
    camera: [
        {
            id: 11,
            lat: 31.120119,
            lng: 102.316602,
            name: '水位摄像头1',
            url: 'node1'
        },
        {
            id: 12,
            lat: 31.153349,
            lng: 104.22128,
            name: '水位摄像头2',
            url: 'node1'
        },

    ],
    //大气监测数据
    atmosphere: [
        {
            id: 111,
            lat: 29.524518,
            lng: 102.326236,
            name: '大气监测站1',
            url: 'node2'
        },
        {
            id: 112,
            lat: 31.917632,
            lng: 104.322739,
            name: '大气监测站2',
            url: 'node2'
        }
    ]
})
let entPointsLayer: any;  //企业节点
let camerasLayer: any;   //监控节点
let atmospheresLayer: any    //大气节点

//初始化地图
async function initMap() {
    //先获取高德的地图
    let AMap = await load({
        key: "自己注册的key",
        version: "2.0",
        plugins: [
            "AMap.DistrictSearch",
            "AMap.DistrictLayer",
            "AMap.TileLayer",
            "AMap.Polygon",
            "AMap.GeoJSON",
            "AMap.Weather",
        ],
    })
    let gaodeMap = new AMap.Map('mapBox', {
        center: [103.82112953, 30.12207207],
        zoom: 6,
        pitch: "30",
        viewMode: "2D",
        layers: [
            new AMap.TileLayer.Satellite()      // 卫星图层
        ]
    })

    scene.value = new Scene({
        id: 'mapBox',
        logoVisible: false,
        map: new GaodeMap({
            mapInstance: gaodeMap,  //地图实例使用高德地图(如使用官方地图可忽略115-136行的代码)
        })
    })
    //避免异步出现问题
    setTimeout(() => {
        let sichuanLayer = new PolygonLayer()
            .source(sichuanMap)
        scene.value.addLayer(sichuanLayer)
    }, 200)

    scene.value.on('loaded', () => {
        addLayers() //注册各种图层节点
    })

}
//注册图片
function addLayers() {
    //图片注册
    scene.value.addImage('node1', node1)
    scene.value.addImage('node2', node2)
    //创建企业标记点
    entPointsLayer = new PointLayer({
        name: 'entPoints',
        visible: false,
        zIndex: 2
    })
        .source(nodesData.value.enterprise, {
            parser: {
                type: 'json',
                x: 'lng',
                y: 'lat'
            }
        })
        .shape('url', ['node1', 'node2'])
        .size(22)
    //创建监控标记点
    camerasLayer = new PointLayer({
        name: 'camPoints',
        visible: false,
        zIndex: 2
    })
        .source(nodesData.value.camera, {
            parser: {
                type: 'json',
                x: 'lng',
                y: 'lat'
            }
        })
        .shape('url', ['node1', 'node2'])
        .size(22)
    //创建大气监测标记点
    atmospheresLayer = new PointLayer({
        name: 'atmPoints',
        visible: false,
        zIndex: 2
    })
        .source(nodesData.value.atmosphere, {
            parser: {
                type: 'json',
                x: 'lng',
                y: 'lat'
            }
        })
        .shape('url', ['node1', 'node2'])
        .size(22)

    scene.value.addLayer(entPointsLayer)
    scene.value.addLayer(camerasLayer)
    scene.value.addLayer(atmospheresLayer)
}
//多选框选择事件
function checkDataChange(val: any) {
    //初始化时将所有节点隐藏
    entPointsLayer.hide()
    camerasLayer.hide()
    atmospheresLayer.hide()
    //判断多选框内选中的值
    if (val && val.length > 0) {
        val.forEach((item: any) => {
            if (item === 1) {
                entPointsLayer.show()
            } else if (item === 2) {
                camerasLayer.show()
            } else {
                atmospheresLayer.show()
            }
        })
    } else {        //如果一个值都没选，则将所有节点隐藏
        entPointsLayer.hide()
        camerasLayer.hide()
        atmospheresLayer.hide()
    }
}

//返回首屏
function toHome() {
    router.go(-1)
}
onMounted(() => {
    initMap()
})

</script>

<style lang="scss" scoped>
.antBox {
    width: 100%;
    height: 100%;

    .top {
        height: 10%;
    }

    .main {
        height: 90%;
        position: relative;

        .layers {
            position: absolute;
            right: 20px;
            top: 20px;
            width: 120px;
            background: url('../../../assets/imgs/background/production-left-bg-2.png') no-repeat;
            background-size: 100% 100%;
            z-index: 3;
            padding: 10px;

            .el-checkbox-group {
                display: flex;
                flex-direction: column;
            }
        }

        #mapBox {
            width: 100%;
            height: 100%;
            position: relative;
        }
    }
}
</style>

素质白嫖怪
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
react + antv L7 +离线 + 3D行政地图
qq_44255141的博客
09-25 934
react + antdL7 + Mapbox + 离线 + 3d行政图 + ahooks
VisitorMapV:基于地理可视化的 AntV L7
07-24
VisitorMapV 地理可视化，基于Antv的L7，访客数据来自个人博客： Project setup npm install Compiles and hot-reloads for development npm run dev Compiles and minifies for production npm run build:prod Run your tests npm run test Lints and fixes files npm run lint Customize configuration See .
在Vue2里面加载AntvL7
最新发布
一个一直在努力的前端小白，在为了成为全栈程序员的道路上加油！
04-03 452
【代码】在Vue2里面加载AntvL7。
AntV L7深圳智慧城市
热爱WebGIS的博客
03-17 1287
本案例使用库和构建深圳智慧城市。
iClient for JavaScript的几种图层显隐控制
SuperMap技术控
02-24 5634
作者：小阳 一、序言在正文开始之前，先说明关于SuperMap iClient系列产品图层的几个概念。在SuperMap iClient系列产品中，有图层（Layer）和子图层，这里所说的图层与SuperMap iDesktop中的地图对应，子图层与SuperMap iDesktop中的图层对应。在iClient端，可以通过叠加图层（Layer）的方式将相同坐标系的不同地图叠加到一起，以便于整合地图
antV L7 无底图模式 和 地图3D样式的使用
Working_hard_111的博客
08-21 4433
antV L7 无底图模式的实现和抬高底图实现3D效果
Antv L7地图可视化
UncleDong的博客
05-10 6618
Antv是一款阿里开发的可视化框架，实例数据如https://antv-l7.gitee.io/zh/examples/point/bubble所示。由于官方教程需要配置npm的环境来import相应的包，本人对这个不太熟悉…因此就探索出了更加简单的方式。 参照例子仍是官方教程，不过代码有所修改。原文地址为https://l7.antv.vision/zh/docs/tutorial/map/amap，使用的是高德底图，demo代码如下： 画框的地方只要修改成https://gw.alipayobject
antv l7 实现自定义地图 以及地图抬高图层 以及散点轮播显示弹窗 鼠标悬浮弹窗
10-31
antv l7 实现自定义地图 以及地图抬高图层 以及散点轮播显示弹窗 鼠标悬浮弹窗
Antv L7 + mapbox 实现简单地图场景
07-18
Antv L7 + mapbox 实现简单地图场景
antv-l7地图可视化，全国地图支持省级下钻、悬浮预警、时间区间搜索
07-15
antv-l7地图可视化，全国地图支持省级下钻、悬浮预警、时间区间搜索
antv-l7-master.zip
12-14
L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 专注数据可视化化表达，通过颜色、大小、纹理，方向，体积等视觉变量设置实现从数据到信息清晰，有效的表达。...
vue+antVL7地图组件化.zip
12-14
这个主要是antV/l7绘制的北京地图+散点数据，北京地图封装成了一个组件，在调用时，只需要传入相应的JSON数据就可以了，数据格式在代码中有说明。下载后直接npm install，然后npm run dev。
AntV L7 快速入门示例
woaimx_1314的博客
05-30 1352
L7 引擎还提供了丰富的可视化效果和交互功能，包括热力图、等高线图、鼠标交互等，可以帮助用户更好地理解和分析地理空间数据。L7 官网：蚂蚁地理空间数据可视化 | AntV (antgroup.com)L7 API文档：场景 Scene | L7 (antgroup.com)L7 官方示例：所有图表 | L7 (antgroup.com)L7 官方教程：简介 | L7 (antgroup.com)
AntV L7地图可视化入坑笔记
X01动力装甲的专栏
10-21 3728
先用 HTML CDN的方式跑起来一个地图案例： 官方案例地址：https://codesandbox.io/s/laughing-fermat-fjy5y?file=/index.html:491-499 我的案例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w
antvL7地图绘制
小小迎的博客
07-09 2543
antv/L7地图在线绘制 先下载依赖 npm install @antv/l7 @antv/l7-draw @antv/l7-maps --save 开始绘制 <template> <div id="map" class="map-contain"></div> </template> <script> import { Scene } from '@antv/l7'; import { GaodeMap } fro
antV L7地图 自定义Popup弹窗 setHTML
Working_hard_111的博客
11-14 906
使用antV L7 绘制面图层、线图层、点图层以及自定义弹窗Popup的setHTML使用方法
antv/l7 设置图例
学而时习之，不亦说乎。
04-09 1292
引入Control 基类 import { Control } from "@antv/l7"; 初始化基类 const legend = new Control({ position: "bottomright" }); 设置Control 展示的内容, 通过扩展Control 的onAdd 方法我们自由定制control 需要展示内容和交互。 legend.onAdd = function () { let el = document.createElemen
AntV L7的城市建筑层组件
热爱WebGIS的博客
03-08 966
本案例使用L7库和Mapbox GL JS添加城市建筑层组件（CityBuildingLayer）。
vue3-mapboxgl-antv-L7开发（一）项目的搭建
ycc211215的博客
08-31 772
随着科技的飞速发展，智慧地球，智慧城市等一些名词不断的出现在我们的日常生活中，智慧化的完成离不开地理信息的，它们要获取到我们的位置信息，进而完成一些智能化的决策。
antv l7 vue
07-27
AntV L7是一个基于WebGL的地理信息可视化开发库，可以在Vue项目中使用。要在Vue项目中使用AntV L7，首先需要在HTML文件中引入L7的脚本文件。可以使用CDN方式引入，例如： ```html <head> <!-- 引入最新版的L7 --> <script src='https://unpkg.com/@antv/l7'></script> <!-- 指定版本号引入L7 --> <script src='https://unpkg.com/@antv/l7@2.0.11'></script> </head> ``` 接下来，在Vue组件中安装AntV L7以及相关的组件引用。可以使用npm或yarn安装AntV L7，然后在Vue组件中引入所需的组件。例如，在data中创建一个变量来接收地图实例和组件： ```javascript import { Scene } from '@antv/l7'; export default { data() { return { scene: null, // 其他变量 } }, // 其他生命周期钩子函数 } ``` 在mounted钩子函数中生成地图实例，并加载数据生成地图。可以根据需求进行异步操作数据。例如： ```javascript mounted() { this.scene = new Scene({ // 地图配置 }); // 加载数据生成地图 this.loadDataAndCreateMap(); }, methods: { async loadDataAndCreateMap() { const data = await this.loadData(); // 异步加载数据 // 根据数据生成地图 // this.scene.addLayer(...) // 其他操作 }, // 其他方法 } ``` 最后，可以在Vue组件中渲染地图的DOM元素。例如，在HTML模板中添加一个div元素来渲染地图： ```html <template> <div id="mapContainer"></div> </template> ``` 这样就可以在Vue项目中使用AntV L7进行地图可视化开发了。请注意，具体的代码实现可能会根据项目需求有所不同，以上只是一个简单的示例。 #### 引用[.reference_title] - *1* [【Antv/Vue3】vue项目中使用antv/L7制作地图](https://blog.csdn.net/weixin_52378152/article/details/125429250)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [在vue项目中使用AntV L7地图下钻，异步调用不重复生成](https://blog.csdn.net/Grupass/article/details/127103298)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [antvl7绘制地图以及vue项目中使用多线程worker](https://blog.csdn.net/Mr__proto__/article/details/128975829)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值