Canvas Tiles——Canvas瓦片
来源:互联网 发布:centos 域服务器配置 编辑:程序博客网 时间:2024/06/05 06:36
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
黑色网格瓦片是在客户端用HTML5 canvas产生的。显示的瓦片坐标是Openlayers的坐标。这些瓦片坐标是从下往上增加的,但是标准的XYZ瓦片坐标是从上往下增加的。为了计算标准的XYZ瓦片坐标的y,使用-y-1。
代码:
y
for a standard XYZ tile coordinate, use-y - 1
.黑色网格瓦片是在客户端用HTML5 canvas产生的。显示的瓦片坐标是Openlayers的坐标。这些瓦片坐标是从下往上增加的,但是标准的XYZ瓦片坐标是从上往下增加的。为了计算标准的XYZ瓦片坐标的y,使用-y-1。
代码:
<!DOCTYPE html><html> <head> <title>Canvas Tiles</title> <link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css"> <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> <script src="https://openlayers.org/en/v4.2.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>
阅读全文
0 0
- Canvas Tiles——Canvas瓦片
- OpenLayers3-9-Canvas Tiles
- box2d——1.tiles瓦片积木
- Canvas——画布
- 【HTML5】——Canvas
- canvas——rotate
- HTML5—Canvas
- Canvas
- Canvas
- canvas
- Canvas
- Canvas
- canvas
- Canvas
- canvas
- Canvas
- Canvas
- canvas
- webpack-dev-server 只能通过 localhost 访问?
- UITextView增加富文本AttributedString点击事件以及更改linkTextAttributes颜色
- adb常用命令(干货)
- setFocusable、setEnabled、setClickable区别
- 如何快速实现自己的数字资产交易想法(1)
- Canvas Tiles——Canvas瓦片
- Git安装及密钥的生成
- iOS学习之签名机制
- 解决ie8下 不能修改disabled的表单元素的样式(默认灰色,opcity:0.3)
- 白话完全解析动态规划原理及相关问题(一)
- TDW千台Spark千亿节点对相似度计算
- JavaScript(2)
- git的日志显示
- My安卓知识5--百度地图api的使用,周边信息检索