AntV L7的pointLayer点图层

news/2024/4/15 3:53:26/文章来源:https://blog.csdn.net/dongxiaod1/article/details/136522966

本案例使用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.luyixian.cn/news_show_998679.aspx

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

相关文章

持续集成(CICD)- gogs仓库的部署和使用

文章目录 一、gogs的介绍二、部署gog仓库三、首次启动gogs四、登录五、创建一个非空仓库六、从仓库拉取代码到本地七、把本地编辑的代码上传到仓库 一、gogs的介绍 Gogs作为一个轻量级、易于部署和使用的自托管Git服务&#xff0c;为小型团队和个人开发者提供了一个简单而强大…

985硕的4家大厂实习与校招经历专题分享(part2)

我的个人经历&#xff1a; 985硕士24届毕业生&#xff0c;实验室方向:CV深度学习 就业&#xff1a;工程-java后端 关注大模型相关技术发展 校招offer: 阿里巴巴 字节跳动 等10 研究生期间独立发了一篇二区SCI 实习经历:字节 阿里 京东 B站 &#xff08;只看大厂&#xff0c;面试…

稀碎从零算法笔记Day6-LeetCode:长度最小的子数组

前言&#xff1a;做JD的网安笔试题&#xff0c;结果查找子串&#xff08;单词&#xff09;这个操作不会。痛定思痛&#xff0c;决定学习滑动数组 题型&#xff1a;数组、双指针、滑动窗口 链接&#xff1a;209. 长度最小的子数组 - 力扣&#xff08;LeetCode&#xff09; 来…

VS配置开发与远程调试笔记

先简单写一下&#xff0c;后续详细补充 场景&#xff1a;本地机器开发&#xff0c;虚拟机调试 准备工作&#xff1a; 由于要将生成的文件生成在虚拟机&#xff0c;避免反复拷贝&#xff0c;直接配置虚拟机共享文件夹进行写入&#xff0c;步骤如下&#xff1a; 虚拟机打开网…

修复通达OA 百度ueditor 文件上传漏动

前些日子&#xff0c;服务器阿里云监控报警&#xff0c;有文件木马文件&#xff0c;因为非常忙&#xff0c;就没及时处理&#xff0c;直接删除了木马文件了事。 谁知&#xff0c;这几天对方又上传了木马文件。好家伙&#xff0c;今天不花点时间修复下&#xff0c;你都传上瘾了…

hadoop学习中遇到的问题一

由于看视频总是断断续续&#xff0c;经常遇到各种报错&#xff0c;现将遇到的问题进行总结。 hadoop学习中遇到的问题&#xff1a;hadoop拒绝连接 hadoop安装好之后&#xff0c;在本地浏览器输入地址http://192.168.222.102:9870&#xff0c;提示拒绝连接。在网上找了很多相关…

【Unity开发】【VR】PICO项目在运行编辑器时无法正常显示游戏场景

【背景】 做了一个PICO项目&#xff0c;真机在手边时开发后用PC的Preview模式直接调试&#xff0c;真机不在手边时希望用VRTK的Simulation Rig&#xff0c;用键鼠模拟控制器输入进行快速调试。但是发现Simulation Rig状态下运行后&#xff0c;游戏场景变得很怪&#xff0c;很多…

44.网络编程/静态库动态库相关知识20240307

一、基于UDP的网络聊天室 项目需求&#xff1a; 如果有用户登录&#xff0c;其他用户可以收到这个人的登录信息如果有人发送信息&#xff0c;其他用户可以收到这个人的群聊信息如果有人下线&#xff0c;其他用户可以收到这个人的下线信息服务器可以发送系统信息。 服务器代码…

O2O:Sample Efficient Offline-to-Online Reinforcement Learning

IEEE TKDE 2024 paper Introduction O2O存在策略探索受限以及分布偏移问题&#xff0c;进而导致在线微调阶段样本效率低。文章提出OEMA算法首先使用离线数据训练乐观的探索策略&#xff0c;然后提出基于元学习的优化方法&#xff0c;减少分布偏移并提高O2O的适应过程。 Meth…

23种设计模式——工厂方法模式

定义&#xff1a; 一个用于创建对象的接口&#xff0c;让子类决定实例化哪一个类。工厂方法使一个类的实例化延迟到其他子类。 工厂方法通用类图&#xff1a; 这个图更好理解 在工厂方法模式中&#xff0c;抽象产品类Product负责定义产品的共性&#xff0c;实现对事物最抽象的…

LeetCode 刷题 [C++] 第3题.无重复字符的最长子串

题目描述 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长子串 的长度。 题目分析 可以使用滑动窗口加哈希表来实现&#xff1a; 使用start和end两个变脸来表示滑动窗口的头部位置和尾部位置&#xff0c;两者开始均为0&#xff1b;借助哈希表来记录已经遍…

编译内核错误 multiple definition of `yylloc‘

编译内核错误 # make ARCHarm CROSS_COMPILEarm-mix410-linux- uImageHOSTLD scripts/dtc/dtc /usr/bin/ld: scripts/dtc/dtc-parser.tab.o:(.bss0x10): multiple definition of yylloc; scripts/dtc/dtc-lexer.lex.o:(.bss0x0): first defined here collect2: error: ld ret…

【蓝桥杯】路径之谜(DFS)

一.题目描述 小明冒充 X 星球的骑士&#xff0c;进入了一个奇怪的城堡。 城堡里边什么都没有&#xff0c;只有方形石头铺成的地面。 假设城堡地面是 nn 个方格。如下图所示。 按习俗&#xff0c;骑士要从西北角走到东南角。可以横向或纵向移动&#xff0c;但不能斜着走&#x…

Android使用WebView打开外部网页链接

发布Android应用&#xff0c;除了用原生开发外&#xff0c;更多是采用内嵌H5网页的方式来做&#xff0c;便于更新以及多平台使用。 一、第一种方式是直接通过WebView打开外部H5链接。 新建Android工程 直接创建一个工程&#xff0c;点击运行就可以了&#xff0c;打开是个空页…

Cloud-Nacos服务治理-Feign服务调用

构建Cloud 父工程依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.…

redis实现分布式全局唯一id

目录 一、前言二、如何通过Redis设计一个分布式全局唯一ID生成工具2.1 使用 Redis 计数器实现2.2 使用 Redis Hash结构实现 三、通过代码实现分布式全局唯一ID工具3.1 导入依赖配置3.2 配置yml文件3.3 序列化配置3.4 编写获取工具3.5 测试获取工具 四、运行结果 一、前言 在很…

蓝桥杯练习题——归并排序

1.火柴排队 思路 1.求最小值的时候&#xff0c;可以直接按升序排序&#xff0c;这样得到的值就是最小值 2.求最小交换次数的时候&#xff0c;不能直接排序&#xff0c;因为只能交换相邻的数&#xff0c;只需要知道他们的相对大小&#xff0c;所以可以先用离散化&#xff0c;把…

百度地图城市点位数据下载并转换

概述 在浏览百度地图开放平台的时候&#xff0c;发现有个资源下载页面&#xff0c;里面有个城市中心点位和百度地图行政区划adcode映射表数据&#xff0c;这是一个经常使用到的数据&#xff0c;本文实现将这个数据转换为geojson&#xff0c;并借助QGIS转换为经纬度坐标或火星坐…

IDEA自带 .http 请求工具文档

基础语法 请求格式 基础格式 Method Request-URI HTTP-Version Header-field: Header-valueRequest-Body其中&#xff0c;GET 请求可以省略 Method 不写&#xff1b;HTTP-Version 可以省略不写&#xff0c;默认使用 1.1 版本。 示例&#xff1a; GET https://www.baidu.co…

【Spring云原生系列】Spring RabbitMQ:异步处理机制的基础--消息队列 原理讲解+使用教程

&#x1f389;&#x1f389;欢迎光临&#xff0c;终于等到你啦&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;持续更新的专栏《Spring 狂野之旅&#xff1a;从入门到入魔》 &a…