1061 lines
32 KiB
Vue
1061 lines
32 KiB
Vue
<template>
|
||
<div class="mars3d-com">
|
||
<div class="mars3d-com" ref="mars3dContainer"></div>
|
||
<!-- 绘制区域 -->
|
||
|
||
<div class="mars-3d-deleter">
|
||
绘制面
|
||
<i @click="onclonemap" class="el-icon-close" style="font-size:'16px'; cursor: pointer;"></i>
|
||
</div>
|
||
|
||
<div class="mars3d-box">
|
||
<div class="mars-3d-header">
|
||
<!-- <i @click="onclonemap" class="el-icon-circle-close" style="font-size:'16px'"></i> -->
|
||
<el-radio-group v-model="marsheader" @change="masherchange">
|
||
<el-radio :label="1">多边形面</el-radio>
|
||
<el-radio :label="2">自定义面</el-radio>
|
||
</el-radio-group>
|
||
|
||
<!-- <el-input size="small" style="width:100px" placeholder="范围" v-model="itemdata.scopedata">
|
||
<i slot="suffix">米</i>
|
||
</el-input>-->
|
||
</div>
|
||
|
||
<!-- 经纬度数据 -->
|
||
<div class="mars3d-Controls">
|
||
<div class="mars3d-item" style="margin-top: 50px;">
|
||
<div class="mar3d-title">数据维护：</div>
|
||
<div class="mar3d-con">
|
||
<el-button size="mini" type="primary" @click="startDrawGraphic">绘制</el-button>
|
||
<el-button size="mini" type="danger" @click="deleteSelectedGraphic">删除</el-button>
|
||
<el-button size="mini" type="success" @click="updateGraphicStyle">保存</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mars3d-item">
|
||
<div class="mar3d-title">区域名称：</div>
|
||
<div class="mar3d-con">
|
||
<input v-model="itemdata.texttitle" placeholder="填充文字" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mars3d-item">
|
||
<div class="mar3d-title">边框颜色：</div>
|
||
<div class="mar3d-con distinction">
|
||
<el-color-picker v-model="itemdata.fillColor" size="small" />
|
||
<input v-model="itemdata.fillColor" placeholder="边框颜色" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mars3d-item">
|
||
<div class="mar3d-title">填充颜色：</div>
|
||
<div class="mar3d-con distinction">
|
||
<el-color-picker v-model="itemdata.collColor" size="small" />
|
||
<input v-model="itemdata.collColor" placeholder="填充色" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mars3d-item">
|
||
<div class="mar3d-title">文字颜色：</div>
|
||
<div class="mar3d-con distinction">
|
||
<el-color-picker v-model="itemdata.textColor" size="small" />
|
||
<input v-model="itemdata.textColor" placeholder="文字颜色" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mars3d-item">
|
||
<div class="mar3d-title">不透明度：</div>
|
||
<div class="mar3d-con">
|
||
<div class="block">
|
||
<el-slider v-model="itemdata.transpitem" :min="0.1" :max="1" :step="0.1"></el-slider>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mars3d-item">
|
||
<div class="mar3d-title">是否虚线：</div>
|
||
<div class="mar3d-con">
|
||
<el-switch v-model="itemdata.swtichitem" active-color="#34c759" inactive-color="#ccc"></el-switch>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mars3d-item">
|
||
<el-button size="mini" type="success" @click="saveArea">保存区域</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 经纬度显示 -->
|
||
<!-- <div class="mars3d-box">
|
||
<div class="mars-3d-header">
|
||
<el-radio v-model="marsheader" label="1">经纬度</el-radio>
|
||
<i @click="onclonemap" class="el-icon-circle-close" style="font-size:'16px'"></i>
|
||
</div>
|
||
|
||
<div class="mars3d-Controls">
|
||
<div class="mars3d-item" style="margin-top: 50px;">
|
||
<div class="mar3d-title">经度：</div>
|
||
<div class="mar3d-con"></div>
|
||
</div>
|
||
|
||
<div class="mars3d-item">
|
||
<div class="mar3d-title">纬度：</div>
|
||
<div class="mar3d-con" style="margin-left: 24px;">
|
||
<input v-model="itemdata.texttitle" placeholder="填充文字" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mars3d-item">
|
||
<el-button size="mini" type="success" @click="onlatlnt">保存区域</el-button>
|
||
</div>
|
||
</div>
|
||
</div>-->
|
||
|
||
<!-- 经纬度检索 -->
|
||
<!-- <div class="map-search">
|
||
<el-input placeholder="搜索地点" size="small" clearable v-model="inputmap">
|
||
<i slot="suffix" class="el-icon-search" @click="searchInput"></i>
|
||
</el-input>
|
||
|
||
<div class="sea-list">
|
||
<div
|
||
class="sea-item"
|
||
v-for="item in searchdata"
|
||
:key="item.id"
|
||
@click="onmapitem(item)"
|
||
>{{item.name}}</div>
|
||
</div>
|
||
</div>-->
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// import * as mars3d from "mars3d";
|
||
// import { Cesium } from "mars3d";
|
||
// import "mars3d/dist/mars3d.css";
|
||
// import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
|
||
import { projectqueryAddress } from "@/assets/js/api/project";
|
||
const axios = require("axios");
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
mars3dContainer: null,
|
||
map: null,
|
||
// 图层
|
||
graphicLayer: null,
|
||
// 开关
|
||
selectedGraphic: null,
|
||
// 修改图形
|
||
itemdata: {
|
||
// 边框颜色
|
||
fillColor: "",
|
||
// 文字颜色
|
||
textColor: "",
|
||
// 填充文字
|
||
texttitle: "",
|
||
// 填充颜色
|
||
collColor: "",
|
||
// 透明度
|
||
transpitem: 0.2,
|
||
// 是否虚线
|
||
swtichitem: false,
|
||
// 画圆范围
|
||
scopedata: 0
|
||
},
|
||
// 唯一值
|
||
datatitle: 1,
|
||
// 选中自定义图形
|
||
marsheader: 1,
|
||
// 共用参数-1-项目/2-区域
|
||
publicparameters: "1",
|
||
// 获取经纬度-开关
|
||
latlntswtich: "",
|
||
// 经纬度
|
||
latlntdata: {
|
||
lat: "",
|
||
latlntdata: ""
|
||
},
|
||
// 搜索值
|
||
inputmap: "",
|
||
// 查询回来值
|
||
searchdata: []
|
||
};
|
||
},
|
||
mounted() {
|
||
this.mars3dContainer = this.$refs.mars3dContainer;
|
||
// 初始化Mars3D地图
|
||
this.map = new mars3d.Map(this.mars3dContainer, {
|
||
scene: {
|
||
center: { lat: 42.8, lng: 90.4, alt: 150000, heading: 0, pitch: -45 },
|
||
showSun: true,
|
||
showMoon: true,
|
||
showSkyBox: true,
|
||
showSkyAtmosphere: false, // 关闭球周边的白色轮廓 map.scene.skyAtmosphere = false
|
||
fog: true,
|
||
fxaa: true,
|
||
globe: {
|
||
showGroundAtmosphere: false, // 关闭大气（球表面白蒙蒙的效果）
|
||
depthTestAgainstTerrain: false,
|
||
baseColor: "#546a53"
|
||
},
|
||
cameraController: {
|
||
zoomFactor: 3.0,
|
||
minimumZoomDistance: 1,
|
||
maximumZoomDistance: 50000000,
|
||
enableRotate: true,
|
||
enableZoom: true
|
||
},
|
||
mapProjection: mars3d.CRS.EPSG3857, // 2D下展示墨卡托投影
|
||
mapMode2D: Cesium.MapMode2D.INFINITE_SCROLL // 2D下左右一直可以滚动重复世界地图
|
||
},
|
||
control: {
|
||
// baseLayerPicker: true, // basemaps底图切换按钮
|
||
// homeButton: true, // 视角复位按钮
|
||
// sceneModePicker: true, // 二三维切换按钮
|
||
// navigationHelpButton: true, // 帮助按钮
|
||
// fullscreenButton: true, // 全屏按钮
|
||
contextmenu: { hasDefault: true }, // 右键菜单
|
||
distanceLegend: { left: "100px", bottom: "50px" },
|
||
// zoom: true,
|
||
baseLayerPicker: true, // basemaps底图切换按钮
|
||
geocoder: { service: "geocoder" }, // 使用高德POI服务
|
||
homeButton: true
|
||
// locationBar: true,
|
||
},
|
||
// terrain: {
|
||
// url: "//data.mars3d.cn/terrain",
|
||
// show: true
|
||
// },
|
||
basemaps: [
|
||
{
|
||
name: "高德地图",
|
||
icon: "http://jxj.zhgdyun.com:100/image/670f36d001fd0d65e36e1224.png", // 假设你有一个高德地图的图标
|
||
type: "xyz",
|
||
url:
|
||
"http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
|
||
subdomains: ["1", "2", "3", "4"],
|
||
show: true // 设置为默认显示
|
||
}
|
||
]
|
||
});
|
||
|
||
const locationBar = new mars3d.control.LocationBar({
|
||
template:
|
||
"<div>经度:{lng}</div><div>纬度:{lat}</div> <div>海拔：{alt}米</div> <div>层级：{level}</div><div>方向：{heading}度</div> <div>俯仰角：{pitch}度</div><div>视高：{cameraHeight}米</div><div>帧率：{fps} FPS</div>"
|
||
});
|
||
|
||
// 添加控件到地图
|
||
this.map.addControl(locationBar);
|
||
|
||
const compass = new mars3d.control.Compass({
|
||
bottom: "230px",
|
||
left: "10px"
|
||
});
|
||
this.map.addControl(compass);
|
||
|
||
this.map.control.geocoder._czmContrl.viewModel.complete.addEventListener(
|
||
function() {
|
||
const arrdata = map.control.geocoder._czmContrl.viewModel.suggestions;
|
||
console.log("查询结果", arrdata);
|
||
}
|
||
);
|
||
|
||
if (this.$parent.cardForm.configValue) {
|
||
console.log(
|
||
"this.$parent.cardForm.configValue",
|
||
this.$parent.cardForm.configValue
|
||
);
|
||
console.log(
|
||
"this.$parent.cardForm.configValue",
|
||
JSON.parse(this.$parent.cardForm.configValue, null, 2)
|
||
);
|
||
// 绘制过区域
|
||
// const geojsonData = {
|
||
// type: "FeatureCollection",
|
||
// features: [
|
||
// {
|
||
// type: "Feature",
|
||
// geometry: {
|
||
// type: "Polygon",
|
||
// coordinates: [
|
||
// [
|
||
// [90.186242, 44.497734000000015],
|
||
// [90.328679, 44.503352000000014],
|
||
// [90.301363, 44.39616100000001],
|
||
// [90.191353, 44.40004700000005]
|
||
// ]
|
||
// ]
|
||
// },
|
||
// properties: {
|
||
// id: 1,
|
||
// description:
|
||
// "这是区域 m-c197356b-de73-49e7-9a97-1858c58f5d82 的描述信息",
|
||
// fillColor: "#55ff33",
|
||
// textColor: "#ffffff",
|
||
// texttitle: "秦学海"
|
||
// }
|
||
// }
|
||
// ]
|
||
// };
|
||
|
||
// console.log("geojsonData", geojsonData);
|
||
|
||
// 创建 GeoJSON 图层
|
||
// const geojsonLayer = new mars3d.layer.GeoJsonLayer({
|
||
// data: JSON.parse(this.$parent.cardForm.configValue, null, 2),
|
||
// // format:function(item) {
|
||
// // console.log('eee');
|
||
// // },
|
||
// symbol: (item, style, feature) => {
|
||
// // console.log("item", item);
|
||
// // console.log("style", style);
|
||
// // console.log("feature", feature);
|
||
|
||
// style.text = item.texttitle;
|
||
// style.color = item.fillColor;
|
||
// }
|
||
// });
|
||
|
||
// 将图层添加到地图中
|
||
// this.map.addLayer(geojsonLayer);
|
||
|
||
// 将 geojsonLayer 赋值给 graphicLayer
|
||
// this.graphicLayer = geojsonLayer;
|
||
|
||
this.graphicLayer = new mars3d.layer.GraphicLayer();
|
||
this.map.addLayer(this.graphicLayer);
|
||
|
||
let a = JSON.parse(this.$parent.cardForm.configValue, null, 2);
|
||
console.log("a", a);
|
||
console.log("a.geojsonData", a.geojsonData);
|
||
console.log("a.features", a.features);
|
||
console.log("a.geojsonData.features.length > 1", a.features.length > 0);
|
||
if (a.features.length > 0) {
|
||
a.features.forEach(item => {
|
||
console.log("每个item", item);
|
||
if (item.geometry.type == "Polygon") {
|
||
this.addDemoGraphic14(item);
|
||
} else {
|
||
this.addCircleDemoGraphic12(item);
|
||
}
|
||
});
|
||
}
|
||
} else {
|
||
console.log("执行没有绘制==============");
|
||
// 没有修改过
|
||
// 创建一个图形图层
|
||
this.graphicLayer = new mars3d.layer.GraphicLayer();
|
||
this.map.addLayer(this.graphicLayer);
|
||
}
|
||
// this.bindLayerPopup();
|
||
this.bindGraphicClick();
|
||
|
||
// 绑定地图点击事件
|
||
this.map.on(mars3d.EventType.click, this.handleMapClick);
|
||
},
|
||
methods: {
|
||
// 搜索
|
||
searchInput() {
|
||
if (this.inputmap.length < 1)
|
||
return this.$message.warning("请输入查询地址");
|
||
projectqueryAddress({ keywords: this.inputmap }).then(res => {
|
||
if (res.result.length > 1) {
|
||
console.log("查询地址", JSON.parse(res.result));
|
||
let data = JSON.parse(res.result);
|
||
this.searchdata = data.tips;
|
||
}
|
||
});
|
||
},
|
||
// 点击搜索结果
|
||
onmapitem(item) {
|
||
console.log("点击子集", item);
|
||
if (item.location.length < 1 && item.location) return;
|
||
let a = item.location.split(",");
|
||
console.log("地址", a);
|
||
if (this.graphicLayer) {
|
||
const label = new mars3d.graphic.LabelPrimitive({
|
||
position: a, // 位置
|
||
style: {
|
||
text: item.name, // 标签文本
|
||
font: "16px sans-serif", // 字体
|
||
fillColor: "#29407c", // 文本颜色
|
||
outlineColor: "#1f1f1f", // 文本轮廓颜色
|
||
outlineWidth: 5, // 文本轮廓宽度
|
||
scale: 1.0, // 缩放比例
|
||
horizontalOrigin: mars3d.Cesium.HorizontalOrigin.CENTER, // 水平对齐方式
|
||
verticalOrigin: mars3d.Cesium.VerticalOrigin.BOTTOM // 垂直对齐方式
|
||
}
|
||
});
|
||
|
||
// 将点和标签添加到图层中
|
||
this.graphicLayer.addGraphic(label);
|
||
console.log("=============渲染地图============");
|
||
|
||
this.map.setCameraView({
|
||
center: a
|
||
});
|
||
}
|
||
},
|
||
formatTooltip(val) {
|
||
return val / 100;
|
||
},
|
||
// 处理地图点击事件
|
||
handleMapClick(event) {
|
||
const position = event.position; // 获取点击位置的屏幕坐标 (x, y)
|
||
const cartesian = this.map.scene.globe.pick(
|
||
this.map.camera.getPickRay(position),
|
||
this.map.scene
|
||
); // 获取点击位置的笛卡尔坐标
|
||
|
||
if (cartesian) {
|
||
const cartographic = mars3d.Cesium.Cartographic.fromCartesian(
|
||
cartesian
|
||
); // 转换为地理坐标
|
||
const longitude = mars3d.Cesium.Math.toDegrees(cartographic.longitude); // 转换为经度
|
||
const latitude = mars3d.Cesium.Math.toDegrees(cartographic.latitude); // 转换为纬度
|
||
const altitude = cartographic.height; // 获取海拔高度
|
||
|
||
console.log(`经度: ${longitude}, 纬度: ${latitude}, 海拔: ${altitude}`);
|
||
|
||
// 这里可以根据需要将经纬度信息显示在界面上
|
||
// 例如：this.showCoordinates(longitude, latitude, altitude);
|
||
}
|
||
},
|
||
|
||
// 通知父组件关闭
|
||
onclonemap() {
|
||
this.$parent.onMarsBoxMap();
|
||
},
|
||
|
||
addCircleDemoGraphic12(item) {
|
||
console.log("item===圆形", item);
|
||
const graphic = new mars3d.graphic.CircleEntity({
|
||
positions: item.geometry.coordinates, // 圆心位置
|
||
style: {
|
||
radius: item.properties.radius, // 圆的半径
|
||
color: item.properties.collColor, // 填充颜色
|
||
opacity: item.properties.transpitem, // 透明度
|
||
outline: true,
|
||
outlineStyle: {
|
||
width: 2,
|
||
materialType: item.properties.swtichitem
|
||
? mars3d.MaterialType.PolylineDash
|
||
: "",
|
||
materialOptions: {
|
||
color: item.properties.fillColor // 边框颜色
|
||
}
|
||
}, // 设置边框为虚线
|
||
label: {
|
||
text: item.properties.texttitle,
|
||
font_size: 18,
|
||
color: item.properties.textColor,
|
||
distanceDisplayCondition: true,
|
||
distanceDisplayCondition_far: 500000,
|
||
distanceDisplayCondition_near: 0
|
||
}
|
||
}
|
||
});
|
||
|
||
// 将圆形实体添加到图形图层
|
||
this.graphicLayer.addGraphic(graphic);
|
||
},
|
||
|
||
addDemoGraphic14(item) {
|
||
console.log("item===多边形", item);
|
||
const graphic = new mars3d.graphic.PolygonEntity({
|
||
positions: item.geometry.coordinates,
|
||
style: {
|
||
color: item.properties.collColor, // 填充颜色
|
||
opacity: item.properties.transpitem, // 透明度
|
||
outline: true,
|
||
outlineWidth: 2,
|
||
outlineColor: item.properties.fillColor,
|
||
outlineStyle: {
|
||
materialType: item.properties.swtichitem
|
||
? mars3d.MaterialType.PolylineDash
|
||
: ""
|
||
}, // 设置边框为虚线
|
||
label: {
|
||
text: item.properties.texttitle,
|
||
font_size: 18,
|
||
color: item.properties.textColor,
|
||
distanceDisplayCondition: true,
|
||
distanceDisplayCondition_far: 500000,
|
||
distanceDisplayCondition_near: 0
|
||
}
|
||
}
|
||
});
|
||
|
||
// 将多边形实体添加到图形图层
|
||
this.graphicLayer.addGraphic(graphic);
|
||
},
|
||
// 绘制切换
|
||
masherchange() {},
|
||
|
||
// 开始绘制
|
||
startDrawGraphic() {
|
||
console.log("执行绘画");
|
||
|
||
if (this.selectedGraphic) {
|
||
this.updateGraphicStyle();
|
||
}
|
||
|
||
const that = this;
|
||
if (this.graphicLayer) {
|
||
this.graphicLayer.unbindPopup();
|
||
}
|
||
// this.graphicLayer.startDraw({
|
||
// type: "polyline",
|
||
// // maxPointNum: 2, //可以限定最大点数，2个点绘制后自动结束
|
||
// // hasMidPoint: false,
|
||
// style: {
|
||
// color: "#93a9cc",
|
||
// width: 3,
|
||
// clampToGround: false,
|
||
// dashArray: [10, 5], // 设置虚线样式，10表示实线长度，5表示空白长度
|
||
// materialType: mars3d.MaterialType.PolylineDash, // 设置材质类型为虚线
|
||
// closure: true,
|
||
// label: {
|
||
// text: "未命名",
|
||
// font_size: 18,
|
||
// color: "#3d6397",
|
||
// distanceDisplayCondition: true,
|
||
// distanceDisplayCondition_far: 500000,
|
||
// distanceDisplayCondition_near: 0
|
||
// }
|
||
// },
|
||
|
||
// success: function(graphic) {
|
||
// // 为每个图形添加唯一的属性
|
||
// graphic.attr = {
|
||
// id: that.datatitle++, // 生成一个唯一的ID
|
||
// description: "这是区域 " + graphic.id + " 的描述信息"
|
||
// };
|
||
// }
|
||
// });
|
||
|
||
if (this.marsheader == 1) {
|
||
// 多边形
|
||
this.graphicLayer.startDraw({
|
||
type: "polygon",
|
||
style: {
|
||
color: "#3c444f", // 填充颜色
|
||
opacity: this.itemdata.transpitem, // 透明度
|
||
outline: true,
|
||
outlineWidth: 1,
|
||
outlineColor: "#93a9cc",
|
||
outlineStyle: {
|
||
materialType: this.itemdata.swtichitem
|
||
? mars3d.MaterialType.PolylineDash
|
||
: ""
|
||
}, // 设置边框为虚线
|
||
label: {
|
||
text: "未命名",
|
||
font_size: 18,
|
||
color: "#ffffff",
|
||
distanceDisplayCondition: true,
|
||
distanceDisplayCondition_far: 500000,
|
||
distanceDisplayCondition_near: 0
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
// 圆形
|
||
this.graphicLayer.startDraw({
|
||
type: "circle",
|
||
style: {
|
||
color: "#3c444f", // 填充颜色
|
||
opacity: this.itemdata.transpitem, // 透明度
|
||
clampToGround: false,
|
||
outline: true,
|
||
outlineStyle: {
|
||
width: 2,
|
||
materialType: this.itemdata.swtichitem
|
||
? mars3d.MaterialType.PolylineDash
|
||
: "", // 使用虚线材质
|
||
materialOptions: {
|
||
color: "#93a9cc" // 边框颜色
|
||
// dashLength: 36, // 虚线长度
|
||
// maskLength: 10, // 空隙间隔长度
|
||
// centerPower: 0.1, // 中心宽百分比
|
||
// dashPower: 0.2 // 虚线百分比
|
||
}
|
||
},
|
||
label: {
|
||
text: "未命名",
|
||
font_size: 18,
|
||
color: "#ffffff",
|
||
distanceDisplayCondition: true,
|
||
distanceDisplayCondition_far: 500000,
|
||
distanceDisplayCondition_near: 0
|
||
}
|
||
},
|
||
drawShowRadius: true
|
||
});
|
||
}
|
||
},
|
||
|
||
// 在图层绑定Popup弹窗
|
||
bindLayerPopup() {
|
||
this.graphicLayer.bindPopup(function(event) {
|
||
console.log("event", event);
|
||
const data = event.graphic.style;
|
||
const attr = {};
|
||
// attr["类型"] = event.graphic.type;
|
||
// attr["来源"] = "我是layer上绑定的Popup";
|
||
// attr["备注"] = "我支持鼠标交互";
|
||
attr["名称"] = data.label.text;
|
||
// attr["描述"] = attr.description || "默认描述"; // 使用图形属性中的描述信息
|
||
|
||
return mars3d.Util.getTemplateHtml({
|
||
title: "矢量图层",
|
||
template: "all",
|
||
attr
|
||
});
|
||
});
|
||
},
|
||
|
||
// 绑定图形点击事件
|
||
bindGraphicClick() {
|
||
const that = this;
|
||
this.graphicLayer.on(mars3d.EventType.click, function(event) {
|
||
that.selectedGraphic = event.graphic;
|
||
console.log("event.graphic", event.graphic);
|
||
console.log("that.itemdata.texttitle", that.itemdata.texttitle);
|
||
console.log(
|
||
"event.graphic.style.label.text",
|
||
event.graphic.style.label.text
|
||
);
|
||
|
||
that.itemdata.collColor = event.graphic.style.color;
|
||
that.itemdata.textColor = event.graphic.style.label.color;
|
||
that.itemdata.texttitle = event.graphic.style.label.text;
|
||
that.itemdata.transpitem = event.graphic.style.opacity;
|
||
that.itemdata.swtichitem =
|
||
event.graphic.style.outlineStyle.materialType == "PolylineDash"
|
||
? true
|
||
: false;
|
||
if (event.graphic.type == "polygon") {
|
||
that.itemdata.fillColor = event.graphic.style.outlineColor;
|
||
} else {
|
||
that.itemdata.fillColor =
|
||
event.graphic.style.outlineStyle.materialOptions.color;
|
||
}
|
||
|
||
// 重新绑定弹窗
|
||
that.bindLayerPopup();
|
||
});
|
||
},
|
||
|
||
// 更新图形样式
|
||
updateGraphicStyle() {
|
||
if (this.selectedGraphic) {
|
||
console.log("this.selectedGraphic", this.selectedGraphic);
|
||
console.log("this.selectedGraphic.id", this.selectedGraphic.id);
|
||
|
||
console.log("this.marsheader", this.marsheader);
|
||
this.selectedGraphic.style.color = this.itemdata.collColor;
|
||
this.selectedGraphic.style.label.color = this.itemdata.textColor;
|
||
this.selectedGraphic.style.label.text = this.itemdata.texttitle;
|
||
this.selectedGraphic.style.opacity = this.itemdata.transpitem;
|
||
this.selectedGraphic.style.outlineStyle.materialType = this.itemdata
|
||
.swtichitem
|
||
? mars3d.MaterialType.PolylineDash
|
||
: "";
|
||
if (this.selectedGraphic.type == "polygon") {
|
||
this.selectedGraphic.style.outlineColor = this.itemdata.fillColor;
|
||
} else {
|
||
this.selectedGraphic.style.outlineStyle.materialOptions.color = this.itemdata.fillColor;
|
||
}
|
||
|
||
// // 移除之前的监听器
|
||
// map.off(mars3d.EventType.postUpdate, updateGraphicStyle);
|
||
|
||
// // 添加新的监听器
|
||
// map.on(mars3d.EventType.postUpdate, function (event) {
|
||
// console.log("更新了", event);
|
||
// // 在这里可以进行其他操作
|
||
// });
|
||
const graphic = this.graphicLayer.getGraphicById(
|
||
this.selectedGraphic.id
|
||
);
|
||
|
||
// console.log("graphic", graphic);
|
||
// console.dir("111111",graphic)
|
||
// console.log("graphic", graphic.redraw());
|
||
graphic.redraw();
|
||
|
||
// 重新渲染地图
|
||
// this.map.render();
|
||
// 关闭弹窗
|
||
this.graphicLayer.unbindPopup();
|
||
|
||
// 清理 selectedGraphic.value
|
||
// this.selectedGraphic = null;
|
||
}
|
||
},
|
||
|
||
// 删除
|
||
deleteSelectedGraphic() {
|
||
if (this.selectedGraphic) {
|
||
this.updateGraphicStyle();
|
||
this.graphicLayer.removeGraphic(this.selectedGraphic);
|
||
this.selectedGraphic = null;
|
||
this.itemdata = {};
|
||
}
|
||
},
|
||
// 保存区域
|
||
saveArea() {
|
||
if (this.graphicLayer) {
|
||
this.updateGraphicStyle();
|
||
|
||
const graphics = this.graphicLayer.getGraphics();
|
||
const features = graphics
|
||
.map(graphic => {
|
||
const geometry = graphic.positions; // 获取图形的坐标点
|
||
console.log("图形坐标点:", geometry); // 调试信息
|
||
|
||
// 将笛卡尔坐标转换为经纬度坐标
|
||
const positions = geometry.map(point => {
|
||
const cartographic = Cesium.Cartographic.fromCartesian(point);
|
||
return [
|
||
Cesium.Math.toDegrees(cartographic.longitude),
|
||
Cesium.Math.toDegrees(cartographic.latitude)
|
||
];
|
||
});
|
||
|
||
const properties = {
|
||
fillColor:
|
||
graphic.style.outlineColor ||
|
||
graphic.style.outlineStyle.materialOptions.color,
|
||
collColor: graphic.style.color,
|
||
textColor: graphic.style.label.color,
|
||
texttitle: graphic.style.label.text,
|
||
transpitem: graphic.style.opacity,
|
||
swtichitem:
|
||
graphic.style.outlineStyle.materialType == "PolylineDash"
|
||
? true
|
||
: false,
|
||
radius: graphic.style.radius
|
||
};
|
||
|
||
// 根据图形的类型（如多边形、线等）创建相应的GeoJSON几何对象
|
||
let geoJSONGeometry;
|
||
|
||
if (graphic.type === "polygonP") {
|
||
geoJSONGeometry = {
|
||
type: "polygon",
|
||
coordinates: [positions]
|
||
};
|
||
} else if (graphic.type === "polygon") {
|
||
geoJSONGeometry = {
|
||
type: "Polygon",
|
||
coordinates: [positions]
|
||
};
|
||
} else if (graphic.type === "polyline") {
|
||
geoJSONGeometry = {
|
||
type: "LineString",
|
||
coordinates: positions
|
||
};
|
||
} else if (graphic.type === "circle") {
|
||
geoJSONGeometry = {
|
||
type: "Circle",
|
||
coordinates: positions
|
||
};
|
||
} else {
|
||
// 其他类型的图形处理
|
||
return null;
|
||
}
|
||
|
||
return {
|
||
type: "Feature",
|
||
geometry: geoJSONGeometry,
|
||
properties: properties
|
||
};
|
||
})
|
||
.filter(feature => feature !== null); // 过滤掉无效的图形
|
||
|
||
const geoJSON = {
|
||
type: "FeatureCollection",
|
||
features: features
|
||
};
|
||
|
||
console.log("导出的GeoJSON数据", JSON.stringify(geoJSON, null, 2));
|
||
|
||
this.$parent.cardForm.configValue = JSON.stringify(geoJSON);
|
||
// this.onclonemap();
|
||
this.$parent.saveCardFncon();
|
||
} else {
|
||
this.$parent.MarsBoxSwtich = false;
|
||
}
|
||
}
|
||
},
|
||
beforeDestroy() {
|
||
// 组件销毁前，销毁地图
|
||
if (this.map) {
|
||
this.map.destroy();
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
::v-deep .cesium-viewer {
|
||
// background: red !important;
|
||
|
||
.cesium-viewer-toolbar {
|
||
width: 100px;
|
||
height: 100px;
|
||
|
||
display: flex;
|
||
flex-direction: column;
|
||
// background: red !important;
|
||
position: absolute;
|
||
left: 15px; /* 调整到左下角 */
|
||
top: 670px; /* 调整到左下角 */
|
||
z-index: 9999 !important; /* 确保在地图上方 */
|
||
}
|
||
|
||
// .mars3d-locationba {
|
||
// background: red !important;
|
||
|
||
// .mars3d-locationbar-content {
|
||
// margin-top: 10px !important;
|
||
// }
|
||
// }
|
||
|
||
.cesium-baseLayerPicker-dropDown {
|
||
top: -242px;
|
||
right: -304px;
|
||
}
|
||
|
||
.cesium-viewer-geocoderContainer {
|
||
position: relative;
|
||
display: inline-block;
|
||
margin: 0 3px;
|
||
position: absolute;
|
||
top: -41px;
|
||
left: -1px;
|
||
}
|
||
}
|
||
|
||
.mars3d-com {
|
||
width: 1882px;
|
||
height: 781px;
|
||
position: relative;
|
||
|
||
.mars-3d-deleter {
|
||
width: 300px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 15px;
|
||
height: 42px;
|
||
// border-left: 5px solid linear-gradient(180deg, #3170e2 0%, #52b2ee 100%);
|
||
// border-bottom: 2px solid #4faced;
|
||
background: rgba(11, 22, 51, 0.3);
|
||
background-image: url("~@/assets/images/mapbox/Group 31.png");
|
||
background-position: center center;
|
||
background-repeat: no-repeat;
|
||
|
||
background-size: 100% 100%;
|
||
color: #ffffff;
|
||
// box-sizing: border-box;
|
||
|
||
position: absolute;
|
||
right: 50px;
|
||
top: 20px;
|
||
}
|
||
|
||
.mars3d-box {
|
||
position: absolute;
|
||
right: 50px;
|
||
top: 70px;
|
||
|
||
width: 300px;
|
||
height: 420px;
|
||
// background: #3c444f;
|
||
background-image: url("~@/assets/images/mapbox/Rectangle 24.png");
|
||
// background-position: center center;
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
z-index: 1000;
|
||
padding: 0 15px 15px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
// position: relative;
|
||
color: #ffffff;
|
||
border-radius: 5px;
|
||
|
||
.mars-3d-header {
|
||
width: 100%;
|
||
display: flex;
|
||
height: 45px;
|
||
line-height: 45px;
|
||
padding-left: 15px !important;
|
||
padding-right: 15px !important;
|
||
// background: #2a3653;
|
||
|
||
// border: 1px solid #344c7b;
|
||
background-image: url("~@/assets/images/mapbox/Rectangle 22.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
position: absolute;
|
||
left: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
border: 10px 10px 0 0 !important;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
::v-deep .el-radio-group {
|
||
// background: skyblue !important;
|
||
|
||
.el-radio__label {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
i {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.mars3d-Controls {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.mars3d-item {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.mar3d-title {
|
||
width: 100px;
|
||
}
|
||
|
||
.distinction {
|
||
// background: skyblue;
|
||
display: flex;
|
||
// align-items: flex-start;
|
||
align-items: center;
|
||
|
||
input {
|
||
width: 140px !important;
|
||
}
|
||
|
||
::v-deep .el-color-picker--small .el-color-picker__trigger {
|
||
width: 23px !important;
|
||
height: 23px !important;
|
||
margin-right: 8px !important;
|
||
margin-top: 5px !important;
|
||
}
|
||
}
|
||
|
||
.mar3d-con {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
// background: skyblue;
|
||
|
||
.block {
|
||
width: 180px;
|
||
|
||
::v-deep .el-slider__runway {
|
||
background-image: url("~@/assets/images/mapbox/Rectangle 34624274.png") !important;
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
|
||
.el-slider__bar {
|
||
background: transparent !important;
|
||
}
|
||
|
||
.el-slider__button {
|
||
// background: yellow !important;
|
||
background-image: url("~@/assets/images/mapbox/Group 1000015866.png") !important;
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
border: 0px !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 搜索
|
||
.map-search {
|
||
width: 300px;
|
||
height: 300px;
|
||
|
||
position: absolute;
|
||
top: 30px;
|
||
left: 20px;
|
||
|
||
// background: skyblue;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
::v-deep .el-input {
|
||
// background: red !important;
|
||
|
||
input {
|
||
border: 1px solid #3e62a6;
|
||
background: #778098;
|
||
|
||
color: #fff;
|
||
}
|
||
|
||
i {
|
||
display: block;
|
||
font-size: 18px;
|
||
width: 32px;
|
||
height: 32px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #29407c;
|
||
color: #ffffff;
|
||
margin-right: -5px;
|
||
}
|
||
}
|
||
|
||
.sea-list {
|
||
width: 100%;
|
||
flex: 1;
|
||
background-image: url("~@/assets/images/mapbox/Rectangle 24.png");
|
||
// background-position: center center;
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
box-sizing: border-box;
|
||
color: #ffffff;
|
||
|
||
.sea-item {
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
height: 25px;
|
||
cursor: pointer;
|
||
padding: 0 5px;
|
||
|
||
white-space: nowrap; /* 防止文字换行 */
|
||
overflow: hidden; /* 隐藏超出部分 */
|
||
text-overflow: ellipsis; /* 显示省略号 */
|
||
|
||
display: flex;
|
||
// justify-content: center;
|
||
align-items: center;
|
||
|
||
&:hover {
|
||
background: #cccccc;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |