openlayers 3 加载地图瓦片数据
2016-04-22 15:16
537 查看
openlayers 是一套开源的js地图渲染框架,数据源可以使用天地图的数据源。
map对象相当如一个容器,它上面可以铺放多个layer,layer可以加载数据源或其它作用。
有关openlayers 的详细介绍,请参考http://openlayers.org/
下面创建一个layer
urlTemplate中包含x,y,z(z:地图级数,x:x方向序数, y:y方向序数)
就是解析数据源地址的回调函数。
以下给出一个应用的例子的完整代码:
1. Itelluro.ol.js
map对象相当如一个容器,它上面可以铺放多个layer,layer可以加载数据源或其它作用。
有关openlayers 的详细介绍,请参考http://openlayers.org/
下面创建一个layer
urlTemplate中包含x,y,z(z:地图级数,x:x方向序数, y:y方向序数)
function newTilesUrlLayer(urlTemplate, tileSize, zeroLevelSize) { var resolutions = new Array(22); for (var i = 0, ii = resolutions.length; i < ii; ++i) { resolutions[i] = zeroLevelSize / Math.pow(2, i) / 512; } var layer = new ol.layer.Tile({ source: new ol.source.XYZ({ tileSize: tileSize, tileUrlFunction: tileUrlFunctionCallBack, projection: 'EPSG:4326', //tilePixelRatio: tileSize / 256, tileGrid: new ol.tilegrid.TileGrid({ resolutions: resolutions, tileSize: tileSize, origin:[-180,-90] }) }), name: '' }); function tileUrlFunctionCallBack(tileCoord, pixelRatio, projection) { var z = tileCoord[0]; var x = tileCoord[1]; var y = tileCoord[2]; var xStr4 = "0000" + x.toString(); xStr4 = xStr4.substr(xStr4.length - 4, 4); var yStr4 = "0000" + y.toString(); yStr4 = yStr4.substr(yStr4.length - 4, 4); var url = urlTemplate.replace('{z}', z.toString()); url=url.replace('{y}', yStr4); url=url.replace('{y}', yStr4); url = url.replace('{x}', xStr4); url = url.replace('{x}', xStr4); return url } return layer; }这里的tileUrlFunctionCallBack淡淡的
就是解析数据源地址的回调函数。
以下给出一个应用的例子的完整代码:
1. Itelluro.ol.js
/**2. demo.html
* those are for pulling tiles from Itelluro tiles source address, which would return a new layer or map that is access to openlayer3.
* refer to http://openlayers.org */
//
// map
/**
* @param {string} id The container for the map.
* @param {number} numLevels The maximum zoom level used to determine the resolution constraint.
* @param {number} dsEast MaxX extent coordinates.
* @param {number} dsWest MinX extent coordinates
* @param {number} dsSouth MinY extent coordinates
* @param {numbere} dsNorth MaxY extent coordinates
* @param {string} sourcePackageKey Source Package Key of tiles' provider.
* @param {string} url URL address of tiles' provider.
* @param {number} tileSize The pixel of tile.
* @param {number} zeroLevelSize The size of zero level tile.
* @return {ol.layer.Tile} return map
*/
function NewWebTilesMap(id, numLevels, dsEast, dsWest, dsSouth, dsNorth,
sourcePackageKey, url, tileSize, zeroLevelSize) {
layer1 = newItelluroLayer(sourcePackageKey, url, tileSize, zeroLevelSize);
var view = new ol.View({
center: [(dsEast + dsWest) / 2, (dsNorth + dsSouth) / 2], zoom: 0, minZoom: 0, maxZoom: numLevels,
projection: 'EPSG:4326',
maxResolution: zeroLevelSize / tileSize,
});
var map = new ol.Map({
layers: [layer1],
target: id,
view: view,
renderer: "dom"
});
return map;
}
/**
* @param {string} id The container for the map.
* @param {number} numLevels The maximum zoom level used to determine the resolution constraint.
* @param {number} dsEast MaxX extent coordinates.
* @param {number} dsWest MinX extent coordinates
* @param {number} dsSouth MinY extent coordinates
* @param {number} dsNorth MaxY extent coordinates
* @param {string} root Local root directory of tiles' files.
* @param {number} tileSize The pixel of tile.
* @param {number} zeroLevelSize The size of zero level tile.
* @return {ol.layer.Tile} return map
*/
function NewLocalTilesMap(id, numLevels, dsEast, dsWest, dsSouth, dsNorth,
root, tileSize, zeroLevelSize){
layer1 = newLocalTilesLayer(root, tileSize, zeroLevelSize);
var view = new ol.View({
center: [(dsEast + dsWest) / 2, (dsNorth + dsSouth) / 2], zoom: 0, minZoom: 0, maxZoom: numLevels,
projection: 'EPSG:4326',
maxResolution: zeroLevelSize / tileSize,
});
var map = new ol.Map({
layers: [layer1],
target: id,
view: view,
renderer: "dom"
});
return map;
}
//
// layer
/**
* @param {string} sourcePackageKey The package key address of tiles' provider.
* @param {string} url URL address of tiles' provider.
* @param {number} tileSize The pixel of tile.
* @param {number} zeroLevelSize The size of zero level tile.
* @return {ol.layer.Tile} return layer
*/
function newItelluroLayer(sourcePackageKey, url, tileSize, zeroLevelSize) {
if (url.indexOf("?") > 0)
url += "&T={t}";
else
url += "?T={t}";
url = url.replace('{t}', sourcePackageKey);
return newWebTilesLayer(url, tileSize, zeroLevelSize);
}
/**
* @param {string} root Local root directory of tiles' files.
* @param {number} tileSize The pixel of tile.
* @param {number} zeroLevelSize The size of zero level tile.
* @return {ol.layer.Tile} return layer
*/
function newLocalTilesLayer(root, tileSize, zeroLevelSize) {
var imageType = "png";
root += "\\{z}\\{y}\\{y}_{x}." + imageType;
return newTilesUrlLayer(root, tileSize, zeroLevelSize);
}
/**
* @param {string} url URL address of tiles' provider.
* @param {number} tileSize The pixel of tile.
* @param {number} zeroLevelSize The size of zero level tile.
* @return {ol.layer.Tile} return layer
*/
function newWebTilesLayer(url, tileSize, zeroLevelSize) {
url = encodeURI(url);
if (url.indexOf("?") > 0)
url += "&L={z}&X={x}&Y={y}";
else
url += "?L={z}&X={x}&Y={y}";
return newTilesUrlLayer(url, tileSize, zeroLevelSize);
}
/**
* @param {string} urlTemplate URL template. Must include {x}, {y} or {-y}.
* @param {number} tileSize The pixel of tile.
* @param {number} zeroLevelSize The size of zero level tile.
* @return {ol.layer.Tile} return layer
*/
function newTilesUrlLayer(urlTemplate, tileSize, zeroLevelSize) { var resolutions = new Array(22); for (var i = 0, ii = resolutions.length; i < ii; ++i) { resolutions[i] = zeroLevelSize / Math.pow(2, i) / 512; } var layer = new ol.layer.Tile({ source: new ol.source.XYZ({ tileSize: tileSize, tileUrlFunction: tileUrlFunctionCallBack, projection: 'EPSG:4326', //tilePixelRatio: tileSize / 256, tileGrid: new ol.tilegrid.TileGrid({ resolutions: resolutions, tileSize: tileSize, origin:[-180,-90] }) }), name: '' }); function tileUrlFunctionCallBack(tileCoord, pixelRatio, projection) { var z = tileCoord[0]; var x = tileCoord[1]; var y = tileCoord[2]; var xStr4 = "0000" + x.toString(); xStr4 = xStr4.substr(xStr4.length - 4, 4); var yStr4 = "0000" + y.toString(); yStr4 = yStr4.substr(yStr4.length - 4, 4); var url = urlTemplate.replace('{z}', z.toString()); url=url.replace('{y}', yStr4); url=url.replace('{y}', yStr4); url = url.replace('{x}', xStr4); url = url.replace('{x}', xStr4); return url } return layer; }
<html> <head> <title></title> <link rel="stylesheet" href="http://openlayers.org/en/v3.15.1/css/ol.css" type="text/css"> <script src="../mapScript/ol.js" resource="http://openlayers.org/en/v3.15.1/build/ol.js"></script> <script src="../mapScript/Itelluro.ol.js"></script& a8a4 gt; <style type="text/css"> .demo { width: 40%; height: 400px; margin-right: 10%; margin-bottom:5%; float: left; } .demo .olMap { width: 100%; height: 400px; } </style> </head> <body> <h2>Openlayer3 使用示例</h2> <ol> <li><a href="#LOCAL">Demo "LOCAL"</a></li> <li><a href="#DOM">Demo "DOM"</a></li> <li><a href="#GIS">Demo "GIS"</a></li> <li><a href="#DEM">Demo "DEM"</a></li> </ol> <br /> <hr /> <div style=" margin:auto 50px"> <div class="demo"> <a name="LOCAL">Demo "LOCAL":</a> <div id="mapDiv1" class="olMap"></div> </div> <div class="demo"> <a name="DOM"> Demo "DOM": </a> <div id="mapDiv2" class="olMap"></div> </div> <div class="demo"> <a name="GIS"> Demo "GIS": </a> <div id="mapDiv3" class="olMap"></div> </div> <div class="demo"> <a name="DEM"> Demo "DEM": </a> <div id="mapDiv4" class="olMap"></div> </div> </div> <div style="clear:both;"></div> <hr /> <script type="text/javascript"> // Demo "LOCAL": var map1 = NewLocalTilesMap("mapDiv1", 6, 105.75140725069299, 105.68615672963949, 30.3320666017035, 30.376267769680222, 'tilesSource/out', 512, 2.25); // Demo "DOM": var url2 = "http://121.199.72.208/iTelluro.Server.yaan/Service/DOM/dom.ashx" var map2 = NewWebTilesMap("mapDiv2", 6, 180, -180, -90, 90, "bmng", url2, 512, 36); // Demo "GIS": var url3 = "http://121.199.72.208/iTelluro.Server.yaan/Service/GIS/gis.ashx"; var map3 = NewWebTilesMap("mapDiv3", 6, 180, -180, -90, 90, "全球地质图", url3, 512, 36); // Demo "DEM": var url4 = "http://192.168.100.18/iTelluro.Server/Service/DEM/dem.ashx?img=png"; NewWebTilesMap("mapDiv4", 6, 180, -180, -90, 90, "30mDEMS", url4, 150, 20); </script> </body> </html>
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享