181 lines
7.0 KiB
HTML
181 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<meta name="xbsj-labels" content="Earth示例">
|
||
</meta>
|
||
<title>分析-压平</title>
|
||
<!-- 0 引入js文件：XbsjEarth.js和vue.min.js -->
|
||
<script src="./XbsjCesium/Cesium.js"></script>
|
||
<link rel="stylesheet" href="./XbsjCesium/Widgets/widgets.css">
|
||
<script src="./js/XbsjEarth/XbsjEarth.js"></script>
|
||
<script src="./js/vue2710.js"></script>
|
||
<style>
|
||
html,
|
||
body {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0px;
|
||
padding: 0px;
|
||
}
|
||
|
||
.box span {
|
||
display: block;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.defultbtn {
|
||
display: inline-block;
|
||
text-align: center;
|
||
min-width: 60px;
|
||
height: 38px;
|
||
padding: 0 10px;
|
||
line-height: 38px;
|
||
border-radius: 100px;
|
||
border: 1px solid #C9C9C9;
|
||
background-color: #FFF;
|
||
color: #555;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.defultbtn:hover {
|
||
background-color: #b3daf8;
|
||
}
|
||
|
||
.btnon {
|
||
background-color: #1E9FFF;
|
||
color: #fff;
|
||
border: 1px solid #1E9FFF;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="vueApp" style="width: 100%; height: 100%; background: grey; position: relative;">
|
||
<earth-comp></earth-comp>
|
||
</div>
|
||
|
||
<script>
|
||
// 1 创建Earth的vue组件
|
||
var EarthComp = {
|
||
template: `
|
||
<div style="width: 100%; height: 100%">
|
||
<div ref="earthContainer" style="width: 100%; height: 100%">
|
||
</div>
|
||
<div class="box" style="position: absolute; left: 18px; top: 18px; color: white; border-radius: 25px;min-width:200px; font-size:24px; font-family: 宋体;">
|
||
<div class="defultbtn" :class="{'btnon':polygonEditing}" @click="polygonEditing = !polygonEditing">多边形编辑</div>
|
||
</div>
|
||
</div>
|
||
`,
|
||
data() {
|
||
return {
|
||
polygonEditing: true,
|
||
_earth: undefined, // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
|
||
};
|
||
},
|
||
// 1.1 资源创建
|
||
mounted() {
|
||
// 1.1.1 创建地球
|
||
var earth = new XE.Earth(this.$refs.earthContainer);
|
||
|
||
// 1.1.2 场景配置
|
||
earth.sceneTree.root = {
|
||
"children": [
|
||
{
|
||
"czmObject": {
|
||
"name": "默认离线影像",
|
||
"xbsjType": "Imagery",
|
||
"xbsjImageryProvider": {
|
||
"createTileMapServiceImageryProvider": {
|
||
"url":'./js/XbsjCesium/Assets/Textures/NaturalEarthII',
|
||
"fileExtension": 'jpg',
|
||
},
|
||
"type": "createTileMapServiceImageryProvider"
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"czmObject": {
|
||
"xbsjType": "Tileset",
|
||
"name": "三维瓦片1x",
|
||
"url": "./SampleData/Cesium3DTiles/dayanta/tileset.json",
|
||
"xbsjFlattenGuid": "93916e9b-82dd-4a56-b15e-27303b08e781",
|
||
"xbsjClippingPlanes": {},
|
||
"skipLevelOfDetail": false
|
||
}
|
||
},
|
||
{
|
||
"czmObject": {
|
||
"xbsjType": "FlattenedPolygonCollection",
|
||
"xbsjGuid": "93916e9b-82dd-4a56-b15e-27303b08e781",
|
||
"name": "压平多边形组1",
|
||
"polygons": [
|
||
{
|
||
"positions": [
|
||
1.9016970582304769, // 第一个点的经度，单位是弧度
|
||
0.5972442199495571, // 第一个点纬度，单位是弧度
|
||
1.901705173920893, // 第二个点的经度，单位是弧度
|
||
0.597244064486611, // 第二个点纬度，单位是弧度
|
||
1.9017051803683183,
|
||
0.5972514238789111,
|
||
1.90169684143085,
|
||
0.5972513210237236
|
||
],
|
||
"height": 426 // 高度
|
||
}
|
||
]
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
var tileset = earth.sceneTree.root.children[1].czmObject;
|
||
|
||
var flat = earth.sceneTree.root.children[2].czmObject;
|
||
flat.polygons[0].showHelper = false; // 是否开启线框显示，编辑状态下，不要开启，二者显示有影响
|
||
flat.polygons[0].editing = true; // 是否开启编辑状态
|
||
|
||
// 设置相机位置
|
||
// earth.camera.position.toString()和earth.camera.toAllJSONStr()这两个方法可获取相机位置
|
||
earth.camera.position = [1.901702007648937, 0.5972368795713086, 495.4360416207723];
|
||
earth.camera.rotation = [6.283185307179421, -0.7855047653582576, 6.283185307179586];
|
||
|
||
// 1.1.5 数据绑定
|
||
// disposers 用来收集资源销毁函数，并在析构时自动调用！
|
||
{
|
||
this._disposers = [];
|
||
this._disposers.push(XE.MVVM.bind(this, 'polygonEditing', flat.polygons[0], 'editing'));
|
||
}
|
||
|
||
this._earth = earth;
|
||
|
||
// only for Debug
|
||
window.earth = earth;
|
||
window.tileset = tileset;
|
||
},
|
||
// 1.2 资源销毁
|
||
beforeDestroy() {
|
||
// vue程序销毁时，需要清理相关资源
|
||
this._earth = this._earth && this._earth.destroy();
|
||
this._disposers.forEach(d => d());
|
||
this._disposers.length = 0;
|
||
},
|
||
}
|
||
|
||
// 2 创建vue程序
|
||
// XE.ready()用来加载Cesium.js等相关资源
|
||
XE.ready().then(() => {
|
||
var app = new Vue({
|
||
el: '#vueApp',
|
||
components: {
|
||
EarthComp,
|
||
},
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |