481 lines
20 KiB
HTML
481 lines
20 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="addDem()">复位</el-button>
|
|||
|
|
<el-button type="primary" @click="draw('point')"
|
|||
|
|
>绘制点</el-button
|
|||
|
|
>
|
|||
|
|
<el-button type="primary" @click="draw('polyline')"
|
|||
|
|
>绘制线</el-button
|
|||
|
|
>
|
|||
|
|
<el-button type="primary" @click="draw('polygon')"
|
|||
|
|
>绘制面</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 type="module">
|
|||
|
|
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: [],
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.initMap(119.666612, 34.249119, 40000);
|
|||
|
|
// if (this.parentRow.id) {
|
|||
|
|
// this.getGridDetail();
|
|||
|
|
// }
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
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: false, // 是否显示时间线控件
|
|||
|
|
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._cesiumWidget._creditContainer.style.display = "none";
|
|||
|
|
viewer.scene.globe.depthTestAgainstTerrain = false; // 图标被遮挡
|
|||
|
|
viewer.scene.fxaa = false;
|
|||
|
|
|
|||
|
|
// 设置后当相机高度达到设置的最大和最小高度时将不再放大和缩小
|
|||
|
|
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 0; // 相机的高度的最小值
|
|||
|
|
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000000; // 相机高度的最大值
|
|||
|
|
|
|||
|
|
// 天地图矢量标注图层
|
|||
|
|
this.tdtImgAnnoLayer = viewer.imageryLayers.addImageryProvider(
|
|||
|
|
this.tdtImgAnnoLayerProvider
|
|||
|
|
);
|
|||
|
|
viewer.imageryLayers.raiseToTop(this.tdtImgAnnoLayer);
|
|||
|
|
|
|||
|
|
// 定位到中心点
|
|||
|
|
// this.flyTo([Number(longitude), Number(latitude)], height,0);
|
|||
|
|
|
|||
|
|
// 关闭双击事件
|
|||
|
|
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
|
|||
|
|
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
|
|||
|
|
);
|
|||
|
|
// this.addMouseListener(); // 地图鼠标移动事件
|
|||
|
|
// this.addMouseClick(); // 地图鼠标左键单击事件
|
|||
|
|
// this.addMouseRightClick(); // 地图鼠标右键点击事件
|
|||
|
|
// this.addMouseLeftDown(); // 地图鼠标左键压下事件
|
|||
|
|
|
|||
|
|
viewer.camera.setView({
|
|||
|
|
destination : new Cesium.Cartesian3(-2356756.15965061, 5772015.66176657, 3168029.199415899),
|
|||
|
|
orientation: {
|
|||
|
|
heading : 0.01658837002956659, // east, default value is 0.0 (north)
|
|||
|
|
pitch : -1.0356538269507363, // default value (looking down)
|
|||
|
|
roll : 6.283178308645091 // default value
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 根据类型绘制对象
|
|||
|
|
* @param type point、polyline、polygon
|
|||
|
|
*/
|
|||
|
|
draw(type) {
|
|||
|
|
//绘制点
|
|||
|
|
let that = this;
|
|||
|
|
let viewer = this._viewer;
|
|||
|
|
let tempEntities = this.tempEntities;
|
|||
|
|
let position = [];
|
|||
|
|
let tempPoints = [];
|
|||
|
|
|
|||
|
|
// 开启深度检测
|
|||
|
|
viewer.scene.globe.depthTestAgainstTerrain = false;
|
|||
|
|
let handler = new Cesium.ScreenSpaceEventHandler(
|
|||
|
|
viewer.scene.canvas
|
|||
|
|
);
|
|||
|
|
document.getElementsByTagName("body").item(0).style.cursor =
|
|||
|
|
"crosshair";
|
|||
|
|
switch (type) {
|
|||
|
|
case "point":
|
|||
|
|
//鼠标移动事件
|
|||
|
|
handler.setInputAction(function (movement) {
|
|||
|
|
let tooltip = document.getElementById("tooltip");
|
|||
|
|
tooltip.style.display = "none";
|
|||
|
|
tooltip.style.left = movement.endPosition.x + 15 + "px";
|
|||
|
|
tooltip.style.top = movement.endPosition.y + 5 + "px";
|
|||
|
|
|
|||
|
|
if (window.pt) {
|
|||
|
|
let cartesian3 = viewer.scene.pickPosition(
|
|||
|
|
movement.endPosition
|
|||
|
|
);
|
|||
|
|
window.pt._position = new Cesium.CallbackProperty(
|
|||
|
|
function () {
|
|||
|
|
return cartesian3;
|
|||
|
|
},
|
|||
|
|
false
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|||
|
|
// 监听鼠标左键
|
|||
|
|
handler.setInputAction(function (movement) {
|
|||
|
|
// 从相机位置通过windowPosition 世界坐标中的像素创建一条射线。返回Cartesian3射线的位置和方向。
|
|||
|
|
let ray = viewer.camera.getPickRay(movement.position);
|
|||
|
|
// 查找射线与渲染的地球表面之间的交点。射线必须以世界坐标给出。返回Cartesian3对象
|
|||
|
|
position = viewer.scene.globe.pick(ray, viewer.scene);
|
|||
|
|
let point = that.drawPoint(position);
|
|||
|
|
window.pt = point;
|
|||
|
|
tempEntities.push(point);
|
|||
|
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|||
|
|
|
|||
|
|
// 左键双击停止绘制
|
|||
|
|
handler.setInputAction(function () {
|
|||
|
|
handler.destroy(); //关闭事件句柄
|
|||
|
|
handler = null;
|
|||
|
|
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
|
|||
|
|
// 右击单击停止绘制
|
|||
|
|
handler.setInputAction(function () {
|
|||
|
|
handler.destroy(); //关闭事件句柄
|
|||
|
|
handler = null;
|
|||
|
|
document.getElementsByTagName("body").item(0).style.cursor =
|
|||
|
|
"default";
|
|||
|
|
let tooltip = document.getElementById("tooltip");
|
|||
|
|
tooltip.style.display = "none";
|
|||
|
|
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
|||
|
|
break;
|
|||
|
|
case "polyline":
|
|||
|
|
//鼠标移动事件
|
|||
|
|
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.drawPolyline([
|
|||
|
|
...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);
|
|||
|
|
}
|
|||
|
|
}, 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);
|
|||
|
|
tempPoints.push(position);
|
|||
|
|
let tempLength = tempPoints.length;
|
|||
|
|
//调用绘制点的接口
|
|||
|
|
let point = that.drawPoint(tempPoints[tempPoints.length - 1]);
|
|||
|
|
tempEntities.push(point);
|
|||
|
|
if (tempLength > 1) {
|
|||
|
|
let pointline = that.drawPolyline([
|
|||
|
|
tempPoints[tempPoints.length - 2],
|
|||
|
|
tempPoints[tempPoints.length - 1],
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
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);
|
|||
|
|
break;
|
|||
|
|
case "polygon":
|
|||
|
|
//鼠标移动事件
|
|||
|
|
handler.setInputAction(function (movement) {},
|
|||
|
|
Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|||
|
|
//左键点击操作
|
|||
|
|
handler.setInputAction(function (click) {
|
|||
|
|
//调用获取位置信息的接口
|
|||
|
|
let ray = viewer.camera.getPickRay(click.position);
|
|||
|
|
position = viewer.scene.globe.pick(ray, viewer.scene);
|
|||
|
|
tempPoints.push(position);
|
|||
|
|
let tempLength = tempPoints.length;
|
|||
|
|
//调用绘制点的接口
|
|||
|
|
let point = that.drawPoint(position);
|
|||
|
|
tempEntities.push(point);
|
|||
|
|
if (tempLength > 1) {
|
|||
|
|
let pointline = that.drawPolyline([
|
|||
|
|
tempPoints[tempPoints.length - 2],
|
|||
|
|
tempPoints[tempPoints.length - 1],
|
|||
|
|
]);
|
|||
|
|
tempEntities.push(pointline);
|
|||
|
|
} else {
|
|||
|
|
// tooltip.innerHTML = "请绘制下一个点，右键结束";
|
|||
|
|
}
|
|||
|
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|||
|
|
//右键点击操作
|
|||
|
|
handler.setInputAction(function (click) {
|
|||
|
|
let cartesian = viewer.camera.pickEllipsoid(
|
|||
|
|
click.position,
|
|||
|
|
viewer.scene.globe.ellipsoid
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
if (cartesian) {
|
|||
|
|
let tempLength = tempPoints.length;
|
|||
|
|
if (tempLength < 3) {
|
|||
|
|
alert("请选择3个以上的点再执行闭合操作命令");
|
|||
|
|
} else {
|
|||
|
|
//闭合最后一条线
|
|||
|
|
let pointline = that.drawPolyline([
|
|||
|
|
tempPoints[tempPoints.length - 1],
|
|||
|
|
tempPoints[0],
|
|||
|
|
]);
|
|||
|
|
tempEntities.push(pointline);
|
|||
|
|
that.drawPolygon(tempPoints);
|
|||
|
|
tempEntities.push(tempPoints);
|
|||
|
|
handler.destroy(); //关闭事件句柄
|
|||
|
|
handler = null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
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,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
drawPolyline(positions, config_) {
|
|||
|
|
let viewer = this._viewer;
|
|||
|
|
if (positions.length < 1) return;
|
|||
|
|
let config = config_ ? config_ : {};
|
|||
|
|
return viewer.entities.add({
|
|||
|
|
name: "线几何对象",
|
|||
|
|
polyline: {
|
|||
|
|
// positions: positions,
|
|||
|
|
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,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
drawPolygon(positions, config_) {
|
|||
|
|
let viewer = this._viewer;
|
|||
|
|
if (positions.length < 2) return;
|
|||
|
|
let config = config_ ? config_ : {};
|
|||
|
|
return viewer.entities.add({
|
|||
|
|
name: "面几何对象",
|
|||
|
|
polygon: {
|
|||
|
|
hierarchy: positions,
|
|||
|
|
material: config.color
|
|||
|
|
? new Cesium.Color.fromCssColorString(config.color).withAlpha(
|
|||
|
|
0.2
|
|||
|
|
)
|
|||
|
|
: new Cesium.Color.fromCssColorString("#FFD700").withAlpha(
|
|||
|
|
0.2
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 清除实体
|
|||
|
|
*/
|
|||
|
|
clearDrawEntities() {
|
|||
|
|
let viewer = this._viewer;
|
|||
|
|
this.tempEntities = [];
|
|||
|
|
// 清除之前的实体
|
|||
|
|
const entitys = viewer.entities._entities._array;
|
|||
|
|
let length = entitys.length;
|
|||
|
|
// 倒叙遍历防止实体减少之后entitys[f]不存在
|
|||
|
|
for (let f = length - 1; f >= 0; f--) {
|
|||
|
|
if (
|
|||
|
|
entitys[f]._name &&
|
|||
|
|
(entitys[f]._name === "点几何对象" ||
|
|||
|
|
entitys[f]._name === "线几何对象" ||
|
|||
|
|
entitys[f]._name === "面几何对象")
|
|||
|
|
) {
|
|||
|
|
viewer.entities.remove(entitys[f]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|