cesium很全的入门教程-翻译官网和加入自己理解

最新推荐文章于 2025-03-17 12:31:02 发布
置顶 最新推荐文章于 2025-03-17 12:31:02 发布
阅读量2.4w 收藏 404
点赞数 56
分类专栏： 二三维GIS开发 文章标签： es6 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21048515/article/details/105686890
版权

Cesium WorkShop-cesium快速入门教程

快速入门教程基本涵盖了大多数的CesiumJS API概念，主要用于Cesium基本入门，对Cesium有全面基本的了解和使用

一、概述

本教程会一步一步教会你做一个项目，主要介绍如下内容：

  1. 配置1个Cesium viewer
  2. 加载各种数据集
  3. 创建几何和设置样式
  4. 加载3D Tiles
  5. 控制相机
  6. 添加鼠标交互
  7. 学完后你将会创建如下项目
    项目图片

二、前期准备

  1. 下载 workshop code
  2. 在vscode中打开cesium-workshop 目录.
  3. Run npm install.安装需要的依赖
  4. Run npm start.服务会使用node.js启动，主要根据服务中的server.js配置文件启动，也可以直接使用其他服务器启动，不需要 server.js

2.1 workshop code目录结构

  • Source/ : js业务逻辑和一些数据.
  • ThirdParty/ : 可以引用其他类库，如 CesiumJS library.
  • LICENSE.md : Terms of use for this application.
  • index.html : 主页.
  • server.js : 服务会使用node.js启动，主要根据服务中的server.js配置文件启动.
    因此，我们主要使用index.html和app.js两个文件进行本项目的编写工作，如果你下载了workshop code工程，可以看到里面的代码是写好的，我们主要需要学会每行代码的意义和使用方法。
    该项目完整的演示效果：演示地址

2.2 从index.html开始

  1. 引入cesium类库，在源码中运行npm run build会将所有的源码创建快捷索引到一个ceiusm.js文件中，该文件只是对所有源码创建了快捷入口方式，不同于npm run release，可以使用该文件进行源码调试 创建一个App.js逻辑文件或者index.js，来初始化三维地球，里面就是写var viewer = new Cesium.Viewer('cesiumContainer');初始化等功能
  2. 导入cesium样式文件，@import url(ThirdParty/Cesium/Widgets/widgets.css);

让我们正式开始吧

三、创建一个地球视窗

var viewer = new Cesium.Viewer('cesiumContainer',option);

Viewer是一个综合，包含中心的地球globe，周围的控件widget，如果只需要一个地球的话，使用可以cesiumwidget()来初始化，viewer的内部源码就是使用了cesiumwidget()创建地球，并创建一些div来生成widget控件
视图列子

  1. Geocoder : 地名地址搜索，地点搜索默认使用bing地图. Uses Bing Maps data by default.
  2. HomeButton : 主页视图，可覆盖该方法，自定义主页视图.
  3. SceneModePicker : 不解释。Switches between 3D, 2D and Columbus View (CV) modes.
  4. BaseLayerPicker : 不解释。Chooses the imagery and terrain to display on the globe.
  5. NavigationHelpButton :帮助信息，没啥用。 Displays the default camera controls.
  6. Animation : 一般去掉。Controls the play speed for view animation.
  7. CreditsDisplay : 使用代码可以去掉版权信息：viewer._cesiumWidget._creditContainer.style.display=“none”;
  8. Timeline : 不显示一般。Indicates current time and allows users to jump to a specific time using the scrubber.
  9. FullscreenButton : Makes the Viewer fullscreen.
var viewer = new Cesium.Viewer('cesiumContainer', {
    scene3DOnly: true,
    selectionIndicator: false,
    baseLayerPicker: false
});

四、Cesium ion

Cesium的数据服务器，功能很强大，但是国内一般不用

4.1 添加影像地图Adding Imagery

支持的 Imagery Formats:
WMS
TMS
WMTS (with time dynamic imagery)
ArcGIS
Bing Maps
Google Earth
Mapbox
Open Street Map
Cesium提供了不同的接口加载上述几种类型的服务,但都是使用ImageryProvider来加载，可通过该链接查看所有接口类型many different providers
示例如下：

// 去掉默认底图bing   Remove default base layer
viewer.imageryLayers.remove(viewer.imageryLayers.get(0));

// Add Sentinel-2 imagery
viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({ assetId : 3954 }));

通过以上示例可以知道，默认的Cesium会加载一个底图，是bingMap底图，网络不太好，一般要先去掉这个默认的，加载我们自己的

五、添加地形服务Adding Terrain

示例代码如下：

// Load Cesium World Terrain
viewer.terrainProvider = Cesium.createWorldTerrain({
    requestWaterMask : true, // required for water effects
    requestVertexNormals : true // required for terrain lighting
});
// Enable depth testing so things behind the terrain disappear.
viewer.scene.globe.depthTestAgainstTerrain = true;

requestVertexNormals是地形光照效果，需要打开场景光源支持，depthTestAgainstTerrain是地形遮挡效果开关，打开后地形会遮挡看不到的区域

六、配置Scene

重点标注：影像和地形都是加载scene中的globe对象上的，但是其他的entiy和3dtiles等，是加载在scene上的，和globe是同级别的，关闭globe，entiy等也会显示

6.1 场景中的坐标概念简介：

  • Cartesian3 : 世界坐标系，坐标原点在globe球心的一个坐标系，坐标值是以米为单位，所以Cartesian3的坐标值大多是地球的半径那么大的数值。a 3D Cartesian coordinate – when used as a position it is relative to the center of the globe in meters using the Earth fixed-frame (ECEF)
    世界坐标系

  • Cartographic : WGS84-就是经纬度坐标系，地球的经纬度值，单位是度，如118°。a position defined by longitude, latitude (in radians) and height from the WGS84 ellipsoid surface

  • 局部坐标系：啥叫局部坐标系呢？很简单，就是你自己在地球上找个经纬度点，把他当原点，形成一个坐标系。
    看代码：

// Get the transform from local east-north-up at cartographic (0.0, 0.0) to Earth's fixed frame.
var center = Cesium.Cartesian3.fromDegrees(118.0, 30.0);
var transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);

我们把坐标原点移动到了118.0, 30.0这个地方，x轴指向东，y轴指向北，还有northEastDownToFixedFrame等不同的方向坐标轴

  • HeadingPitchRoll : HPR地球视角上下左右偏移调整，参考博客相机中的HeadingPitchRoll。
    20200413181720

  • Quaternion : 行话为四元数，其实就是使一个物体围绕指定的轴旋转多少角度。和旋转方法，旋转矩阵是同步改变的。（A 3D rotation represented as 4D coordinates.）

6.2 相机控制(Camera Control)

viewer.scene.Camera ,就是单纯的实现视角的各种移动缩放等

  • Camera.setView(options) : 直接定位到一个视角，没动画set camera at specific position and orientation immediately
  • Camera.zoomIn(amount) : 缩放多少米move camera forward along the view vector
  • Camera.zoomOut(amount) : 缩放多少米move camera backwards along the view vector
  • Camera.flyTo(options) : 最常用，有动画过程create an animated camera flight from the current camera position to a new position
  • Camera.lookAt(target, offset) : 定位到一个点，并以这个点为中心锁定orient and position the camera to look at target point with given offset
  • Camera.move(direction, amount) : 平移一定距离move the camera in any direction
  • Camera.rotate(axis, angle) : 旋转rotate the camera about any axis
    示例：
// Create an initial camera view
var initialPosition = new Cesium.Cartesian3.fromDegrees(-73.998114468289017509, 40.674512895646692812, 2631.082799425431);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949054, 0.025883251314954971306);
var homeCameraView = {
    destination : initialPosition,
    orientation : {
        heading : initialOrientation.heading,
        pitch : initialOrientation.pitch,
        roll : initialOrientation.roll
    }
};
// Set the initial view
viewer.scene.camera.setView(homeCameraView);

可以修改cesium默认的主页按钮定位位置

// Add some camera flight animation options
homeCameraView.duration = 2.0;//飞行用时
homeCameraView.maximumHeight = 2000;//飞行过程中最大高度
homeCameraView.pitchAdjustHeight = 2000;
homeCameraView.endTransform = Cesium.Matrix4.IDENTITY;
// Override the default home button覆盖home默认事件
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
    e.cancel = true;
    viewer.scene.camera.flyTo(homeCameraView);
});

坐标系转换：参考

6.3 Clock Control

这个在沿着路线飞行漫游的时候能用到，暂时不会，后期补充,举个使用列子吧在这

// Set up clock and timeline.
viewer.clock.shouldAnimate = true; // make the animation play when the viewer starts
viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:20:00Z");
viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.multiplier = 2; // sets a speedup
viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER; // tick computation mode
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // loop at the end
viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime); // set visible range

七、加载Entities

Entities相较于Primitive接口更加简单直观，是对Primitive封装
常见的Entities：

  • Polygon
  • Polyline
  • Billboard
  • Label
    可以使用viewer.entities.add()方法直接添加entity到一个默认的dataSource里面，DataSource是添加各种entity的集合，默认有一个defaultDataSource，viewer.entities.add()如果不知道加载到哪个DataSource里面，就会被默认加载到defaultDataSource里。
    DataSource有一下几类：
  • CustomDataSource-就是最常见的添加Entity类型的
var dataSource = new Cesium.CustomDataSource('myData');

var entity = dataSource.entities.add({
   position : Cesium.Cartesian3.fromDegrees(1, 2, 0),
   billboard : {
       image : 'image.png'
   }
});

viewer.dataSources.add(dataSource);
  • CzmlDataSource-加载czml文件格式的数据
  • GeoJsonDataSource-加载geojson格式的数据
var viewer = new Cesium.Viewer('cesiumContainer');
viewer.dataSources.add(Cesium.GeoJsonDataSource.load('../../SampleData/ne_10m_us_states.topojson', {
  stroke: Cesium.Color.HOTPINK,
  fill: Cesium.Color.PINK,
  strokeWidth: 3,
  markerSymbol: '?'
}));
  • KmlDataSource-加载kml格式的数据
var kmlOptions = {
    camera : viewer.scene.camera,
    canvas : viewer.scene.canvas,
    clampToGround : true
};
// Load geocache points of interest from a KML file
// Data from : http://catalog.opendata.city/dataset/pediacities-nyc-neighborhoods/resource/91778048-3c58-449c-a3f9-365ed203e914
var geocachePromise = Cesium.KmlDataSource.load('./Source/SampleData/sampleGeocacheLocations.kml', kmlOptions);

// Add geocache billboard entities to scene and style them
geocachePromise.then(function(dataSource) {
    // Add the new data as entities to the viewer
    viewer.dataSources.add(dataSource);

        // Get the array of entities
    var geocacheEntities = dataSource.entities.values;

    for (var i = 0; i < geocacheEntities.length; i++) {
        var entity = geocacheEntities[i];
        // Add geocache billboard entities to scene and style them

        if (Cesium.defined(entity.billboard)) {
            // 贴地形Adjust the vertical origin so pins sit on terrain
            entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
            // 去掉自带的标注，不显示那么乱--Disable the labels to reduce clutter
            entity.label = undefined;
            // 按照缩放距离显示Add distance display condition
            entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0);

               // Compute longitude and latitude in degrees
            var cartographicPosition = Cesium.Cartographic.fromCartesian(entity.position.getValue(Cesium.JulianDate.now()));
            var longitude = Cesium.Math.toDegrees(cartographicPosition.longitude);
            var latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);
            // Modify description
            // Modify description
            var description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>' +
                '<tr><th>' + "Longitude" + '</th><td>' + longitude.toFixed(5) + '</td></tr>' +
                '<tr><th>' + "Latitude" + '</th><td>' + latitude.toFixed(5) + '</td></tr>' +
                '</tbody></table>';
            entity.description = description;
            // entity styling code here

            // Set the polygon material to a random, translucent color.
            entity.polygon.material = Cesium.Color.fromRandom({
                red : 0.1,
                maximumGreen : 0.5,
                minimumBlue : 0.5,
                alpha : 0.6
            });

            // 面贴地或者贴3dties---Tells the polygon to color the terrain. ClassificationType.CESIUM_3D_TILE will color the 3D tileset, and ClassificationType.BOTH will color both the 3d tiles and terrain (BOTH is the default)
            entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;

            // entity styling code here

            // Generate Polygon position
            var polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
            //求一个面的中心点坐标
            var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
            polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
            entity.position = polyCenter;
            // Generate labels
            entity.label = {
                text : entity.name,
                showBackground : true,
                scale : 0.6,
                horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
                verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
                distanceDisplayCondition : new Cesium.DistanceDisplayCondition(10.0, 8000.0),
                disableDepthTestDistance : 100.0
            };
// Add computed orientation based on sampled positions根据位置自动调整朝向
            entity.orientation = new Cesium.VelocityOrientationProperty(entity.position);
            // Smooth path interpolation路径插值，就是在两点直接移动过程中，使物体的移动平滑
drone.position.setInterpolationOptions({
    interpolationDegree : 3,
    interpolationAlgorithm : Cesium.HermitePolynomialApproximation
});
            
        }
    }
});

代码说明

  1. clampToGround意思是添加的entity到dem上，而不是wgs84的球面
  2. load加载数据都是异步加载的，所以会返回一个Promise—Promise是ES6解决ajax循环请求问题的。
  3. entity.description是修改这个默认弹框信息： entity.description
  4. entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;可以把面贴地，或者贴3dtiles表面
  5. Cesium.BoundingSphere.fromPoints(polyPositions).center;计算几何中心
  6. Property Types Demo动态效果实现用到了cesium中的property属性功能
  7. 根据position自动计算entity的方向。VelocityOrientationProperty
  8. setInterpolationOptions就是使用插值算法，使模型在两点直接移动过程中，在两点之间进行插值，使移动更平滑
property介绍–参考vtxf博客

比如一个entity中很多值都是属性property类型new Cesium.Entity({position：PositionProperty,orientation:property})，这个属性值是Cesium提供的一种机制，让某个property比如positioon可以随时间自动发生变化，自动赋予不同的数值（位置）。这也就是property的作用了。
动图

// 创建盒子
var blueBox = viewer.entities.add({
    name : 'Blue box',
    position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
    box : {
        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
        material : Cesium.Color.BLUE,
        outline: true,
    }
});

    var property = new Cesium.SampledProperty(Cesium.Cartesian3);

    property.addSample(Cesium.JulianDate.fromIso8601('2019-01-01T00:00:00.00Z'), 
        new Cesium.Cartesian3(400000.0, 300000.0, 200000.0));
    
    property.addSample(Cesium.JulianDate.fromIso8601('2019-01-03T00:00:00.00Z'), 
        new Cesium.Cartesian3(400000.0, 300000.0, 700000.0));

    blueBox.box.dimensions = property;

以上代码的意思就是在两个不同的时间点分别赋予不同的位置，用SampledProperty包装成一个property，最后赋给blueBox.box.dimensions。

由此可见，Property最大的特点是和时间相互关联，在不同的时间可以动态地返回不同的属性值。而Entity则可以感知这些Property的变化，在不同的时间驱动物体进行动态展示。

Cesium宣称自己是数据驱动和time-dynamic visualization，这些可都是仰仗Property系统来实现的。

通俗讲就是比如position属性不只是能赋值一个固定的坐标，还能赋值一个有时间和位置组成的数组对象。
属性的作用是可以实现漫游飞行功能：
漫游飞行实现Interpolation

八、3D Tiles

简介
开源介绍
格式介绍
The 3D Tiles Inspector
各类示例

加载3dtiles

// Load the NYC buildings tileset
var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(75343) }))

添加样式

cesium专门提供了3D Tiles styling language

var defaultStyle = new Cesium.Cesium3DTileStyle({
    color : "color('white')",
    show : true
});
//按照条件
var heightStyle = new Cesium.Cesium3DTileStyle({
    color : {
        conditions : [
            ["${Height} >= 300", "rgba(45, 0, 75, 0.5)"],
            ["${Height} >= 200", "rgb(102, 71, 151)"],
            ["${Height} >= 100", "rgb(170, 162, 204)"],
            ["${Height} >= 50", "rgb(224, 226, 238)"],
            ["${Height} >= 25", "rgb(252, 230, 200)"],
            ["${Height} >= 10", "rgb(248, 176, 87)"],
            ["${Height} >= 5", "rgb(198, 106, 11)"],
            ["true", "rgb(127, 59, 8)"]
        ]
    }
});

九、鼠标点击交互事件Interactivity

鼠标事件主要有左键，右键，滚轮键盘，鼠标移动事件，使用ScreenSpaceEventHandler来获取相应的事件

//鼠标移动事件捕捉
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(movement) {}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

鼠标事件主要用于捕捉选择场景中添加的各种数据，选择到数据后，便可以对数据进行各种展示处理操作，选择场景中的数据的方式主要使用pick()函数，目前有一下几类：

  • Scene.pick : 选择一个图元。returns an object containing the primitive at the given window position.
  • Scene.drillPick : returns a list of objects containing all the primitives at the given window position.
  • Globe.pick : returns the intersection point of a given ray with the terrain.

高亮示例,移动高亮，移除恢复：

// If the mouse is over a point of interest, change the entity billboard scale and color
var previousPickedEntity = undefined;
handler.setInputAction(function(movement) {
    var pickedPrimitive = viewer.scene.pick(movement.endPosition);

    //获取鼠标的经纬度位置
    var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, scene.globe.ellipsoid);
    if (cartesian) {
        var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
        var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
        var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);

        entity.position = cartesian;
        
    }

    var pickedEntity = (Cesium.defined(pickedPrimitive)) ? pickedPrimitive.id : undefined;
    // Unhighlight the previously picked entity
    if (Cesium.defined(previousPickedEntity)) {
        previousPickedEntity.billboard.scale = 1.0;
        previousPickedEntity.billboard.color = Cesium.Color.WHITE;
    }
    // Highlight the currently picked entity
    if (Cesium.defined(pickedEntity) && Cesium.defined(pickedEntity.billboard)) {
        pickedEntity.billboard.scale = 2.0;
        pickedEntity.billboard.color = Cesium.Color.ORANGERED;
        previousPickedEntity = pickedEntity;
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

可以使用camera.pickEllipsoid来获取鼠标移动过程中的位置信息：

 //获取鼠标的经纬度位置
    var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, scene.globe.ellipsoid);
    if (cartesian) {
        var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
        var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
        var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);

        entity.position = cartesian;
        
    }

高亮选择的3dtiles边缘示例

3D Tiles Feature Picking Demo

十、Camera Modes

viewer.trackedEntity可以让视角一直跟着某个entity走，漫游模式。

// Create a follow camera by tracking the drone entity
function setViewMode() {
    if (droneModeElement.checked) {
        viewer.trackedEntity = drone;
    } else {
        viewer.trackedEntity = undefined;
        viewer.scene.camera.flyTo(homeCameraView);
    }
}

十一、参考资料

西部世界Cesium资料大全
Cesium学习系列汇总

迈向三维：vue3+Cesium.js三维WebGIS项目实战
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
02-21 5592
WebGIS（Web地理信息系统）是指利用 Web 技术来构建和展示地理信息系统（GIS），使用户可以通过 Web 浏览器访问、查询、分析和可视化地理空间数据。WebGIS 通常结合地图服务、地理信息数据库、前端地图库和相关的数据处理技术，为用户提供交互式的地图浏览和空间数据分析功能。**JS一看名称即知道是为前端服务的JS框架，即装即用，学习新的技术最重要的是去原文档，api使用介绍。快去看下Cesium中文文档吧。
Cesium入门教程
qq_58978006的博客
08-28 4842
本章将从Cesium的基本使用入手，了解它的常见对象并介绍相应属性及方法。包括：Cesium的初始化、Scene场景、Camera相机、Clock时钟、Entity实体以及Invalid access token的获取问题等等。
Cesium 入门系列教程（二）：界面的基础配置和功能
大剑师兰特的GIS世界
03-14 1869
在CesiumJS中， 是创建3D地球视图的核心组件。它不仅初始化了一个场景，还集成了多种默认控件和功能，使得开发者可以迅速搭建起一个基础的地理空间应用。以下是关于 的详细介绍：https://dajianshi.blog.csdn.net/article/details/129632504https://dajianshi.blog.csdn.net/article/details/129218432 https://dajianshi.blog.csdn.net/article/details/14
Cesium 入门教程（基于 vue3）
最新发布
2403_83182682的博客
03-17 2298
Cesium 是一个开源的 JavaScript 库，专门用于创建世界级的三维地球和地图可视化应用。它提供了强大的工具和功能，使开发者能够轻松地在浏览器中展示高分辨率的地形、影像以及三维模型。Cesium 支持多种数据格式，包括但不限于 3D Tiles、GeoJSON 和 glTF，这使得它成为处理地理空间数据的理想选择。无论是构建虚拟地球、城市规划模拟、还是气象数据分析，Cesium 都能提供必要的技术支持。此外，Cesium 还支持时间动态数据，允许用户通过时间轴查看历史数据变化或预测未来趋势。
cesium官网
QY'UniverseSpace的博客
03-02 2178
cesium官网，环境搭建。 CesiumJS is an open source JavaScript library for creating world-class 3D globes and maps with the best possible performance, precision, visual quality, and ease of use. Developers across industries, from aerospace to smart cities to drones
Cesium中文教程-几何形状与外观(Geometry and Appearances)
newston的博客
06-13 3534
目录 组合几何图形(Combining Geometries) Picking 几何实例(Geometry Instances) 更新每个属性(Updating Pre-Instance Attributes) 外观(Appearances) 几何与外观的兼容性(Geometry and Appearance Compatibility) 资源(Resources) 教程将介绍原始API（Primitive）提供的几何和外观系统。使用自定义网格、形状、容器和外观来扩展Cesium是一个...
cesium教程
鸣风
04-29 327
VsCode打开远吗，找到index.html,右键打开 Open with Liver Server。自己项目引入，引入Cesium-1.116\Build文件夹，注册token。cesium官网下载源码。新建html,编写代码。
Cesium教程系列汇总
weixin_34246551的博客
07-26 487
Cesium系列目录： 演示实例 ExamplesforCesium 最近老实有一些人问我，下载后在本地无法运行，我也不能保证每次都搭个环境看是否可行，或许Cesium升级版本后真有问题呢，索性在github上搭建了一个演示范例，大家有问题先看看github上的范例运行是否正确。 当然，是否能够访问取决于你的运气，可能会被墙，我尽力了，程序员还是多翻FQ吧~。 本地运行请参考本文的范例说...
cesium编程入门(一)cesium简介
weixin_33843947的博客
01-01 304
2019独角兽企业重金招聘Python工程师标准>>> ...
Cesium基础教程
IT飞牛
04-20 1万+
Cesium是国外一个基于javascript的地图引擎，支持3D、2D、2.5D形式的展示，可以自行绘制图形、高亮区域，并提供良好的触摸支持，并支持大多数的浏览器和移动端。
Cesium入门
01-21
### Cesium与CZML入门知识点详解 #### 一、CZML简介及应用场景 - **CZML定义**：CZML（Common Zoning Markup Language）是一种基于JSON的架构语言，专门用于描述动态场景，尤其适用于在浏览器环境中通过Cesium进行...
Cesium for Unreal入门教程：体验虚拟现实地理空间可视化
1. 入门项目介绍：这个项目被定义为一个"入门示例项目"，意味着它是为了让学习者能够通过实际操作来理解和掌握"Cesium for Unreal"插件的基本使用。通过不同级别的训练，用户将逐步了解如何在Unreal Engine中使用...
web三维gis引擎cesium的学习笔记（包含视频融合和动态纹理）
hijunmeng的专栏
03-03 2671
文章目录cesium参考 cesium 参考 (23条消息)Cesium离线GIS部署使用（无外网环境）_Java_zzzq的博客-CSDN博客 https://blog.csdn.net/zq_1996/article/details/96320219?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1&...
最新Selenium面试问题和答案-1_cesium面试题
2401_84557849的博客
05-03 1021
当我学到一定基础，有自己的理解能力的时候，会去阅读一些前辈整理的书籍或者手写的笔记资料，这些笔记详细记载了他们对一些技术点的理解，这些理解是比较独到，可以学到不一样的思路。Python所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照下面的知识点去找对应的学习资源，保证自己学得较为全面。观看全面零基础学习视频，看视频学习是最快捷也是最有效果的方式，跟着视频中老师的思路，从基础到深入，还是很容易入门的。imlicitlyWait是隐式等待，一般在查找元素的时候使用。
应用Cesium+Echarts的结果可视化（绘制点要素+柱状图）
weixin_45994787的博客
12-27 1057
注：以下仅为可视化示例，适合初学者学习或有相关功能需求的小白借鉴。Cesium绘制几何实体以及Echarts绘制图表的功能非常强大，大家可以根据需要自行调整：Cesium官方API文档Apache ECharts官方使用手册。
Cesium学习笔记
weixin_57468559的博客
10-15 7236
Cesium是便用JavaScript开发的基于WebGL的实现三维地球和地图可视化的JS库，Cesium支持海量的三维模型数据，影像数据，地形高程数据，失量数据等丰富的地理教据的加载。在交通，规划，城市管理，地形仿真等领城有非常广泛的应用。Cesium为三维的GIS提供了一个高效的数据可视化平台。中文文档官网例子Cesium的特点①、跨平台，跨浏览器，无插件②、强大的地理数据可视化能力。Cesium自定义的3D Tiles数据格式，支持海量数据渲染。
Cesium：入门教程（一）之 Hello World
热门推荐
Puzzle的博客
08-09 2万+
简介 Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎。Cesium支持3D,2D,2.5D形式的地图展示。它提供了基于JavaScript语言的开发包，方便用户快速搭建一款零插件的虚拟地球Web应用，并在性能，精度，渲染质量以及多平台，易用性上都有高质量的保证。 下载 Cesium每个月月初更新一次版本，会在官网提供下载链接。........................
Cesium中文教程-Cesium and Webpack
newston的博客
06-18 3055
目录 前提条件(Prerequisites) 创建一个基本webpack应用(Create a basic webpack app) 使用npm初始化应用程序(Initialize an app with npm) 创建应用程序代码(Create our application code) 安装和配置webpack(Install and configure webpack) 打包应用程序(Bundle the app) 运行开发服务器(Run the development server)
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晴天蜗牛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值