Openlayers3加载天地图
导读：收集整理的这篇文章主要介绍了html5教程-Openlayers3加载天地图，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 概述： 在前文中分别讲...
收集整理的这篇文章主要介绍了html5教程-Openlayers3加载天地图，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 概述：
在前文中分别讲到了在Arcgis for js、OPEnlayers2中去加载天地图，同时也讲到了天地图的离线加载方式。在本文，讲述在Openlayers3中实现在线/离线的天地图的加载。
实现：
直接贴代码吧，效果就不贴了
body, #map { border: 0px; margin: 0px; padding: 0px; width: 100%; height: 100%; font-Size: 13px; } #map{ background: url("../../images/bgimg.gif"); background-repeat: inherIT; } 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: 'https://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 = "https://localhost:8081/lzugis/tdttile?T="+lyr+"& X={ x} & Y={ y} & L={ z} "; // var url = "https://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 概述：在前文中分别讲到了在Arcgis for js、Openlayers2中去加载天地图，同时也讲到了天地图的离线加载方式。在本文，讲述在Openlayers3中实现在线/离线的天地图的加载。
实现：
直接贴代码吧，效果就不贴了
body, #map { border: 0px; margin: 0px; padding: 0px; width: 100%; height: 100%; font-size: 13px; } #map{ background: url("../../images/bgImg.gif"); background-repeat: inherit; } 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: 'https://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 = "https://localhost:8081/lzugis/tdttile?T="+lyr+"& X={ x} & Y={ y} & L={ z} "; // var url = "https://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 觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： Openlayers3加载天地图
本文地址： https://pptw.com/jishu/587071.html