AntV L7的pointLayer点图层

本案例使用L7库和Mapbox GL JS创建点数据并加载进地图。

文章目录

  • 1. 引入 CDN 链接
  • 2. 引入组件
  • 3. 创建地图
  • 4. 创建场景
  • 5. 创建点数据
    • 5.1. 普通 json 数据
    • 5.2. geojson 数据
  • 6. 创建点图层
    • 6.1. 普通 json 数据
    • 6.2. geojson 数据
  • 7. 演示效果
  • 8. 代码实现

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-JS 库中的SceneMapboxPointLayer组件。

const { Scene, Mapbox, PointLayer } = L7;

3. 创建地图

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

const map = new mapboxgl.Map({container: "map",style: "mapbox://styles/mapbox/streets-v12",center: [108.280717, 23.157163],zoom: 12,projection: "globe",
});

4. 创建场景

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

const scene = new L7.Scene({id: "map",map: new Mapbox({mapInstance: map,}),
});

5. 创建点数据

5.1. 普通 json 数据

在这里我们创建了两个坐标点的数据。

const data = [{lng: 108.280717,lat: 23.157163,name: "武鸣区",},{lng: 108.290717,lat: 23.167163,name: "南宁师范大学",},
];

5.2. geojson 数据

在这里,我们创建一个表示地理数据的 JSON 格式。它包含了一个名为data的变量,该变量是一个包含类型为FeatureCollection的地理数据对象。FeatureCollection是一个包含多个Feature对象的集合,每个Feature对象表示一个地理要素(如点、线或面)。

在这个例子中,data对象包含了两个Feature对象。第一个Feature对象的类型是Point,表示一个点,其坐标是108.280717, 23.157163。第二个Feature对象的类型是Point,表示一个点,其坐标是108.290717, 23.167163。这两个点的坐标分别位于武鸣区和南宁师范大学附近。

const data = {type: "FeatureCollection",features: [{type: "Feature",properties: {name: "武鸣区",},geometry: {type: "Point",coordinates: [108.280717, 23.157163],},},{type: "Feature",properties: {name: "南宁师范大学",},geometry: {type: "Point",coordinates: [108.290717, 23.167163],},},],
};

6. 创建点图层

6.1. 普通 json 数据

我们可以使用L7.PointLayer创建一个点云图层,设置点图层的样式。

        // 6.创建点图层// source默认可以解析geojson// PointLayer点图层,在L7中引入const pointLayer = new PointLayer({})// source添加数据源.source(data, {parser: {type: "json",x: "lng",y: "lat",},})// shape指定点图层的样式.shape("circle")// size指定大小.size("name", [10, 20])// color指定颜色.color("name", ["#e53e31", "#24adf3"]).style({opacity: 0.8,strokeWidth: 1,});// 最后将图层放到scene中scene.addLayer(pointLayer);

6.2. geojson 数据

source默认可以解析geojson

        // PointLayer点图层,在L7中引入const pointLayer = new PointLayer({})// source添加数据源.source(data)// shape指定点图层的样式.shape("circle")// size指定大小.size("name", [10, 20])// color指定颜色.color("name", ["#e53e31", "#24adf3"]).style({opacity: 0.8,strokeWidth: 1,});scene.addLayer(pointLayer);

7. 演示效果

在这里,我们创建了一个蓝色和一个红色不同大小的点。

image-20240228194004872

8. 代码实现

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>L7的pointLayer</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;}</style></head><body><div id="map"></div><script>// 2.引入组件const { Scene, Mapbox, PointLayer } = L7;mapboxgl.accessToken ="pk.eyJ1IjoiemhvbmdkaXNodW1hIiwiYSI6ImNsNXJoYXR5eTI2bGgzZW53d2didWF1c3AifQ.6vOplM2NQc_xnJW3aA5ZBA";// 3.创建地图const map = new mapboxgl.Map({container: "map",style: "mapbox://styles/mapbox/streets-v12",center: [108.280717, 23.157163],zoom: 12,projection: "globe",});// 4.创建场景const scene = new L7.Scene({id: "map",map: new Mapbox({mapInstance: map,}),});scene.on("load", () => {// 5.创建点数据const data = [{lng: 108.280717,lat: 23.157163,name: "武鸣区",},{lng: 108.290717,lat: 23.167163,name: "南宁师范大学",},];// 6.创建点图层// source默认可以解析geojson// PointLayer点图层,在L7中引入const pointLayer = new PointLayer({})// source添加数据源.source(data, {parser: {type: "json",x: "lng",y: "lat",},})// shape指定点图层的样式.shape("circle")// size指定大小.size("name", [10, 20])// color指定颜色.color("name", ["#e53e31", "#24adf3"]).style({opacity: 0.8,strokeWidth: 1,});// 最后将图层放到scene中scene.addLayer(pointLayer);});</script></body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/729991.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【网络连接】ping不通的常见原因+解决方案,如何在只能访问网关时诊断,并修复IP不通的问题

【网络连接】ping不通的常见原因解决方案&#xff0c;如何在只能访问网关时诊断&#xff0c;并修复IP不通的问题 写在最前面网络基础可能的问题、表现以及解决方案如何诊断和解决操作步骤 详细问题描述详细解决方案1. 防火墙或安全软件拦截2. IP配置错误3. 网络设备问题4. 物理…

Java8之 LocalDate,LocalDateTime和处理时间、日期工具类一网打尽

1、java 支持日期格式化 import java.text.SimpleDateFormat; import java.time.format.DateTimeFormatter;public static final String DATE_TIME_FORMATTER_PATTERN "yyyy-MM-dd HH:mm:ss"; public static final String DATE_FORMATTER_PATTERN "yyyy-MM-d…

面试官问:生成订单30分钟未支付,则自动取消,该怎么实现

今天给大家上一盘硬菜&#xff0c;并且是支付中非常重要的一个技术解决方案&#xff0c;有这块业务的同学注意自己试一把了哈&#xff01; 在开发中&#xff0c;往往会遇到一些关于延时任务的需求。例如 生成订单30分钟未支付&#xff0c;则自动取消 生成订单60秒后,给用户发短…

论文翻译:一种基于强化学习的车辆队列控制策略,用于减少交通振荡中的能量消耗

A Reinforcement Learning-Based Vehicle Platoon Control Strategy for Reducing Energy Consumption in Traffic Oscillations 一种基于强化学习的车辆队列控制策略&#xff0c;用于减少交通振荡中的能量消耗 文章目录 A Reinforcement Learning-Based Vehicle Platoon Cont…

QT中的信号和槽

信号和槽概述 在 Qt 中&#xff0c;用户和控件的每次交互过程称为⼀个事件。比如 “用户点击按钮” 是⼀个事件&#xff0c;“用户关闭窗口” 也是⼀个事件。每个事件都会发出⼀个信号&#xff0c;例如用户点击按钮会发出 “按钮被点击” 的信号&#xff0c;用户关闭窗口会发出…

突破编程_前端_JS编程实例(自适应表格列宽)

1 开发目标 针对如下的表格组件&#xff1a; 根据表格的各个列字符串宽度动态调整表格列宽&#xff1a; 2 详细需求 本组件目标是提供一个自动调整 HTML 表格列宽的解决方案&#xff0c;通过 JS 实现动态计算并调整表格每列的宽度&#xff0c;以使得表格能够自适应容器宽度&a…

微信作为私域营销的载体有哪些优势?

私域流量的本质就是&#xff1a; 降低我的获客成本&#xff0c;提高我产品服务的复购率&#xff0c;增加我和用户之间的粘性&#xff0c;挖掘用户的终身价值。 私域流量的优势&#xff1a; 1、更精准&#xff1b; 2、节约成本&#xff0c;减少广告成本&#xff1b; 3、有利于品…

High-Resolution Image Synthesis with Latent Diffusion Models

一、简介 标题:High-Resolution Image Synthesis with Latent Diffusion Models(https://arxiv.org/pdf/2112.10752.pdf;GitHub - CompVis/latent-diffusion: High-Resolution Image Synthesis with Latent Diffusion Models) 期刊:CVPR 时间:2022 作者:Robin Romba…

mongo多数据源动态配置

mongo的配置信息默认使用配置文件的spring.data.mongodb前缀的信息进行配置&#xff0c;但是我想另外配个其他前缀的信息如logging.data.mongodb&#xff0c;区分默认的mongo数据源。这个就需要建个mongo配置类&#xff0c;以logging.data.mongodb前缀去动态配置mongo数据源。 …

LCR 179. 查找总价格为目标值的两个商品 - 力扣

1. 题目 购物车内的商品价格按照升序记录于数组 price。请在购物车中找到两个商品的价格总和刚好是 target。若存在多种情况&#xff0c;返回任一结果即可。 2. 示例 3. 分析 我们首先想到暴力解法&#xff0c;这道题目的暴力还是比较简单的&#xff0c;列举每个数的情况即可…

C/C++的内存管理与初阶模板

引言 我们在学习C的时候&#xff0c;会经常在堆上申请空间&#xff0c;所以这个时候就体现了内存管理遍历。 图下是我们常见的计算机的内存划分&#xff1a; 我也在图下对部分变量存在的位置&#xff0c;及时标注。(如果有任何问题可以联系博主修改&#xff0c;感谢大家。) 那…

智慧油气场站:油气行业实现数字化转型的关键一步

智慧油气场站&#xff1a;油气行业实现数字化转型的关键一步 在现代社会&#xff0c;能源供应是国家经济发展和人民生活的重要保障。而油气场站作为能源的重要供应和储存基地&#xff0c;扮演着至关重要的角色。此外&#xff0c;油气场站还可以为石油和天然气的生产提供支持。…

Docker安装主从数据库

我自己的主数据库名字 user_muster 密码是123456 从数据库 就是slave2 名字是root 密码是123456 首先开启docker后直接执行命令 docker run -d \ -p 3307:3306 \ -v /xk857/mysql/master/conf:/etc/mysql/conf.d \ -v /xk857/mysql/master/data:/var/lib/mysql \ -e MYSQL_…

云计算与大数据课程笔记(二)之Google云计算框架辅助笔记(上)

Chunk & Block 在GFS中&#xff0c;Chunk默认大小是64MB。作者在参加云计算相关竞赛时发现有题目说Hadoop的Block默认是64MB&#xff0c;这和作者之前学的128MB不太一样&#xff0c;故进行以下整理&#xff1a; 在Hadoop分布式文件系统&#xff08;HDFS&#xff09;中&…

Threejs用下个点方法实现模型沿着轨道行驶

上一文中实现了用模型所在点的切线方式确定模型的朝向&#xff0c;这个章节是对上个章节的补充&#xff0c;用一种更简单的方式实现小车沿着轨道方向移动&#xff0c;如上文前半部分内容&#xff0c;需要创建场景&#xff0c;轨道&#xff0c;加载车的模型&#xff0c;一切就绪…

mac 配置.bash_profile不生效问题

1、问题描述 mac系统中配置了环境变量只能在当前终端生效&#xff0c;切换了终端就无效了&#xff0c;查了下问题所在。mac系统会预装一个终极shell - zsh&#xff0c;环境变量读取在 .zshrc 文件下。 2、解决方案 1、切换终端到bash 切换终端到bash chsh -s /bin/bash 切换终端…

【随笔】程序员的金三银四求职宝典,每个人都有最合适自己的求职宝典

大家好&#xff0c;我是全栈小5&#xff0c;欢迎阅读文章&#xff01; 此篇是【话题达人】系列文章&#xff0c;这一次的话题是《程序员的金三银四求职宝典》 目录 背景能力流程图求职宝典就业数据人数曲线图增长率柱状图 其他建议文章推荐 背景 随着春天的脚步渐近&#xff0…

【JavaEE初阶】 关于JVM垃圾回收

文章目录 &#x1f343;前言&#x1f38b;死亡对象的判断算法&#x1f6a9;引用计数算法&#x1f6a9;可达性分析算法 &#x1f333;垃圾回收算法&#x1f6a9;标记-清除算法&#x1f6a9;复制算法&#x1f6a9;标记-整理算法&#x1f6a9;分代算法&#x1f388;哪些对象会进入…

Redis与 Memcache区别

Redis与 Memcache区别 1 , Redis 和 Memcache 都是将数据存放在内存中&#xff0c;都是内存数据库。不过 Memcache 还可用于缓存 其他东西&#xff0c;例如图片、视频等等。 2 , Memcache 仅支持key-value结构的数据类型&#xff0c;Redis不仅仅支持简单的key-value类型的数据&…

STM32 | Proteus 8.6安装步骤(图文并茂)

01 Proteus 8.6 简介 Proteus 8.6 是一款功能强大的电子设计自动化软件&#xff0c;广泛用于电路设计、仿真和PCB布局。它为电子工程师和学生提供了一个全面的工具集&#xff0c;用于设计和验证各种电路和电子设备。Proteus 8.6 包括了以下几个主要特性&#xff1a; 1. 电路设…