mapbox中，地图state.mapIns加载区域图层districtGeojson在地图上显示

Mapbox GL JS是一个强大的JavaScript库，用于创建交互式地图。如果你想在Mapbox地图上加载区域图层（通常是行政区划数据，如district GeoJSON），你可以按照以下步骤操作：

1. 首先，确保你已经安装了Mapbox GL JS库，并且在HTML文件中引入了相关的资源，比如CSS和JS文件。

<link href='https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.js'></script>

2. 加载GeoJSON数据，通常存储在一个变量里，例如districtGeojson:

const districtGeojson = {
  type: 'FeatureCollection',
  features: ... // 区域特征数组
};

3. 创建Map实例并设置视口：

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN'; // 替换为你的Mapbox Access Token

const map = new mapboxgl.Map({
  container: 'map', // 容器ID，例如id="map"
  style: 'mapbox://styles/mapbox/streets-v11', // 地图样式
  center: [-122.4194, 37.7749], // 地图中心点坐标
  zoom: 10, // 初始缩放级别
});

4. 添加区域图层：

map.addSource('districts', {
  type: 'geojson',
  data: districtGeojson,
});

// 使用source创建districts图层，并添加到地图上
map.addLayer({
  id: 'districts-layer',
  type: 'fill',
  source: 'districts',
  paint: { // 设置绘制规则，例如填充颜色、边框等
    'fill-color': ['get', 'fillColor'], // 从GeoJSON中获取填充颜色字段
    'fill-opacity': 0.8,
    'stroke-width': 1,
    'stroke-color': '#fff',
  },
});

现在你应该能看到地图上显示的区域图层了。记得替换`YOUR_ACCESS_TOKEN`为你自己的Mapbox访问令牌。