OpenLayers3-9-Canvas Tiles
原文地址：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>转载自：https://blog.csdn.net/isowang/article/details/50558229
