<template>
|
<div class="yqfkPanel">
|
<ul>
|
<li v-for="(item, index) in tabs" :key="index" @click="itemHandle(item.t)">
|
<span>{{ `${item.t}（${item.num}例）` }}</span>
|
</li>
|
</ul>
|
</div>
|
</template>
|
<script>
|
|
let yiqingObj;
|
let layer = '';
|
let _filter = {};
|
import { creatPoiLayer } from '@/utils/map';
|
import axios from "axios";
|
export default {
|
name: "yqfk",
|
data() {
|
return {
|
tabs: [],
|
};
|
},
|
beforeCreate() {
|
_filter = {};
|
//对数据进行出路
|
axios.get("./static/geojson/yqfk.json").then(res => {
|
if (res.status === 200) {
|
res.data.features.forEach(item => {
|
const _key = item.properties['检测阳'];
|
if (!_filter[_key]) {
|
_filter[_key] = [];
|
}
|
_filter[_key].push(item);
|
});
|
for (let key in _filter) {
|
this.tabs.push({
|
t: key,
|
num: _filter[key].length,
|
isActive: false
|
})
|
}
|
this.tabs.sort((a, b) => {
|
return Number(a.t.replaceAll('/', '')) - Number(b.t.replaceAll('/', ''))
|
})
|
}
|
})
|
},
|
mounted() {
|
this.yqfkHandle('./static/geojson/yqfk.json', true)
|
},
|
methods: {
|
yqfkHandle(data, flag) {
|
|
if (window.yqfkGeojson) {
|
sgworld.Viewer.dataSources.remove(window.yqfkGeojson.item);
|
window.yqfkGeojson = null;
|
window.sxthandler.destroy();
|
if (flag) return;
|
}
|
let _this = this;
|
var options = {
|
image: window.SmartEarthRootUrl + "Workers/image/point.png",
|
show: true,
|
scale: 0.5,
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.CENTER,
|
eyeOffset: Cesium.Cartesian3.ZERO,
|
pixelOffset: Cesium.Cartesian2.ZERO,
|
rotation: 0,
|
alignedAxis: Cesium.Cartesian3.ZERO,
|
width: undefined,
|
height: undefined,
|
color: Cesium.Color.WHITE,
|
heightReference: Cesium.HeightReference.NONE,
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
};
|
|
window.yqfkGeojson = sgworld.Creator.createBillboardGeoJsonFeature(
|
"",
|
data,
|
options,
|
"0",
|
true,
|
function (data) {
|
sgworld.Navigate.flyToObj(data);
|
data.entities.values.map((item) => {
|
item.tag = "yqfk";
|
});
|
}
|
);
|
window.sxthandler = new Cesium.ScreenSpaceEventHandler(
|
Viewer.scene.canvas
|
);
|
window.sxthandler.setInputAction((event) => {
|
let pick = sgworld.Viewer.scene.pick(event.position);
|
if (pick && pick.id && pick.id.tag == "yqfk") {
|
|
var earthPosition = sgworld.Viewer.camera.pickEllipsoid(
|
event.position,
|
sgworld.Viewer.scene.globe.ellipsoid
|
);
|
var cartographic = Cesium.Cartographic.fromCartesian(
|
earthPosition,
|
sgworld.Viewer.scene.globe.ellipsoid,
|
new Cesium.Cartographic()
|
);
|
|
const lat = Cesium.Math.toDegrees(cartographic.latitude);
|
const lng = Cesium.Math.toDegrees(cartographic.longitude);
|
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler &&
|
sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end && sgworld.drawObj.end());
|
|
const props = pick.id.properties;
|
const write = {
|
'姓名': props['_姓名']._value,
|
'性别': props['_性别']._value,
|
'年龄': props['_年龄']._value,
|
'家庭': props['_家庭_1']._value,
|
'检测阳': props['检测阳']._value,
|
'与病例': props['_与病例']._value,
|
'职业': props['_职业']._value,
|
'感染': props['_感染_1']._value,
|
'发现方': props['_发现方']._value,
|
}
|
creatPoiLayer(write, [lng, lat], pick.id)
|
}
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
},
|
itemHandle(params) {
|
if (window.poiLayerObj) {
|
window.poiLayerObj.deleteObject()
|
}
|
const _json = {
|
"type": "FeatureCollection",
|
"name": "病例汇总表",
|
"crs": {
|
"type": "name",
|
"properties": {
|
"name": "urn:ogc:def:crs:EPSG::4490"
|
}
|
},
|
}
|
_json.features = _filter[params];
|
this.yqfkHandle(_json, false)
|
// if (params % 2 == 0) {
|
// layer = '病例汇总表2-0'
|
// } else {
|
// layer = '病例汇总表2-1'
|
// }
|
// if (yiqingObj) {
|
// yiqingObj.destroy();
|
// }
|
// let sgwfs = new SmartEarth.WFSTool(window.Viewer)
|
// yiqingObj = sgwfs.CreateWfs('point', {
|
// urls: 'http://10.10.4.116:8070/gisserver/wfsserver/YiZhuangbingli',
|
// layer: layer,
|
// text: '[姓名]',
|
// image: SmartEarthRootUrl + 'Workers/image/mark.png',
|
// //offsetX: 20,
|
// offsetY: -40,
|
// color: '#de3',
|
// disableDepthTestDistance: Infinity
|
// })
|
|
|
},
|
},
|
beforeDestroy() {
|
if (yiqingObj) {
|
yiqingObj.destroy();
|
}
|
if (window.yqfkGeojson) {
|
sgworld.Viewer.dataSources.remove(window.yqfkGeojson.item);
|
window.yqfkGeojson = null;
|
window.sxthandler.destroy();
|
}
|
if (window.poiLayerObj) {
|
window.poiLayerObj.deleteObject()
|
}
|
},
|
};
|
</script>
|
<style scoped>
|
.yqfkPanel {
|
position: absolute;
|
bottom: 60px;
|
left: 50%;
|
transform: translateX(-50%);
|
|
}
|
|
ul {
|
text-align: center;
|
margin: 0px auto;
|
}
|
|
ul li {
|
list-style: none;
|
float: left;
|
width: 140px;
|
font-size: 13px;
|
background-color: rgba(14,50,143,0.6);
|
border: 1px solid #ccc;
|
color: white;
|
text-align: center;
|
height: 33px;
|
line-height: 33px;
|
cursor: pointer;
|
|
}
|
|
ul li:hover {
|
background-color: rgba(0, 0, 0, 0.3);
|
}
|
</style>
|
