mapbox加载geojson数据

本案例使用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: