527 lines
14 KiB
Vue
527 lines
14 KiB
Vue
|
<template>
|
||
|
|
<div class="ditu">
|
||
|
|
<div id="marsContainer-map" ref="marsMaps" class="mars3d-container"></div>
|
||
|
|
<div class="btns" v-if="!disabled">
|
||
|
|
<div class="toolbar" v-if="typeOf === 'polygon'">
|
||
|
|
<div
|
||
|
|
:class="{ drawPolygon: true, disabled: isDisabled }"
|
||
|
|
@click="lineClick('polygon')"
|
||
|
|
>
|
||
|
|
<div class="drawPolygonIcon"></div>
|
||
|
|
</div>
|
||
|
|
<!-- <div class="drawPolygon" @click="lineClick('circle')">
|
||
|
|
<div class="drawCircularIcon"></div>
|
||
|
|
</div> -->
|
||
|
|
<!-- <div class="drawPolygon">
|
||
|
|
<el-upload
|
||
|
|
action=""
|
||
|
|
class="upload-demo"
|
||
|
|
:before-upload="beforeUpload"
|
||
|
|
:on-change="handleChange"
|
||
|
|
:file-list="fileList"
|
||
|
|
:show-file-list="false"
|
||
|
|
accept=".json"
|
||
|
|
:auto-upload="false"
|
||
|
|
ref="upLoad"
|
||
|
|
>
|
||
|
|
<i class="el-icon-upload2"></i>
|
||
|
|
</el-upload>
|
||
|
|
</div> -->
|
||
|
|
</div>
|
||
|
|
<div class="toolbar" v-if="typeOf === 'pointP'">
|
||
|
|
<div class="drawPolygon" @click="lineClick('pointP')">
|
||
|
|
<div class="drawpointIcon"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="topbtns">
|
||
|
|
<el-input
|
||
|
|
v-model="lonAndlat"
|
||
|
|
placeholder="请输入经纬度"
|
||
|
|
@keyup.enter.native="handleSearchClick()"
|
||
|
|
></el-input>
|
||
|
|
<!-- <el-button @click="handleSearchClick()">跳转</el-button> -->
|
||
|
|
<el-button class="btns" @click="clearDraw">清空</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
"use script";
|
||
|
|
import { Drawarectangle } from "./map.js";
|
||
|
|
export default {
|
||
|
|
name: "myMarsmap",
|
||
|
|
props: {
|
||
|
|
mapData: {
|
||
|
|
type: Object,
|
||
|
|
default: () => {}
|
||
|
|
},
|
||
|
|
mapgeoJson: {
|
||
|
|
type: String,
|
||
|
|
default: ""
|
||
|
|
},
|
||
|
|
typeOf: {
|
||
|
|
type: String
|
||
|
|
},
|
||
|
|
disabled: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
jsonData: [],
|
||
|
|
lon: "",
|
||
|
|
lat: "",
|
||
|
|
num: 0,
|
||
|
|
attrType: "",
|
||
|
|
fileList: [],
|
||
|
|
lonAndlat: "",
|
||
|
|
fileContent: "",
|
||
|
|
isDisabled: false
|
||
|
|
};
|
||
|
|
},
|
||
|
|
components: {},
|
||
|
|
mounted() {
|
||
|
|
this.getMapJson();
|
||
|
|
console.log(this.typeOf, "this.typeOf");
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
mapgeoJson: {
|
||
|
|
deep: true,
|
||
|
|
immediate: true,
|
||
|
|
handler(newVal) {
|
||
|
|
if (newVal) {
|
||
|
|
this.jsonData = JSON.parse(newVal);
|
||
|
|
if (this.jsonData) {
|
||
|
|
if (newVal) {
|
||
|
|
this.showRegion(this.jsonData, "geojson");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mapData: {
|
||
|
|
deep: true,
|
||
|
|
immediate: true,
|
||
|
|
handler(newVal) {
|
||
|
|
if (newVal) {
|
||
|
|
console.log("mapData发生变化", newVal);
|
||
|
|
this.lon = newVal.lon;
|
||
|
|
this.lat = newVal.lat;
|
||
|
|
if (this.lon && this.lat) {
|
||
|
|
if (this.lon && this.lat) {
|
||
|
|
this.deviceDrid(this.lon, this.lat);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleSearchClick() {
|
||
|
|
if (this.lonAndlat !== "") {
|
||
|
|
let lon = this.lonAndlat.split(",");
|
||
|
|
this.map.setCameraView(
|
||
|
|
{ lat: lon[1], lng: lon[0], alt: 4607, pitch: -50 },
|
||
|
|
{ duration: 0 }
|
||
|
|
);
|
||
|
|
if (lon[0] && lon[1]) {
|
||
|
|
if (this.typeOf === "pointP") {
|
||
|
|
this.deviceDrid(lon[0], lon[1]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getMapJson() {
|
||
|
|
// eslint-disable-next-line no-undef
|
||
|
|
mars3d.Util.fetchJson({
|
||
|
|
url: "/configJson/mapArea.json"
|
||
|
|
}).then((res) => {
|
||
|
|
this.initMarsMap({
|
||
|
|
// 合并配置项
|
||
|
|
...res.map3d
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
initMarsMap(options) {
|
||
|
|
// eslint-disable-next-line no-undef
|
||
|
|
this.map = new mars3d.Map(this.$refs.marsMaps, options);
|
||
|
|
// eslint-disable-next-line no-undef
|
||
|
|
this.graphicLayer = new mars3d.layer.GraphicLayer();
|
||
|
|
this.map.addLayer(this.graphicLayer);
|
||
|
|
|
||
|
|
// 设备点位
|
||
|
|
// eslint-disable-next-line no-undef
|
||
|
|
this.graphicDevice = new mars3d.layer.GraphicLayer();
|
||
|
|
this.map.addLayer(this.graphicDevice);
|
||
|
|
// 禁止右键菜单
|
||
|
|
this.map.unbindContextMenu();
|
||
|
|
this.map.setCameraView(
|
||
|
|
{
|
||
|
|
lat: "43.895464",
|
||
|
|
lng: "109.10559",
|
||
|
|
alt: 3269697,
|
||
|
|
pitch: -90,
|
||
|
|
heading: 360
|
||
|
|
},
|
||
|
|
{ duration: 0 }
|
||
|
|
);
|
||
|
|
|
||
|
|
// 针对不同终端的优化配置
|
||
|
|
// eslint-disable-next-line no-undef
|
||
|
|
if (mars3d.Util.isPCBroswer()) {
|
||
|
|
this.map.zoomFactor = 2.0; // 鼠标滚轮放大的步长参数
|
||
|
|
|
||
|
|
// IE浏览器优化
|
||
|
|
if (navigator.userAgent.toLowerCase().includes("msie")) {
|
||
|
|
this.map.viewer.targetFrameRate = 20; // 限制帧率
|
||
|
|
this.map.scene.requestRenderMode = false; // 取消实时渲染
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
this.map.zoomFactor = 5.0; // 鼠标滚轮放大的步长参数
|
||
|
|
|
||
|
|
// 移动设备上禁掉以下几个选项，可以相对更加流畅
|
||
|
|
this.map.scene.requestRenderMode = false; // 取消实时渲染
|
||
|
|
this.map.scene.fog.enabled = false;
|
||
|
|
this.map.scene.skyAtmosphere.show = false;
|
||
|
|
this.map.scene.globe.showGroundAtmosphere = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
// map构造完成后的一些处理
|
||
|
|
this.onMapLoad();
|
||
|
|
// this.map.on(
|
||
|
|
// // eslint-disable-next-line no-undef
|
||
|
|
// mars3d.EventType.click,
|
||
|
|
// this.map_dblClickHandler,
|
||
|
|
// this.graphicLayer
|
||
|
|
// );
|
||
|
|
// this.map.on(mars3d.EventType.dblClick, map_clickHandler, graphicLayer)
|
||
|
|
},
|
||
|
|
// map_dblClickHandler() {},
|
||
|
|
onMapLoad() {
|
||
|
|
console.log("地图加载完成", this.graphicLayer);
|
||
|
|
// 设置鼠标操作习惯,更换中键和右键
|
||
|
|
this.map.changeMouseModel(true);
|
||
|
|
if (this.jsonData.length !== 0) {
|
||
|
|
this.showRegion(this.jsonData, "geojson");
|
||
|
|
}
|
||
|
|
if (this.lon && this.lat) {
|
||
|
|
this.deviceDrid(this.lon, this.lat);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
lineClick(val) {
|
||
|
|
console.log(val, this.graphicLayer._graphicList._hash[val], "val");
|
||
|
|
// if()
|
||
|
|
if (this.graphicLayer._graphicList._hash[val] === undefined) {
|
||
|
|
this.attrType = val;
|
||
|
|
let style = {};
|
||
|
|
if (val === "polygon") {
|
||
|
|
style = {
|
||
|
|
// eslint-disable-next-line no-undef
|
||
|
|
materialType: mars3d.MaterialType.PolyGradient,
|
||
|
|
materialOptions: {
|
||
|
|
color: "#3388cc",
|
||
|
|
opacity: 0.7,
|
||
|
|
alphaPower: 1.3
|
||
|
|
}
|
||
|
|
};
|
||
|
|
} else if (val === "pointP") {
|
||
|
|
this.clearDraw();
|
||
|
|
this.graphicLayer.eachGraphic((item) => {
|
||
|
|
if (item.id === "pointP") {
|
||
|
|
this.graphicLayer.removeGraphic(item);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
style = {
|
||
|
|
color: "#ffff00",
|
||
|
|
pixelSize: 10,
|
||
|
|
clampToGround: true,
|
||
|
|
outlineWidth: 0
|
||
|
|
};
|
||
|
|
} else if (val === "circle") {
|
||
|
|
style = {
|
||
|
|
// eslint-disable-next-line no-undef
|
||
|
|
materialType: mars3d.MaterialType.PolyGradient,
|
||
|
|
materialOptions: {
|
||
|
|
color: "#ffff00",
|
||
|
|
opacity: 0.7,
|
||
|
|
alphaPower: 1.3
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
Drawarectangle(val, this.graphicLayer, style);
|
||
|
|
} else {
|
||
|
|
this.$message.error("请先清空数据在添加");
|
||
|
|
}
|
||
|
|
},
|
||
|
|
clearDraw() {
|
||
|
|
if (this.graphicLayer) {
|
||
|
|
this.graphicLayer.clear();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
toGeoJSON() {
|
||
|
|
return this.graphicLayer.toGeoJSON({ noAlt: true });
|
||
|
|
},
|
||
|
|
showRegion(value, type) {
|
||
|
|
let geojson = {};
|
||
|
|
if (type === "uploadGeojson") {
|
||
|
|
if (this.graphicLayer._graphicList.length === 0) {
|
||
|
|
geojson = value;
|
||
|
|
} else {
|
||
|
|
this.$message.error("请先清空数据在添加");
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
geojson = {
|
||
|
|
type: "Feature",
|
||
|
|
geometry: value,
|
||
|
|
properties: {
|
||
|
|
name: ""
|
||
|
|
}
|
||
|
|
};
|
||
|
|
this.clearDraw();
|
||
|
|
}
|
||
|
|
if (this.graphicLayer) {
|
||
|
|
this.graphicLayer.loadGeoJSON(geojson, {
|
||
|
|
style: {
|
||
|
|
type: "polygon",
|
||
|
|
// eslint-disable-next-line no-undef
|
||
|
|
materialType: mars3d.MaterialType.PolyGradient,
|
||
|
|
materialOptions: {
|
||
|
|
color: "#3388cc",
|
||
|
|
opacity: 0.7,
|
||
|
|
alphaPower: 1.3
|
||
|
|
}
|
||
|
|
},
|
||
|
|
flyTo: true
|
||
|
|
});
|
||
|
|
let _this = this;
|
||
|
|
// eslint-disable-next-line no-undef
|
||
|
|
this.graphicLayer.on(mars3d.EventType.click, function (event) {
|
||
|
|
_this.attrType = "";
|
||
|
|
console.log("单击了图层", event);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
deviceDrid(lon, lat) {
|
||
|
|
console.log(lon, lat);
|
||
|
|
this.clearDraw();
|
||
|
|
// eslint-disable-next-line no-undef
|
||
|
|
const graphic = new mars3d.graphic.PointPrimitive({
|
||
|
|
name: "贴地点",
|
||
|
|
// eslint-disable-next-line no-undef
|
||
|
|
position: new mars3d.LngLatPoint(lon, lat),
|
||
|
|
style: {
|
||
|
|
color: "#ffff00",
|
||
|
|
pixelSize: 10,
|
||
|
|
clampToGround: true,
|
||
|
|
outlineWidth: 0
|
||
|
|
},
|
||
|
|
flyTo: true
|
||
|
|
});
|
||
|
|
if (this.graphicLayer) {
|
||
|
|
this.graphicLayer.addGraphic(graphic);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 地图跳转
|
||
|
|
mapJump(lon, lat, alt) {
|
||
|
|
if (lon !== 0 && lat !== 0) {
|
||
|
|
this.map.setCameraView({
|
||
|
|
lat: lat,
|
||
|
|
lng: lon,
|
||
|
|
alt: alt || 10000,
|
||
|
|
pitch: -90
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
clearDevice() {
|
||
|
|
if (this.graphicDevice) {
|
||
|
|
this.graphicDevice.clear();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 设备点位
|
||
|
|
mapDevice(lon, lat) {
|
||
|
|
if (lon !== null && lat !== null) {
|
||
|
|
this.clearDevice();
|
||
|
|
// eslint-disable-next-line no-undef
|
||
|
|
const graphic = new mars3d.graphic.PointPrimitive({
|
||
|
|
name: "设备点位",
|
||
|
|
// eslint-disable-next-line no-undef
|
||
|
|
position: new mars3d.LngLatPoint(lon, lat),
|
||
|
|
style: {
|
||
|
|
color: "#ff0000",
|
||
|
|
pixelSize: 10,
|
||
|
|
clampToGround: true,
|
||
|
|
outlineWidth: 0
|
||
|
|
},
|
||
|
|
flyTo: true
|
||
|
|
});
|
||
|
|
if (this.graphicDevice) {
|
||
|
|
this.graphicDevice.addGraphic(graphic);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
this.clearDevice();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
beforeUpload(file) {
|
||
|
|
console.log(file);
|
||
|
|
// const isJson = file.type === "json/geojson";
|
||
|
|
// if (!isJson) {
|
||
|
|
// this.$message.error("只能上传 JSON 或 GeoJSON 文件");
|
||
|
|
// }
|
||
|
|
// return isJson;
|
||
|
|
const isJPG = file.type === "image/jpeg";
|
||
|
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
||
|
|
|
||
|
|
if (!isJPG) {
|
||
|
|
this.$message.error("上传头像图片只能是 JPG 格式!");
|
||
|
|
}
|
||
|
|
if (!isLt2M) {
|
||
|
|
this.$message.error("上传头像图片大小不能超过 2MB!");
|
||
|
|
}
|
||
|
|
return isJPG && isLt2M;
|
||
|
|
},
|
||
|
|
handleChange(file) {
|
||
|
|
console.log(file);
|
||
|
|
const reader = new FileReader();
|
||
|
|
reader.onload = (e) => {
|
||
|
|
const content = e.target.result;
|
||
|
|
this.fileContent = JSON.parse(content);
|
||
|
|
console.log(this.fileContent);
|
||
|
|
this.showRegion(this.fileContent, "uploadGeojson");
|
||
|
|
};
|
||
|
|
reader.readAsText(file.raw);
|
||
|
|
// this.$refs.upLoad.submit();
|
||
|
|
},
|
||
|
|
isGeoJSON(content) {
|
||
|
|
try {
|
||
|
|
// eslint-disable-next-line no-undef
|
||
|
|
const multiPolygon = turf.multiPolygon(content);
|
||
|
|
console.log("MultiPolygon is valid:", multiPolygon);
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error processing MultiPolygon:", error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.ditu {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
position: relative;
|
||
|
|
#marsContainer-map {
|
||
|
|
width: 100%;
|
||
|
|
height: 250px;
|
||
|
|
}
|
||
|
|
.topbtns {
|
||
|
|
width: 100%;
|
||
|
|
height: 45px;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: flex-start;
|
||
|
|
background-color: rgba(30, 93, 160, 0.5);
|
||
|
|
.el-input {
|
||
|
|
width: 60%;
|
||
|
|
margin-left: 1%;
|
||
|
|
// transform: translateX(-50%);
|
||
|
|
}
|
||
|
|
.el-button--small {
|
||
|
|
margin-left: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.toolbar {
|
||
|
|
position: absolute;
|
||
|
|
right: 0%;
|
||
|
|
top: 0%;
|
||
|
|
z-index: 999;
|
||
|
|
height: auto;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
.disabled {
|
||
|
|
pointer-events: none;
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
.drawPolygon {
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
margin-top: 3px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
cursor: pointer;
|
||
|
|
background: rgba(15, 24, 41, 0.5);
|
||
|
|
border-radius: 8px;
|
||
|
|
margin-right: 5px;
|
||
|
|
.drawPolygonIcon {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background: url(@/assets/img/wbx.png);
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.drawPolygonIcon:hover {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background: url(@/assets/img/wbxH.png);
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.drawCircularIcon {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background: url(@/assets/img/y.png);
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.drawCircularIcon:hover {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background: url(@/assets/img/yh.png);
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.drawpointIcon {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background: url(@/assets/img/point.png);
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.drawpointIcon:hover {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background: url(@/assets/img/pointh.png);
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.el-icon-upload2 {
|
||
|
|
color: #fff;
|
||
|
|
font-size: 16px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.el-icon-upload2:hover {
|
||
|
|
color: #1e5da0;
|
||
|
|
font-size: 16px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|