vue + mapbox 通过geojson数据加载面

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 { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
  import geojson from './chongqing1.json'
  export default {
    data() {
      return {
        title: 'Mapgis',
        hs: 'aad',
        positionLocation: [106.21176144800006, 29.59098730870005],
        //positionLocation: [106.697157, 29.501613],
        zoom: 16,
        pitch: 60, //地图的角度，不写默认是0，取值是0-60度，一般在3D中使用
        bearing: 10,
        antialias: false, //抗锯齿，通过false关闭提升性能
        maxPitch: 60,
        container: 'map',
        lonlats: [],
        baseUrl: 'api/service-count',
        markerRe: [], //标点
        x_PI: (3.14159265358979324 * 3000.0) / 180.0,
        PI: 3.1415926535897932384626,
        a: 6378245.0,
        ee: 0.00669342162296594323,
        layer: '',
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init: function () {
        let that = this
        mapboxgl.accessToken =
          'token'
        let map = new mapboxgl.Map({
          container: 'map',
          style: 'mapbox://styles/abcd19886/ckgbsqb68214i1apr7qifwpvm',
          maxPitch: this.maxPitch,
          center: this.positionLocation,
          zoom: this.zoom,
          pitch: this.pitch,
          bearing: this.bearing,
        })
        //console.log(typeof geojson.geometries)
        map.on('style.load', function () {
          that.chuliData()
        })
        window.mapBox = map
      },
      // 处理数据
      chuliData() {
        let featureArray = []
        for (let i in geojson.geometries) {
          let feature = {
            type: 'Feature',
            geometry: {
              type: 'Polygon',
              coordinates: geojson.geometries[i].coordinates,
            },
          }
          featureArray.push(feature)
        }
        mapBox.addLayer({
          id: 'maine',
          type: 'fill',
          source: {
            type: 'geojson',
            data: {
              type: 'FeatureCollection',
              features: featureArray,
            },
          },
          layout: {},
          paint: {
            'fill-color': '#088',
            'fill-opacity': 0.8,
          },
        })
      },
    },
  }
</script>
<style scoped>
  /* mapbox css*/
  @import url('https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css');
  #map {
    position: absolute;
    top: 40px;
    bottom: 0;
    width: 100%;
    margin-left: -24px;
  }
</style>

3.展现效果