541 lines
21 KiB
HTML
541 lines
21 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-button
|
||
v-if="isEditStatus"
|
||
class="custom green button map-btn"
|
||
@click="editPoint"
|
||
>编辑范围</el-button
|
||
>
|
||
<el-button v-else class="custom green button map-btn" @click="addPoint"
|
||
>添加范围</el-button
|
||
>
|
||
<el-button class="custom green button map-btn" @click="savePoint"
|
||
>保存范围</el-button
|
||
>
|
||
</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, // 是否是编辑区域
|
||
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",
|
||
}),
|
||
};
|
||
},
|
||
mounted() {
|
||
this.initMap(119.666612, 34.249119, 40000);
|
||
// if (this.parentRow.id) {
|
||
// this.getGridDetail();
|
||
// }
|
||
},
|
||
|
||
methods: {
|
||
// 获取网格信息
|
||
getGridDetail() {
|
||
this.axios
|
||
.get(`${gridSettingManagement.detail}/${this.parentRow.id}`)
|
||
.then((res) => {
|
||
if (
|
||
res.data.returnCode === "0000000" &&
|
||
res.data.data.coordinate
|
||
) {
|
||
let path = [];
|
||
this.pointPositionList = res.data.data.coordinate.split(",");
|
||
this.pointPositionList.map((item) => {
|
||
path.push(Number(item));
|
||
});
|
||
this.polygonEntity = this.viewer.entities.add({
|
||
name: "polygon",
|
||
polygon: {
|
||
hierarchy: Cesium.Cartesian3.fromDegreesArray(path),
|
||
material: new Cesium.Color.fromCssColorString(
|
||
"#4296FF"
|
||
).withAlpha(0.4),
|
||
},
|
||
range: path,
|
||
});
|
||
this.isEditStatus = true;
|
||
}
|
||
});
|
||
},
|
||
|
||
// 保存范围
|
||
savePoint() {
|
||
let poinstArrString = this.pointPositionList.join(",");
|
||
let query = {
|
||
streetId: "12",
|
||
coordinate: poinstArrString,
|
||
};
|
||
this.axios
|
||
.post(gridSettingManagement.saveSpace, query)
|
||
.then((res) => {
|
||
if (res.data.returnCode === "0000000") {
|
||
this.$message({ type: "success", message: "保存成功！" });
|
||
this.$emit("hideDialog");
|
||
}
|
||
});
|
||
},
|
||
|
||
// 编辑范围
|
||
editPoint() {
|
||
this.polygonEntity.polygon.hierarchy._value.positions.forEach(
|
||
(item) => {
|
||
let cartesian = new Cesium.Cartesian3(
|
||
item.x,
|
||
item.y,
|
||
item.z,
|
||
item.z
|
||
);
|
||
let point = this.viewer.entities.add({
|
||
name: "gon_point",
|
||
position: cartesian,
|
||
point: {
|
||
color: Cesium.Color.WHITE,
|
||
pixelSize: 10,
|
||
outlineColor: Cesium.Color.BLACK,
|
||
outlineWidth: 1,
|
||
},
|
||
});
|
||
this.editPoints.push(point);
|
||
this.polygonPointsEntities.push(cartesian);
|
||
|
||
this.viewer.scene.screenSpaceCameraController.enableRotate = false;
|
||
this.viewer.scene.screenSpaceCameraController.enableZoom = false;
|
||
}
|
||
);
|
||
},
|
||
|
||
// 添加范围
|
||
addPoint() {
|
||
if (this.polygonEntity && !this.isSaved) {
|
||
this.$message({
|
||
type: "warning",
|
||
message: "请先保存勾画的范围!",
|
||
});
|
||
return;
|
||
}
|
||
this.isSaved = false;
|
||
this.isAddStatus = true;
|
||
},
|
||
|
||
// 初始化地图（根据当前企业所在位置初始化中心位置）
|
||
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;
|
||
this.viewer._cesiumWidget._creditContainer.style.display = "none";
|
||
this.viewer.scene.globe.depthTestAgainstTerrain = false; // 图标被遮挡
|
||
this.viewer.scene.fxaa = false;
|
||
|
||
// 设置后当相机高度达到设置的最大和最小高度时将不再放大和缩小
|
||
this.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 0; // 相机的高度的最小值
|
||
this.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000000; // 相机高度的最大值
|
||
|
||
// 天地图矢量标注图层
|
||
this.tdtImgAnnoLayer = this.viewer.imageryLayers.addImageryProvider(
|
||
this.tdtImgAnnoLayerProvider
|
||
);
|
||
this.viewer.imageryLayers.raiseToTop(this.tdtImgAnnoLayer);
|
||
|
||
// 定位到中心点
|
||
// this.flyTo([Number(longitude), Number(latitude)], height,0);
|
||
this.setQiantang();
|
||
|
||
// 关闭双击事件
|
||
this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
|
||
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
|
||
);
|
||
this.addMouseListener(); // 地图鼠标移动事件
|
||
this.addMouseClick(); // 地图鼠标左键单击事件
|
||
this.addMouseRightClick(); // 地图鼠标右键点击事件
|
||
this.addMouseLeftDown(); // 地图鼠标左键压下事件
|
||
},
|
||
|
||
// 设置区域范围
|
||
async setQiantang() {
|
||
let url = "https://geo.datav.aliyun.com/areas_v3/bound/320921.json";
|
||
let xiangshuiJson = await fetch(url).then((res) => res.json());
|
||
let pointArr = xiangshuiJson.features[0].geometry.coordinates[0][0];
|
||
let polygonArr = [];
|
||
for (let i = 0; i < pointArr.length; i++) {
|
||
polygonArr.push(pointArr[i][0]);
|
||
polygonArr.push(pointArr[i][1]);
|
||
}
|
||
// let materialPoline = colorRgba("#6495ED", 0.6);
|
||
let materialPoline = new Cesium.Color.fromCssColorString(
|
||
"#6495ED"
|
||
).withAlpha(0.6);
|
||
// 创建线实例
|
||
let polyline = {
|
||
type: "quyuPolyline",
|
||
polyline: {
|
||
positions: Cesium.Cartesian3.fromDegreesArray(polygonArr),
|
||
width: 6,
|
||
material: new Cesium.Color(
|
||
Number(materialPoline[0] / 255),
|
||
Number(materialPoline[1] / 255),
|
||
Number(materialPoline[2] / 255),
|
||
Number(materialPoline[3])
|
||
),
|
||
},
|
||
};
|
||
this.viewer.entities.add(polyline);
|
||
this.flyTo([Number(119.666612), Number(34.249119)], 100000, 0);
|
||
},
|
||
|
||
// 类数组转化
|
||
listToArray(likeArray) {
|
||
var ary = [];
|
||
try {
|
||
ary = Array.prototype.slice.call(likeArray);
|
||
} catch (e) {
|
||
for (var i = 0; i < likeArray.length; i++) {
|
||
ary[ary.length] = likeArray[i];
|
||
}
|
||
}
|
||
return ary;
|
||
},
|
||
|
||
// 鼠标左键压下事件
|
||
addMouseLeftDown() {
|
||
let that = this;
|
||
let currentPoint = null;
|
||
const handler = new Cesium.ScreenSpaceEventHandler(
|
||
that.viewer.scene.canvas
|
||
);
|
||
handler.setInputAction((event) => {
|
||
let windowPosition = event.position;
|
||
let pickedObject = that.viewer.scene.pick(windowPosition);
|
||
if (Cesium.defined(pickedObject)) {
|
||
let entity = pickedObject.id;
|
||
if (entity.name === "gon_point") {
|
||
currentPoint = entity;
|
||
}
|
||
}
|
||
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
|
||
// 对鼠标移动事件的监听
|
||
handler.setInputAction((event) => {
|
||
if (currentPoint) {
|
||
let cartesian = that.viewer.camera.pickEllipsoid(
|
||
event.startPosition,
|
||
that.viewer.scene.globe.ellipsoid
|
||
);
|
||
let points = [],
|
||
gon = null;
|
||
if (!cartesian) {
|
||
return;
|
||
}
|
||
|
||
currentPoint.position = cartesian;
|
||
|
||
for (let point of that.editPoints) {
|
||
points.push(point.position._value);
|
||
}
|
||
that.polygonPointsEntities = points;
|
||
that.polygonEntity.polygon.hierarchy =
|
||
new Cesium.CallbackProperty(() => {
|
||
return new Cesium.PolygonHierarchy(points);
|
||
}, false);
|
||
that.pointPositionList = that.getLolat(points);
|
||
}
|
||
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
||
|
||
// 对鼠标抬起事件的监听
|
||
handler.setInputAction((event) => {
|
||
currentPoint = null;
|
||
}, Cesium.ScreenSpaceEventType.LEFT_UP);
|
||
},
|
||
|
||
// cesium 笛卡尔坐标系转WGS84坐标系
|
||
getLolat(position) {
|
||
if (position) {
|
||
let gonPoints = [];
|
||
position.forEach((point, index) => {
|
||
var cartesian = new Cesium.Cartesian3(
|
||
point.x,
|
||
point.y,
|
||
point.z
|
||
);
|
||
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
|
||
var lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(
|
||
6
|
||
);
|
||
var lng = Cesium.Math.toDegrees(cartographic.longitude).toFixed(
|
||
6
|
||
);
|
||
var alt = cartographic.height;
|
||
gonPoints.push(lng);
|
||
gonPoints.push(lat);
|
||
});
|
||
return gonPoints;
|
||
} else {
|
||
return [];
|
||
}
|
||
},
|
||
|
||
// 鼠标右键点击事件
|
||
addMouseRightClick() {
|
||
let that = this;
|
||
that.viewer.screenSpaceEventHandler.setInputAction(function (
|
||
movement
|
||
) {
|
||
// 结束区域查询
|
||
that.isAddStatus = false;
|
||
for (let point of that.editPoints) {
|
||
// 去除白点
|
||
that.viewer.entities.remove(point);
|
||
}
|
||
|
||
let newpolygonPointsEntitiesLine = [];
|
||
// 闭合
|
||
newpolygonPointsEntitiesLine =
|
||
that.polygonPointsEntitiesLine.push(
|
||
that.polygonPointsEntitiesLine[0]
|
||
);
|
||
newpolygonPointsEntitiesLine = that.listToArray(
|
||
that.polygonPointsEntitiesLine
|
||
);
|
||
let polylineLast = that.viewer.entities.add({
|
||
name: "线几何对象",
|
||
polyline: {
|
||
positions: newpolygonPointsEntitiesLine,
|
||
width: 3,
|
||
material: new Cesium.PolylineGlowMaterialProperty({
|
||
color: Cesium.Color.GOLD,
|
||
}),
|
||
depthFailMaterial: new Cesium.PolylineGlowMaterialProperty({
|
||
color: Cesium.Color.GOLD,
|
||
}),
|
||
},
|
||
});
|
||
that.polygonPointsEntitiesEntity.push(polylineLast);
|
||
},
|
||
Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
||
},
|
||
|
||
// 鼠标左键点击事件
|
||
addMouseClick() {
|
||
let that = this;
|
||
that.viewer.screenSpaceEventHandler.setInputAction(function (
|
||
movement
|
||
) {
|
||
// 添加区域情况
|
||
if (that.isAddStatus) {
|
||
// 平面坐标(x,y)
|
||
let windowPosition = movement.position;
|
||
// 三维坐标（x,y,z）
|
||
let ellipsoid = that.viewer.scene.globe.ellipsoid;
|
||
let cartesian = that.viewer.camera.pickEllipsoid(
|
||
windowPosition,
|
||
that.viewer.scene.globe.ellipsoid
|
||
);
|
||
// 坐标转换:世界坐标转换为经纬度
|
||
let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
|
||
let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
|
||
let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
|
||
// 经度在前纬度在后
|
||
that.pointPositionList.push(lng.toFixed(6));
|
||
that.pointPositionList.push(lat.toFixed(6));
|
||
if (!cartesian) {
|
||
return;
|
||
}
|
||
// 实例化点实体
|
||
let point = that.viewer.entities.add({
|
||
name: "gon_point",
|
||
position: cartesian,
|
||
point: {
|
||
color: Cesium.Color.WHITE,
|
||
pixelSize: 10,
|
||
outlineColor: Cesium.Color.BLACK,
|
||
outlineWidth: 1,
|
||
},
|
||
});
|
||
// 存储点的实体，用于下图
|
||
that.editPoints.push(point);
|
||
that.polygonPointsEntities.push(cartesian);
|
||
that.polygonPointsEntitiesLine = that.listToArray(
|
||
that.polygonPointsEntities
|
||
);
|
||
if (that.editPoints.length > 0) {
|
||
if (that.polygonPointsEntitiesLine.length < 1) return;
|
||
let polyline = that.viewer.entities.add({
|
||
name: "线几何对象",
|
||
polyline: {
|
||
positions: that.polygonPointsEntitiesLine,
|
||
width: 3,
|
||
material: new Cesium.PolylineGlowMaterialProperty({
|
||
color: Cesium.Color.GOLD,
|
||
}),
|
||
depthFailMaterial:
|
||
new Cesium.PolylineGlowMaterialProperty({
|
||
color: Cesium.Color.GOLD,
|
||
}),
|
||
},
|
||
});
|
||
// 存储线的实体，用于下图
|
||
that.polygonPointsEntitiesEntity.push(polyline);
|
||
}
|
||
// 大于三个点开始画面
|
||
if (that.polygonPointsEntities.length >= 3) {
|
||
if (!that.polygonEntity) {
|
||
that.polygonEntity = that.viewer.entities.add({
|
||
name: "polygon",
|
||
polygon: {
|
||
hierarchy: new Cesium.CallbackProperty(() => {
|
||
return new Cesium.PolygonHierarchy(
|
||
that.polygonPointsEntities
|
||
);
|
||
}, false),
|
||
material: new Cesium.Color.fromCssColorString(
|
||
"#4296FF"
|
||
).withAlpha(0.4),
|
||
},
|
||
});
|
||
} else {
|
||
that.polygonEntity.polygon.hierarchy =
|
||
new Cesium.CallbackProperty(() => {
|
||
return new Cesium.PolygonHierarchy(
|
||
that.polygonPointsEntities
|
||
);
|
||
}, false);
|
||
}
|
||
}
|
||
}
|
||
},
|
||
Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||
},
|
||
|
||
// 鼠标移入事件
|
||
addMouseListener() {
|
||
let that = this;
|
||
const handler = new Cesium.ScreenSpaceEventHandler(
|
||
that.viewer.scene.canvas
|
||
);
|
||
handler.setInputAction(function (movement) {
|
||
if (that.isEditStatus || that.isAddStatus) {
|
||
document.getElementsByTagName("body").item(0).style.cursor =
|
||
"pointer";
|
||
} else {
|
||
document.getElementsByTagName("body").item(0).style.cursor =
|
||
"default";
|
||
}
|
||
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
||
},
|
||
|
||
// 地图移动
|
||
flyTo(coord = [116.405285, 40.123456], height = 450000, time = 0) {
|
||
this.viewer.camera.flyTo({
|
||
destination: Cesium.Cartesian3.fromDegrees(
|
||
coord[0],
|
||
coord[1],
|
||
height
|
||
),
|
||
orientation: {
|
||
heading: Cesium.Math.toRadians(0.0),
|
||
roll: 0.0,
|
||
},
|
||
duration: time,
|
||
});
|
||
},
|
||
},
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|