From 374c78e8727a50a3153c0ad7a263efca6fc68c98 Mon Sep 17 00:00:00 2001
From: WX <1377869194@qq.com>
Date: 星期四, 10 八月 2023 13:08:27 +0800
Subject: [PATCH] 经纬度格网
---
src/components/mouseMove.vue | 234 +++++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 221 insertions(+), 13 deletions(-)
diff --git a/src/components/mouseMove.vue b/src/components/mouseMove.vue
index dd1461f..10e6ab1 100644
--- a/src/components/mouseMove.vue
+++ b/src/components/mouseMove.vue
@@ -1,16 +1,17 @@
<template>
- <div
- class="mouseBox"
- @setMouseMove="setMouseMove"
- >
- <div class="earthImage"></div>
- <div class="earthLable">缁忓害 : </div>
- <div class="earthLable"> {{ longitude }}</div>
- <div class="earthLable">绾害 : </div>
- <div class="earthLable"> {{ latitude }}</div>
- <div class="earthLable">鍒嗚鲸鐜� : </div>
- <div class="earthLable"> {{ rate }}</div>
- <div class="earthLable"> m/px</div>
+ <div class="mouseBox" @setMouseMove="setMouseMove">
+ <div
+ class="earthImage"
+ :class="{ active: gridIsshow }"
+ @click="gridSwitch"
+ ></div>
+ <div class="earthLable">缁忓害 :</div>
+ <div class="earthLable">{{ longitude }}</div>
+ <div class="earthLable">绾害 :</div>
+ <div class="earthLable">{{ latitude }}</div>
+ <div class="earthLable">鍒嗚鲸鐜� :</div>
+ <div class="earthLable">{{ rate }}</div>
+ <div class="earthLable">m/px</div>
</div>
</template>
@@ -26,6 +27,17 @@
const longitude = ref("0.00");
const latitude = ref("0.00");
const rate = ref("0.00");
+let entitiesObj = reactive({
+ lonLine: [],
+ latLine: [],
+});
+let gridIsshow = ref(false);
+let levelArray = [
+ 0, 40000000, 20000000, 10000000, 5000000, 2000000, 1000000, 500000, 250000,
+ 200000, 100000, 50000, 17000, 9000, 5000, 2000, 1000, 500, 200, 100, 50, 25,
+ 10, 0,
+];
+let heightlevel = "";
const setMouseMove = (res) => {
let handlerPoint = new SmartEarth.Cesium.ScreenSpaceEventHandler(
window.Viewer.scene.canvas
@@ -78,6 +90,195 @@
}
}, SmartEarth.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
};
+const gridSwitch = () => {
+ gridIsshow.value = !gridIsshow.value;
+ if (gridIsshow.value) {
+ grid(10);
+ // getHeight();
+ // createPrimitives();
+ } else {
+ gridDel();
+ }
+};
+const getHeight = () => {
+ let removeListener = Viewer.camera.changed.addEventListener(() => {
+ // 褰撳墠楂樺害
+ let height = Viewer.camera.positionCartographic.height;
+ heightlevel = getLevel(height);
+ console.log(heightlevel);
+ if (heightlevel == 6) {
+ gridDel();
+ grid(5);
+ }
+ // if (heightlevel <= 6) {
+ // gridDel();
+ // grid(10);
+ // }
+ if (heightlevel == 8) {
+ gridDel();
+ grid(1);
+ }
+ });
+};
+const getLevel = (height) => {
+ for (var i = 1, len = levelArray.length; i < len - 1; i++) {
+ if (height >= (levelArray[i] + levelArray[i + 1]) / 2) {
+ return i;
+ }
+ }
+ return levelArray.length - 1;
+};
+const createPrimitives = (degree) => {
+ // let ps = [];
+ // for (let longitude = -180; longitude <= 180; longitude += 10) {
+ // ps.push(
+ // Cesium.Cartesian3.fromDegreesArray([
+ // longitude,
+ // -90,
+ // longitude,
+ // 0,
+ // longitude,
+ // 90,
+ // ])
+ // );
+ // }
+ // console.log(ps);
+ // let polylineGeometry = new Cesium.PolylineGeometry({
+ // positions: ps,
+ // width: 5,
+ // id: "polylineGeometry",
+ // });
+ // Viewer.scene.primitives.add(
+ // new Cesium.Primitive({
+ // geometryInstances: new Cesium.GeometryInstance({
+ // geometry: polylineGeometry,
+ // }),
+ // // vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
+ // appearance: new Cesium.EllipsoidSurfaceAppearance({
+ // material: Cesium.Material.fromType("Stripe"),
+ // }),
+ // })
+ // );
+ var GridImagery = new Cesium.GridImageryProvider();
+ var imageryLayers = Viewer.imageryLayers;
+ var GridImageryLayer = imageryLayers.addImageryProvider(GridImagery); // 娣诲姞缃戞牸鍥惧眰
+ imageryLayers.raiseToTop(GridImageryLayer); // 灏嗙綉鏍煎浘灞傜疆椤�
+};
+const grid = (degree) => {
+ const entities = Viewer.entities;
+ for (let longitude = -180; longitude <= 180; longitude += degree) {
+ console.log(
+ Cesium.Cartesian3.fromDegreesArray([
+ longitude,
+ -90,
+ longitude,
+ 0,
+ longitude,
+ 90,
+ ])
+ );
+ let text = "";
+ if (longitude === 0) {
+ text = "0";
+ }
+ text += longitude === 0 ? "" : "" + longitude + "掳";
+ if (longitude === -180) {
+ text = "";
+ }
+ let obj = entities.add({
+ position: Cesium.Cartesian3.fromDegrees(longitude, 0),
+ polyline: {
+ positions: Cesium.Cartesian3.fromDegreesArray([
+ longitude,
+ -90,
+ longitude,
+ 0,
+ longitude,
+ 90,
+ ]),
+ width: 4.0,
+ material: new Cesium.Color.fromCssColorString("#c8b284"),
+ clampToGround: true, //寮�鍚创鍦�
+ },
+ label: {
+ text: text,
+ verticalOrigin: Cesium.VerticalOrigin.LEFT,
+ font: "16px sans-serif",
+ fillColor: new Cesium.Color.fromCssColorString("#000"),
+ outlineWidth: "6px sans-serif", // 瀛椾綋澶栧湀绾垮搴︼紙鍚屾牱涔熸湁棰滆壊鍙缃級
+ outlineColor: new Cesium.Color.fromCssColorString("#000"),
+ // 杩欓噷璁剧疆浜嗗氨涓嶄細琚伄鐩栦簡锛岃涓鸿礋鍊煎垯鍦ㄦ洿涓婂眰
+ eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
+ },
+ });
+ entitiesObj.lonLine.push(obj);
+ }
+ let langS = [];
+ for (let longitude = -180; longitude <= 180; longitude += 5) {
+ langS.push(longitude);
+ }
+ //姣忛殧10璇荤粯鍒朵竴鏉＄含搴︾嚎鍜岀含搴︽爣娉�,鑷繁鎺у埗闂撮殧
+ for (let lat = -80; lat <= 80; lat += degree) {
+ let text = "";
+ text += "" + lat + "掳";
+ if (lat === 0) {
+ text = "";
+ }
+ // console.log(lat, "---lat");
+ let obj = entities.add({
+ position: Cesium.Cartesian3.fromDegrees(0, lat),
+ polyline: {
+ positions: Cesium.Cartesian3.fromDegreesArray(
+ langS
+ .map((long) => {
+ return [long, lat].join(",");
+ })
+ .join(",")
+ .split(",")
+ .map((item) => Number(item))
+ ),
+ width: 4.0,
+ material: new Cesium.Color.fromCssColorString("#c8b284"),
+ clampToGround: true, //寮�鍚创鍦�
+ },
+ label: {
+ text: text,
+ font: "18px sans-serif",
+ fillColor: new Cesium.Color.fromCssColorString("#000"),
+ outlineWidth: 6, // 瀛椾綋澶栧湀绾垮搴︼紙鍚屾牱涔熸湁棰滆壊鍙缃級
+ outlineColor: new Cesium.Color.fromCssColorString("#000"),
+ verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 鍨傜洿浣嶇疆
+ pixelOffset: new Cesium.Cartesian2(0, 15), // 涓績浣嶇疆
+ // 杩欓噷璁剧疆浜嗗氨涓嶄細琚伄鐩栦簡锛岃涓鸿礋鍊煎垯鍦ㄦ洿涓婂眰
+ eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
+ },
+ });
+ entitiesObj.latLine.push(obj);
+ }
+ console.log(entitiesObj);
+ // 鎶楅敮榻�
+ if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
+ //鍒ゆ柇鏄惁鏀寔鍥惧儚娓叉煋鍍忕礌鍖栧鐞�
+ Viewer.resolutionScale = window.devicePixelRatio;
+ }
+ //寮�鍚姉閿娇
+ Viewer.scene.fxaa = true;
+ Viewer.scene.postProcessStages.fxaa.enabled = true;
+};
+const gridDel = () => {
+ if (entitiesObj.lonLine.length > 0) {
+ entitiesObj.lonLine.forEach((e) => {
+ Viewer.entities.remove(e);
+ });
+ entitiesObj.lonLine = [];
+ }
+ if (entitiesObj.latLine.length > 0) {
+ entitiesObj.latLine.forEach((e) => {
+ Viewer.entities.remove(e);
+ });
+ entitiesObj.latLine = [];
+ }
+};
onMounted(() => {
window.setMouseMove = setMouseMove;
// const handleMouseMove =
@@ -103,6 +304,7 @@
background: url("../assets/img/褰㈢姸 9.png") no-repeat;
background-size: 100% 100%;
margin-left: 10px;
+ cursor: pointer;
}
.earthLable {
font-size: 16px;
@@ -112,5 +314,11 @@
line-height: 5px;
margin-left: 10px;
}
+ .active {
+ background-color: #171e2e;
+ border: 1px solid;
+ border-image: linear-gradient(47deg, #397bc9, #77a5cd, #397bc9) 1 1;
+ box-shadow: 0px 0px 6px 0px #080c13, 0px 7px 8px 0px rgba(38, 47, 71, 0.68);
+ }
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3