webgis开发之L7（2）

最新推荐文章于 2024-04-16 18:22:37 发布
最新推荐文章于 2024-04-16 18:22:37 发布
阅读量404 收藏 7
点赞数 7
分类专栏： webgis开发 l7 文章标签： 信息可视化 javascript html5 开发语言 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67679364/article/details/136413743
版权

 AntV L7

L7·蚂蚁地理空间数据可视化

蚂蚁集团 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析引擎。

一、点图层可视化

01、波纹图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pointLayer</title>
    <!-- 1、引入mapbox库以及它的样式 -->
    <script src="../../lib/mapbox.js"></script>
    <link rel="stylesheet" href="../../lib/mapbox.css">
    <script src="../../lib/l7.js"></script>
    <script src="../../lib/turf.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        button {
            position: fixed;
            top: 5px;
            left: 5px;
            z-index: 1;
        }
    </style>
</head>

<body>
    <button onclick="toLog()" style="left: 80px;">查看</button>
    <button onclick="toDel()" style="left: 160px;">删除</button>
    <button onclick="toShow()">切换</button>
    <!-- 1、给地图准备一个容器 -->
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
        // 3、创建地图
        const map = new mapboxgl.Map({
            container: 'map',    //指定地图容器id
            style: 'mapbox://styles/mapbox/streets-v12', //地图风格
            center: [114.30, 30.50],  //地图中心坐标  
            zoom: 12,    //缩放比例
        });
        // 官方文档：https://l7.antv.antgroup.com/api/point_layer/pointlayer
        const { Scene, Mapbox, PointLayer,LayerSwitch } = L7
        //L7来管理地图
        const scene = new L7.Scene({
            id: 'map',
            map: new L7.Mapbox({
                mapInstance: map
            })
        })

        const data = turf.featureCollection([
            turf.point([114.342, 30.5192], { num: 200 }),
            turf.point([114.354, 30.493], { num: 300 }),
            turf.point([114.355, 30.515], { num: 400 }),
            turf.point([114.345, 30.5243], { num: 200 }),
            turf.point([114.3561, 30.4932], { num: 300 }),
            turf.point([114.3557, 30.5156], { num: 400 }),
            turf.point([114.347, 30.5123], { num: 200 }),
            turf.point([114.359, 30.49], { num: 300 }),
            turf.point([114.355, 30.511], { num: 400 }),
        ]);

        let pointLayer
        scene.on('load', () => {
            pointLayer = new PointLayer()
                .source(data)   //数据源 跟mapbox不一样，它只能放要素集合
                .shape('circle')
                .size(50)
                .animate(true)
                .active('true')
                .color('red')
                // .active('blue')
                // .filter('num', (num) => {
                //     return num > 250
                // })
            scene.addLayer(pointLayer)

            const layerSwitch = new LayerSwitch({
                layers: [pointLayer],
            });
            scene.addControl(layerSwitch);
        })
    </script>
</body>

</html>

02、雷达图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pointLayer</title>
    <!-- 1、引入mapbox库以及它的样式 -->
    <script src="../../lib/mapbox.js"></script>
    <link rel="stylesheet" href="../../lib/mapbox.css">
    <script src="../../lib/l7.js"></script>
    <script src="../../lib/turf.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        button {
            position: fixed;
            top: 5px;
            left: 5px;
            z-index: 1;
        }
    </style>
</head>

<body>
    <!-- 1、给地图准备一个容器 -->
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
        // 3、创建地图
        const map = new mapboxgl.Map({
            container: 'map',    //指定地图容器id
            style: 'mapbox://styles/mapbox/streets-v12', //地图风格
            center: [114.30, 30.50],  //地图中心坐标  
            zoom: 12,    //缩放比例
        });
        // 官方文档：https://l7.antv.antgroup.com/api/point_layer/pointlayer
        const { Scene, Mapbox, PointLayer, LayerSwitch } = L7
        //L7来管理地图
        const scene = new L7.Scene({
            id: 'map',
            map: new L7.Mapbox({
                mapInstance: map
            })
        })

        let pointLayer
        scene.on('load', () => {
            fetch('../3、组件/output.json').then(response => response.json()).then(res => {
                // console.log(res);
                pointLayer = new PointLayer()
                    .source(res)   //数据源 跟mapbox不一样，它只能放要素集合
                    .shape('radar')
                    .size(50)
                    .animate(true)
                    .active(true)
                    .color('red')
                    .style({
                        speed: 5
                    })
                scene.addLayer(pointLayer)
            })
        })

    </script>
</body>

</html>

03、自定义图标

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pointLayer</title>
    <!-- 1、引入mapbox库以及它的样式 -->
    <script src="../../lib/mapbox.js"></script>
    <link rel="stylesheet" href="../../lib/mapbox.css">
    <script src="../../lib/l7.js"></script>
    <script src="../../lib/turf.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        button {
            position: fixed;
            top: 5px;
            left: 5px;
            z-index: 1;
        }
    </style>
</head>

<body>
    <!-- 1、给地图准备一个容器 -->
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
        // 3、创建地图
        const map = new mapboxgl.Map({
            container: 'map',    //指定地图容器id
            style: 'mapbox://styles/mapbox/streets-v12', //地图风格
            center: [114.30, 30.50],  //地图中心坐标  
            zoom: 12,    //缩放比例
        });
        // 官方文档：https://l7.antv.antgroup.com/api/point_layer/pointlayer
        const { Scene, Mapbox, PointLayer,LayerSwitch } = L7
        //L7来管理地图
        const scene = new L7.Scene({
            id: 'map',
            map: new L7.Mapbox({
                mapInstance: map
            })
        })

        const data = turf.featureCollection([
            turf.point([114.34, 30.52], { num: 200 }),
        ]);

        scene.on('load', () => {
            scene.addImage('position','./position.png')
            const pointLayer = new PointLayer()
                .source(data)   //数据源 跟mapbox不一样，它只能放要素集合
                .shape('position')
                .size(20)
            scene.addLayer(pointLayer)
        })
    </script>
</body>

</html>

二、线图层可视化

01、流线图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pointLayer</title>
    <!-- 1、引入mapbox库以及它的样式 -->
    <script src="../../lib/mapbox.js"></script>
    <link rel="stylesheet" href="../../lib/mapbox.css">
    <script src="../../lib/l7.js"></script>
    <script src="../../lib/turf.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        button {
            position: fixed;
            top: 5px;
            left: 5px;
            z-index: 1;
        }
    </style>
</head>

<body>
    <!-- 1、给地图准备一个容器 -->
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
        // 3、创建地图
        const map = new mapboxgl.Map({
            container: 'map',    //指定地图容器id
            style: 'mapbox://styles/mapbox/dark-v11', //地图风格
            center: [114.30, 30.50],  //地图中心坐标  
            zoom: 12,    //缩放比例
        });
        // 官方文档：https://l7.antv.antgroup.com/api/point_layer/pointlayer
        const { Scene, Mapbox, PointLayer,LayerSwitch,LineLayer } = L7
        //L7来管理地图
        const scene = new L7.Scene({
            id: 'map',
            map: new L7.Mapbox({
                mapInstance: map
            })
        })

        scene.on('loaded',()=>{
            fetch('./roads.json').then(res=>res.json()).then(res=>{
                const layer = new LineLayer()
                    .source(res)
                    .size(1)
                    .shape('line')
                    .color('rgba(0,0,255,0.4)')
                    .filter('type',(type)=>{
                        return type==='primary'
                    })
                    .animate({
                        inteval:1,  //流线长度
                        trailLength:1,  //流线间隔
                        duration:3  //持续时间
                    })
                scene.addLayer(layer)
            })

        })
    </script>
</body>

</html>

三、面图层可视化

01、城市建筑扫光

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pointLayer</title>
    <!-- 1、引入mapbox库以及它的样式 -->
    <script src="../../lib/mapbox.js"></script>
    <link rel="stylesheet" href="../../lib/mapbox.css">
    <script src="../../lib/l7.js"></script>
    <script src="../../lib/turf.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        button {
            position: fixed;
            top: 5px;
            left: 5px;
            z-index: 1;
        }
    </style>
</head>

<body>
    <!-- 1、给地图准备一个容器 -->
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
        // 3、创建地图
        const map = new mapboxgl.Map({
            container: 'map',    //指定地图容器id
            style: 'mapbox://styles/mapbox/dark-v11', //地图风格
            center: [120.145, 30.238915],  //地图中心坐标  
            zoom: 12,    //缩放比例
        });
        // 官方文档：https://l7.antv.antgroup.com/zh/examples/gallery/animate/#build_sweep
        const { Scene, Mapbox, CityBuildingLayer, PolygonLayer,LineLayer } = L7
        //L7来管理地图
        const scene = new L7.Scene({
            id: 'map',
            map: new L7.Mapbox({
                mapInstance: map
            })
        })

        fetch(
            'https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json'
        ).then(async res => {
            const pointLayer = new CityBuildingLayer();
            pointLayer
                .source(await res.json())
                .size('floor', [0, 500])
                .color('rgba(242,246,250,1.0)')
                .animate({
                    enable: true
                })
                .active({
                    color: '#0ff',
                    mix: 0.5
                })
                .style({
                    opacity: 0.7,
                    baseColor: 'rgb(16, 16, 16)',
                    windowColor: 'rgb(30, 60, 89)',
                    brightColor: 'rgb(255, 176, 38)',
                    sweep: {
                        enable: true,
                        sweepRadius: 2,
                        sweepColor: '#1990FF',
                        sweepSpeed: 0.5,
                        sweepCenter: [120.145319, 30.238915]
                    }
                });
            scene.addLayer(pointLayer);
        });

        // fetch(
        //     'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json'
        // )
        //     .then(data => data.json())
        //     .then(
        //         ({
        //             lakeBorderData,
        //             lakeData,
        //             landData
        //         }) => {
        //             const lakeLayer = new PolygonLayer()
        //                 .source(lakeData)
        //                 .shape('fill')
        //                 .color('#1E90FF')
        //                 .style({
        //                     opacity: 0.4,
        //                     opacityLinear: {
        //                         enable: true,
        //                         dir: 'out' // in - out
        //                     }
        //                 });
        //             const landLayer = new PolygonLayer()
        //                 .source(landData)
        //                 .shape('fill')
        //                 .color('#3CB371')
        //                 .style({
        //                     opacity: 0.4,
        //                     opacityLinear: {
        //                         enable: true,
        //                         dir: 'in' // in - out
        //                     }
        //                 });

        //             const lakeBorderLayer = new PolygonLayer()
        //                 .source(lakeBorderData)
        //                 .shape('fill')
        //                 .color('#ccc')
        //                 .style({
        //                     opacity: 0.5,
        //                     opacityLinear: {
        //                         enable: true,
        //                         dir: 'in' // in - out
        //                     }
        //                 });

        //             scene.addLayer(lakeLayer);
        //             scene.addLayer(lakeBorderLayer);
        //             scene.addLayer(landLayer);
        //         }
        //     );

        // fetch(
        //     'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json'
        // )
        //     .then(res => res.json())
        //     .then(data => {
        //         const layer = new LineLayer({
        //             zIndex: 0,
        //             depth: true
        //         })
        //             .source(data)
        //             .size(1)
        //             .shape('line')
        //             .color('#1990FF')
        //             .animate({
        //                 interval: 1, // 间隔
        //                 duration: 2, // 持续时间，延时
        //                 trailLength: 2 // 流线长度
        //             });
        //         scene.addLayer(layer);
        //     });


    </script>
</body>

</html>

02、深圳3D建筑模型

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pointLayer</title>
    <!-- 1、引入mapbox库以及它的样式 -->
    <script src="../../lib/mapbox.js"></script>
    <link rel="stylesheet" href="../../lib/mapbox.css">
    <script src="../../lib/l7.js"></script>
    <script src="../../lib/turf.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        button {
            position: fixed;
            top: 5px;
            left: 5px;
            z-index: 1;
        }
    </style>
</head>

<body>
    <!-- 1、给地图准备一个容器 -->
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
        // 3、创建地图
        const map = new mapboxgl.Map({
            container: 'map',    //指定地图容器id
            style: 'mapbox://styles/mapbox/dark-v11', //地图风格
            center: [ 114.050008, 22.529272 ],  //地图中心坐标  
            zoom: 12,    //缩放比例
        });
        // 官方文档：https://l7.antv.antgroup.com/api/point_layer/pointlayer
        const { Scene, Mapbox, PointLayer, LayerSwitch,PolygonLayer } = L7
        //L7来管理地图
        const scene = new L7.Scene({
            id: 'map',
            map: new L7.Mapbox({
                mapInstance: map
            })
        })
        scene.on('loaded', () => {
            fetch(
                'https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json'
            )
                .then(res => res.json())
                .then(data => {
                    const layer = new PolygonLayer({})
                        .source(data)
                        .shape('extrude')
                        .size('h20', [100, 120, 160, 200, 260, 500])
                        .color('h20', [
                            '#816CAD',
                            '#A67FB5',
                            '#C997C7',
                            '#DEB8D4',
                            '#F5D4E6',
                            '#FAE4F1',
                            '#FFF3FC'
                        ]);
                    scene.addLayer(layer);
                });
        });

    </script>
</body>

</html>

李佩锦peijin
关注
  • 7
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webgis开发之L7（2）自定义图标
03-02
webgis开发之L7（2）自定义图标
webgis开发之L7（1）
weixin_67679364的博客
03-01 426
AntV L7是蚂蚁集团数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析引擎。该引擎提供了丰富的功能模块，包括地图初始化、使用图层绘制要素、组件以及画笔功能。在地图初始化部分，介绍了如何使用 L7 来管理地图，加载地图样式和数据源。在使用图层绘制要素部分，介绍了加载点图层和面图层的方法，并演示了如何控制图层的显隐和删除。组件部分介绍了标注与弹框、地图控件的添加，以及如何加载 logo。最后在画笔部分展示了如何使用 L7 提供的画笔功能来绘制点、线、面等要素并将结果转换为 GeoJSON
如何通过Mapbox和Ant L7实现智慧城市武汉？
最新发布
GIS前端嘉欣的博客
04-16 789
L7 使用了 WebGL 技术，可以在浏览器中实现高性能的地图可视化，可以处理大量的地图数据，同时还可以提供平滑的动画效果。在发展过程中，L7 首先提供了基本的地图可视化功能，例如点、线、面等基本几何图形的绘制和可视化。Mapbox是一个开源的地图类库，通过使用mapbox的类库，可以很方便的构建web、app等地图应用，支持的地图sdk有web、ios、Android和Unity。我在项⽬中使⽤过Mapbox GL JS 中的多种交互控件和地图样式，其中最常使⽤的是缩放和平移控件、图层控制和标记控件。
Antv L7 + mapbox 实现简单地图场景
07-18
Antv L7 + mapbox 实现简单地图场景
AntV L7构建中地大楼
热爱WebGIS的博客
03-17 1016
本案例使用库和构建中地大楼。
Antv + Tomcat L7地图 本地资源可视化
UncleDong的博客
05-10 1626
文章目录0. 基础知识1. 下载资源文件2. 修改资源路径 0. 基础知识 Antv使用demo可以查看博客https://blog.csdn.net/weixin_42763696/article/details/106044149 Tomcat配置可以查看博客https://blog.csdn.net/weixin_42763696/article/details/106036905 在之前的demo中，Antv都是访问的网络资源，如json文件，txt文件等等。但如果想做一个本地的可视化结果呢？经过我
MapV地理数据可视化_API-初始化及初步使用
damadashen的博客
08-10 2747
百度地图地理数据可视化MapV的初始化及使用（加载mapv图层、 添加点图层、添加点轨迹、添加热力图层、添加Three.js图层、设置炫光特效与发光特效）
11.newLayer系列-天地图
weixin_42116238的博客
07-27 87
【代码】11.newLayer系列-天地图。
webgis开发之L7-加载图层专用
03-01
webgis开发之L7-加载图层专用
webgis开发之L7（2）流线图数据
03-02
webgis开发之L7（2）流线图数据
三维webgis开发-Cesium
08-16
基于cesium的三维webgis开发讲解
WEBGIS开发基础到进阶视频教程2023-WEBGIS视频教程2023
05-18
分享一套WEBGIS开发视频课程，2023年5月完结新课，提供课程配套的源码和课件下载！ 学完本套课程您可以获得： 1、GIS与web基础 2、GIS软件基础操作 3、WEBGIS框架学习 4、项目实战、POSTGIS、geotools WEBGIS开发...
L7和mapbox结合使用的案例1
柒柒柒的博客
10-20 727
先在html文件中准备一个定义了高宽的 DOM 容器<div id="map" style="width: 100%;height:900px;"></div> 引入js<!-- mapbox-gl --> <link href="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.css" rel="stylesheet"> <script src="https://api.mapbox.co.
vue3-mapboxgl-antv-L7开发（一）项目的搭建
ycc211215的博客
08-31 759
随着科技的飞速发展，智慧地球，智慧城市等一些名词不断的出现在我们的日常生活中，智慧化的完成离不开地理信息的，它们要获取到我们的位置信息，进而完成一些智能化的决策。
L7基本使用
boy_hhx的博客
01-30 509
l7基本使用
antv l7 加载图层报错以及加载地图不出现问题记录和报错解决的步骤分享
qq_43557302的博客
09-04 858
antv l7 加载图层报错以及加载地图不出现问题记录和报错解决的步骤分享
【基于AntV L7实现WebGIS扫描地类效果】
qq_22865879的博客
07-06 355
最近大屏展示需要点震撼点的效果；狂肝6小时基于antv l7初步实现，记录点滴。
webgis开发案例就业
07-27
2. 市场调研公司：市场调研公司可能需要WebGIS开发人员来分析和可视化地理数据，以帮助客户做出市场决策。例如，使用地图数据显示竞争对手的分布和销售情况。 3. 自然资源管理：自然资源管理机构可能需要WebGIS开发...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值