157 lines
5.4 KiB
HTML
157 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<!-- Use correct character set. -->
|
||
<meta charset="utf-8" />
|
||
<!-- Tell IE to use the latest, best version. -->
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
|
||
<meta
|
||
name="viewport"
|
||
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
|
||
/>
|
||
<title>Learning Cesium!</title>
|
||
<script src="./Build/Cesium/Cesium.js"></script>
|
||
<style>
|
||
@import url(./Build/Cesium/Widgets/widgets.css);
|
||
html,
|
||
body,
|
||
#app,
|
||
#cesiumContainer {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
#btn-box{
|
||
position: absolute;
|
||
top: 80px;
|
||
left:100px;
|
||
|
||
}
|
||
</style>
|
||
<!-- 引入样式 -->
|
||
<link rel="stylesheet" href="./js/elementui/index.css" />
|
||
<!-- import Vue before Element -->
|
||
<script src="./js/vue2710.js"></script>
|
||
<!-- import JavaScript -->
|
||
<script src="./js/elementui/index.js"></script>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<div id="cesiumContainer"></div>
|
||
<div id="btn-box">
|
||
<el-row>
|
||
<el-button @click="changeMaterial(1)">方式一：通过类型创建材质</el-button>
|
||
<el-button @click="changeMaterial(2)">方式二：创建一个默认材质</el-button>
|
||
<el-button @click="changeMaterial(3)">方式三：通过Fabric方式</el-button>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
Cesium.Ion.defaultAccessToken =
|
||
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
|
||
|
||
new Vue({
|
||
el: "#app",
|
||
data: {},
|
||
methods: {
|
||
initViewer() {
|
||
var viewer = new Cesium.Viewer("cesiumContainer", {
|
||
geocoder: false, //位置查找
|
||
homeButton: false, //视图返回初始位置
|
||
sceneModePicker: false, //视角选择器
|
||
// baseLayerPicker:false,//底图选择器
|
||
navigationHelpButton: false, //导航帮助按钮
|
||
animation: false, //动画控制器
|
||
// creditContainer:"credit",//版权显示
|
||
timeline: false, //时间线
|
||
fullscreenButton: false, //全屏控件
|
||
vrButton: false,
|
||
infoBox: false,
|
||
selectionIndicator: false,
|
||
});
|
||
window.viewer = viewer;
|
||
|
||
viewer.camera.setView({
|
||
destination: Cesium.Cartesian3.fromDegrees(113.331875,23.110038,10000000),
|
||
orientation: {
|
||
heading: Cesium.Math.toRadians(0.0),//使用弧度的形式
|
||
pitch: Cesium.Math.toRadians(-90.0),
|
||
roll: 0.0
|
||
}
|
||
})
|
||
this.addPolygonPrimitive();
|
||
},
|
||
addPolygonPrimitive(){
|
||
this.polygon = viewer.scene.primitives.add(new Cesium.Primitive({
|
||
geometryInstances : new Cesium.GeometryInstance({
|
||
// geometry: polygonWithHole,
|
||
geometry: new Cesium.PolygonGeometry({
|
||
polygonHierarchy : new Cesium.PolygonHierarchy(
|
||
Cesium.Cartesian3.fromDegreesArray([
|
||
112, 20.0,
|
||
115, 21.0,
|
||
117, 30.0,
|
||
115.0, 23.0,
|
||
114.0, 22.0
|
||
])
|
||
)
|
||
}),
|
||
attributes : {
|
||
// 通过attributes属性统一指定线段颜色
|
||
color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0, 0, 1.0))
|
||
},
|
||
id:"面要素"
|
||
}),
|
||
appearance : new Cesium.MaterialAppearance({
|
||
material : new Cesium.Material({
|
||
fabric : {
|
||
type : 'Color',
|
||
uniforms : {
|
||
color : new Cesium.Color(1.0, 1.0, 0.0, 1.0)
|
||
}
|
||
}
|
||
}),
|
||
faceForward : true
|
||
})
|
||
}));
|
||
|
||
},
|
||
changeMaterial(val){
|
||
switch(val){
|
||
case 1:{
|
||
// 方式一：通过类型创建材质
|
||
this.polygon.material = new Cesium.Material.fromType('Color');
|
||
this.polygon.material.uniforms.color = new Cesium.Color(1.0, 0.0, 0.0, 1.0);
|
||
break;
|
||
}
|
||
case 2:{
|
||
// 方式二：创建一个默认材质
|
||
this.polygon.material = new Cesium.Material(new Cesium.Color(1.0, 1.0, 0.0, 1.0))
|
||
break;
|
||
}
|
||
case 3:{
|
||
// 方式三：通过Fabric方式
|
||
this.polygon.material = new Cesium.Material({
|
||
fabric : {
|
||
type : 'Color',
|
||
uniforms : {
|
||
color : new Cesium.Color(1.0, 0.0, 1.0, 1.0)
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.initViewer();
|
||
},
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|