前端开发中如何实现WebGIS数据可视化（二）

您所在的位置：网站首页 › 点构成的画点线面 › 前端开发中如何实现WebGIS数据可视化（二）

前端开发中如何实现WebGIS数据可视化（二）

2024-07-09 09:46| 来源: 网络整理| 查看: 265

前言

在上一篇文章地图创建、点位绘制中详细讲解了 leaflet、 cesium、mapbox 中如何创建地图、绘制点位。在 webGis 开发中遇到需要渲染某个区划、某条河、某条路径的需求时，除了传统的发布 gis 图层之外，也可以直接用数据在客户端绘制线、面要素。这种基于上篇文章的基础，这一篇文章来聊聊这三种地图中如何绘制线要素和面要素。

通过这篇文章，能够有这些收获：

在 leaflet、cesium、mapBox 通过不同方式绘制线要素在 leaflet、cesium、mapBox 通过不同方式绘制面要素

文章中相关代码均已提交到 github，欢迎 star。

代码地址

预览地址

线要素

leaflet、cesium、mapbox 在数据管理方式上略有差异，但渲染方式基本是类似的，第一种就是较为常见的通过经纬度集合直接在地图上绘制，另一种就是通过标准的 geoJson 数据格式绘制，针对三种地图如何绘制线要素接下来逐步讲解。

leaflet 普通数据

针对实例代码中出现的 stationList1.json 文件可参考模拟数据

const layer = { polylineLeaflet: null } /** * 构建经纬度集合 */ async function buildLeafletLineData() { const dataJson: any[] = await import('stationList1.json'); const data: any = []; // 模拟数据处理成经纬度的集合 for (let i = 0; i

【本文地址】

前端开发中如何实现WebGIS数据可视化（二）

前端开发中如何实现WebGIS数据可视化（二）

今日新闻

推荐新闻