AntV L7深圳智慧城市

本案例使用L7 库和Mapbox GL JS构建深圳智慧城市。

文章目录

  • [1. 引入 CDN 链接](#1. 引入 CDN 链接)
  • [2. 引入组件](#2. 引入组件)
  • [3. 创建地图](#3. 创建地图)
  • [4. 创建场景](#4. 创建场景)
  • [5. 获取数据](#5. 获取数据)
  • [6. 创建面图层](#6. 创建面图层)
  • [7. 演示效果](#7. 演示效果)
  • [8. 代码实现](#8. 代码实现)

1. 引入 CDN 链接

html 复制代码
<!-- 1.引入CDN链接 -->
<script src="https://unpkg.com/@antv/l7"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
<link
  href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"
  rel="stylesheet"
/>

2. 引入组件

我们使用开源库 L7 来引入和初始化三个类:Scene、Mapbox 和 PolygonLayer。L7 库是一个用于创建地图的可控组件的库,它基于 Vue.js 和 Tuandoushi(天斗星)框架。

  1. Scene 类:这是一个用于创建地图场景的类。它提供了地图的基本设置,如视图、地图图层和样式。

  2. Mapbox 类:这是一个用于创建 Mapbox 地图的类。它提供了基于 Mapbox 的地图服务器的设置。

  3. PolygonLayer 类:这是一个用于创建多边形图层的类。它提供了绘制多边形图层的方法。

js 复制代码
const { Scene, Mapbox, PolygonLayer } = L7;

3. 创建地图

我们创建了一个Mapbox GL JS地图实例,设置了地图的容器、默认的地图风格、中心点坐标、地图级别、默认的地图投影模式以及俯仰角。

js 复制代码
// 3.创建地图
const map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/streets-v12",
  center: [114.050008, 22.529272],
  zoom: 13,
  projection: "globe",
  pitch: 70,
});

4. 创建场景

Scene组件负责显示地图和其他图层。

js 复制代码
const scene = new L7.Scene({
  id: "map",
  map: new Mapbox({
    mapInstance: map,
  }),
});

5. 获取数据

使用 fetch 函数从服务器获取数据:

javascript 复制代码
        fetch(
          "https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json"
        )
          .then((res) => res.json())
          .then((data) => {
            const colors = [
              "#816CAD",
              "#A67FB5",
              "#C997C7",
              "#DEB8D4",
              "#F5D4E6",
              "#FAE4F1",
              "#FFF3FC",
            ];

6. 创建面图层

我们需要创建一个新的PolygonLayer对象,然后添加数据源,接着设置形状、激活状态和颜色等属性,最后将层添加到场景中。

js 复制代码
// 6.创建面图层
const layer = new PolygonLayer({})
  // source添加数据源
  .source(data)
  .shape("extrude")
  .active(true)
  .color("h20", colors)
  .size("h20", [100, 120, 160, 200, 260, 300]);

scene.addLayer(layer);

7. 演示效果

8. 代码实现

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>深圳智慧城市</title>
    <!-- 1.引入CDN链接 -->
    <script src="https://unpkg.com/@antv/l7"></script>
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        overflow: hidden;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      // 2.引入组件
      const { Scene, Mapbox, PolygonLayer } = L7;
      mapboxgl.accessToken =
        "pk.eyJ1IjoiemhvbmdkaXNodW1hIiwiYSI6ImNsNXJoYXR5eTI2bGgzZW53d2didWF1c3AifQ.6vOplM2NQc_xnJW3aA5ZBA";

      // 3.创建地图
      const map = new mapboxgl.Map({
        container: "map",
        style: "mapbox://styles/mapbox/streets-v12",
        center: [114.050008, 22.529272],
        zoom: 13,
        projection: "globe",
        pitch: 70,
      });

      // 4.创建场景
      const scene = new L7.Scene({
        id: "map",
        map: new Mapbox({
          mapInstance: map,
        }),
      });

      scene.on("loaded", () => {
        // 5.获取数据
        fetch(
          "https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json"
        )
          .then((res) => res.json())
          .then((data) => {
            const colors = [
              "#816CAD",
              "#A67FB5",
              "#C997C7",
              "#DEB8D4",
              "#F5D4E6",
              "#FAE4F1",
              "#FFF3FC",
            ];
            // 6.创建面图层
            const layer = new PolygonLayer({})
              // source添加数据源
              .source(data)
              .shape("extrude")
              .active(true)
              .color("h20", colors)
              .size("h20", [100, 120, 160, 200, 260, 300]);

            scene.addLayer(layer);
          });
      });
    </script>
  </body>
</html>
相关推荐
伏小白白白1 小时前
【论文精度-2】求解车辆路径问题的神经组合优化算法:综合展望(Yubin Xiao,2025)
人工智能·算法·机器学习
应用市场1 小时前
OpenCV编程入门:从零开始的计算机视觉之旅
人工智能·opencv·计算机视觉
星域智链1 小时前
宠物智能用品:当毛孩子遇上 AI,是便利还是过度?
人工智能·科技·学习·宠物
taxunjishu2 小时前
DeviceNet 转 MODBUS TCP罗克韦尔 ControlLogix PLC 与上位机在汽车零部件涂装生产线漆膜厚度精准控制的通讯配置案例
人工智能·区块链·工业物联网·工业自动化·总线协议
说私域2 小时前
基于多模态AI技术的传统行业智能化升级路径研究——以开源AI大模型、AI智能名片与S2B2C商城小程序为例
人工智能·小程序·开源
囚生CY2 小时前
【速写】优化的深度与广度(Adam & Moun)
人工智能·python·算法
hqyjzsb2 小时前
2025年市场岗位能力重构与跨领域转型路径分析
c语言·人工智能·信息可视化·重构·媒体·改行学it·caie
爱学习的uu2 小时前
CURSOR最新使用指南及使用思路
人工智能·笔记·python·软件工程
叶凡要飞2 小时前
RTX5060Ti安装双系统ubuntu22.04各种踩坑点(黑屏,引导区修复、装驱动、server版本安装)
人工智能·python·yolo·ubuntu·机器学习·操作系统
叶庭云3 小时前
一文掌握 CodeX CLI 安装以及使用!
人工智能·openai·安装·使用教程·codex cli·编码智能体·vibe coding 终端