openlayers：实现Mapbox-gl-js层集成 (附完整源码）_mapbox gl js与openlayers

演示如何在OpenLayers地图中添加mapbox-gl-js图层。注意：使用此示例时，请确保在https：//www.maptiler.com/cloud/获取您自己的API密钥。当API密钥过期时，映射将不可见。在本示例中使用mapbox-gl-js版本1.13.0，因为较新版本需要Mapbox访问令牌，并且与较旧的浏览器不兼容。

main.js

import GeoJSON from 'ol/format/GeoJSON.js';
import HeatmapLayer from 'ol/layer/Heatmap.js';
import Layer from 'ol/layer/Layer.js';
import Map from 'ol/Map.js';
import Source from 'ol/source/Source.js';
import VectorSource from 'ol/source/Vector.js';
import View from 'ol/View.js';
import {fromLonLat, toLonLat} from 'ol/proj.js';

const center = [-98.8, 37.9];
const key = 'Get your own API key at https://www.maptiler.com/cloud/';

const mbMap = new mapboxgl.Map({
  style: 'https://api.maptiler.com/maps/bright/style.json?key=' + key,
  attributionControl: false,
  boxZoom: false,
  center: center,
  contai
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17