mapbox加载geojson数据

最新推荐文章于 2025-03-20 20:30:12 发布
原创 最新推荐文章于 2025-03-20 20:30:12 发布 · 3.8k 阅读 · 53 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#arcgis #webgis

本案例使用Mapbox GL JavaScript库加载geojson数据。先引入CDN链接，创建地图实例并设置相关参数。从DataV.GeoAtlas获取广东深圳市的geojson数据，介绍了三种加载数据的写法，还添加了描边图层，最后展示了演示效果和代码实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

本案例使用Mapbox GL JavaScript库加载geojson数据。

文章目录

1. 引入 CDN 链接

<!-- 1.引入CDN链接 -->
<script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
<link
  href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"
  rel="stylesheet"
/>

2. 创建地图

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

const map = new mapboxgl.Map({
  // 在这个对象中，我们填入一些地图相关的参数设置
  container: "map", //地图容器
  style: "mapbox://styles/mapbox/streets-v12", //地图风格，底图数据源
  center: [114.085947, 22.547], //默认注视的坐标点
  zoom: 9, //当前展示的地图级别
  projection: "globe", //地图投影模式
});

3. 加载 geojson 数据

在DataV.GeoAtlas 地理小工具系列中，我们获得广东深圳市的geojson数据，并在网页加载地图数据，并绘制一个填充颜色的图层。

3.1. 第一种方法

source写在layer里面。

        map.on("style.load", () => {
          // 使用addLayer添加
          fetch("https://geo.datav.aliyun.com/areas_v3/bound/440300_full.json")
            .then((res) => res.json())
            .then((data) => {
              // console.log(data);
              //   // 第一种写法：source写在layer里面
              map.addLayer({
                id: "shenzhen",
                type: "fill",
                // 地图的数据源
                source: {
                  type: "geojson",
                  data,
                },
                // 绘制地图的样式
                paint: {
                  "fill-color": "#0079ba",
                  "fill-opacity": 0.2,
                },
              });

3.2. 第二种写法

layer和source分开写。

// 第二种写法：layer和source分开写
map.addSource("shenzhen", {
  type: "geojson",
  data,
});
map.addLayer({
  id: "shenzhen-layer",
  type: "fill",
  // 地图的数据源
  source: "shenzhen",
  // 绘制地图的样式
  paint: {
    "fill-color": "#0079ba",
    "fill-opacity": 0.2,
  },
});

3.3. 第三种写法

直接将请求写在source里面。

// 第三种写法：直接将请求写在source里面
map.addSource("shenzhen", {
  type: "geojson",
  data: "https://geo.datav.aliyun.com/areas_v3/bound/440300_full.json",
});
map.addLayer({
  id: "shenzhen-layer",
  type: "fill",
  // 地图的数据源
  source: "shenzhen",
  // 绘制地图的样式
  paint: {
    "fill-color": "#0079ba",
    "fill-opacity": 0.2,
  },
});

4. 添加描边图层

// 4.添加地图描边图层
map.addLayer({
  id: "shenzhen-line",
  type: "line",
  // 地图的数据源
  source: "shenzhen",
  // 绘制地图的样式
  paint: {
    // 描边颜色
    "line-color": "#333",
    // 描边宽度
    "line-width": 3,
    // 描边透明度
    "line-opacity": 0.8,
  },
});

5. 演示效果

image-20240228144906677

6. 代码实现

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>geojson数据加载</title>
    <!-- 1.引入CDN链接 -->
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      // 2.创建地图
      window.onload = () => {
        // 注册token
        mapboxgl.accessToken =
          "pk.eyJ1IjoiY2hlbmdjaGFvODg2NiIsImEiOiJjbGhzcWowMHUwYTNyM2VwNXZhaXhjd3Q4In0.FEh2q7sEW88Z1B5GcK_TDg";
        // 初始化图像
        const map = new mapboxgl.Map({
          // 在这个对象中，我们填入一些地图相关的参数设置
          container: "map", //地图容器
          style: "mapbox://styles/mapbox/streets-v12", //地图风格，底图数据源
          center: [114.085947, 22.547], //默认注视的坐标点
          zoom: 9, //当前展示的地图级别
          projection: "globe", //地图投影模式
        });

        // 3.加载geojson数据
        map.on("style.load", () => {
          // 使用addLayer添加
          fetch("https://geo.datav.aliyun.com/areas_v3/bound/440300_full.json")
            .then((res) => res.json())
            .then((data) => {
              // console.log(data);
              // 第一种写法：source写在layer里面
              // map.addLayer({
              //   id: "shenzhen",
              //   type: "fill",
              //   // 地图的数据源
              //   source: {
              //     type: "geojson",
              //     data,
              //   },
              //   // 绘制地图的样式
              //   paint: {
              //     "fill-color": "#0079ba",
              //     "fill-opacity": 0.2,
              //   },
              // });

              // 第二种写法：layer和source分开写
              // map.addSource("shenzhen", {
              //   type: "geojson",
              //   data,
              // });
              // map.addLayer({
              //   id: "shenzhen-layer",
              //   type: "fill",
              //   // 地图的数据源
              //   source: "shenzhen",
              //   // 绘制地图的样式
              //   paint: {
              //     "fill-color": "#0079ba",
              //     "fill-opacity": 0.2,
              //   },
              // });

              // 第三种写法：直接将请求写在source里面
              map.addSource("shenzhen", {
                type: "geojson",
                data: "https://geo.datav.aliyun.com/areas_v3/bound/440300_full.json",
              });
              map.addLayer({
                id: "shenzhen-layer",
                type: "fill",
                // 地图的数据源
                source: "shenzhen",
                // 绘制地图的样式
                paint: {
                  "fill-color": "#0079ba",
                  "fill-opacity": 0.2,
                },
              });

              // 4.添加地图描边图层
              map.addLayer({
                id: "shenzhen-line",
                type: "line",
                // 地图的数据源
                source: "shenzhen",
                // 绘制地图的样式
                paint: {
                  // 描边颜色
                  "line-color": "#333",
                  // 描边宽度
                  "line-width": 3,
                  // 描边透明度
                  "line-opacity": 0.8,
                },
              });
            });
        });
      };
    </script>
  </body>
</html>
016：Mapbox GL加载geojson数据，显示line，自定义颜色、宽度等
大剑师兰特的GIS世界
04-20 1609
第016个本示例的目的是介绍演示如何在vue+mapbox中加载geojson数据，显示线条。
mapbox进阶，纯前端生成线路路径方向、距离描述信息，用于路径规划文本描述
最新发布
我哎GIS博客
05-22 295
本文详细介绍如何基于mapbox-gl v3.*.* 版本，纯前端生成线路路径方向、距离描述信息，用于路径规划文本描述，亲测可用。希望能帮助到您。一起学习，加油！加油！
mapbox 加载json数据 和数据中颜色 和高度 并根据数值加载颜色
老段的CSDN的博客
09-08 2781
代码 //添加geojson数据 map.on('load', function () { map.addLayer({ 'id': 'room-extrusion', 'type': 'fill-extrusion', 'source': { 'type': 'geojson', 'd.
使用Mapbox GL加载geojson数据并创建热力图的自定义样式
CodeWhizZ的博客
09-23 453
本文将向您展示如何使用Mapbox GL加载GeoJSON数据并自定义样式来创建热力图。通过上述步骤，您可以使用Mapbox GL加载GeoJSON数据并创建自定义样式的热力图。您可以根据需要调整热力图的颜色样式、不透明度以及地图的底图样式。请确保替换示例代码中的路径和访问令牌，以使其适应您自己的应用程序。请确保将"YOUR_MAPBOX_ACCESS_TOKEN"替换为您自己的Mapbox访问令牌。确保将上述代码插入到前面创建地图容器和加载GeoJSON数据的代码中。在上述代码中，您需要将。
使用Mapbox GL加载GeoJSON数据并创建热力图
CodeWhizZ的博客
08-12 759
在地理数据可视化中，热力图常用于显示点数据的密集程度，以便更直观地理解数据的空间分布特征。通过以上代码，我们可以在Web地图应用程序中加载GeoJSON数据，并将其转化为热力图来展示数据的密度分布情况。然后创建了一个地图实例，并指定了地图容器的ID、地图样式、地图的初始中心和缩放级别。最后，我们可以根据需求进一步自定义热力图的样式，如调整权重值、颜色范围、透明度等参数，以满足不同的可视化需求。的GeoJSON文件，并且包含了一些点数据，我们可以通过以下步骤将其加载到地图中。在上述代码中，我们使用。
mapbox geojson高亮
·
03-10 426
【代码】mapbox geojson高亮。
Mapbox 如何添加GeoJSON数据
楼招颜
03-20 721
Mapbox 添加 GeoJSON 数据的完整解决方案‌，涵盖核心方法、性能优化与常见问题处理
【mapbox】加载geojson数据图层后，缩放地图导致图层缺失问题
xiaozhahza的博客
12-02 1168
经过排查发现如果是添加填充图层时，数据源下的data里的type必须是Polygon。【mapbox】加载geojson数据图层后，缩放地图导致图层缺失问题。修改后放大缩小即可正常显示。
050：mapboxGL加载geojson数据，同时包含点、多边形的处理示例
大剑师兰特的GIS世界
10-16 702
演示如何在vue+mapbox中加载geojson数据，既显示点又显示多边形。这个示例是显示了一种处理方式，通过过滤的方式将数据分离化，点和多边形通过两个不同的图层来加载表示。
022：Mapbox GL 加载geojson数据，形成热力图，自定义样式
大剑师兰特的GIS世界
04-23 1226
第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 1480
第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链接。
Android代码-GeoJsonify
08-06
GeoJsonify Simply add GeoJson layers to your Maps Supported Map Services: Google Maps; Open Street Map; MapBox; How to use Add JitPack in your root build.gradle at the end of repositories: allprojects { repositories { ... maven { url 'https://jitpack.io' } } } Add the dependency in your module build.gradle: dependencies { compile 'com.github.Nextome:GeoJsonify:v1.0.0' } 3. Simply use the method: ```java GeoJsonify.geoJsonifyMap(map, List jsonUris,
mapbox加载geojson，鼠标移入改变颜色，设置样式以及vue中的使用
Anything2207294253的博客
01-22 1334
使用mapbox地图加载geojson数据，html加载方式和vue中的使用方式
129：vue+openlayers的extent 在EPSG:4326，EPSG:3857，EPSG:900913，CRS:84的范围值
大剑师兰特的GIS世界
09-07 1392
openlayers中会使用extent来设定地图的显示范围。以下是一屏map的范围。
mapbox导入本地geojson数据并渲染
Sakura1998gis的博客
12-09 1101
mapbox导入本地geojson数据并渲染
mapbox 添加geojson图层实现属性查询、高亮、地图手势变化等功能
qq_34870529的博客
09-24 3770
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>mapbox添加geojson图层实现高亮、属性查询、地图手势变化等功能</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <s.
[Mapbox GL]添加GeoJSON线
每天写一点，进步一点点
12-20 5108
在地图上添加GeoJSON线          body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } /* 用来放置map的div容器 */ mapb
vue + mapbox 通过geojson数据加载面
wjm0519的博客
10-28 2700
1.首先通过npm 安装mapbox-gl npm install mapbox-gl 2.页面代码 <template> <div> <div id="map"></div> </div> </template> <script> import mapboxgl from 'mapbox-gl' // import * as THREE from 'three' // import {
Mapbox 添加本地geojson文件 406 错误
wangdaoyin2010的专栏
03-23 1085
 有些时候在使用Mapbox添加本地Geojson数据做数据源时，有可能会报406错误，经查看发生请求时，request的accept为application/json，因此在服务端添加一个MIME类型，添加的扩展名为“.geojson” MIME类型为“application/json”即可。服务端添加的MIME类型和客户端的一致即可进行数据访问。网上有些说可以换成“*/*"，经过测试我自己的行...
mapbox加载矢量数据
03-08
### 如何在 Mapbox 中加载和显示矢量数据 #### 创建地图实例 为了在 Mapbox GL JS 中加载和显示矢量数据，首先需要创建一个 `mapboxgl.Map` 对象来初始化地图[^1]。 ```javascript // 初始化地图 var map = new mapboxgl.Map({ container: 'map', // 容器ID style: 'https://api.tianditu.gov.cn/v2/tilesets/vec_c/wmts?service=wmts&request=GetTile&version=1.0.0&layer=vec&style=default&tilematrixset=c&format=tiles&Service=WMTS&tk=您的密钥', center: [116.4, 39.9], // 设置中心点坐标 zoom: 10 // 初始缩放级别 }); ``` 此代码片段展示了如何通过指定容器 ID 和样式 URL 来构建一个新的地图实例。这里使用的是天地图提供的矢量切片服务作为底图风格。 #### 添加矢量源 要向地图添加来自 GeoJSON 或其他来源的矢量数据，则需定义一个矢量源： ```javascript map.addSource('example-source-id', { type: 'vector', url: 'mapbox://examples.8j4rscjm' // 替换成自己的矢量瓦片URL }); ``` 这段 JavaScript 语句说明了怎样利用 `addSource()` 方法给现有地图增加名为 `'example-source-id'` 的新矢量源，并指定了该源的数据位置。 #### 绘制矢量图层 最后一步是在地图上渲染这些矢量特征。这可以通过调用 `addLayer()` 函数完成，它接受两个参数——一个是描述目标图层属性的对象；另一个可选参数用于控制插入顺序： ```javascript map.addLayer({ id: 'example-layer-id', type: 'line', source: 'example-source-id', 'source-layer': 'example-source-layer-name', layout: {}, paint: { 'line-color': '#ff0000', 'line-width': 2 } }); ``` 上述脚本解释了如何设置线型 (`type`) 图层及其外观特性 (颜色、宽度)，并将它们绑定到之前创建的矢量源之上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值