AntV L7构建中地大楼

2024-03-17 20:20
文章标签 构建 antv 大楼 l7

本文主要是介绍AntV L7构建中地大楼,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

本案例使用L7库和Mapbox GL JS构建中地大楼。

文章目录

  • 1. 引入 CDN 链接
  • 2. 引入组件
  • 3. 创建场景
  • 4. 加载场景
    • 4.1. 获取数据
    • 4.2. 创建多边形图层
    • 4.3. 添加弹窗
  • 5. 演示效果
  • 6. 实现代码

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>
<linkhref="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"rel="stylesheet"
/>

2. 引入组件

使用第三方库 L7 来创建一个地图并添加数据到地图上的。L7 库提供了许多组件,如地图、图层、弹窗等,用于创建交互式地图。

  1. Scene:场景,用于绘制地图上的基本元素,如地图底图、事件侦听器等。
  2. Mapbox:Mapbox 地图,一种基于 WebGL 的地图引擎,提供了丰富的地图数据和功能。
  3. PointLayer:点图层,用于绘制地图上的点数据,如标记、circle 等。
  4. GaodeMap:高德地图,一种免费且功能强大的地图服务,提供了丰富的地图数据和功能。
  5. PolygonLayer:多边形图层,用于绘制地图上的多边形数据,如矩形、多边形等。
  6. LineLayer:线图层,用于绘制地图上的线数据,如线条、虚线等。
  7. Popup:弹窗,用于在地图上显示弹窗,展示点的相关信息。
const { Scene, Mapbox, PointLayer, GaodeMap, PolygonLayer, LineLayer, Popup } =L7;

3. 创建场景

在这里,我们创建基于高德地图的地图场景。

// 基于高德地图的地图场景
const scene = new Scene({id: "map",map: new GaodeMap({style: "light",center: [114.4, 30.467],zoom: 16,// 俯仰角pitch: 60,}),
});

4. 加载场景

4.1. 获取数据

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

fetch("http://39.103.151.139:8000/gis/zhongdi").then((res) => res.json()).then((data) => {// ...});

4.2. 创建多边形图层

// 4.2 创建一个多边形图层
const zhongdiLayer = new PolygonLayer({}).source(data).color("#21a1f1").size(100).shape("extrude");
// 将图层添加到场景中
scene.addLayer(zhongdiLayer);

4.3. 添加弹窗

当我们点击地图上的某个位置时,会触发这个事件,并显示一个弹出框(Popup)来显示点击位置的属性(名称和工作人员数量)。

// 4.3添加弹窗
// 通过on添加点击事件
zhongdiLayer.on("click", (e) => {// console.log(e);// 从回调中的数据,我们可以获取属性以及坐标const {feature: {properties: { name, people },},lngLat,} = e;// setLnglat需要传入一个经纬度数组const popup = new Popup({offsets: [0, 50],closeButton: false,}).setLnglat([lngLat.lng, lngLat.lat]).setHTML(`<span>名称: ${name}</span><br><span>工作人数: ${people}</span>`);// 将弹出框添加到场景中scene.addPopup(popup);
});

5. 演示效果

image-20240228205019884

6. 实现代码

<!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><linkhref="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;/* cursor: pointer; */}.l7-popup-content {background-color: skyblue !important;}</style></head><body><div id="map"></div><script>// 2. 引入组件const {Scene,Mapbox,PointLayer,GaodeMap,PolygonLayer,LineLayer,Popup,} = L7;mapboxgl.accessToken ="pk.eyJ1IjoiemhvbmdkaXNodW1hIiwiYSI6ImNsNXJoYXR5eTI2bGgzZW53d2didWF1c3AifQ.6vOplM2NQc_xnJW3aA5ZBA";// 3.创建场景// 基于高德地图的地图场景const scene = new Scene({id: "map",map: new GaodeMap({style: "light",center: [114.4, 30.467],zoom: 16,// 俯仰角pitch: 60,}),});// 4.加载场景scene.on("loaded", () => {// 4.1 从服务器获取中地数据fetch("http://39.103.151.139:8000/gis/zhongdi").then((res) => res.json()).then((data) => {// 4.2 创建一个多边形图层const zhongdiLayer = new PolygonLayer({}).source(data).color("#21a1f1").size(100).shape("extrude");// 将图层添加到场景中scene.addLayer(zhongdiLayer);// 4.3添加点击事件// 通过on添加点击事件zhongdiLayer.on("click", (e) => {// console.log(e);// 从回调中的数据,我们可以获取属性以及坐标const {feature: {properties: { name, people },},lngLat,} = e;// setLnglat需要传入一个经纬度数组const popup = new Popup({offsets: [0, 50],closeButton: false,}).setLnglat([lngLat.lng, lngLat.lat]).setHTML(`<span>名称: ${name}</span><br><span>工作人数: ${people}</span>`);// 将弹出框添加到场景中scene.addPopup(popup);});});});</script></body>
</html>

这篇关于AntV L7构建中地大楼的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/820047

相关文章

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

Retrieval-based-Voice-Conversion-WebUI模型构建指南

一、模型介绍 Retrieval-based-Voice-Conversion-WebUI(简称 RVC)模型是一个基于 VITS(Variational Inference with adversarial learning for end-to-end Text-to-Speech)的简单易用的语音转换框架。 具有以下特点 简单易用:RVC 模型通过简单易用的网页界面,使得用户无需深入了

maven 编译构建可以执行的jar包

💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」👈,「stormsha的知识库」👈持续学习,不断总结,共同进步,为了踏实,做好当下事儿~ 专栏导航 Python系列: Python面试题合集,剑指大厂Git系列: Git操作技巧GO

嵌入式Openharmony系统构建与启动详解

大家好,今天主要给大家分享一下,如何构建Openharmony子系统以及系统的启动过程分解。 第一:OpenHarmony系统构建      首先熟悉一下,构建系统是一种自动化处理工具的集合,通过将源代码文件进行一系列处理,最终生成和用户可以使用的目标文件。这里的目标文件包括静态链接库文件、动态链接库文件、可执行文件、脚本文件、配置文件等。      我们在编写hellowor

利用命令模式构建高效的手游后端架构

在现代手游开发中,后端架构的设计对于支持高并发、快速迭代和复杂游戏逻辑至关重要。命令模式作为一种行为设计模式,可以有效地解耦请求的发起者与接收者,提升系统的可维护性和扩展性。本文将深入探讨如何利用命令模式构建一个强大且灵活的手游后端架构。 1. 命令模式的概念与优势 命令模式通过将请求封装为对象,使得请求的发起者和接收者之间的耦合度降低。这种模式的主要优势包括: 解耦请求发起者与处理者

Jenkins构建Maven聚合工程,指定构建子模块

一、设置单独编译构建子模块 配置: 1、Root POM指向父pom.xml 2、Goals and options指定构建模块的参数: mvn -pl project1/project1-son -am clean package 单独构建project1-son项目以及它所依赖的其它项目。 说明: mvn clean package -pl 父级模块名/子模块名 -am参数

JAVA用最简单的方法来构建一个高可用的服务端,提升系统可用性

一、什么是提升系统的高可用性 JAVA服务端,顾名思义就是23体验网为用户提供服务的。停工时间,就是不能向用户提供服务的时间。高可用,就是系统具有高度可用性,尽量减少停工时间。如何用最简单的方法来搭建一个高效率可用的服务端JAVA呢? 停工的原因一般有: 服务器故障。例如服务器宕机,服务器网络出现问题,机房或者机架出现问题等;访问量急剧上升,导致服务器压力过大导致访问量急剧上升的原因;时间和

利用Django框架快速构建Web应用:从零到上线

随着互联网的发展,Web应用的需求日益增长,而Django作为一个高级的Python Web框架,以其强大的功能和灵活的架构,成为了众多开发者的选择。本文将指导你如何从零开始使用Django框架构建一个简单的Web应用,并将其部署到线上,让世界看到你的作品。 Django简介 Django是由Adrian Holovaty和Simon Willison于2005年开发的一个开源框架,旨在简

828华为云征文|华为云Flexus X实例docker部署rancher并构建k8s集群

828华为云征文|华为云Flexus X实例docker部署rancher并构建k8s集群 华为云最近正在举办828 B2B企业节,Flexus X实例的促销力度非常大,特别适合那些对算力性能有高要求的小伙伴。如果你有自建MySQL、Redis、Nginx等服务的需求,一定不要错过这个机会。赶紧去看看吧! 什么是华为云Flexus X实例 华为云Flexus X实例云服务是新一代开箱即用、体