CesiumJS的一些简单地图应用：Cesium调用ArcGIS服务

/**
 
* arcgis影像
 
*/
 
function createEsriImageryProvider(){
var esriImageryProvider = new Cesium.ArcGisMapServerImageryProvider({
   url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
 
});
 
return esriImageryProvider;
 
}
 


/**
 
* 天地图影像
 
*/
 
function createTdtiImageryProvider(){
var tdtImageryProvider=new Cesium.WebMapTileServiceImageryProvider({
url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
 
layer: "tdtBasicLayer",
 
style: "default",
 
format: "image/jpeg",
 
tileMatrixSetIhttps://www.gofarlic.com "GoogleMapsCompatible",
 
show: true
 
});
 
return tdtImageryProvider;
 
}
 
/**
 
* 全局定义球
 
*/
 
var viewer =null;
 

/**
 
* 初始化球面
 
* @param imageryProvider 影像
 
*/
 
function createCesiumCircle(imageryProvider){
if(viewer==null){
viewer = new Cesium.Viewer('cesiumContainer', {
scene3DOnly: true, 
 
baseLayerPicker: false,  //非控件添加地图，必须为false，不然直接报错
 
imageryProvider: imageryProvider, //初始背景
 
animation: false,
 
fullscreenButton: false,
 
geocoder: false,
 
homeButton: false,
 
infoBox: true,
 
sceneModePicker: false,
 
selectionIndicator: false,
 
timeline: false,
 
navigationHelpButton: false,
 
navigationInstructionsInitiallyVisible: false
 
}
 
);
 
}else{
viewer.imageryProvider=imageryProvider;
 
}
 

}
 

/**
 
* 创建虚拟的地形图
 
* @returns {Cesium.VRTheWorldTerrainProvider}
 
*/
 
function createVrTheWorldProvider(){
var vrTheWorldProvider = new Cesium.VRTheWorldTerrainProvider({
   url : 'http://www.vr-theworld.com/vr-theworld/tiles1.0.0/73/',
 
   credit : 'Terrain data courtesy VT MÄK'
 
});
 
return vrTheWorldProvider;
 
}
 


/**
 
* 创建arcgis地形图
 
* @returns {Cesium.ArcGisImageServerTerrainProvider}
 
*/
 
function createArcGisTerrainProvider(){
var terrainProvider = new Cesium.ArcGisImageServerTerrainProvider({
 url : 'https://elevation.arcgisonline.com/ArcGIS/rest/services/WorldElevation/DTMEllipsoidal/ImageServer',
 
 token : 'KED1aF_I4UzXOHy3BnhwyBHU4l5oY6rO6walkmHoYqGp4XyIWUd5YZUC1ZrLAzvV40pR6gBXQayh0eFA8m6vPg..',
 
 proxy : new Cesium.DefaultProxy('/terrain/')
 
});
 
return terrainProvider;
 
}
 


/**
 
* 创建本地的离线的地形服务
 
* @param url 连接参数（//localhost:8087/terrain）
 
* @return CesiumTerrainProvider
 
*/
 
function createLocalTerrainProvider(url){
// viewer.extend(Cesium.viewerCesiumInspectorMixin);
 
var localTerrainProvider=new Cesium.CesiumTerrainProvider({
url: url
 
});
 


return localTerrainProvider;
 
}
 

/**
 
* 叠合arcgis的动态服务
 
* @param url (//192.168.0.105:6080/arcgis/rest/services//cx/gjslgy/MapServer)
 
*/
 
function addArcGisImageryProvider(url){
var layers = viewer.scene.imageryLayers;
 

var slgylayer = layers.addImageryProvider( new Cesium.ArcGisMapServerImageryProvider( {  
 
   url : url,  
 
   maximumLevel : 8,  
 
})); 
 

slgylayer.alpha = 0.1; //透明度
 

//设置图层的亮度  
 
slgylayer.brightness = 2.0;  //设置亮度
 
}
 


/**
 
* 创建arcgis影像服务
 
* @param  {[type]} url [description]
 
* @return {[type]}     [description]
 
*/
 
function createArcgisImageProvider(url){
var arcgis=new Cesium.ArcGisMapServerImageryProvider( {  
 
   url : url 
 
});
 
return arcgis;
 
}
 

/**
 
* 图形地球
 
* @param url （../wdpjs/cesiumjs/baseImage.png）
 
* @returns {Cesium.SingleTileImageryProvider}
 
*/
 
function createSingleImageryProvider(url){
var singleImageryProvider=new Cesium.SingleTileImageryProvider({
url: url,
 
show: true
 
});
 

return singleImageryProvider;
 
}
 

/**
 
* 加载地形服务
 
* @param terrainProvider
 
*/
 
function addTerrainProvider(terrainProvider){
viewer.terrainProvider =terrainProvider;
 
}
 

/**
 
* 创建格网
 
* @param rectangleHalfSize
 
* @returns {Array}
 
*/
 
function createGrid(rectangleHalfSize) {
   var gridWidth = 41;
 
   var gridHeight = 41;
 
   var everestLatitude = Cesium.Math.toRadians(27.988257);
 
   var everestLongitude = Cesium.Math.toRadians(86.925145);
 
   var e = new Cesium.Rectangle(everestLongitude - rectangleHalfSize, everestLatitude - rectangleHalfSize, everestLongitude + rectangleHalfSize, everestLatitude + rectangleHalfSize);
 
   var terrainSamplePositions = [];
 
   for (var y = 0; y < gridHeight; ++y) {
       for (var x = 0; x < gridWidth; ++x) {
           var longitude = Cesium.Math.lerp(e.west, e.east, x / (gridWidth - 1));
 
           var latitude = Cesium.Math.lerp(e.south, e.north, y / (gridHeight - 1));
 
           var position = new Cesium.Cartographic(longitude, latitude);
 
           terrainSamplePositions.push(position);
 
       }
 
   }
 
   return terrainSamplePositions;
 
}
 



/**
 
* 设置相机倾斜角度
 
*/
 
function lookAtMtEverest() {
   var target = new Cesium.Cartesian3(300770.50872389384, 5634912.131394585, 2978152.2865545116);
 
   var offset = new Cesium.Cartesian3(6344.974098678562, -793.3419798081741, 2499.9508860763162);
 
   viewer.camera.lookAt(target, offset);
 
   viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
 
}
 

/**
 
* 地形加载成功事件
 
* @param terrainSamplePositions
 
*/
 
function sampleTerrainSuccess(terrainSamplePositions) {
   var ellipsoid = Cesium.Ellipsoid.WGS84;
 
   viewer.scene.globe.depthTestAgainstTerrain = true;
 

   viewer.entities.suspendEvents();
 
   viewer.entities.removeAll();
 

   for (var i = 0; i < terrainSamplePositions.length; ++i) {
       var position = terrainSamplePositions[i];
 

       viewer.entities.add({
           name : position.height.toFixed(1),
 
           position : ellipsoid.cartographicToCartesian(position),
 
           billboard : {
               verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
 
               scale : 0.7,
 
               image : '../images/facility.gif'
 
           },
 
           label : {
               text : position.height.toFixed(1),
 
               font : '10pt monospace',
 
               horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
 
               pixelOffset : new Cesium.Cartesian2(0, -14),
 
               fillColor : Cesium.Color.BLACK,
 
               outlineColor : Cesium.Color.BLACK,
 
               showBackground : true,
 
               backgroundColor : new Cesium.Color(0.9, 0.9, 0.9, 0.7),
 
               backgroundPadding : new Cesium.Cartesian2(4, 3)
 
           }
 
       });
 
   }
 
   viewer.entities.resumeEvents();
 
}
 

/**
 
* 添加一个影像服务，控制影像服务显示范围
 
* @param imageryProvider 影像服务
 
* @param minlat 最小纬度
 
* @param minlon 最小经度
 
* @param maxlat 最大纬度
 
* @param maxlon 最大经度
 
*/
 
function setLayerRectangle(imageryProvider,minlat,minlon,maxlat,maxlon){
var layers = viewer.scene.imageryLayers;  
 
imageryProvider.rectangle=Cesium.Rectangle.fromDegrees(minlat,minlon,maxlat,maxlon); 
 
//添加一个图层，在特定位置绘制一个图片  
 
layers.addImageryProvider(imageryProvider);
 
}
 




/**
 
* 返回stk-terrain
 
* @return {[type]} [description]
 
*/
 
function createStkTerrainProvider(){
var cesiumTerrainProviderMeshes = new Cesium.CesiumTerrainProvider({
   url : 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
 
   requestWaterMask : true,
 
   requestVertexNormals : true
 
});
 
return cesiumTerrainProviderMeshes;
 
}
 







/**
 
* 测试用例
 
*/
 
function testdemo(){

//1、创建球面
 
//var imageProvider=createTdtiImageryProvider();
 
//
 
//var imageProvider=createSingleImageryProvider("../wdpjs/cesiumjs/baseImage.png");
 


//var imageProvider=createSingleImageryProvider("../wdpjs/cesiumjs/globe.tif");
 


//var imageProvider=createArcgisImageProvider("http://192.168.0.101:6080/arcgis/rest/services//cx/xjyx/MapServer");
 

//此处用一张图全球的低分分辨率
 
var imageryProvider=createArcgisImageProvider("http://192.168.0.101:6080/arcgis/rest/services//cx/globe/MapServer");
 
createCesiumCircle(imageryProvider);
 


viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
   url: "http://192.168.0.101:6080/arcgis/rest/services//cx/xjyx/MapServer"
 
}));
 



//2、加载地形
 
//虚拟地形(一般国内能够访问)
 
//var terrainProvider=createVrTheWorldProvider();
 


//stk地形（一般需要翻墙才能访问）
 
//var terrainProvider=createStkTerrainProvider();
 
var terrainProvider=createLocalTerrainProvider("//localhost:8087/terrain");
 


addTerrainProvider(terrainProvider);
 

//3、设置渲染效果
 
//var terrainSamplePositions = createGrid(0.005);
 
 //  Cesium.when(Cesium.sampleTerrain(viewer.terrainProvider, 9, terrainSamplePositions), sampleTerrainSuccess);
 

   //4、设置相机倾斜度
 
   //lookAtMtEverest();
 

   //5、arcgis影像服务
 
   addArcGisImageryProvider("//192.168.0.101:6080/arcgis/rest/services//cx/sheng/MapServer");
 
   //
 
   //http://192.168.0.101:6080/arcgis/rest/services//cx/xjyx/MapServer
 

// 6、添加标注
 
   //
 
   //
 
   //
 
  /* viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
   url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg",
 
   layer: "tdtAnnoLayer",
 
   style: "default",
 
   format: "image/jpeg",
 
   tileMatrixSetIhttps://www.gofarlic.com "GoogleMapsCompatible",
 
   show: false
 
}));*/
 


}
 

//启动测试代码
 

testdemo();
 
免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删