zoukankan html css js c++ java

Cesium简单使用

CesiumJS是一个基于javascript的浏览器器3d地图引擎

下载的Cesium-1.56.1，解压后的结构为

1.设置Web服务器

为了运行Cesium的应用，需要一个本地Web服务器的主机文件

下载安装所需要的模块

npm install

启动Web服务器

node server.js

注：

node server.js --port 8080 -- public 192.168.1.100

2.helloworld

新建html页面并引用Cesium.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Hello World!</title>
  <script src="../Build/Cesium/Cesium.js"></script>
  <style>
      @import url(../Build/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
           100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    var viewer = new Cesium.Viewer('cesiumContainer');
  </script>
</body>
</html>

cesiumContainer为html中的地图显示div的id

用浏览器打开 http://localhost:8080//Apps/HelloWorld.html

3.基本知识

（1）Viewer

Cesium的核心

可以在调用的时候添加参数，设置了地图浏览中某个控件是否显示

var viewer = new Cesium.Viewer('cesiumContainer', {
    animation: true, //是否显示动画控件(左下方那个)
    baseLayerPicker: true, //是否显示图层选择控件
    geocoder: true, //是否显示地名查找控件
    timeline: true, //是否显示时间线控件
    sceneModePicker: true, //是否显示投影方式控件
    navigationHelpButton: false, //是否显示帮助信息控件
    infoBox: true, //是否显示点击要素之后显示的信息
});

baseLayerPicker——设置图层选择空间是否可见，如果设置不可见，则需要设置自定义图层作为默认图层。设置可见之后也可以更改其中的图层为自定义图层

var viewer = new Cesium.Viewer('cesiumContainer', {
        animation: false, //是否显示动画控件(左下方那个)
        baseLayerPicker: false, //是否显示图层选择控件
        geocoder: false, //是否显示地名查找控件
        timeline: false, //是否显示时间线控件
        sceneModePicker: false, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        infoBox: true, //是否显示点击要素之后显示的信息
});
//// 去除左下角的logo
viewer._cesiumWidget._creditContainer.style.display="none";

定义初始化时的镜头、视角
将镜头定位在济南，经纬度为（117.13, 36.68）的地方，高度为1万公里，下面的heading、pitch和roll就是镜头相对于xyz轴的角度，比如pitch为-90°而另外两个为0时，就是90°向下俯视地球

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

（2）图层

　　分类：

　　　　普通图层，包含影像、线划等普通显示图层；

　　　　地形图层，用于真实的模拟地球表面的场景

　　在基本图层上添加一个图层

　　A.imageryLayers直接添加

　　在影像的基础上叠加天地图注记层，高度为10公里

viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(117.13, 36.68, 10000),
        orientation: {
            heading : Cesium.Math.toRadians(0),
            pitch : Cesium.Math.toRadians(-90),
            roll : Cesium.Math.toRadians(0)
        }
    });
    
    //加载影像注记
    var layer1= new Cesium.WebMapTileServiceImageryProvider({
        url: 'http://t7.tianditu.gov.cn/cia_w/wmts?tk=10e4a33383d86f868e6c5748e8f6cbb5',   
        layer:'cia', 
        style:'default',
        tileMatrixSetID:'w',
        format:'tiles',
        subdomains: ["t0","t1","t2","t3","t4","t5","t6","t7"],
        maximumLevel: 18 
    });
    viewer.imageryLayers.addImageryProvider(layer1);

　　B.scene的imageryLayers

var my_layer = viewer.scene.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
            url : 'http://{s}.tianditu.gov.cn/img_w/wmts?tk=10e4a33383d86f868e6c5748e8f6cbb5',
            credit : '@123.',
            subdomains:["t0","t1","t2","t3","t4","t5","t6","t7"],
            maximumLevel : 10
        })
);

　　图层对象：

　　　　UrlTemplateImageryProvider

　　　　WebMapTileServiceImageryProvider

　　　　createTileMapServiceImageryProvider

　　　　SingleTileImageryProvider

　　eg:

　　　　 Esri ArcGIS 在线服务图层

var layerProvider = new Cesium.WebMapTileServiceImageryProvider({
    url : '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
});
var viewer = new Cesium.Viewer('cesiumContainer', {
   baseLayerPicker: false, 
   imageryProvider: layerProvider
});

（3）默认图层设置

　　可以设置baseLayerPicker为false或true来控制图层选择控件是否可见

　　当设置为false的时候可以在创建viewer时添加一项来设置默认显示的底图，否则仍然显示微软的默认影像

var viewer = new Cesium.Viewer('cesiumContainer',{
        baseLayerPicker: false, //是否显示图层选择控件
        imageryProvider : new Cesium.WebMapTileServiceImageryProvider({
            url: "http://t7.tianditu.gov.cn/vec_w/wmts?tk=10e4a33383d86f868e6c5748e8f6cbb5",
            layer: "tdtVecBasicLayer",
            style: "default",
            format: "image/jpeg",
            tileMatrixSetID: "GoogleMapsCompatible",
            show: false
        })
    });

（4）坐标

　　坐标系

　　屏幕坐标系——二维

　　三维空间坐标

new Cesium.Cartesian2(1,1) //表示一个二维笛卡尔坐标系，也就是直角坐标系（屏幕坐标系） 
new Cesium.Cartesian3(1,1,1) //表示一个三维笛卡尔坐标系，也是直角坐标系(就是真实世界的坐标系)

　　二维到三维

var pick1= scene.globe.pick(viewer.camera.getPickRay(pt1), scene) //其中pt1为一个二维屏幕坐标。

　　三维到地理坐标

var geoPt1= scene.globe.ellipsoid.cartesianToCartographic(pick1) //其中pick1是一个Cesium.Cartesian3对象。

　　地理坐标到经纬度

var point1=[geoPt1.longitude / Math.PI * 180,geoPt1.latitude / Math.PI * 180]; //其中geoPt1是一个地理坐标。

　　经纬度转地理坐标

var cartographic = Cesium.Cartographic.fromDegree(point) //point是经纬度值
var coord_wgs84 = Cesium.Cartographic.fromDegrees(lng, lat, alt);//单位：度，度，米

　　经纬度转三维

var cartesian = Cesium.Cartesian3.fromDegree(point)

　　计算距离（三维）

var d = Cesium.Cartesian3.distance(
    new Cesium.Cartesian3(pick1.x, pick1.y, pick1.z), 
    new Cesium.Cartesian3(pick3.x, pick3.y, pick3.z)
); //pick1、pick3都是三维坐标系

（5）加载3D对象（Entity）

　　通过Cesium将一个三维模型加载到地球中

　　A.直接添加

var entity = viewer.entities.add({ 
        position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706), 
        model : { uri : '../Apps/SampleData/models/ShadowTester/Shadow_Tester.gltf' }
    });
viewer.trackedEntity = entity; // 镜头追踪，将镜头固定在对象上

　　B.添加primitives

var scene = viewer.scene;
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-123.0745725, 44.0503706));
var model = scene.primitives.add(Cesium.Model.fromGltf({
    url: '../Apps/SampleData/models/GroundVehicle/GroundVehicle.glb',
    //以下这些信息也均可在entity中设置
    color : Cesium.Color.fromAlpha(Cesium.Color.RED, parseFloat(0.5)),//模型颜色，透明度
    silhouetteColor : Cesium.Color.fromAlpha(Cesium.Color.GREEN, parseFloat(0.5)),//轮廓线
    colorBlendMode : Cesium.ColorBlendMode.MIX,//模型样式['Highlight', 'Replace', 'Mix']
    modelMatrix: modelMatrix,
    minimumPixelSize : 256, // 最小的缩放尺寸，256个像素，就是一个瓦片的尺寸。
    maxiumScale: 2 // 最大的缩放倍数
}));
//添加动画
Cesium.when(model.readyPromise).then(function (model) {
    model.activeAnimations.addAll({
        loop: Cesium.ModelAnimationLoop.REPEAT,//控制重复
        speedup: 0.5, // 速度，相对于clock
        reverse: true // 动画反转
    })
});

（6）加载矢量数据

　　　当然数据量特别大的时候就需要考虑矢量瓦片

　　　先读取矢量瓦片而后转换成GeoJson进行加载

　　　A.GeoJson是较为通用的一种网络矢量数据传输方案

viewer.dataSources.add(Cesium.GeoJsonDataSource.load('../Specs/Data/test.geojson', {
        stroke: Cesium.Color.BLUE.withAlpha(0.8),
        strokeWidth: 2.3,
        fill: Cesium.Color.RED.withAlpha(0.3),
        clampToGround : true
    }
));

　　 Cesium.GeoJsonDataSource.load函数即为加载geojson数据，并配置相关属性。

　　通过这种方式就可将数据加载到三维地球中，并设置边线以及填充等，clampToGround用于设置对象是否贴着地形，如为true则对象会随地势起伏而变化。

Cesium.Math.setRandomNumberSeed(0);

var promise = Cesium.GeoJsonDataSource.load('../Specs/Data/test.geojson'); // load完之后即为一个promise对象
promise.then(function(dataSource) { // 此处类似于添加3D对象中的动画。
    viewer.dataSources.add(dataSource); // 先添加对象

    var entities = dataSource.entities.values; // 获取所有对象

    var colorHash = {};
    for (var i = 0; i < entities.length; i++) { // 逐一遍历循环
        var entity = entities[i];
        var name = entity.properties.GB1999; // 取出GB1999属性内容
        var color = colorHash[name]; // 如果GB1999属性相同，则赋同一个颜色。
        if (!color) {
            color = Cesium.Color.fromRandom({
                alpha : 1.0
            });
            colorHash[name] = color;
        }
        entity.polygon.material = color; // 设置polygon对象的填充颜色
        entity.polygon.outline = false; // polygon边线显示与否

        entity.polygon.extrudedHeight = entity.properties.POPU * 1000; // 根据POPU属性设置polygon的高度
    }
});
viewer.zoomTo(promise);

　　　先load数据，而后逐一设置load后数据的entity

　　　B.KML是Google Earth定义的一种矢量数据组织方式

var promise = Cesium.KmlDataSource.load('SampleData/kml/eiffel-tower-flyto.kml');

　　　使用

dataSource = new Cesium.KmlDataSource();
var kmz = '../Specs/Data/KML/multilevel.kmz';
var promise = dataSource.load(kmz);
promise.then(function(dataSource) { // 此处类似于添加3D对象中的动画。
    viewer.dataSources.add(dataSource); // 先添加对象
});
viewer.zoomTo(promise);

　　c.CZML

　　CZML是一种JSON格式的字符串，用于描述与时间有关的动画场景，CZML包含点、线、地标、模型、和其他的一些图形元素，并指明了这些元素如何随时间而变化。

dataSource = new Cesium.CzmlDataSource();
var czml = 'SampleData/ClampToGround.czml'; 
dataSource.load(czml); viewer.dataSources.add(dataSource);

　　　　使用

Cesium.Math.setRandomNumberSeed(0);
dataSource = new Cesium.CzmlDataSource();
    var czml = 'SampleData/ClampToGround.czml';
var promise = dataSource.load(czml);
promise.then(function(dataSource) { 
    viewer.dataSources.add(dataSource); 
});
viewer.zoomTo(promise);

（7）加载3D Tile

　　　3D瓦片可以显示建筑物、地标乃至森林广告牌等等以及其对应的属性信息。

　　　每个3D瓦片就是一个3D对象，具体的数据范围等等信息在tileset.json中定义。

var tileSet = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
        // 同样url只定义编号前面的部分，具体的编号（数字或者非数字都有可能）在此URL下的tileset.json文件中定义，包括此3d瓦片图层的范围等等。
        url:'SampleData/Cesium3DTiles/Hierarchy/BatchTableHierarchy/tileset.json'
}));
tileSet.readyPromise.then(function (tileset) {
        viewer.camera.viewBoundingSphere(tileset.boundingSphere, new Cesium.HeadingPitchRange(0, -0.5, 0));
        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
});

查看全文

相关阅读:
Http协议状态码总结
 ES6中的let和const
Swiper-轮播图
 HTML5动画API—— requestAnimationFrame
神奇的 conic-gradient 圆锥渐变
 最流行的5个前端框架对比
 jQuery适用技巧笔记整合
 PHP中的面向对象OOP中的魔术方法
 居中
 (function($){})(jQuery)

原文地址：https://www.cnblogs.com/baby123/p/10725231.html