050：mapboxGL加载geojson数据，同时包含点、多边形的处理示例

已于 2024-05-21 16:01:15 修改
阅读量534 收藏 28
点赞数 29
分类专栏： # mapboxGL示例教程100+ 文章标签： mapbox多类型数据 大剑师 Mapbox教程 MapboxGL示例 MapboxGL自学
于 2023-10-16 00:30:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cuclife/article/details/133807427
版权
mapboxGL示例教程100+ 专栏收录该内容
83 篇文章 46 订阅 ¥159.90 ¥299.90
订阅专栏
该博客由大剑师兰特分享，展示如何在Vue项目中使用MapboxGL加载包含点和多边形的geojson数据。通过过滤数据并分别在两个图层展示，实现地图上同时显示点和多边形的效果。提供了源代码和配置说明，方便读者快速实践。
摘要由CSDN通过智能技术生成

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 050个示例

文章目录

一、示例效果图

二、示例简介

本示例演示如何在vue+mapbox中加载geojson数据，既显示点又显示多边形。这个示例是显示了一种处理方式，通过过滤的方式将数据分离化，点和多边形通过两个不同的图层来加载表示。

直接复制下面的 vue

了解本专栏 订阅专栏 解锁全文
还是大剑师兰特
关注
  • 29
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 25
    评论
专栏目录
订阅专栏
119：vue+openlayers加载geoserver的Tile caching中的数据（示例代码）
大剑师兰特的GIS世界
09-04 373
本示例的目的是介绍演示如何在vue+openlayers中加载geoserver发布的数据，这里是加载Tile caching的缓存数据方法，具体的加载方式参考源代码。
mapbox 加载json数据 和数据中颜色 和高度 并根据数值加载颜色
老段的CSDN的博客
09-08 2588
代码 //添加geojson数据 map.on('load', function () { map.addLayer({ 'id': 'room-extrusion', 'type': 'fill-extrusion', 'source': { 'type': 'geojson', 'd.
mapbox导入本地geojson数据并渲染
Sakura1998gis的博客
12-09 843
mapbox导入本地geojson数据并渲染
GeoJSON画多边形 - Openlayers3
weixin_30457065的博客
11-13 926
参考官网API和综合网上多个demo，最终整理代码如下： <!DOCTYPE html> <html> <head> <title>GeoJSON画多边形 - Openlayers3</title> <link rel="stylesheet" href="https://openlayers...
022：Mapbox GL 加载geojson数据，形成热力图，自定义样式
大剑师兰特的GIS世界
04-23 1053
第022个本示例的目的是介绍演示如何在vue+mapbox中加载geojson数据，形成热力图. paint设置的参数：heatmap-color,heatmap-intensity,heatmap-opacity,heatmap-radius,heatmap-weight,visibility，具体请参考下面的api链接。
017：Mapbox GL加载geojson数据，显示Polygon，自定义填充色、边框等
大剑师兰特的GIS世界
04-21 1251
第017个本示例的目的是介绍演示如何在vue+mapbox中加载geojson数据，显示Polygon，自定义填充色、边框等。fill的参数：fill-antialias,fill-color,fill-opacity,fill-outline-color,fill-pattern,fill-sort-key,fill-translate,fill-translate-anchor,visibility。具体请参考下面的api链接。
016：Mapbox GL加载geojson数据，显示line，自定义颜色、宽度等
大剑师兰特的GIS世界
04-20 1325
第016个本示例的目的是介绍演示如何在vue+mapbox中加载geojson数据，显示线条。
geojson-area, 计算geojson多边形或者多重多边形的面积.zip
09-18
geojson-area, 计算geojson多边形或者多重多边形的面积 geojson区域计算任意 GeoJSON 几何图形内的区域。用法npm install @mapbox/geojson-area示例var geojsonArea = require('@mapb
024：Mapbox GL加载image图像文件
大剑师兰特的GIS世界
05-26 949
第024个本示例的目的是介绍演示如何在vue+mapbox中加载image图像文件。图像源。“url”值包含图像位置。“坐标”数组包含按顺时针顺序列出的图像角的 [longitude, latitude] 对：左上角、右上角、右下角、左下角。
mapbox绘制多边形
qq_43840793的博客
07-17 1010
这里的feature是一个json文件，已经上传服务器，根据url引入，内容格式如下。绘制一个填充的多边形，再描个边框。
mapbox加载全国及省份范围,显示多颜色动画点、迁徙线、3d柱状图等
weixin_39150852的博客
06-02 1809
//初始化地图 initMap() { let _this = this; map = new mapboxgl.Map({ container: "collection-map",//地图容器 style: { version: 8, glyphs: "/font/{fontstack}/{range}.pbf", sources: {}, layers: [
地图数据--GeoJSON介绍
热门推荐
马帅的博客
01-08 1万+
postgres-xl 导入 “GeoJSON” 地图数据 一、GeoJSON 介绍 GeoJSON是一种对各种地理数据结构进行编码的格式。 GeoJSON对象可以表示几何（Geometry）、特征（Feature）或者特征集合（FeatureCollection）。 GeoJSON支持下面几何类型：点（Point）、线（LineString）、面（Polygon）、
GeoJson 几何对象实例说明（2024-06-06）
hap1994的博客
06-06 978
（类似上面的代码）。"geometry" 包含着要素对象的几何信息，"properties" 包含着要素对象的其他属性。"geometry" 对象中的 "type":"Point" 表示这是一个点对象，而 "coordinates" 数组则包含着该点的经纬度坐标。成员的值要么是字符串、数字、对象、数组，要么是"true","false"和"null"，其中数组和对象都是由以上类型的值组成。GeoJSON对象可能有一个可选的"crs"成员，它的值必须是一个坐标参考系统的对象（见3.坐标参考系统对象）
129：vue+openlayers的extent 在EPSG:4326，EPSG:3857，EPSG:900913，CRS:84的范围值
大剑师兰特的GIS世界
09-07 1110
openlayers中会使用extent来设定地图的显示范围。以下是一屏map的范围。
057：vue+leaflet 读取上传的geojson文件，转换为wkt文件
大剑师兰特的GIS世界
02-11 689
第057个本示例的目的是介绍演示如何在vue+leaflet中上传geojson文件，解析geojson文件并转换为WKT，并在地图上显示图片。
mapbox-gl-js接入GeoJSON大文件的优化策略
liuchao120的专栏
11-22 780
mapbox-gl-js可以接受GeoJSON数据，在前端动态地绘制GeoJSON数据。需要说明的是，mapbox-gl-js并不能直接渲染GeoJSON数据，而是通过geojson-vt这个库，在前端动态地将GeoJSON数据转换为矢量瓦片后渲染。至于为什么不支持直接渲染GeoJSON数据，我猜想是因为mapbox-gl-js对于点、线、面、符号、注记等要素的绘制规则都是基于矢量瓦片的，为GeoJSON另外实现一套绘制规则，不仅增大了实现成本，而且两套规则可能会出现冲突。
mapboxgl渲染Geojson，报错： TypeError: Cannot read properties of undefined (reading 'addLayer')
最新发布
07-03
MapboxGL是一个用于在Web上创建交互式地图的强大库，它可以方便地渲染GeoJSON数据。当您尝试使用`addLayer()`方法添加GeoJSON到地图中时遇到`TypeError: Cannot read properties of undefined (reading 'addLayer')`...
评论 25
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

还是大剑师兰特

打赏一杯可口可乐

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值