Openlayers示例10 | Canvas Tiles

Canvas Tiles

黑色网格瓦片是在客户端使用HTML5 canvas生成的。显示的贴图坐标是XYZ贴图坐标。

<!DOCTYPE html>
<html lang="zn">

<head>
  <meta charset="UTF-8">
  <!-- 引入OpenLayers CSS样式 -->
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/css/ol.css">
  <!-- 引入OpenLayers JS库 -->
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/build/ol.js"></script>
  <!-- css代码 -->
  <style>
    .map {
      width: 100%;
      height: 600px;
    }
  </style>
  <title>Canvas Tiles</title>
</head>
<body>
  <div id="map" class="map"></div>
</body>
<script>
  const map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }),
      new ol.layer.Tile({
        source:new ol.source.TileDebug()
      })
    ],
    target: 'map',
    view: new ol.View({
      center: [0, 0],
      zoom: 2,
      constrainRotation: 16,
    }),
  });
</script>
</html>
posted @ 2022-03-23 09:32  槑孒  阅读(148)  评论(0)    收藏  举报