当前位置: 移动技术网 > IT编程>网页制作>Html5 > Openlayers3加载天地图

Openlayers3加载天地图

2018年04月02日  | 移动技术网IT编程  | 我要评论

澳门博彩05520永利娱乐场,乌克兰撤离重武器,小灰熊3.416

概述:

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

实现:

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

,澳门博彩05520永利娱乐场,乌克兰撤离重武器,小灰熊3.416 <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 < 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>="">

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网