使用mapbox做大屏展示3d建筑地图

let map = new mapboxgl.Map({
  version: 8,
  name: "Basic",
  center: [120.31463022979744, 36.06658532033572],
  // center: [116.89909930420157, 36.666567085091614],
  zoom: 16,
  bearing: 11.199999999999818,
  pitch: 60,
  sources: {
    composite: {
      url: "mapbox://mapbox.mapbox-streets-v8",
      type: "vector",
    },
  },
  // 使用 mapbox studio制作分享的样式
  style: "mapbox://styles/wumi/ckew6c8b60g2s19pij43gk4ft",
  container: "map",
  antialias: true,
});

var layers = map.getStyle().layers

     var labelLayerId
     for (var i = 0; i < layers.length; i++) {
       if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
         labelLayerId = layers[i].id
         break
       }
     }
     // layer 3d buliding
     map.addLayer(
       {
         id: '3d-buildings',
         source: 'composite',
         'source-layer': 'building',
         filter: ['==', 'extrude', 'true'],
         type: 'fill-extrusion',
         minzoom: 15,
         paint: {
           'fill-extrusion-color': ['interpolate', ['exponential', 1], ['get', 'height'], 0, 'hsl(175, 59%, 51%)', 50, 'hsl(244, 81%, 46%)'],

           // 使用“插值”表达式为
           // 建筑物作为用户放大
           'fill-extrusion-height': ['interpolate', ['linear'], ['zoom'], 15, 0, 15.05, ['get', 'height']],
           'fill-extrusion-base': ['interpolate', ['linear'], ['zoom'], 15, 0, 15.05, ['get', 'min_height']],
           'fill-extrusion-opacity': 0.6
         }
       },
       labelLayerId
     )

// layer fill geojson https://www.mapbox.cn/mapbox-gl-js/example/geojson-polygon/
map.addLayer({
  id: "geoPolygon_2",
  type: "fill",
  source: {
    type: "geojson",
    data: {
      type: "Feature",
      geometry: {
        type: "Polygon",
        coordinates: [
          [
            [120.31386645128458, 36.07352407299466],
            [120.31406051266816, 36.06973548187716],
            [120.31703395879913, 36.067476673147524],
            [120.31903338030969, 36.06914023164856],
            [120.31725031669936, 36.072912209593554],
            [120.31386645128458, 36.07352407299466],
            // [116.90015862619504, 36.67485225304701],
            // [116.89925746159167, 36.66643736142822],
            // [116.90449322417288, 36.66646071375989],
            // [116.90474640425532, 36.674772049527036],
            // [116.90015862619504, 36.67485225304701]
          ],
        ],
      },
    },
  },
  layout: {},
  paint: {
    "fill-color": "#0becff",
    "fill-opacity": 0.5,
    "fill-outline-color": "#15def2",
  },
});

// add marker popup
      var popup = new mapboxgl.Popup({
        offset: [180, -20],
        className: 'IBM_popup',
        maxWidth: 'none'
      }).setText('某某站')
      // create DOM element for the marker
      var el = document.createElement('div')
      el.innerHTML = '<span>点位</span>'
      el.id = 'marker'

      // create the marker
      new mapboxgl.Marker(el)
        .setLngLat([120.31319853001287, 36.069633414671344])
        // .setLngLat([116.89759274743653, 36.66859665993769])
        .setPopup(popup) // sets a popup on this marker
        .addTo(map)
    })