fix: BUG修改
This commit is contained in:
kun
parent
fda7ebccb0
commit
99ba081400
@ -2,8 +2,8 @@
|
||||
NODE_ENV = 'development'
|
||||
|
||||
# 本地环境接口地址(/api/index.ts文件中使用)
|
||||
VITE_API_URL = 'http://192.168.34.155:6677'
|
||||
# VITE_API_URL = 'http://jxjzw.zhgdyun.com:6677'
|
||||
# VITE_API_URL = 'http://192.168.34.155:6677'
|
||||
VITE_API_URL = 'http://jxjzw.zhgdyun.com:6677'
|
||||
VITE_WPAPI_URL = "http://182.90.224.147:8081"
|
||||
# VITE_API_URL = "http://182.90.224.147:6688"
|
||||
|
||||
|
||||
11
package-lock.json
generated
11
package-lock.json
generated
@ -55,6 +55,7 @@
|
||||
"vue-router": "^4.1.6",
|
||||
"vue3-scale-box": "^0.1.9",
|
||||
"vue3-seamless-scroll": "^1.2.0",
|
||||
"vue3-sfc-loader": "^0.8.4",
|
||||
"vuedraggable": "^4.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -16057,6 +16058,11 @@
|
||||
"throttle-debounce": "^3.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/vue3-sfc-loader": {
|
||||
"version": "0.8.4",
|
||||
"resolved": "https://registry.npmmirror.com/vue3-sfc-loader/-/vue3-sfc-loader-0.8.4.tgz",
|
||||
"integrity": "sha512-eziaIrk/N9f9OCpyFEkR6vMsZUHcF5mQslXjffwcb5Iq6EuU74QrlpBeJqA04MvAGT7f5O8la2v9k3NtQnJb3Q=="
|
||||
},
|
||||
"node_modules/vuedraggable": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-4.1.0.tgz",
|
||||
@ -29149,6 +29155,11 @@
|
||||
"throttle-debounce": "^3.0.1"
|
||||
}
|
||||
},
|
||||
"vue3-sfc-loader": {
|
||||
"version": "0.8.4",
|
||||
"resolved": "https://registry.npmmirror.com/vue3-sfc-loader/-/vue3-sfc-loader-0.8.4.tgz",
|
||||
"integrity": "sha512-eziaIrk/N9f9OCpyFEkR6vMsZUHcF5mQslXjffwcb5Iq6EuU74QrlpBeJqA04MvAGT7f5O8la2v9k3NtQnJb3Q=="
|
||||
},
|
||||
"vuedraggable": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-4.1.0.tgz",
|
||||
|
||||
@ -67,6 +67,7 @@
|
||||
"vue-router": "^4.1.6",
|
||||
"vue3-scale-box": "^0.1.9",
|
||||
"vue3-seamless-scroll": "^1.2.0",
|
||||
"vue3-sfc-loader": "^0.8.4",
|
||||
"vuedraggable": "^4.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { createApp } from "vue";
|
||||
import { createApp, getCurrentInstance } from "vue";
|
||||
/**
|
||||
* Vue3组件示例化为Popup的DOM
|
||||
*
|
||||
@ -9,8 +9,8 @@ import { createApp } from "vue";
|
||||
export function initVue3Popup(comp: any, para: any) {
|
||||
const vNodeDom = document.createElement("div");
|
||||
document.body.appendChild(vNodeDom);
|
||||
|
||||
const vNode = createApp(comp, { ...para }); // vue2中可使用extend
|
||||
vNode.mount(vNodeDom);
|
||||
console.log(vNode._container);
|
||||
return vNode._container;
|
||||
}
|
||||
|
||||
@ -4,17 +4,35 @@
|
||||
<span>设备添加</span>
|
||||
<el-icon size="16" color="#fff" @click="closeDiv"><Close /></el-icon>
|
||||
</div>
|
||||
<div class="operate-btn">
|
||||
<el-button type="primary" @click="drawPoint">点</el-button>
|
||||
</div>
|
||||
<div class="addHttpMqttServicePage">
|
||||
<CodeMirror
|
||||
v-model:code="form.script"
|
||||
v-model:code="code"
|
||||
dark
|
||||
:codeStyle="{ width: '100%', height: '200px', fontSize: '16px' }"
|
||||
:disabled="false"
|
||||
:extensions="extensions"
|
||||
@ready="onReady"
|
||||
@change="onChange"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
<!-- <codemirror
|
||||
v-model="code"
|
||||
placeholder="Code goes here..."
|
||||
:style="{ height: '400px' }"
|
||||
:autofocus="true"
|
||||
:indent-with-tab="true"
|
||||
:tab-size="2"
|
||||
:extensions="extensions"
|
||||
@ready="onReady"
|
||||
@change="onChange"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
<component :is="previewComp"></component> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -26,14 +44,85 @@ import * as Cesium from "mars3d-cesium";
|
||||
//导入mars3d主库
|
||||
import "mars3d/dist/mars3d.css";
|
||||
import * as mars3d from "mars3d";
|
||||
import { ref, watch, onMounted, onUnmounted } from "vue";
|
||||
import { defineAsyncComponent, ref, shallowRef, watch, onMounted, onUnmounted } from "vue";
|
||||
import * as Vue from "vue";
|
||||
// import { Codemirror } from "vue-codemirror";
|
||||
import { javascript } from "@codemirror/lang-javascript";
|
||||
import { vue } from "@codemirror/lang-vue";
|
||||
import { oneDark } from "@codemirror/theme-one-dark";
|
||||
import { loadModule } from "vue3-sfc-loader";
|
||||
import { initVue3Popup } from "@/utils/file-util";
|
||||
import QueryPopup from "./query-popup.vue";
|
||||
import OutsidePopup from "http://jxjzw.zhgdyun.com:9001/wisdomsitezw/655c756d12b3a489008940c9.vue";
|
||||
const code = ref("");
|
||||
const previewComp = shallowRef();
|
||||
const extensions = [vue(), oneDark];
|
||||
import CodeMirror from "@/components/CodeMirror/index.vue";
|
||||
const props = defineProps(["mapInstance"]);
|
||||
const props = defineProps(["mapInstance", "graphicInstance"]);
|
||||
const emits = defineEmits(["hiddenConfim"]);
|
||||
const form = ref({
|
||||
script: ""
|
||||
});
|
||||
let map: any = props.mapInstance;
|
||||
let graphicLayer: any = props.graphicInstance;
|
||||
const addRandomGraphicByCount = () => {
|
||||
const graphicImg = new mars3d.graphic.DivGraphic({
|
||||
// position: [117.077462, 31.657745, 60],
|
||||
position: [113.933005, 22.518904, 60],
|
||||
style: {
|
||||
html: ` <div class="mars3d-camera-content">
|
||||
<img class="mars3d-camera-img" src="${
|
||||
new URL("@/assets/images/Mars3DImg/icon/camera.svg", import.meta.url).href
|
||||
}" >
|
||||
</div>
|
||||
<div class="mars3d-camera-line" ></div>
|
||||
<div class="mars3d-camera-point"></div>
|
||||
`,
|
||||
offsetX: -16,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000)
|
||||
}
|
||||
// popup: `${code.value}`,
|
||||
// popupOptions: {
|
||||
// offsetY: -170, // 显示Popup的偏移值,是DivGraphic本身的像素高度值
|
||||
// template: `<div class="marsBlackPanel animation-spaceInDown">
|
||||
// <div class="marsBlackPanel-text">{content}</div>
|
||||
// <span class="mars3d-popup-close-button closeButton" >×</span>
|
||||
// </div>`,
|
||||
// horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
// verticalOrigin: Cesium.VerticalOrigin.CENTER
|
||||
// }
|
||||
});
|
||||
// const comp = () => import("http://jxjzw.zhgdyun.com:9001/wisdomsitezw/655c756d12b3a489008940c9.vue");
|
||||
// console.log(comp);
|
||||
graphicImg.bindPopup((event: any) => {
|
||||
const attr = event.graphic.attr || {};
|
||||
if (!attr) {
|
||||
return;
|
||||
}
|
||||
const dom = initVue3Popup(OutsidePopup, attr);
|
||||
return dom;
|
||||
});
|
||||
graphicLayer.addGraphic(graphicImg);
|
||||
};
|
||||
// 绘制点
|
||||
const drawPoint = () => {
|
||||
graphicLayer.startDraw({
|
||||
type: "point",
|
||||
style: {
|
||||
pixelSize: 12,
|
||||
color: "#3388ff",
|
||||
label: {
|
||||
// 不需要文字时，去掉label配置即可
|
||||
text: "可以同时支持文字",
|
||||
font_size: 20,
|
||||
color: "#ffffff",
|
||||
outline: true,
|
||||
outlineColor: "#000000",
|
||||
pixelOffsetY: -20
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
const closeDiv = () => {
|
||||
emits("hiddenConfim");
|
||||
};
|
||||
@ -49,9 +138,34 @@ const onFocus = (viewUpdate: any) => {
|
||||
};
|
||||
const onBlur = (viewUpdate: any) => {
|
||||
console.log("blur:", viewUpdate);
|
||||
console.log(code.value, "6666666666777777777");
|
||||
try {
|
||||
const options = {
|
||||
moduleCache: {
|
||||
vue: Vue
|
||||
},
|
||||
async getFile() {
|
||||
return code.value;
|
||||
},
|
||||
addStyle(textContent) {
|
||||
const style = Object.assign(document.createElement("style"), {
|
||||
textContent
|
||||
});
|
||||
const ref = document.head.getElementsByTagName("style")[0] || null;
|
||||
document.head.insertBefore(style, ref);
|
||||
}
|
||||
};
|
||||
const comp = defineAsyncComponent(() => loadModule("./textPopup.vue", options));
|
||||
console.log(comp);
|
||||
previewComp.value = comp;
|
||||
addRandomGraphicByCount();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
console.log(map, "66666");
|
||||
console.log(QueryPopup, "777888");
|
||||
});
|
||||
onUnmounted(() => {
|
||||
map = null;
|
||||
@ -83,7 +197,7 @@ onUnmounted(() => {
|
||||
border: 1px solid #008aff70;
|
||||
border-radius: 2px !important;
|
||||
background-color: rgba(23, 49, 71, 0.8);
|
||||
width: 300px;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
box-shadow: 0 4px 15px 1px #02213bb3;
|
||||
animation: fadeIn 1s;
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
<span class="mars3d-popup-close-button mars3d-popup-color closeButton" @click="closePopup"> × </span>
|
||||
|
||||
<div class="mars3d-popup-content-wrapper mars3d-popup-background">
|
||||
<div style="color: white">sss123456</div>
|
||||
<div class="mars3d-template-titile">
|
||||
<a :href="'https://www.amap.com/detail/' + props.id" target="_black">{{ props.name }}</a>
|
||||
</div>
|
||||
|
||||
@ -127,7 +127,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 设备添加弹框 -->
|
||||
<EquipmentAdd :mapInstance="map" v-if="equipmentShow" @hiddenConfim="equipmentShow = false" />
|
||||
<EquipmentAdd :mapInstance="map" :graphicInstance="graphicLayer" v-if="equipmentShow" @hiddenConfim="equipmentShow = false" />
|
||||
<!-- 图上量算弹框 -->
|
||||
<MapMeasurement :mapInstance="map" v-if="measurementShow" @hiddenConfim="measurementShow = false" />
|
||||
<!-- 空间分析弹框 -->
|
||||
@ -975,10 +975,7 @@ const initMars3d = (option: any) => {
|
||||
});
|
||||
map.on(mars3d.EventType.cameraChanged, cameraChanged);
|
||||
// 创建覆盖物数据图层
|
||||
graphicLayer = new mars3d.layer.GraphicLayer({
|
||||
name: "POI查询",
|
||||
pid: 99 // 图层父级ID，一般图层管理中使用
|
||||
});
|
||||
graphicLayer = new mars3d.layer.GraphicLayer();
|
||||
graphicLayer.bindPopup((event: any) => {
|
||||
const attr = event.graphic.attr || {};
|
||||
if (!attr) {
|
||||
@ -994,7 +991,7 @@ const initMars3d = (option: any) => {
|
||||
getPointPosition();
|
||||
// 查询配置线效果
|
||||
getLineEffect();
|
||||
addRandomGraphicByCount();
|
||||
// addRandomGraphicByCount();
|
||||
};
|
||||
// 取区域内的随机点
|
||||
const randomPoint = (position: any) => {
|
||||
@ -1173,8 +1170,10 @@ const addRandomGraphicByCount = () => {
|
||||
const graphicImg = new mars3d.graphic.DivGraphic({
|
||||
position: [117.077462, 31.657745, 60],
|
||||
style: {
|
||||
html: ` <div class="mars3d-camera-content">
|
||||
<img class="mars3d-camera-img" src="@/assets/images/Mars3DImg/icon/camera.svg" >
|
||||
html: ` <div class="mars3d-camera-content">
|
||||
<img class="mars3d-camera-img" src="${
|
||||
new URL("@/assets/images/Mars3DImg/icon/camera.svg", import.meta.url).href
|
||||
}" >
|
||||
</div>
|
||||
<div class="mars3d-camera-line" ></div>
|
||||
<div class="mars3d-camera-point"></div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user