fix: BUG修改
This commit is contained in:
kun
parent
ef5db2eff3
commit
c217c8f020
@ -4,23 +4,23 @@
|
||||
<div class="layer-config" v-if="props.type == '底图'">
|
||||
<div class="property-column-item">
|
||||
<span>饱和度：{{ formData.saturation ? formData.saturation : 0 }}</span>
|
||||
<el-slider v-model="formData.saturation" :step="0.5" :max="5" :min="-5" @change="e => layerOperate(e, 'saturation')" />
|
||||
<el-slider v-model="formData.saturation" :step="0.5" :max="5" :min="-5" @input="e => layerOperate(e, 'saturation')" />
|
||||
</div>
|
||||
<div class="property-column-item">
|
||||
<span>亮度：{{ formData.brightness ? formData.brightness : 0 }}</span>
|
||||
<el-slider v-model="formData.brightness" :step="0.5" :max="10" :min="-10" @change="e => layerOperate(e, 'brightness')" />
|
||||
<el-slider v-model="formData.brightness" :step="0.5" :max="10" :min="-10" @input="e => layerOperate(e, 'brightness')" />
|
||||
</div>
|
||||
<div class="property-column-item">
|
||||
<span>对比度：{{ formData.contrast ? formData.contrast : 0 }}</span>
|
||||
<el-slider v-model="formData.contrast" :step="0.5" :max="10" :min="-10" @change="e => layerOperate(e, 'contrast')" />
|
||||
<el-slider v-model="formData.contrast" :step="0.5" :max="10" :min="-10" @input="e => layerOperate(e, 'contrast')" />
|
||||
</div>
|
||||
<div class="property-column-item">
|
||||
<span>色调：{{ formData.hue ? formData.hue : 0 }}</span>
|
||||
<el-slider v-model="formData.hue" :step="0.5" :max="2" :min="-2" @change="e => layerOperate(e, 'hue')" />
|
||||
<el-slider v-model="formData.hue" :step="0.5" :max="2" :min="-2" @input="e => layerOperate(e, 'hue')" />
|
||||
</div>
|
||||
<div class="property-column-item">
|
||||
<span>伽马校正：{{ formData.gamma ? formData.gamma : 0 }}</span>
|
||||
<el-slider v-model="formData.gamma" :step="0.5" :max="5" :min="-5" @change="e => layerOperate(e, 'gamma')" />
|
||||
<el-slider v-model="formData.gamma" :step="0.5" :max="5" :min="-5" @input="e => layerOperate(e, 'gamma')" />
|
||||
</div>
|
||||
<div class="property-row-item">
|
||||
<span>是否反色：</span>
|
||||
@ -28,7 +28,7 @@
|
||||
</div>
|
||||
<div class="property-row-item">
|
||||
<span>滤镜颜色：{{ formData.filterColor ? formData.filterColor : "" }}</span>
|
||||
<el-color-picker v-model="formData.filterColor" @change="e => layerOperate(e, 'filterColor')" />
|
||||
<el-color-picker v-model="formData.filterColor" @active-change="e => layerOperate(e, 'filterColor')" />
|
||||
</div>
|
||||
<div class="operate-btn">
|
||||
<el-button @click="editBaseMapsConfig">保存当前配置</el-button>
|
||||
@ -37,15 +37,15 @@
|
||||
<div class="layer-config" v-if="props.type == '白膜'">
|
||||
<div class="property-column-item">
|
||||
<span>偏移量lon经度：{{ formData.lng ? formData.lng : 0 }}</span>
|
||||
<el-slider v-model="formData.lng" :step="0.0001" :max="0.01" :min="-0.01" @change="e => albugineaOperate(e, 'lng')" />
|
||||
<el-slider v-model="formData.lng" :step="0.0001" :max="0.01" :min="-0.01" @input="e => albugineaOperate(e, 'lng')" />
|
||||
</div>
|
||||
<div class="property-column-item">
|
||||
<span>偏移量lat纬度：{{ formData.lat ? formData.lat : 0 }}</span>
|
||||
<el-slider v-model="formData.lat" :step="0.0001" :max="0.01" :min="-0.01" @change="e => albugineaOperate(e, 'lat')" />
|
||||
<el-slider v-model="formData.lat" :step="0.0001" :max="0.01" :min="-0.01" @input="e => albugineaOperate(e, 'lat')" />
|
||||
</div>
|
||||
<div class="property-column-item">
|
||||
<span>偏移量height高度(米)：{{ formData.alt ? formData.alt : 0 }}</span>
|
||||
<el-slider v-model="formData.alt" :step="10" :max="500" :min="-500" @change="e => albugineaOperate(e, 'alt')" />
|
||||
<el-slider v-model="formData.alt" :step="10" :max="500" :min="-500" @input="e => albugineaOperate(e, 'alt')" />
|
||||
</div>
|
||||
<!-- <div class="property-row-item">
|
||||
<span>是否反色：</span>
|
||||
@ -53,7 +53,7 @@
|
||||
</div> -->
|
||||
<div class="property-row-item">
|
||||
<span>白膜颜色：{{ formData.color ? formData.color : "" }}</span>
|
||||
<el-color-picker v-model="formData.color" @change="e => albugineaOperate(e, 'color')" />
|
||||
<el-color-picker v-model="formData.color" @active-change="e => albugineaOperate(e, 'color')" />
|
||||
</div>
|
||||
<div class="operate-btn">
|
||||
<el-button @click="editAlbugineaConfig">保存当前配置</el-button>
|
||||
@ -62,7 +62,7 @@
|
||||
<div class="layer-config" v-if="props.type == '点坐标效果'">
|
||||
<div class="property-row-item">
|
||||
<span>效果颜色：{{ formData.color ? formData.color : "" }}</span>
|
||||
<el-color-picker v-model="formData.color" @change="e => pointPositionOperate(e, 'color')" />
|
||||
<el-color-picker v-model="formData.color" @active-change="e => pointPositionOperate(e, 'color')" />
|
||||
</div>
|
||||
<div class="property-column-item">
|
||||
<span>半径：{{ formData.radius ? formData.radius : 0 }}米</span>
|
||||
@ -71,18 +71,12 @@
|
||||
:step="200"
|
||||
:max="10000"
|
||||
:min="200"
|
||||
@change="e => pointPositionOperate(e, 'radius')"
|
||||
@input="e => pointPositionOperate(e, 'radius')"
|
||||
/>
|
||||
</div>
|
||||
<div class="property-column-item" v-if="formData.type != 'CircleScan'">
|
||||
<span>速度值：{{ formData.speed ? formData.speed : 0 }}</span>
|
||||
<el-slider
|
||||
v-model.number="formData.speed"
|
||||
:step="1"
|
||||
:max="100"
|
||||
:min="1"
|
||||
@change="e => pointPositionOperate(e, 'speed')"
|
||||
/>
|
||||
<el-slider v-model.number="formData.speed" :step="1" :max="100" :min="1" @input="e => pointPositionOperate(e, 'speed')" />
|
||||
</div>
|
||||
<div class="operate-btn">
|
||||
<el-button @click="editPointPositionConfig">保存当前配置</el-button>
|
||||
@ -91,19 +85,19 @@
|
||||
<div class="layer-config" v-if="props.type == '线效果'">
|
||||
<div class="property-column-item">
|
||||
<span>宽度：{{ formData.width ? formData.width : 0 }}</span>
|
||||
<el-slider v-model.number="formData.width" :step="1" :max="100" :min="1" @change="e => lineEffectOperate(e, 'width')" />
|
||||
<el-slider v-model.number="formData.width" :step="1" :max="100" :min="1" @input="e => lineEffectOperate(e, 'width')" />
|
||||
</div>
|
||||
<div class="property-row-item">
|
||||
<span>颜色：{{ formData.color ? formData.color : "" }}</span>
|
||||
<el-color-picker v-model="formData.color" @change="e => lineEffectOperate(e, 'color')" />
|
||||
<el-color-picker v-model="formData.color" @active-change="e => lineEffectOperate(e, 'color')" />
|
||||
</div>
|
||||
<div class="property-row-item" v-if="formData.type == 'ODLine'">
|
||||
<span>线的背景颜色：{{ formData.bgColor ? formData.bgColor : "" }}</span>
|
||||
<el-color-picker v-model="formData.bgColor" @change="e => lineEffectOperate(e, 'bgColor')" />
|
||||
<el-color-picker v-model="formData.bgColor" @active-change="e => lineEffectOperate(e, 'bgColor')" />
|
||||
</div>
|
||||
<div class="property-column-item">
|
||||
<span>速度值：{{ formData.speed ? formData.speed : 0 }}</span>
|
||||
<el-slider v-model.number="formData.speed" :step="1" :max="100" :min="1" @change="e => lineEffectOperate(e, 'speed')" />
|
||||
<el-slider v-model.number="formData.speed" :step="1" :max="100" :min="1" @input="e => lineEffectOperate(e, 'speed')" />
|
||||
</div>
|
||||
<div class="operate-btn">
|
||||
<el-button @click="editLineEffectConfig">保存当前配置</el-button>
|
||||
@ -112,23 +106,23 @@
|
||||
<div class="layer-config" v-if="props.type == '模型'">
|
||||
<div class="property-column-item">
|
||||
<span>比例：{{ formData.scale ? formData.scale : 0 }}</span>
|
||||
<el-slider v-model.number="formData.scale" :step="1" :max="100" :min="1" @change="e => modelOperate(e, 'scale')" />
|
||||
<el-slider v-model.number="formData.scale" :step="1" :max="100" :min="1" @input="e => modelOperate(e, 'scale')" />
|
||||
</div>
|
||||
<div class="property-column-item">
|
||||
<span>方向角：{{ formData.heading ? formData.heading : 0 }}</span>
|
||||
<el-slider v-model.number="formData.heading" :step="1" :max="360" :min="0" @change="e => modelOperate(e, 'heading')" />
|
||||
<el-slider v-model.number="formData.heading" :step="1" :max="360" :min="0" @input="e => modelOperate(e, 'heading')" />
|
||||
</div>
|
||||
<div class="property-column-item">
|
||||
<span>俯仰角：{{ formData.pitch ? formData.pitch : 0 }}</span>
|
||||
<el-slider v-model.number="formData.pitch" :step="1" :max="360" :min="0" @change="e => modelOperate(e, 'pitch')" />
|
||||
<el-slider v-model.number="formData.pitch" :step="1" :max="360" :min="0" @input="e => modelOperate(e, 'pitch')" />
|
||||
</div>
|
||||
<div class="property-column-item">
|
||||
<span>翻滚角：{{ formData.roll ? formData.roll : 0 }}</span>
|
||||
<el-slider v-model.number="formData.roll" :step="1" :max="360" :min="0" @change="e => modelOperate(e, 'roll')" />
|
||||
<el-slider v-model.number="formData.roll" :step="1" :max="360" :min="0" @input="e => modelOperate(e, 'roll')" />
|
||||
</div>
|
||||
<div class="property-row-item" v-if="formData.silhouette">
|
||||
<span>轮廓颜色：{{ formData.silhouetteColor ? formData.silhouetteColor : "" }}</span>
|
||||
<el-color-picker v-model="formData.silhouetteColor" @change="e => modelOperate(e, 'silhouetteColor')" />
|
||||
<el-color-picker v-model="formData.silhouetteColor" @active-change="e => modelOperate(e, 'silhouetteColor')" />
|
||||
</div>
|
||||
<div class="property-column-item" v-if="formData.silhouette">
|
||||
<span>轮廓宽度：{{ formData.silhouetteSize ? formData.silhouetteSize : 0 }}</span>
|
||||
@ -137,7 +131,7 @@
|
||||
:step="1"
|
||||
:max="100"
|
||||
:min="1"
|
||||
@change="e => modelOperate(e, 'silhouetteSize')"
|
||||
@input="e => modelOperate(e, 'silhouetteSize')"
|
||||
/>
|
||||
</div>
|
||||
<div class="operate-btn">
|
||||
@ -438,17 +432,15 @@ const getAlbugineaInfo = async () => {
|
||||
console.log(result, "--------白膜");
|
||||
if (result) {
|
||||
formData.value = {
|
||||
...result
|
||||
...result,
|
||||
lng: +result.lng,
|
||||
lat: +result.lat,
|
||||
alt: +result.alt
|
||||
};
|
||||
configJson.value.layers = [
|
||||
{
|
||||
id: result.id,
|
||||
name: result.name,
|
||||
icon:
|
||||
result.layer == "gaode"
|
||||
? "src/assets/images/Mars3DImg/basemaps/gaode_img.png"
|
||||
: "src/assets/images/Mars3DImg/basemaps/bd-img.png",
|
||||
|
||||
type: "3dtiles",
|
||||
url: result.url,
|
||||
maximumScreenSpaceError: 1,
|
||||
@ -457,8 +449,8 @@ const getAlbugineaInfo = async () => {
|
||||
conditions: [["true", "color('" + result.color + "')"]]
|
||||
}
|
||||
},
|
||||
show: result.show ? result.show : false,
|
||||
flyTo: result.flyTo ? result.flyTo : false
|
||||
show: true,
|
||||
flyTo: true
|
||||
}
|
||||
];
|
||||
initMars3d(configJson.value);
|
||||
@ -476,17 +468,7 @@ const getBaseMapsInfo = async () => {
|
||||
{
|
||||
id: result.id,
|
||||
name: result.name,
|
||||
icon:
|
||||
result.layer == "gaode"
|
||||
? "src/assets/images/Mars3DImg/basemaps/gaode_img.png"
|
||||
: "src/assets/images/Mars3DImg/basemaps/bd-img.png",
|
||||
type: result.layer,
|
||||
layer: result.layer == "gaode" ? "img_d" : "img_z",
|
||||
saturation: result.saturation ? result.saturation : 0,
|
||||
brightness: result.brightness ? result.brightness : 0,
|
||||
contrast: result.contrast ? result.contrast : 0,
|
||||
hue: result.hue ? result.hue : 0,
|
||||
gamma: result.gamma ? result.gamma : 0,
|
||||
...JSON.parse(result.layer),
|
||||
show: true
|
||||
}
|
||||
];
|
||||
@ -494,9 +476,9 @@ const getBaseMapsInfo = async () => {
|
||||
}
|
||||
};
|
||||
// 取区域内的随机点
|
||||
const randomPoint = () => {
|
||||
const jd = random(117.208056 * 1000, 117.25548 * 1000) / 1000;
|
||||
const wd = random(31.816617 * 1000, 31.855756 * 1000) / 1000;
|
||||
const randomPoint = (position: any) => {
|
||||
const jd = random(position[0].lng * 1000, position[1].lng * 1000) / 1000;
|
||||
const wd = random(position[0].lat * 1000, position[1].lat * 1000) / 1000;
|
||||
return new mars3d.LngLatPoint(jd, wd, 100);
|
||||
};
|
||||
|
||||
@ -545,15 +527,34 @@ const initMars3d = (option: any) => {
|
||||
const graphic = new mars3d.graphic.CircleEntity(loadJson);
|
||||
graphicLayer.addGraphic(graphic);
|
||||
graphic.flyTo();
|
||||
//绑定经纬度监听事件
|
||||
graphic.on(mars3d.EventType.editMovePoint, function (event) {
|
||||
console.log("移动改变了矢量数据对象", event);
|
||||
let graphic = graphicLayer.getGraphicById(formData.value.id);
|
||||
formData.value.lng = event.target.point.lng;
|
||||
formData.value.lat = event.target.point.lat;
|
||||
formData.value.alt = event.target.point.alt;
|
||||
formData.value.radius = event.target.radius;
|
||||
let loadJson = {
|
||||
position: new mars3d.LngLatPoint(formData.value.lng, formData.value.lat, formData.value.alt),
|
||||
style: {
|
||||
radius: formData.value.radius
|
||||
}
|
||||
};
|
||||
graphic.setStyle(loadJson);
|
||||
});
|
||||
// 开启编辑状态
|
||||
graphic.startEditing();
|
||||
}
|
||||
if (props.type == "线效果") {
|
||||
const arrData: any = [];
|
||||
if (formData.value.type == "LineFlowColor") {
|
||||
const linePositions = JSON.parse(formData.value.positions);
|
||||
for (let j = 0; j < 100; ++j) {
|
||||
const startPt = randomPoint();
|
||||
const startPt = randomPoint(linePositions);
|
||||
|
||||
const endPt = startPt.clone();
|
||||
endPt.alt = random(1000, 2000);
|
||||
endPt.alt = random(linePositions[0].alt, linePositions[1].alt);
|
||||
|
||||
arrData.push({
|
||||
positions: [startPt, endPt],
|
||||
@ -647,6 +648,26 @@ const initMars3d = (option: any) => {
|
||||
graphicLayer.addGraphic(model);
|
||||
model.flyTo({ maxHeight: 200 });
|
||||
}
|
||||
if (props.type == "白膜") {
|
||||
setTimeout(function () {
|
||||
thisAlbuginea = map.getLayerById(formData.value.id);
|
||||
console.log(thisAlbuginea);
|
||||
if (requestNum == 0) {
|
||||
initCenter = {
|
||||
lng: thisAlbuginea.orginCenterPoint.lng,
|
||||
lat: thisAlbuginea.orginCenterPoint.lat,
|
||||
alt: thisAlbuginea.orginCenterPoint.alt
|
||||
};
|
||||
++requestNum;
|
||||
}
|
||||
thisAlbuginea.position = {
|
||||
lng: initCenter.lng + +formData.value.lng,
|
||||
lat: initCenter.lat + +formData.value.lat,
|
||||
alt: initCenter.alt + +formData.value.alt
|
||||
};
|
||||
console.log(thisAlbuginea.position);
|
||||
}, 200);
|
||||
}
|
||||
};
|
||||
onMounted(async () => {
|
||||
if (props.type == "底图") {
|
||||
|
||||
@ -94,7 +94,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 分屏对比弹框 -->
|
||||
<div class="screen-layer-add" v-if="screenComparisonShow">
|
||||
<div class="screen-layer-add" v-if="screenComparisonShow" v-draggable>
|
||||
<div class="screen-layer-add-title">
|
||||
<span>图层</span>
|
||||
<el-icon size="16" color="#fff" @click="clearScreenComparison"><Close /></el-icon>
|
||||
@ -315,6 +315,8 @@ const props = {
|
||||
label: "title",
|
||||
children: "children"
|
||||
};
|
||||
// 白膜列表
|
||||
const albugineaList = ref([]);
|
||||
const hours = computed(() => Math.floor(sunProperty.value.currDate / 60));
|
||||
const minutes = computed(() => Math.floor(sunProperty.value.currDate / 60));
|
||||
let map: any;
|
||||
@ -361,17 +363,7 @@ onMounted(async () => {
|
||||
pid: 10,
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
icon:
|
||||
item.layer == "gaode"
|
||||
? "src/assets/images/Mars3DImg/basemaps/gaode_img.png"
|
||||
: "src/assets/images/Mars3DImg/basemaps/bd-img.png",
|
||||
type: item.layer,
|
||||
layer: item.layer == "gaode" ? "img_d" : "img_z",
|
||||
saturation: item.saturation ? item.saturation : 0,
|
||||
brightness: item.brightness ? item.brightness : 0,
|
||||
contrast: item.contrast ? item.contrast : 0,
|
||||
hue: item.hue ? item.hue : 0,
|
||||
gamma: item.gamma ? item.gamma : 0,
|
||||
...JSON.parse(item.layer),
|
||||
show: item.show ? item.show : false
|
||||
});
|
||||
});
|
||||
@ -382,6 +374,7 @@ onMounted(async () => {
|
||||
console.log(resAlbuginea, "白膜666666");
|
||||
if (resAlbuginea.result && resAlbuginea.result.length > 0) {
|
||||
let initAlbugineamaps: any = [{ id: 2040, name: "城市白模", type: "group" }];
|
||||
albugineaList.value = resAlbuginea.result;
|
||||
resAlbuginea.result.map((item: any) => {
|
||||
initAlbugineamaps.push({
|
||||
pid: 2040,
|
||||
@ -525,7 +518,8 @@ const screenComparison = () => {
|
||||
}
|
||||
mapScreenSplit = new mars3d.control.MapCompare({
|
||||
...mapOptions2,
|
||||
parentContainer: mapParent
|
||||
parentContainer: mapParent,
|
||||
insertBefore: mapOld
|
||||
});
|
||||
map.addControl(mapScreenSplit);
|
||||
};
|
||||
@ -818,60 +812,11 @@ const initMars3d = (option: any) => {
|
||||
getPointPosition();
|
||||
// 查询配置线效果
|
||||
getLineEffect();
|
||||
// 添加数据
|
||||
// addRandomGraphicByCount(graphicLayer, [117.080397, 31.656139, 33.3]);
|
||||
// addRandomGraphicByCount(graphicLayer, [117.078006, 31.65649, 49.4]);
|
||||
// addRandomGraphicByCount(graphicLayer, [117.080571, 31.657898, 50.2]);
|
||||
// addRandomGraphicByCount(graphicLayer, [117.078331, 31.660016, 47.2]);
|
||||
// map.scene.moon.show = true; // 太阳
|
||||
// map.scene.sun.show = true; // 月亮
|
||||
// rainEffect = new mars3d.effect.RainEffect({
|
||||
// speed: 10,
|
||||
// size: 20,
|
||||
// direction: 10,
|
||||
// enabled: false
|
||||
// });
|
||||
// fogEffect = new mars3d.effect.FogEffect({
|
||||
// color: Cesium.Color.WHITE,
|
||||
// fogByDistance: new Cesium.Cartesian4(100, 0.0, 9000, 0.9),
|
||||
// enabled: false
|
||||
// });
|
||||
// snowEffect = new mars3d.effect.SnowEffect({
|
||||
// enabled: false,
|
||||
// speed: 10
|
||||
// });
|
||||
// snowCover = new mars3d.effect.SnowCoverEffect({
|
||||
// enabled: false,
|
||||
// // layer: tiles3dLayer, // 如果传值3dtiles图层，只对该模型生效
|
||||
// alpha: 0.6,
|
||||
// maxHeight: 8000 // 大于此高度后不显示
|
||||
// });
|
||||
// defaultSkybox = map.scene.skyBox;
|
||||
// currSkyBox = qingtianSkybox;
|
||||
// map.on(mars3d.EventType.postRender, function () {
|
||||
// const position = map.camera.position;
|
||||
// const height = Cesium.Cartographic.fromCartesian(position).height;
|
||||
// if (height < 230000) {
|
||||
// if (currSkyBox) {
|
||||
// map.scene.skyBox = currSkyBox;
|
||||
// }
|
||||
// map.scene.skyAtmosphere.show = false;
|
||||
// } else {
|
||||
// if (defaultSkybox) {
|
||||
// map.scene.skyBox = defaultSkybox;
|
||||
// }
|
||||
// map.scene.skyAtmosphere.show = true;
|
||||
// }
|
||||
// });
|
||||
// map.addEffect(rainEffect);
|
||||
// map.addEffect(fogEffect);
|
||||
// map.addEffect(snowEffect);
|
||||
// map.addEffect(snowCover);
|
||||
};
|
||||
// 取区域内的随机点
|
||||
const randomPoint = () => {
|
||||
const jd = random(117.208056 * 1000, 117.25548 * 1000) / 1000;
|
||||
const wd = random(31.816617 * 1000, 31.855756 * 1000) / 1000;
|
||||
const randomPoint = (position: any) => {
|
||||
const jd = random(position[0].lng * 1000, position[1].lng * 1000) / 1000;
|
||||
const wd = random(position[0].lat * 1000, position[1].lat * 1000) / 1000;
|
||||
return new mars3d.LngLatPoint(jd, wd, 100);
|
||||
};
|
||||
// 取随机数字
|
||||
@ -887,11 +832,12 @@ const getLineEffect = async () => {
|
||||
if (item.show) {
|
||||
const arrData: any = [];
|
||||
if (item.type == "LineFlowColor") {
|
||||
const linePositions = JSON.parse(item.positions);
|
||||
for (let j = 0; j < 100; ++j) {
|
||||
const startPt = randomPoint();
|
||||
const startPt = randomPoint(linePositions);
|
||||
|
||||
const endPt = startPt.clone();
|
||||
endPt.alt = random(1000, 2000);
|
||||
endPt.alt = random(linePositions[0].alt, linePositions[1].alt);
|
||||
|
||||
arrData.push({
|
||||
positions: [startPt, endPt],
|
||||
@ -1085,13 +1031,32 @@ const addRandomGraphicByCount = (graphicLayer: any, position: any) => {
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
const handleCheckChange = (e: any, isCheck: any) => {
|
||||
const handleCheckChange = (e: any, isCheck: any, haveChildCheck: any) => {
|
||||
const layer = layersObj[e.key];
|
||||
const isChildern = e.children;
|
||||
console.log("node", e);
|
||||
console.log(layer);
|
||||
console.log(isCheck);
|
||||
console.log(haveChildCheck);
|
||||
|
||||
if (layer && isCheck) {
|
||||
if (layer && !isChildern && isCheck) {
|
||||
setTimeout(function () {
|
||||
// 修改白膜的偏移位置
|
||||
let findItem: any = albugineaList.value.find(item => item.id == e.key);
|
||||
console.log(findItem);
|
||||
let initCenter: any;
|
||||
initCenter = {
|
||||
lng: layer.orginCenterPoint.lng,
|
||||
lat: layer.orginCenterPoint.lat,
|
||||
alt: layer.orginCenterPoint.alt
|
||||
};
|
||||
layer.position = {
|
||||
lng: initCenter.lng + +findItem.lng,
|
||||
lat: initCenter.lat + +findItem.lat,
|
||||
alt: initCenter.alt + +findItem.alt
|
||||
};
|
||||
console.log(layer.position);
|
||||
}, 200);
|
||||
layer.show = true;
|
||||
layer.flyTo();
|
||||
} else {
|
||||
@ -1105,7 +1070,7 @@ const handleCheckChange = (e: any, isCheck: any) => {
|
||||
|
||||
// 处理子节点
|
||||
if (e.children && e.children.length) {
|
||||
renderChildNode(isCheck, e.children);
|
||||
renderChildNode(isCheck, e.children, e.key);
|
||||
}
|
||||
|
||||
// 删除模型
|
||||
@ -1113,21 +1078,22 @@ const handleCheckChange = (e: any, isCheck: any) => {
|
||||
layer.show = false;
|
||||
}
|
||||
};
|
||||
const renderChildNode = (isCheck: any, children: any[]) => {
|
||||
const renderChildNode = (isCheck: any, children: any[], key: any) => {
|
||||
children.forEach(child => {
|
||||
const layer = layersObj[child.key];
|
||||
if (layer) {
|
||||
if (!layer.isAdded) {
|
||||
map.addLayer(layer);
|
||||
}
|
||||
|
||||
if (isCheck) {
|
||||
if (child.key == key) {
|
||||
if (isCheck && key == child.key) {
|
||||
layer.show = true;
|
||||
} else {
|
||||
layer.show = false;
|
||||
}
|
||||
if (child.children) {
|
||||
renderChildNode(isCheck, child.children);
|
||||
renderChildNode(isCheck, child.children, child.key);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -1259,6 +1225,8 @@ onUnmounted(() => {
|
||||
padding: 0;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
}
|
||||
.input-search {
|
||||
width: 260px;
|
||||
@ -1318,6 +1286,7 @@ onUnmounted(() => {
|
||||
background-color: rgba(23, 49, 71, 0.8);
|
||||
height: 40px;
|
||||
box-shadow: 0 4px 15px 1px #02213bb3;
|
||||
z-index: 10;
|
||||
&-item {
|
||||
.toolbar-item {
|
||||
@include flex;
|
||||
@ -1359,6 +1328,7 @@ onUnmounted(() => {
|
||||
height: 500px;
|
||||
box-shadow: 0 4px 15px 1px #02213bb3;
|
||||
animation: fadeIn 1s;
|
||||
z-index: 10;
|
||||
.basic-title {
|
||||
@include flex;
|
||||
width: 100%;
|
||||
@ -1434,6 +1404,7 @@ onUnmounted(() => {
|
||||
height: 500px;
|
||||
box-shadow: 0 4px 15px 1px #02213bb3;
|
||||
animation: fadeIn 1s;
|
||||
z-index: 10;
|
||||
&-title {
|
||||
@include flex;
|
||||
width: 100%;
|
||||
@ -1456,7 +1427,7 @@ onUnmounted(() => {
|
||||
overflow-y: scroll;
|
||||
:deep() {
|
||||
.el-tree {
|
||||
background-color: rgba(23, 49, 71, 0.8);
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
.el-tree-node__content:hover {
|
||||
@ -1535,7 +1506,7 @@ onUnmounted(() => {
|
||||
overflow-y: scroll;
|
||||
:deep() {
|
||||
.el-tree {
|
||||
background-color: rgba(23, 49, 71, 0.8);
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
.el-tree-node__content:hover {
|
||||
@ -1939,5 +1910,10 @@ onUnmounted(() => {
|
||||
.mars3d-divGraphic:hover {
|
||||
z-index: 999 !important;
|
||||
}
|
||||
// 分屏属性
|
||||
.mars3d-mapCompare {
|
||||
left: 0px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -169,6 +169,8 @@ const confirmSubmit = () => {
|
||||
let requestData = {
|
||||
...formData.value
|
||||
};
|
||||
delete requestData.createTime;
|
||||
delete requestData.updateTime;
|
||||
if (props.title == "新增白膜图层") {
|
||||
const res: any = await albugineaMapAdd(requestData);
|
||||
if (res.code == 200) {
|
||||
|
||||
@ -138,15 +138,143 @@ import { baseMapAdd, baseMapDetails, baseMapEdit } from "@/api/modules/mapCommon
|
||||
import testMap from "@/components/testMap/index.vue";
|
||||
const testMapVisible = ref(false);
|
||||
const layerTypeList = ref([
|
||||
{ label: "天地图", value: "tdt" },
|
||||
{ label: "百度地图", value: "baidu" },
|
||||
{ label: "高德地图", value: "gaode" },
|
||||
{ label: "腾讯地图", value: "tencent" },
|
||||
{ label: "OSM地图", value: "osm" },
|
||||
{ label: "谷歌地图", value: "google" },
|
||||
{ label: "微软Bing地图", value: "bing" },
|
||||
{ label: "图层组", value: "group" },
|
||||
{ label: "空白图层", value: "empty" }
|
||||
{ label: "谷歌影像", value: 0 },
|
||||
{ label: "天地图影像", value: 1 },
|
||||
{ label: "天地图电子", value: 2 },
|
||||
{ label: "高德影像", value: 3 },
|
||||
{ label: "高德电子", value: 4 },
|
||||
{ label: "百度影像", value: 5 },
|
||||
{ label: "百度电子", value: 6 },
|
||||
{ label: "腾讯影像", value: 7 },
|
||||
{ label: "腾讯电子", value: 8 },
|
||||
{ label: "ArcGIS影像", value: 9 },
|
||||
{ label: "微软影像", value: 10 },
|
||||
{ label: "暗色底图", value: 11 },
|
||||
{ label: "蓝色底图", value: 12 },
|
||||
{ label: "黑色底图", value: 13 },
|
||||
{ label: "离线地图 (供参考)", value: 14 },
|
||||
{ label: "单张图片 (本地离线)", value: 15 },
|
||||
{ label: "无底图", value: 16 }
|
||||
]);
|
||||
const layerTypeJson = ref([
|
||||
{ name: "谷歌影像", icon: "src/assets/images/Mars3DImg/basemaps/google_img.png", type: "google", layer: "img_d" },
|
||||
{
|
||||
name: "天地图影像",
|
||||
icon: "src/assets/images/Mars3DImg/basemaps/tdt_img.png",
|
||||
type: "group",
|
||||
layers: [
|
||||
{ name: "底图", type: "tdt", layer: "img_d" },
|
||||
{ name: "注记", type: "tdt", layer: "img_z" }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "天地图电子",
|
||||
icon: "src/assets/images/Mars3DImg/basemaps/tdt_vec.png",
|
||||
type: "group",
|
||||
layers: [
|
||||
{ name: "底图", type: "tdt", layer: "vec_d" },
|
||||
{ name: "注记", type: "tdt", layer: "vec_z" }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "高德影像",
|
||||
type: "group",
|
||||
icon: "src/assets/images/Mars3DImg/basemaps/gaode_img.png",
|
||||
layers: [
|
||||
{ name: "底图", type: "gaode", layer: "img_d" },
|
||||
{ name: "注记", type: "gaode", layer: "img_z" }
|
||||
]
|
||||
},
|
||||
{ name: "高德电子", type: "gaode", icon: "src/assets/images/Mars3DImg/basemaps/gaode_vec.png", layer: "vec" },
|
||||
{
|
||||
name: "百度影像",
|
||||
type: "group",
|
||||
icon: "src/assets/images/Mars3DImg/basemaps/bd-img.png",
|
||||
layers: [
|
||||
{ name: "底图", type: "baidu", layer: "img_d" },
|
||||
{ name: "注记", type: "baidu", layer: "img_z" }
|
||||
]
|
||||
},
|
||||
{ name: "百度电子", icon: "src/assets/images/Mars3DImg/basemaps/bd-vec.png", type: "baidu", layer: "vec" },
|
||||
{
|
||||
name: "腾讯影像",
|
||||
icon: "src/assets/images/Mars3DImg/basemaps/tencent_img.png",
|
||||
type: "group",
|
||||
layers: [
|
||||
{ name: "底图", type: "tencent", layer: "img_d" },
|
||||
{ name: "注记", type: "tencent", layer: "img_z" }
|
||||
]
|
||||
},
|
||||
{ name: "腾讯电子", icon: "src/assets/images/Mars3DImg/basemaps/tencent_vec.png", type: "tencent", layer: "vec" },
|
||||
{
|
||||
name: "ArcGIS影像",
|
||||
icon: "src/assets/images/Mars3DImg/basemaps/esriWorldImagery.png",
|
||||
type: "xyz",
|
||||
url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
|
||||
enablePickFeatures: false
|
||||
},
|
||||
{ name: "微软影像", icon: "src/assets/images/Mars3DImg/basemaps/bingAerial.png", type: "bing", layer: "Aerial" },
|
||||
{
|
||||
name: "暗色底图",
|
||||
type: "gaode",
|
||||
icon: "src/assets/images/Mars3DImg/basemaps/blackMarble.png",
|
||||
layer: "vec",
|
||||
invertColor: true,
|
||||
filterColor: "#4e70a6",
|
||||
brightness: 0.6,
|
||||
contrast: 1.8,
|
||||
gamma: 0.3,
|
||||
hue: 1,
|
||||
saturation: 0
|
||||
},
|
||||
{
|
||||
name: "蓝色底图",
|
||||
icon: "src/assets/images/Mars3DImg/basemaps/bd-c-midnight.png",
|
||||
type: "xyz",
|
||||
url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
|
||||
chinaCRS: "GCJ02",
|
||||
enablePickFeatures: false
|
||||
},
|
||||
{ name: "黑色底图", icon: "src/assets/images/Mars3DImg/basemaps/bd-c-dark.png", type: "tencent", layer: "custom", style: "4" },
|
||||
{
|
||||
name: "离线地图 (供参考)",
|
||||
type: "group",
|
||||
icon: "src/assets/images/Mars3DImg/basemaps/google_img.png",
|
||||
layers: [
|
||||
{
|
||||
name: "全球",
|
||||
type: "xyz",
|
||||
url: "{dataServer}/tile/googleImg/{z}/{x}/{y}.jpg",
|
||||
minimumLevel: 0,
|
||||
maximumLevel: 9
|
||||
},
|
||||
{
|
||||
name: "中国",
|
||||
type: "xyz",
|
||||
url: "{dataServer}/tile/googleImg/{z}/{x}/{y}.jpg",
|
||||
minimumTerrainLevel: 10,
|
||||
minimumLevel: 10,
|
||||
maximumLevel: 12,
|
||||
rectangle: { xmin: 69.706929, xmax: 136.560941, ymin: 15.831038, ymax: 52.558005 }
|
||||
},
|
||||
{
|
||||
name: "具体项目(如合肥)",
|
||||
type: "xyz",
|
||||
url: "{dataServer}/tile/googleImg/{z}/{x}/{y}.jpg",
|
||||
minimumTerrainLevel: 12,
|
||||
minimumLevel: 12,
|
||||
maximumLevel: 18,
|
||||
rectangle: { xmin: 116.33236, xmax: 118.183557, ymin: 31.143784, ymax: 32.565035 }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "单张图片 (本地离线)",
|
||||
icon: "src/assets/images/Mars3DImg/basemaps/offline.png",
|
||||
type: "image",
|
||||
url: "//data.mars3d.cn/filesrc/assets/images/Mars3DImg/world/world.jpg"
|
||||
},
|
||||
{ name: "无底图", icon: "src/assets/images/Mars3DImg/basemaps/null.png", type: "grid", color: "#ffffff", alpha: 0.03, cells: 2 }
|
||||
]);
|
||||
const props = defineProps({
|
||||
operateVisible: Boolean,
|
||||
@ -190,6 +318,8 @@ const getInfo = async () => {
|
||||
const { result } = await baseMapDetails(requestData);
|
||||
if (result) {
|
||||
formData.value = { ...result };
|
||||
formData.value.layer = layerTypeList.value.findIndex(item => item.label == JSON.parse(formData.value.layer).name);
|
||||
console.log(layerTypeList.value.findIndex(item => item.label == JSON.parse(formData.value.layer).name));
|
||||
}
|
||||
};
|
||||
// 新增确认
|
||||
@ -201,6 +331,10 @@ const confirmSubmit = () => {
|
||||
let requestData = {
|
||||
...formData.value
|
||||
};
|
||||
delete requestData.createTime;
|
||||
delete requestData.updateTime;
|
||||
console.log(formData.value);
|
||||
requestData.layer = JSON.stringify(layerTypeJson.value[formData.value.layer]);
|
||||
if (props.title == "新增地图层") {
|
||||
const res: any = await baseMapAdd(requestData);
|
||||
if (res.code == 200) {
|
||||
|
||||
@ -24,9 +24,9 @@
|
||||
<el-form-item label="坐标点位:" :required="true">
|
||||
<div class="table-content" v-for="(item, index) in addPositions" :key="index">
|
||||
<div class="table-head">
|
||||
<div class="head-value">经度{{ index + 1 }}</div>
|
||||
<div class="head-value">纬度{{ index + 1 }}</div>
|
||||
<div class="head-value">高度{{ index + 1 }}</div>
|
||||
<div class="head-value">{{ index == 0 ? "起始" : "终止" }}经度</div>
|
||||
<div class="head-value">{{ index == 0 ? "起始" : "终止" }}纬度</div>
|
||||
<div class="head-value">{{ index == 0 ? "起始" : "终止" }}高度</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="body-value">
|
||||
@ -38,14 +38,6 @@
|
||||
<div class="body-value">
|
||||
<el-input v-model="item.alt" placeholder="请输入" />
|
||||
</div>
|
||||
<div class="body-operate">
|
||||
<el-button type="danger" link @click="deleteRow(index)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-operate">
|
||||
<div>
|
||||
<el-button type="success" @click="appendRow">追加</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
@ -116,7 +108,10 @@ const props = defineProps({
|
||||
title: String
|
||||
});
|
||||
const emits = defineEmits(["update:operateVisible", "confirm"]);
|
||||
const addPositions = ref([]);
|
||||
const addPositions = ref([
|
||||
{ lng: "", lat: "", alt: "" },
|
||||
{ lng: "", lat: "", alt: "" }
|
||||
]);
|
||||
const baseUrl = import.meta.env.VITE_API_URL;
|
||||
const fileList = ref([]);
|
||||
const store = GlobalStore();
|
||||
@ -158,18 +153,6 @@ const rules = ref({
|
||||
const formRef = ref<FormInstance>();
|
||||
const formData = ref<any>({});
|
||||
const visible1 = ref(false);
|
||||
// 追加行数据
|
||||
const appendRow = () => {
|
||||
addPositions.value.push({ lng: "", lat: "", alt: "" });
|
||||
};
|
||||
// 删除行数据
|
||||
const deleteRow = (index: number) => {
|
||||
if (addPositions.value.length == minLength.value) {
|
||||
ElMessage.error("不能少于最少点位数据");
|
||||
return;
|
||||
}
|
||||
addPositions.value.splice(index, 1);
|
||||
};
|
||||
// 类型切换
|
||||
const typeChange = (e: any) => {
|
||||
if (e == "ODLine") {
|
||||
@ -203,10 +186,19 @@ const getInfo = async () => {
|
||||
const { result }: { result: any } = await polylineCombineDetails(requestData);
|
||||
if (result) {
|
||||
formData.value = { ...result };
|
||||
|
||||
if (formData.value.jsonFile) {
|
||||
formData.value.jsonFile = JSON.parse(formData.value.jsonFile);
|
||||
fileList.value = [{ ...formData.value.jsonFile }];
|
||||
} else {
|
||||
fileList.value = [];
|
||||
}
|
||||
if (formData.value.positions) {
|
||||
addPositions.value = JSON.parse(formData.value.positions);
|
||||
} else {
|
||||
addPositions.value = [
|
||||
{ lng: "", lat: "", alt: "" },
|
||||
{ lng: "", lat: "", alt: "" }
|
||||
];
|
||||
}
|
||||
setTimeout(() => {
|
||||
formRef.value?.clearValidate();
|
||||
@ -222,6 +214,8 @@ const confirmSubmit = () => {
|
||||
let requestData = {
|
||||
...formData.value
|
||||
};
|
||||
delete requestData.createTime;
|
||||
delete requestData.updateTime;
|
||||
let positionPass = true;
|
||||
addPositions.value.map((item: any) => {
|
||||
if (!item.lng || !item.lat || !item.alt) {
|
||||
@ -232,6 +226,7 @@ const confirmSubmit = () => {
|
||||
ElMessage.error("请输入坐标");
|
||||
return;
|
||||
}
|
||||
requestData.positions = JSON.stringify(addPositions.value);
|
||||
if (requestData.type == "ODLine") {
|
||||
requestData.jsonFile = JSON.stringify(requestData.jsonFile);
|
||||
}
|
||||
@ -264,6 +259,10 @@ watch(
|
||||
if (n) {
|
||||
if (props.title == "新增线效果") {
|
||||
formData.value = {};
|
||||
addPositions.value = [
|
||||
{ lng: "", lat: "", alt: "" },
|
||||
{ lng: "", lat: "", alt: "" }
|
||||
];
|
||||
} else if (props.title == "编辑线效果") {
|
||||
getInfo();
|
||||
}
|
||||
@ -354,11 +353,6 @@ onMounted(() => {});
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-operate {
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -171,6 +171,8 @@ const confirmSubmit = () => {
|
||||
let requestData = {
|
||||
...formData.value
|
||||
};
|
||||
delete requestData.createTime;
|
||||
delete requestData.updateTime;
|
||||
let positionPass = true;
|
||||
positions.value.map((item: any) => {
|
||||
if (!item.lng || !item.lat || !item.alt) {
|
||||
|
||||
@ -254,6 +254,8 @@ const confirmSubmit = () => {
|
||||
let requestData = {
|
||||
...formData.value
|
||||
};
|
||||
delete requestData.createTime;
|
||||
delete requestData.updateTime;
|
||||
let positionPass = true;
|
||||
positions.value.map((item: any) => {
|
||||
if (!item.lng || !item.lat || !item.alt) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user