当前位置: article > 正文

openlayers：实现基于Mapbox的样式渲染图层 (附完整源码）_ol-mapbox-style

作者：天景科技苑 | 2024-06-24 04:47:39

踩

ol-mapbox-style

openlayers：实现基于Mapbox的样式渲染图层

main.js
index.html
package.json

ol-mapbox-style包中的MapboxVector图层允许您使用单个矢量源创建基于Mapbox托管样式的图层。如果样式使用多个源，请使用source属性选择单个矢量源。如果只想渲染样式图层的子集（假设它们都共享相同的源），请使用layers属性。

main.js

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {MapboxVectorLayer} from 'ol-mapbox-style';

const map = new Map({
  target: 'map',
  layers: [
    new MapboxVectorLayer({
      styleUrl: 'mapbox://styles/mapbox/bright-v9',
      accessToken:
        'Your Mapbox access token from https://mapbox.com/ here',
    }),
  ],
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Mapbox Vector Layer</title>
    <link rel="stylesheet" href="node_modules/o1
2
3
4
5

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/天景科技苑/article/detail/751685