Cesium加载几种离线和在线地图

最新推荐文章于 2024-06-11 10:21:26 发布

一个修理地球的人

最新推荐文章于 2024-06-11 10:21:26 发布

阅读量3w

点赞数 7

分类专栏： Cesium 文章标签： Cesium 加载离线地图服务加载在线地图服务 OpenLayer Arcgis

本文链接：https://blog.csdn.net/wo_buzhidao/article/details/82500390

版权

Cesium 专栏收录该内容

18 篇文章 8 订阅

订阅专栏

Cesium加载几种离线和在线地图服务

Cesium加载在线天地图服务，arcgis地图服务，Cesium地图服务，加载arcgis离线地图服务，高德离线地图服务

参考资料
1.加载各种地图服务
2.离线高德地图数据采集和加载过程
代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Cesium加载各种地图服务</title>
		
		<link rel="stylesheet" href="../Build/Cesium/Widgets/widgets.css" />
		<script src="../Build/Cesium/Cesium.js"></script>
	</head>
	<body>
		<div  id="cesiumContainer" style="width: 100%;height: 900px;background-color: rosybrown;"></div>
	</body>
	<script>
		var url='http://localhost:8080/geoserver/wms'; //Geoserver URL   
	   	var viewer = new Cesium.Viewer('cesiumContainer',{ 
	   		//需要进行可视化的数据源的集合
           animation: false, //是否显示动画控件
            shouldAnimate : true,
            homeButton: false, //是否显示Home按钮
            fullscreenButton: false, //是否显示全屏按钮
            baseLayerPicker: false, //是否显示图层选择控件
            geocoder: false, //是否显示地名查找控件
            timeline: false, //是否显示时间线控件
            sceneModePicker: true, //是否显示投影方式控件
            navigationHelpButton: false, //是否显示帮助信息控件
            infoBox: false, //是否显示点击要素之后显示的信息
            requestRenderMode: true, //启用请求渲染模式
            scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
            sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
            fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
		    imageryProvider:new Cesium.WebMapServiceImageryProvider({   
		        url : url,         
		        layers: 'nurc:Arc_Sample'// Here just give layer name   
		    })
		});
		var layers = viewer.imageryLayers;  
		/**
		 * 加载本地离线高德地图
		 * gaodeTitle为加载的tomcat下面的相对路径
		 */
		layers.addImageryProvider(createGaodeTileMapServiceImageryProvider());
		function createGaodeTileMapServiceImageryProvider(){
			var gaodeLayer = new Cesium.createTileMapServiceImageryProvider({  
		     url : 'http://localhost:8087/gaodeTitle',
		     credit:"gaodeTitle"
			}); 
			return gaodeLayer;
		}
		
		/**
		* 叠合arcgis的离线动态服务
		* @param url ()
		*/
		//layers.addImageryProvider(createArcGisImageryProvider());
		function createArcGisImageryProvider(){
			var url="http://localhost:6080/arcgis/rest/services/world/MapServer";
			var slgylayer =  new Cesium.ArcGisMapServerImageryProvider({  
			   url : url
			}); 
			slgylayer.alpha = 0.1; //透明度
			//设置图层的亮度  
			slgylayer.brightness = 2.0;  //设置亮度
			return slgylayer;
		}
		
		/**
		 * 加载天地图在线地图
		 */
		//layers.addImageryProvider(createTdtiImageryProvider());
		function createTdtiImageryProvider(){
			 viewer.imageryLayers.addImageryProvider(
			      new Cesium.WebMapTileServiceImageryProvider({
			          url: 'http://t0.tianditu.gov.cn/img_w/wmts?tk=ebf64362215c081f8317203220f133eb',
			          layer:'img',
			          style:'default',
			          tileMatrixSetID:'w',
			          format:'tiles',
			          maximumLevel: 18
			      }));
		}
		
		/**
		 * 加载arcgis在线地图
		 */
		//layers.addImageryProvider(createEsriImageryProvider());
		function createEsriImageryProvider(){
			var esriImageryProvider = new Cesium.ArcGisMapServerImageryProvider({
			   url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
			});
			return esriImageryProvider;
		}
	 //引入高德地图,
	     viewer.imageryLayers.addImageryProvider(
	       new Cesium.UrlTemplateImageryProvider({
	        url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
	       }));
	//加载腾讯地图
	      viewer.imageryLayers.addImageryProvider(
	        new Cesium.UrlTemplateImageryProvider({
	        url : 'https://p2.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{reverseY}.jpg?version=229',
	        customTags : {
	          sx: function(imageryProvider, x, y, level) {
	            return x>>4;
	          },
	          sy:function(imageryProvider, x, y, level) {
	            return ((1<<level)-y)>>4;
	          }
	        }
	      }));

  //引入天地图标注,
      viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: "https://t0.tianditu.gov.cn/cva_w/wmts?tk=c4e3a9d54b4a79e885fff9da0fca712a&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
          layer: "tdtAnnoLayer",
          style: "default",
          format: "image/jpeg",
          tileMatrixSetID: "GoogleMapsCompatible",
          show: false
        })
      );
//引入谷歌地图,
    viewer.imageryLayers.addImageryProvider(
      new Cesium.UrlTemplateImageryProvider({
        url: "https://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"
      }));
		
		/**
		 * 加载cesium黑色炫酷地图（地图资源问题未成功）
		 */
		//layers.addImageryProvider(createCesiumLayer());
		function createCesiumLayer(){
			var balckMarble = new Cesium.createTileMapServiceImageryProvider({
			    url : 'https://cesiumjs.org/blackmarble',
			    credit : 'Black Marble imagery courtesy NASA Earth Observatory',
			    flipXY : true
			});
			balckMarble.splitDirection = Cesium.ImagerySplitDirection.LEFT;
			return balckMarble;
		}
		
	</script>
</html>

一个修理地球的人

关注

7
点赞
踩
55

收藏

觉得还不错? 一键收藏
7
评论
Cesium加载几种离线和在线地图

ceisum加载几种离线和在线地图服务Cesium加载在线天地图服务，arcgis地图服务，cesium地图服务，加载arcgis离线地图服务，高德离线地图服务参考资料 1.加载各种地图服务 2.离线高德地图数据采集和加载过程 3.对于本例子中加载离线高德地图使用Tomcat建立地址服务可参考本人Tomcat建立虚拟路径的博客代码&amp;amp;lt;!DOCTYPE html&amp;amp;gt;...
复制链接

扫一扫

专栏目录