541 lines
22 KiB
HTML
541 lines
22 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;
|
||
}
|
||
.menu-container {
|
||
position: absolute;
|
||
top: 30px;
|
||
left: 100px;
|
||
z-index: 9999;
|
||
}
|
||
</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 class="menu-container">
|
||
<el-row type="flex" :gutter="20">
|
||
<el-col :span="24">
|
||
<div class="grid-content bg-purple">
|
||
<el-breadcrumb separator="/">
|
||
<el-breadcrumb-item>cesium</el-breadcrumb-item>
|
||
<el-breadcrumb-item>绘制功能</el-breadcrumb-item>
|
||
<el-breadcrumb-item>点、线、面</el-breadcrumb-item>
|
||
</el-breadcrumb>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row type="flex" :gutter="20">
|
||
<el-col :span="24">
|
||
<div class="grid-content bg-purple">
|
||
<cesiumComponent id="cesium" ref="refCesium" />
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row type="flex" :gutter="20">
|
||
<el-col :span="24">
|
||
<div class="grid-content bg-purple">
|
||
<el-button type="primary" @click="draw">绘制path</el-button>
|
||
|
||
<el-button type="primary" @click="clearDrawEntities"
|
||
>清空</el-button
|
||
>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div
|
||
id="tooltip"
|
||
style="
|
||
position: absolute;
|
||
z-index: 999;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
color: rgb(255, 255, 255);
|
||
font-size: 12px;
|
||
padding: 5px;
|
||
border-radius: 5px;
|
||
"
|
||
>
|
||
左键点击选点，右键也可取消
|
||
</div>
|
||
<div id="cesiumContainer"></div>
|
||
</div>
|
||
|
||
<script>
|
||
Cesium.Ion.defaultAccessToken =
|
||
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
|
||
|
||
new Vue({
|
||
el: "#app",
|
||
data() {
|
||
return {
|
||
polygonPointsEntities: [], // 区域的点位集合
|
||
polygonPointsEntitiesLine: [], // 连线的多点
|
||
polygonPointsEntitiesEntity: [], // 区域查询所画线实体
|
||
pointPositionList: [], // 画点的经纬度集合
|
||
editPoints: [], // 编辑时编辑点集合,删除点用
|
||
isAddStatus: false, // 是否是添加区域
|
||
isEditStatus: false, // 是否是编辑区域
|
||
|
||
isAddPoint: false, //是否新添加了点
|
||
|
||
spaceArea: "", // 区域范围坐标
|
||
polygonEntity: null, // 区域面实体
|
||
isSaved: false, // 保存状态
|
||
viewer: null, // 地图实例化
|
||
curBillboard: null, // 当前高亮的广告牌
|
||
entityMarkerList: [], // 地图上点的资源实体对象集合
|
||
companyPoint: [], // 企业上点数据
|
||
// 标注图层
|
||
// tdtImgAnnoLayerProvider:
|
||
// new Cesium.WebMapTileServiceImageryProvider({
|
||
// url: "http://t6.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=b6b320a7ccfabfdc30536330efc07f3e",
|
||
// layer: "tdtImgAnnoLayer",
|
||
// style: "default",
|
||
// format: "image/jpeg",
|
||
// tileMatrixSetID: "GoogleMapsCompatible",
|
||
// }),
|
||
_viewer: undefined,
|
||
tempEntities: [],
|
||
pathPoints: [],
|
||
testPoints: [
|
||
[113.093199, 23.085135, 200],
|
||
[113.39194, 23.478276, 200],
|
||
[114.078169, 23.330206, 200],
|
||
[114.141996, 22.994195, 200],
|
||
[113.699341, 22.817996, 200],
|
||
],
|
||
};
|
||
},
|
||
mounted() {
|
||
this.initMap(113.666612, 22.249119, 40000);
|
||
},
|
||
|
||
methods: {
|
||
// 初始化地图（根据当前企业所在位置初始化中心位置）
|
||
initMap(longitude, latitude, height) {
|
||
Cesium.Ion.defaultAccessToken =
|
||
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNjJkN2ZjNC04OTYxLTQyZmItYmM5Mi0yOTgyMzQxMjEzZGQiLCJpZCI6MTg5NTIsInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJhc3ciLCJnYyIsInByIl0sImlhdCI6MTU4OTYyODkwMn0.ibuCu13_8ksLkyimUHR4e1LrWRb-_sfZrPMhSWSzJBg";
|
||
let viewer = new Cesium.Viewer("cesiumContainer", {
|
||
baseLayerPicker: false,
|
||
geocoder: false, // 是否显示地名查找控件
|
||
homeButton: false,
|
||
sceneModePicker: false, // 是否显示投影方式控件
|
||
selectionIndicator: false,
|
||
baseLayerPicker: false, // 是否显示图层选择控件
|
||
navigationHelpButton: false, // 是否显示帮助信息控件
|
||
animation: false, // 是否显示动画控件
|
||
// creditContainer: "credit",
|
||
timeline: true, // 是否显示时间线控件
|
||
fullscreenButton: false,
|
||
vrButton: false,
|
||
infoBox: false, // 是否显示点击要素之后显示的信息
|
||
// requestRenderMode: true, // 启用请求渲染模式
|
||
scene3DOnly: true, // 每个几何实例将只能以3D渲染以节省GPU内存
|
||
sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式 Cesium.SceneMode
|
||
// imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
|
||
// url: "http://t0.tianditu.gov.cn/img_w/wmts?tk=b6b320a7ccfabfdc30536330efc07f3e",
|
||
// layer: "img",
|
||
// style: "default",
|
||
// tileMatrixSetID: "w",
|
||
// format: "tiles",
|
||
// maximumLevel: 18,
|
||
// }),
|
||
});
|
||
this._viewer = viewer;
|
||
viewer.imageryLayers.removeAll();
|
||
viewer.imageryLayers.addImageryProvider(
|
||
new Cesium.ArcGisMapServerImageryProvider({
|
||
url: "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
|
||
// url: "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetGray/MapServer",
|
||
// url: "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunityENG/MapServer",
|
||
})
|
||
);
|
||
viewer._cesiumWidget._creditContainer.style.display = "none";
|
||
viewer.scene.globe.depthTestAgainstTerrain = true; // 图标被遮挡
|
||
viewer.scene.fxaa = false;
|
||
viewer.scene.globe.enableLighting = true;
|
||
|
||
// 设置后当相机高度达到设置的最大和最小高度时将不再放大和缩小
|
||
// viewer.scene.screenSpaceCameraController.minimumZoomDistance = 0; // 相机的高度的最小值
|
||
// viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000000; // 相机高度的最大值
|
||
|
||
// 天地图矢量标注图层
|
||
// this.tdtImgAnnoLayer = viewer.imageryLayers.addImageryProvider(
|
||
// this.tdtImgAnnoLayerProvider
|
||
// );
|
||
// viewer.imageryLayers.raiseToTop(this.tdtImgAnnoLayer);
|
||
|
||
// 定位到中心点
|
||
viewer.camera.flyTo({
|
||
destination: Cesium.Cartesian3.fromDegrees(
|
||
Number(longitude),
|
||
Number(latitude),
|
||
height
|
||
),
|
||
orientation: {
|
||
heading: Cesium.Math.toRadians(20.0),
|
||
pitch: Cesium.Math.toRadians(-35.0),
|
||
roll: 0.0,
|
||
},
|
||
});
|
||
// 关闭双击事件
|
||
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
|
||
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
|
||
);
|
||
// this.addMouseListener(); // 地图鼠标移动事件
|
||
// this.addMouseClick(); // 地图鼠标左键单击事件
|
||
// this.addMouseRightClick(); // 地图鼠标右键点击事件
|
||
// this.addMouseLeftDown(); // 地图鼠标左键压下事件
|
||
|
||
window.testPath = this.drawPath(this.testPoints);
|
||
// window.testPolyline = this.drawPolyline(this.testPoints);
|
||
window.viewer = viewer;
|
||
viewer.clock.shouldAnimate = true;
|
||
},
|
||
initTimeline(points) {
|
||
let viewer = this._viewer;
|
||
if (points.length > 0) {
|
||
var start = Cesium.JulianDate.fromDate(new Date("2022-10-9"));
|
||
var stop = Cesium.JulianDate.addSeconds(
|
||
start,
|
||
points.length - 1,
|
||
new Cesium.JulianDate()
|
||
);
|
||
this.start = start;
|
||
this.stop = stop;
|
||
//Make sure viewer is at the desired time.
|
||
viewer.clock.startTime = start.clone();
|
||
viewer.clock.stopTime = stop.clone();
|
||
viewer.clock.currentTime = start.clone();
|
||
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //Loop at the end
|
||
viewer.clock.multiplier = 0.06;
|
||
//Set timeline to simulation bounds
|
||
viewer.timeline.zoomTo(start, stop);
|
||
viewer.clock.shouldAnimate = true;
|
||
}
|
||
},
|
||
/**
|
||
* 根据类型绘制对象
|
||
* @param type point、polyline、polygon
|
||
*/
|
||
draw() {
|
||
//绘制点
|
||
let that = this;
|
||
let viewer = this._viewer;
|
||
let tempEntities = this.tempEntities;
|
||
let position = [];
|
||
let tempPoints = [];
|
||
|
||
// 开启深度检测
|
||
viewer.scene.globe.depthTestAgainstTerrain = true;
|
||
let handler = new Cesium.ScreenSpaceEventHandler(
|
||
viewer.scene.canvas
|
||
);
|
||
document.getElementsByTagName("body").item(0).style.cursor =
|
||
"crosshair";
|
||
|
||
//鼠标移动事件
|
||
handler.setInputAction(function (movement) {
|
||
let tooltip = document.getElementById("tooltip");
|
||
tooltip.style.display = "block";
|
||
tooltip.style.left = movement.endPosition.x + 15 + "px";
|
||
tooltip.style.top = movement.endPosition.y + "px";
|
||
let car3 = viewer.scene.pickPosition(movement.endPosition);
|
||
//当鼠标在一些Entity上时，car3会是undefined
|
||
// if (tempPoints.length > 0 && Cesium.defined(car3)) {
|
||
// // if (!window.lineEntity || that.isAddPoint) {
|
||
// // window.lineEntity = that.drawPath([...tempPoints, car3]);
|
||
// // that.isAddPoint = false;
|
||
// // }
|
||
// // let positions = window.lineEntity.polyline.positions.getValue();
|
||
|
||
// // positions[positions.length - 1].x = car3.x;
|
||
// // positions[positions.length - 1].y = car3.y;
|
||
// // positions[positions.length - 1].z = car3.z;
|
||
// // window.lineEntity.polyline.positions =
|
||
// // new Cesium.CallbackProperty(function () {
|
||
// // return positions;
|
||
// // }, false);
|
||
// if (window.lineEntity) {
|
||
// viewer.entities.remove(window.lineEntity);
|
||
// }
|
||
// window.lineEntity = that.drawPath([...tempPoints, car3]);
|
||
// }
|
||
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
||
//左键点击操作
|
||
handler.setInputAction(function (click) {
|
||
that.isAddPoint = true;
|
||
//调用获取位置信息的接口
|
||
let ray = viewer.camera.getPickRay(click.position);
|
||
position = viewer.scene.globe.pick(ray, viewer.scene);
|
||
|
||
//将笛卡尔三维坐标转为地图坐标（弧度）
|
||
var cartographic =
|
||
viewer.scene.globe.ellipsoid.cartesianToCartographic(position);
|
||
var lat_String = Cesium.Math.toDegrees(
|
||
cartographic.latitude
|
||
).toFixed(6);
|
||
var log_String = Cesium.Math.toDegrees(
|
||
cartographic.longitude
|
||
).toFixed(6);
|
||
|
||
tempPoints.push([Number(log_String), Number(lat_String), 200]);
|
||
// tempPoints.push(position);
|
||
let tempLength = tempPoints.length;
|
||
//调用绘制点的接口
|
||
// let point = that.drawPoint(tempPoints[tempPoints.length - 1]);
|
||
// tempEntities.push(point);
|
||
if (tempLength > 1) {
|
||
let pointline = that.drawPath(tempPoints);
|
||
window.pointline = pointline;
|
||
window.tempPoints = tempPoints;
|
||
tempEntities.push(pointline);
|
||
} else {
|
||
// tooltip.innerHTML = "请绘制下一个点，右键结束";
|
||
}
|
||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||
//右键点击操作
|
||
handler.setInputAction(function (click) {
|
||
tempPoints = [];
|
||
handler.destroy(); //关闭事件句柄
|
||
handler = null;
|
||
viewer.entities.remove(window.lineEntity);
|
||
window.lineEntity = null;
|
||
let tooltip = document.getElementById("tooltip");
|
||
tooltip.style.display = "none";
|
||
document.getElementsByTagName("body").item(0).style.cursor =
|
||
"default";
|
||
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
||
},
|
||
drawPoint(position, config) {
|
||
let viewer = this._viewer;
|
||
let config_ = config ? config : {};
|
||
return viewer.entities.add({
|
||
name: "点几何对象",
|
||
position: position,
|
||
point: {
|
||
color: Cesium.Color.SKYBLUE,
|
||
pixelSize: 10,
|
||
outlineColor: Cesium.Color.YELLOW,
|
||
outlineWidth: 3,
|
||
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
||
},
|
||
});
|
||
},
|
||
drawPath(coords, config_) {
|
||
let viewer = this._viewer;
|
||
|
||
// 设置点的时间
|
||
Cesium.Math.setRandomNumberSeed(3);
|
||
//Set bounds of our simulation time
|
||
const start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
|
||
const stop = Cesium.JulianDate.addSeconds(
|
||
start,
|
||
coords.length - 1,
|
||
new Cesium.JulianDate()
|
||
);
|
||
//Make sure viewer is at the desired time.
|
||
viewer.clock.startTime = start.clone();
|
||
viewer.clock.stopTime = stop.clone();
|
||
viewer.clock.currentTime = start.clone();
|
||
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //Loop at the end
|
||
viewer.clock.multiplier = 0.2;
|
||
//Set timeline to simulation bounds
|
||
viewer.timeline.zoomTo(start, stop);
|
||
// viewer.clock.shouldAnimate = true;
|
||
|
||
// 插值
|
||
const positionProperty = this.getPositionProperty(coords, start);
|
||
let orientation = new Cesium.VelocityOrientationProperty(
|
||
positionProperty
|
||
);
|
||
//监听时间变化,关键代码。
|
||
// viewer.clock.onTick.addEventListener(function (e) {
|
||
// if (viewer.clock.shouldAnimate === true) {
|
||
// let ori = orientation.getValue(viewer.clock.currentTime); //获取偏向角
|
||
// let center = position.getValue(viewer.clock.currentTime); //获取位置
|
||
// let transform = Cesium.Matrix4.fromRotationTranslation(
|
||
// Cesium.Matrix3.fromQuaternion(ori),
|
||
// center
|
||
// ); //将偏向角转为3*3矩阵，利用实时点位转为4*4矩阵
|
||
// viewer.camera.lookAtTransform(
|
||
// transform,
|
||
// new Cesium.Cartesian3(-100, 0, 0)
|
||
// ); //将相机向后面放一点
|
||
// }
|
||
// });
|
||
|
||
return viewer.entities.add({
|
||
show: true,
|
||
//Set the entity availability to the same interval as the simulation time.
|
||
availability: new Cesium.TimeIntervalCollection([
|
||
new Cesium.TimeInterval({
|
||
start: start,
|
||
stop: stop,
|
||
}),
|
||
]),
|
||
//使用计算的位置
|
||
position: positionProperty,
|
||
//Automatically compute orientation based on position movement.
|
||
orientation: orientation,
|
||
//Load the Cesium plane model to represent the entity
|
||
model: {
|
||
show: true,
|
||
uri: "./SampleData/models/CesiumAir/Cesium_Air.glb",
|
||
minimumPixelSize: 64,
|
||
},
|
||
|
||
//Show the path as a pink line sampled in 1 second increments.
|
||
path: {
|
||
resolution: 1,
|
||
material: new Cesium.PolylineGlowMaterialProperty({
|
||
glowPower: 0.1,
|
||
color: Cesium.Color.YELLOW,
|
||
}),
|
||
width: 10,
|
||
},
|
||
});
|
||
},
|
||
getPositionProperty(coords, start) {
|
||
// 给轨迹点关联时间和插值
|
||
const property = new Cesium.SampledPositionProperty();
|
||
// property.setInterpolationOptions({
|
||
// // interpolationDegree: 5,
|
||
// // interpolationAlgorithm: Cesium.LagrangePolynomialApproximation, //设置插值算法
|
||
|
||
// interpolationDegree: 2,
|
||
// interpolationAlgorithm: Cesium.HermitePolynomialApproximation,
|
||
// });
|
||
for (var i = 0; i < coords.length; i++) {
|
||
var time = Cesium.JulianDate.addSeconds(
|
||
start,
|
||
i,
|
||
new Cesium.JulianDate()
|
||
);
|
||
var position = Cesium.Cartesian3.fromDegrees(
|
||
coords[i][0],
|
||
coords[i][1],
|
||
coords[i][2]
|
||
);
|
||
property.addSample(time, position);
|
||
|
||
this._viewer.entities.add({
|
||
position: position,
|
||
point: {
|
||
color: Cesium.Color.SKYBLUE,
|
||
pixelSize: 10,
|
||
outlineColor: Cesium.Color.YELLOW,
|
||
outlineWidth: 3,
|
||
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
||
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
||
},
|
||
});
|
||
}
|
||
// this.position = property;
|
||
// this.orientation = new Cesium.VelocityOrientationProperty(property)
|
||
return property;
|
||
},
|
||
drawPolyline(coords, config_) {
|
||
let viewer = this._viewer;
|
||
let config = config_ ? config_ : {};
|
||
// 设置点的时间
|
||
Cesium.Math.setRandomNumberSeed(3);
|
||
//Set bounds of our simulation time
|
||
const start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
|
||
const stop = Cesium.JulianDate.addSeconds(
|
||
start,
|
||
coords.length - 1,
|
||
new Cesium.JulianDate()
|
||
);
|
||
//Make sure viewer is at the desired time.
|
||
viewer.clock.startTime = start.clone();
|
||
viewer.clock.stopTime = stop.clone();
|
||
viewer.clock.currentTime = start.clone();
|
||
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //Loop at the end
|
||
viewer.clock.multiplier = 0.2;
|
||
//Set timeline to simulation bounds
|
||
viewer.timeline.zoomTo(start, stop);
|
||
// viewer.clock.shouldAnimate = true;
|
||
|
||
// 插值
|
||
const positionProperty = this.getPositionProperty(coords, start);
|
||
let orientation = new Cesium.VelocityOrientationProperty(
|
||
positionProperty
|
||
);
|
||
|
||
return viewer.entities.add({
|
||
name: "线几何对象",
|
||
availability: new Cesium.TimeIntervalCollection([
|
||
new Cesium.TimeInterval({
|
||
start: start,
|
||
stop: stop,
|
||
}),
|
||
]),
|
||
position: positionProperty,
|
||
//Automatically compute orientation based on position movement.
|
||
orientation: orientation,
|
||
polyline: {
|
||
// positions: positionProperty,
|
||
// positions: new Cesium.CallbackProperty(function () {
|
||
// return positions;
|
||
// }, false),
|
||
width: config.width ? config.width : 5.0,
|
||
material: new Cesium.PolylineGlowMaterialProperty({
|
||
color: config.color
|
||
? new Cesium.Color.fromCssColorString(config.color)
|
||
: Cesium.Color.GOLD,
|
||
}),
|
||
depthFailMaterial: new Cesium.PolylineGlowMaterialProperty({
|
||
color: config.color
|
||
? new Cesium.Color.fromCssColorString(config.color)
|
||
: Cesium.Color.GOLD,
|
||
}),
|
||
// clampToGround: true,
|
||
},
|
||
});
|
||
},
|
||
/**
|
||
* 清除实体
|
||
*/
|
||
clearDrawEntities() {
|
||
let viewer = this._viewer;
|
||
this.tempEntities = [];
|
||
// 清除之前的实体
|
||
viewer.entities.removeAll();
|
||
},
|
||
},
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|