3D地图cesium

2020-12-17

3D地图cesium

官方文档 https://cesium.com/docs/tutorials/quick-start/
配置CESIUM_BASE_URL
1
npm install cesium --save-dev
####CesiumJS需要一些静态文件托管在您的服务器上，例如Web Worker和SVG图标。配置模块捆绑器以复制以下四个目录，并将它们用作静态文件：
node_modules/cesium/Build/Cesium/Workers
node_modules/cesium/Build/Cesium/ThirdParty
node_modules/cesium/Build/Cesium/Assets
node_modules/cesium/Build/Cesium/Widgets
该window.CESIUM_BASE_URLCesiumJS导入之前全局变量必须设置。它必须指向提供这四个目录的URL。
例如，如果在处Assets/Images/cesium_credit.png提供的图片在之前带有static/Cesium/前缀
http://localhost:8080/static/Cesium/Assets/Images/cesium_credit.png，那么您可以将基本网址设置如下：
window.CESIUM_BASE_URL = ‘/static/Cesium/‘;
vue3是public为根目录

main.js配置全局

import * as Cesium from 'cesium';
import "cesium/Build/Cesium/Widgets/widgets.css";
Cesium.Ion.defaultAccessToken = 'your token';
Vue.prototype.$Cesium = Cesium;
window.CESIUM_BASE_URL = '/Cesium/';
Vue.config.productionTip = false;

所有的cesium的pai前缀this.$Cesium.
初始化地图
$Cesium.Viewer相当于所有api的一个入口
http://cesium.xin/cesium/cn/Documentation1.62/Viewer.html?classFilter=Viewer

imageryProvider 提供要显示在椭球表面上的图像

<template>
  <div class="warp">
    <div id="cesiumContainer"></div>
  </div>
</template>
export default {
  name: 'HelloWorld',
  data(){
    return{
      viewer:null,
      billboard:null,
    }
  },
  mounted(){
    this.initMap();
  },
  methods:{
    initMap(){
      this.viewer = new this.$Cesium.Viewer('cesiumContainer', {
        animation : false,//是否创建动画小器件，左下角仪表    
           baseLayerPicker : false,//是否显示图层选择器    
           fullscreenButton : false,//是否显示全屏按钮    
           geocoder : false,//是否显示geocoder小器件，右上角查询按钮    
           homeButton : false,//是否显示Home按钮    
           infoBox : false,//是否显示信息框    
           sceneModePicker : false,//是否显示3D/2D选择器    
           selectionIndicator : false,//是否显示选取指示器组件    
           timeline : false,//是否显示时间轴    
           navigationHelpButton : false,//是否显示右上角的帮助按钮    
           scene3DOnly : true,//如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源    
           clock : new Cesium.Clock(),//用于控制当前时间的时钟对象    
            //当前图像图层的显示模型，仅baseLayerPicker设为true有意义 
           selectedImageryProviderViewModel : undefined,   
           //可供BaseLayerPicker选择的图像图层ProviderViewModel数组 
            imageryProviderViewModels : Cesium.createDefaultImageryProviderViewModels(),   
           //当前地形图层的显示模型，仅baseLayerPicker设为true有意义    
            selectedTerrainProviderViewModel : undefined,
           //可供BaseLayerPicker选择的地形图层ProviderViewModel数组 
            terrainProviderViewModels : Cesium.createDefaultTerrainProviderViewModels(),   
           //图像图层提供者，仅baseLayerPicker设为false有意义  
            imageryProvider : new Cesium.OpenStreetMapImageryProvider( {    
               credit :'',    
               url : '//192.168.0.89:5539/planet-satellite/'    
           } ),  
            //地形图层提供者，仅baseLayerPicker设为false有意义 
           terrainProvider : new Cesium.EllipsoidTerrainProvider(),   
           skyBox : new Cesium.SkyBox({    
               sources : {    
                 positiveX : 'Cesium-1.7.1/Skybox/px.jpg',    
                 negativeX : 'Cesium-1.7.1/Skybox/mx.jpg',    
                 positiveY : 'Cesium-1.7.1/Skybox/py.jpg',    
                 negativeY : 'Cesium-1.7.1/Skybox/my.jpg',    
                 positiveZ : 'Cesium-1.7.1/Skybox/pz.jpg',    
                 negativeZ : 'Cesium-1.7.1/Skybox/mz.jpg'    
               }    
           }),//用于渲染星空的SkyBox对象    
           fullscreenElement : document.body,//全屏时渲染的HTML元素,    
           useDefaultRenderLoop : true,//如果需要控制渲染循环，则设为true    
           targetFrameRate : undefined,//使用默认render loop时的帧率    
           showRenderLoopErrors : false,//如果设为true，将在一个HTML面板中显示错误信息    
           automaticallyTrackDataSourceClocks : true,//自动追踪最近添加的数据源的时钟设置    
           contextOptions : undefined,//传递给Scene对象的上下文参数（scene.options）    
           sceneMode : Cesium.SceneMode.SCENE3D,//初始场景模式    
           mapProjection : new Cesium.WebMercatorProjection(),//地图投影体系    
           dataSources : new Cesium.DataSourceCollection()    
           //需要进行可视化的数据源的集合    
      });
    }
  }
}
</script>

对camera进行设置，我们就可以定义初始化时的镜头、视角~
下面这段代码就是将镜头定位在经纬度为（111.07，39.05）的地方，高度为1万公里，

下面的heading、pitch和roll就是镜头相对于xyz轴的角度，比如pitch为-90°而另外两个为0时，就是90°向下俯视地球。


viewer.camera.setView({  
       destination: Cesium.Cartesian3.fromDegrees(111.07, 39.05, 10000),  
       orientation: {  
        heading : Cesium.Math.toRadians(0),  
        pitch : Cesium.Math.toRadians(-90),  
        roll : Cesium.Math.toRadians(0)                            
       }  
   });

Cesium imageryProvider支持的地图格式和加载方法：

1、Cesium支持的地图格式有：
（1）WMS;(2)TMS;(3)WMTS;(4)AacGIS;(5)BingMaps;(6)GoogleEarth;（7）Mapbox;(8)Open StreetMap servers;(9)Single tile.几种。
2、Cesium支持的imageryProvider方法（具体使用方法及参数设置查看：点击打开链接）：
（1）BingMapsImageryProvider: Uses BingMaps REST Services to access tiles
（2）ArcGisMapServerImageryProvider：通过ArcGIS Server REST API 来访问托管在 ArcGIS MapServer上的瓦片
（3）GoogleEarthEnterpriseMapsProvider：提供对托管在Google Earth企业服务器上的数据的访问
（4）createOpenStreetMapImageryProvider：访问OpenStreetMap地图瓦片或者其他Slippy map tiles
（5）SingleTileImageryProvider：通过一张单一图片来创建瓦片
（6）createTileMapServiceImageryProvider：访问地图瓦片的REST风格接口。瓦片可以使用MapTiler或者GDAL2Tiles生成。
（7）WebMapServiceImageryProvider：一个向分布式地理空间数据库请求瓦片数据的OGC标准
（8）WebMapTileServiceImageryProvider
（9）UrlTemplateImageryProvider
加载本地wms服务腾讯地图

imageryProvider SingleTileImageryProvider通过一张单一图片展示3d球形上的图片

var base = new this.$Cesium.UrlTemplateImageryProvider({
      url : 'https://p2.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{reverseY}.jpg',
      customTags : {
        sx: function(imageryProvider, x, y, level) {
          return x>>4;
        },
        sy:function(imageryProvider, x, y, level) {
          return ((1<<level)-y)>>4;
        }
      }
    });
this.viewer.imageryLayers.addImageryProvider(base);

直接在Viewer对象上加载wms服务

var viewer = new Cesium.Viewer('cesiumContainer',{
    imageryProvider:new this.$Cesium.UrlTemplateImageryProvider({
         url : 'https://p2.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{reverseY}.jpg',
         customTags : {
           sx: function(imageryProvider, x, y, level) {
             return x>>4;
           },
           sy:function(imageryProvider, x, y, level) {
             return ((1<<level)-y)>>4;
           }
         }
       })
    baseLayerPicker:false
});

配置CESIUM_BASE_URL

该window.CESIUM_BASE_URLCesiumJS导入之前全局变量必须设置。它必须指向提供这四个目录的URL。

初始化地图

Cesium imageryProvider支持的地图格式和加载方法：

加载本地wms服务 腾讯地图

加载本地wms服务腾讯地图