mapbox加载geojson数据

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

琮琤5

3297人浏览 · 2024-03-04 07:32:55

琮琤5 · 2024-03-04 07:32:55 发布

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

文章目录

1. 引入 CDN 链接
2. 创建地图
3. 加载 geojson 数据
4. 添加描边图层
5. 演示效果
6. 代码实现

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. 演示效果

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>