OpenLayers3-9-Canvas Tiles

最新推荐文章于 2025-06-03 17:12:42 发布

isowang

最新推荐文章于 2025-06-03 17:12:42 发布

阅读量1.4k

点赞数

分类专栏： openlayers GIS

GIS 同时被 2 个专栏收录

11 篇文章

订阅专栏

openlayers

9 篇文章

订阅专栏

本文介绍如何使用HTML5 canvas模块在客户端生成Openlayers的黑色格子线切片坐标，以及如何将显示的坐标转换为标准的xyz坐标。详细解释了坐标计算方法，并提供了相关API文档和代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文地址：http://openlayers.org/en/v3.13.0/examples/canvas-tiles.html

The black grid tiles are generated on the client with an HTML5 canvas. The displayed tile coordinates are OpenLayers tile coordinates. These increase from bottom to top, but standard XYZ tiling scheme coordinates increase from top to bottom. To calculate the y for a standard XYZ tile coordinate, use -y - 1.

Related API documentation:
ol.Map,ol.View,ol.control,ol.layer.Tile,ol.proj,ol.source.OSM,ol.source.TileDebug

翻译：
黑色的格子线是使用HTML5的canvas模块生成的。显示的切片坐标是Openlayers的切片坐标。是从下往上递增的。但是标准的xyz坐标拼接方案是从上往下递增的。为了计算从标准xyz切片坐标计算y，使用-y-1

相关的api文档包括：
ol.Map,ol.View,ol.control,ol.layer.Tile,ol.proj,ol.source.OSM,ol.source.TileDebug

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas Tiles</title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.13.0/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.13.0/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var osmSource = new ol.source.OSM();
      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: osmSource
          }),
          new ol.layer.Tile({
            source: new ol.source.TileDebug({
              projection: 'EPSG:3857',
              tileGrid: osmSource.getTileGrid()
            })
          })
        ],
        target: 'map',
        controls: ol.control.defaults({
          attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
          })
        }),
        view: new ol.View({
          center: ol.proj.transform(
              [-0.1275, 51.507222], 'EPSG:4326', 'EPSG:3857'),
          zoom: 10
        })
      });
    </script>
  </body>
</html>