~ 于迷途中归寻，开始继续学习GIS相关了~
学习资源分享
-
免费文档
-
付费文档
一、初识 Cesium
Cesium中文网下载包，推荐使用最新Ceisum目录结构等相关介绍
二、Django 中使用 Cesium
-
① 引入相关的静态文件，这里用了未压缩的
1.8.3版本
-
② 编写相关的前端代码
<!--静态文件模板标签-->
{% load static %}
<!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.0">
<!--引入js和css静态文件-->
<script src="{% static 'Cesium/Cesium.js'%}"></script>
<link rel="stylesheet" href="{% static 'Cesium/Widgets/widgets.css'%}">
<title>Cesium学习测试</title>
<style>
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
Cesium.Ion.defaultAccessToken = 'your token';
//需要去官网上申请，没有球不会出现
var viewer = new Cesium.Viewer("cesiumContainer");
</script>
</body>
- ③
django后端相关代码
# urls.py 配置一个路径
from django.urls import path
from .views import *
app_name = "GIS"
urlpatterns = [
path("", test),
]
# views.py 给定一个视图
from django.shortcuts import render
def test(request):
return render(request, "GIS/test.html")
- ④ 运行
python manage.py runserver
1：动画控件，可控制播放速度等
2：图标和版权归属展示等
3：时间轴，通常配合动画控件使用
4：查询地址工具，定位到对应的位置
5：首页位置，点击返回默认位置
6：视角选择，2D和3D
7：图层选择，相关地图服务的显示
8：帮助按钮
9：全屏显示
10：主要的地图显示位置
三、隐藏 Cesium 相关控件
Viewer是Cesium各种方法的入口，有两个参数如下：
var viewer = new Cesium.Viewer("id",options);
// id 为标签中的id对应的name，如<div id="CC"></div>，那么此处则变为：
// var viewer = new Cesium.Viewer("CC",options);
optinons包含成员的方法与方法详见【viewer】
3.1 相关 JS 隐藏
// false 关闭
// "cesiumContainer" 定义显示div中的id，可替换为自己的
var viewer = new Cesium.Viewer("cesiumContainer", {
animation: false, // 动画小组件
baseLayerPicker: false,
// 底图组件，选择三维数字地球的底图（imagery and terrain）
fullscreenButton: false, // 全屏组件
vrButton: false, // VR模式
geocoder: false, // 地理编码（搜索）组件
homeButton: false, // 首页，点击之后将视图跳转到默认视角
infoBox: false, // 信息框
sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
selectionIndicator: false, //是否显示选取指示器组件
timeline: false, // 时间轴
navigationHelpButton: false, // 帮助提示，如何操作数字地球。
// 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，
// 则该提示不显示，否则为false。
navigationInstructionsInitiallyVisible: false,
});
// 隐藏logo
viewer._cesiumWidget._creditContainer.style.display = "none";
3.2 相关 CSS 隐藏
/* 通过CSS控制组件显隐及位置 */
.cesium-viewer-toolbar,
/* 右上角按钮组 */
.cesium-viewer-animationContainer,
/* 左下角动画控件 */
.cesium-viewer-timelineContainer,
/* 时间线 */
.cesium-viewer-bottom
/* logo信息 */
.cesium-viewer-fullscreenContainer
/* 全屏按钮 */
.cesium-widget-credits
/* 隐藏logo图片 */
{
display: none !important;
}
两种方式任选其一即可，推荐使用
JS方法
3.3 显示访问的FPS
viewer.scene.debugShowFramesPerSecond = true; // 默认为False
四、Cesium 坐标系与坐标转换
4.1 常用坐标系
4.1.1 屏幕坐标系（单位：像素）
-
二维笛卡尔坐标
① 通过鼠标点击直接获取的坐标，平面坐标
② 通过new Cesium.Cartesian2(x, y)创建 -
三维笛卡尔坐标
① 世界坐标系坐标，空间直角坐标
② 通过new Cesium.Cartesian3(x, y, z)创建
③ 用来做空间位置的变化如平移、旋转和缩放等等
4.1.2 地理坐标（单位：弧度）
- 地理坐标
① 通过new Cesium.Cartographic(longitude, latitude, height)创建
②longitude, latitude, height即经度、纬度和高程 - 弧度与度之间的转换
① 角度转弧度： π/180×角度
② 弧度变角度：180/π×弧度
import math
def radian_to_degree(radian):
"""弧度转度"""
return 180 * radian / math.pi
def degree_to_radian(degree):
"""度转弧度"""
return math.pi * degree / 180
print("1弧度等于多少度",radian_to_degree(1))
print("1度等于多少弧度",degree_to_radian(1))
1弧度等于多少度 57.29577951308232
1度等于多少弧度 0.017453292519943295
4.1.3 经纬度坐标（单位：弧度）
测绘中常用地理经纬度坐标系，默认是WGS-84坐标系
经度：东正西负，[-180°,180°]
经度：北正南负，[-90°,90°]
// Cesuim中要得到经纬度首先需要计算为弧度，再进行转换
// 经纬度转弧度
Cesium.Math.toRadians(degrees)
// 弧度转经纬度
Cesium.Math.toDegrees(radians)
4.1.4 Web墨卡托
4.2 坐标转换
4.2.1 经纬度坐标转世界坐标
Cesium提供了两种方式将经纬度坐标转成世界坐标
// 方法1：直接转换
var cartesian3 = Cesium.Cartesian3.fromDegrees(lng, lat, height);
// 方法2：借助ellipsoid对象，先转换成弧度再转换
var cartographic = Cesium.Cartographic.fromDegrees(lng, lat, height); //单位：度，度，米
var cartesian3 = ellipsoid.cartographicToCartesian(cartographic);
4.2.2 世界坐标转经纬度
// 3.笛卡尔空间直角坐标系转为地理坐标（弧度制）
// var cartographic = Cesium.Cartographic.fromCartesian(cartesian3); // 方法1
var cartographic = ellipsoid.cartesianToCartographic(cartesian3); // 方法2
// 4.地理坐标（弧度制）转为经纬度坐标
var lat = Cesium.Math.toDegrees(cartographic.latitude);
var lng = Cesium.Math.toDegrees(cartographic.longitude);
var height = cartographic.height;
4.2.3 弧度和经纬度互转
// 经纬度转弧度：
Cesium.Math.toRadians(degrees)
// 弧度转经纬度：
Cesium.Math.toDegrees(radians)
4.2.4 屏幕坐标和世界坐标互转
- 屏幕转世界坐标
// 2.二维屏幕坐标转为三维笛卡尔空间直角坐标（世界坐标）
var cartesian3 = scene.globe.pick(
viewer.camera.getPickRay(windowPostion),
scene
);
注意这里屏幕坐标一定要在球上，否则生成出的cartesian对象是undefined
- 世界坐标转屏幕坐标
// 三维笛卡尔空间直角坐标（世界坐标）转为二维屏幕坐标
// 结果是Cartesian2对象，取出X,Y即为屏幕坐标。
windowPostion = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
scene,cartesian3 );
4.2.5 Web墨卡托相关
摘录于：https://www.jianshu.com/p/5839f615bb94
/**
* @description: 经纬度（度）坐标转web墨卡托坐标
* @param {Cartographic} degrees
* @return {Cartesian3} web墨卡托坐标
*/
degreesToWebMercatorProjection(degrees) {
var webMercatorProjection = new Cesium.WebMercatorProjection();
return webMercatorProjection.project(this.degreesToCartesian(degrees))
}
/**
* @description: web墨卡托转经纬度（度）
* @param {Cartesian3} cartesian
* @return {Cartographic} 经纬度（度）坐标
*/
degreesFromWebMercatorProjection(cartesian) {
var webMercatorProjection = new Cesium.WebMercatorProjection();
return this.degreesFromCartographic(webMercatorProjection.unproject(cartesian))
}
/**
* @description: 经纬度（弧度）坐标转web墨卡托坐标
* @param {Cartographic} cartographic
* @return {Cartesian3} web墨卡托坐标
*/
cartographicToWebMercatorProjection(cartographic) {
var webMercatorProjection = new Cesium.WebMercatorProjection();
return webMercatorProjection.project(cartographic)
}
/**
* @description: web墨卡托转经纬度（弧度）
* @param {Cartesian3} cartesian
* @return {Cartographic} 弧度坐标
*/
cartographicFromWebMercatorProjection(cartesian) {
var webMercatorProjection = new Cesium.WebMercatorProjection();
return webMercatorProjection.unproject(cartesian)
}
/**
* @description: web墨卡托转世界坐标
* @param {Cartesian3} cartesian
* @return {Cartographic} 世界坐标
*/
cartesianFromWebMercatorProjection(cartesian) {
var webMercatorProjection = new Cesium.WebMercatorProjection();
return this.cartesianFromCartographic(webMercatorProjection.unproject(cartesian))
}
文中都是根据
GIS李胜 公众号的Cesium的开发篇，看老师的【免费视频】来进行入门学习还是挺快的。虽然他的公众号博客其实已经写的很好了，为了我自己能够快速查询故借鉴了一下，希望大家多去公众号阅读原文。我将以Django后端框架来学习和开发相关的Cesium应用，学习途中未知太多，错误也很多。仅以博客记录，能够尽量避免下次不犯同样的错，即使出现了，也有快速解决的方法。
扫一扫
1560
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
