Openlayers3加载天地图

概述:

在前文中分别讲到了在Arcgis for js、Openlayers2中去加载天地图,同时也讲到了天地图的离线加载方式。在本文,讲述在Openlayers3中实现在线/离线的天地图的加载。

实现:

直接贴代码吧,效果就不贴了:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>TDT</title>
	<link rel="stylesheet" type="text/css" href="../../../../plugin/ol3/css/ol.css"/>
	<style type="text/css">
		body, #map {
			border: 0px;
			margin: 0px;
			padding: 0px;
			width: 100%;
			height: 100%;
			font-size: 13px;
		}
		#map{
			background: url("../../images/bgImg.gif");
			background-repeat: inherit;
		}
	</style>
	<script type="text/javascript" src="../../../../plugin/ol3/build/ol-debug.js"></script>
	<script type="text/javascript" src="../../../../plugin/jquery/jquery-1.8.3.js"></script>
	<script type="text/javascript">
		var map;
		function init(){
			var bounds = [73.4510046356223, 18.1632471876417,
				134.976797646506, 53.5319431522236];
			var projection = new ol.proj.Projection({
				code: 'EPSG:4326',
				units: 'degrees'
			});
			var vec_c = getTdtLayer("vec_c");
			var cva_c = getTdtLayer("cva_c");
			var wms = new ol.layer.Image({
				source: new ol.source.ImageWMS({
					ratio: 1,
					url: 'http://localhost:8088/geoserver/lzugis/wms',
					params: {
						'FORMAT': 'image/png',
						'VERSION': '1.1.1',
						LAYERS: 'lzugis:capital',
						STYLES: ''
					}
				})
			});
			var map = new ol.Map({
				controls: ol.control.defaults({
					attribution: false
				}),
				target: 'map',
				layers: [vec_c,cva_c,wms],
				view: new ol.View({
					projection: projection,
					minZoom:2,
					maxZoom:8
				})
			});
			map.getView().fitExtent(bounds, map.getSize());
		}

		function getTdtLayer(lyr){
			var url = "http://localhost:8081/lzugis/tdttile?T="+lyr+"&X={x}&Y={y}&L={z}";
//			var url = "http://t0.tianditu.com/DataServer?T="+lyr+"&X={x}&Y={y}&L={z}";在线
			var projection = ol.proj.get("EPSG:4326");
			var projectionExtent = [ -180, -90, 180, 90 ];
			var maxResolution = (ol.extent.getWidth(projectionExtent) / (256 * 2));
			var resolutions = new Array(16);
			var z;
			for (z = 0; z < 16; ++z) {
				resolutions[z] = maxResolution / Math.pow(2, z);
			}
			var tileOrigin = ol.extent.getTopLeft(projectionExtent);
			var layer = new ol.layer.Tile({
				extent: [ -180, -90, 180, 90 ],
				source: new ol.source.TileImage({
					tileUrlFunction: function(tileCoord) {
						var z = tileCoord[0]+1;
						var x = tileCoord[1];
						var y = -tileCoord[2]-1;
						var n = Math.pow(2, z + 1);
						x = x % n;
						if (x * n < 0) {
							x = x + n;
						}
						return url.replace('{z}', z.toString())
								.replace('{y}', y.toString())
								.replace('{x}', x.toString());
					},
					projection: projection,
					tileGrid: new ol.tilegrid.TileGrid({
						origin: tileOrigin,
						resolutions: resolutions,
						tileSize: 256
					})
				})
			});
			return layer;
		}
	</script>
</head>
<body onLoad="init()">
<div id="map">
</div>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏增长技术

PullToRefreshLayout

PullToRefreshLayout是一个用法同系统SwipeRefreshLayout可灵活自定义下拉刷新、上拉加载视图的Android库.

18310
来自专栏Flutter入门

Android PC投屏简单尝试

代码地址 :https://github.com/deepsadness/MediaProjectionDemo

75950
来自专栏宋凯伦的技术小栈

Android - 页面返回上一页面的三种方式

  今年刚刚跳槽到了新公司,也开始转型做Android,由此开始Android的学习历程。   最近在解很多UI的bug,在解bug过程中,总结了在UI的实现过...

45580
来自专栏双十二技术哥

深入Weex系列(六)Weex渲染流程分析

在前两篇文章中我们结合源码学习了Module、Component的注册、调用、回调等流程,相信大家一定收获颇多,对Weex的理解也一定愈加深入。

15050
来自专栏葡萄城控件技术团队

Wijmo 更优美的jQuery UI部件集:在对Wijmo GridView进行排序或者过滤时保留选择

许多客户面临这样的场景,他们希望在应用了排序或者过滤之后仍然将最终用户的行选状态保留。通常情况下,当我们在选择了任何行之后应用排序或者过滤会导致回传之后选择状态...

19490
来自专栏androidBlog

使用ViewDragHelper打造属于自己的DragLayout(抽屉开关 )

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details...

15720
来自专栏林冠宏的技术文章

记一次使用 android 自带 WebView 做富文本编辑器之API、机型的兼容及各种奇葩bug的解决

转载请声明出处(https://cloud.tencent.com/developer/user/1148436/activities) 目录 1,测试设备介绍...

893100
来自专栏向治洪

高仿今日头条

高仿今日头条 --- 第一篇:(android高仿系列)今日头条 --新闻阅读器 (一) 上次,已经完成了头部新闻分类栏目的拖动效果。 这篇文章是继续去完善...

55990
来自专栏青蛙要fly的专栏

项目需求讨论-Retrofit中文提交及上传头像功能

很早就开通了掘金上发表文章权限,但一直没有在掘金上写,都是在简书上面写好,然后偷懒在掘金上直接就网址分享链接。O(∩_∩)O~这次就上来写了。

11230
来自专栏Jaycekon

Phantomjs+Nodejs+Mysql数据抓取(2.抓取图片)

概要 这篇博客是在上一篇博客Phantomjs+Nodejs+Mysql数据抓取(1.抓取数据) http://blog.csdn.net/jokerko...

38150

扫码关注云+社区

领取腾讯云代金券