Openlayers6叠加Mapbox地图

原创

已于 2024-02-20 18:05:32 修改 · 803 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

于 2022-09-28 10:14:57 首次发布

本文介绍如何使用OpenLayers在Web应用中叠加Mapbox矢量地图作为底图。通过示例代码展示了如何初始化Mapbox地图并将其作为OpenLayers的一层进行渲染，实现地图的显示、缩放和平移等功能。

示例演示如何在openlayers里叠加mapbox矢量地图作为底图

<html>
  <head>
    <title>OpenLayers Editor</title>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io/en/v6.5.0/css/ol.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/mapbox-gl@1.12.0/dist/mapbox-gl.css"
    />
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io/en/v6.5.0/build/ol.js"></script>