|
|
@@ -38,7 +38,31 @@
|
|
|
<div class="close" @click="closeZXQ">×</div>
|
|
|
<iframe allow="geolocation; microphone; camera; midi; encrypted-media;" :src="zxqUrl" frameborder="0" ></iframe>
|
|
|
</div>
|
|
|
-
|
|
|
+ <div :class="isMobile == true ? 'filterCascader-mb':'filterCascader'" v-if=isShowFilter>
|
|
|
+ <el-cascader
|
|
|
+ v-model="filterArr"
|
|
|
+ :options="filterOptions"
|
|
|
+ :props="filterProps"
|
|
|
+ placeholder="请选择类型"
|
|
|
+ collapse-tags
|
|
|
+ :max-collapse-tags="1"
|
|
|
+ collapse-tags-tooltip
|
|
|
+ @change="handleTypeChange"
|
|
|
+ >
|
|
|
+ <template #default="{ node, data }">
|
|
|
+ <el-tooltip
|
|
|
+ :content="data.label"
|
|
|
+ placement="top"
|
|
|
+ effect="dark"
|
|
|
+ >
|
|
|
+ <div class="cascader-item" style="overflow: hidden;text-align: left;text-overflow: ellipsis;white-space: nowrap;">
|
|
|
+ <el-image style="width: 16px; height: 16px;top: 2px;padding-right: 5px;" :src="`./static/image/${data.icon}`" />
|
|
|
+ <span class="cascader-label">{{ data.label }}</span>
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </template>
|
|
|
+ </el-cascader>
|
|
|
+ </div>
|
|
|
<!-- <div class="control3D">
|
|
|
<div class="label">三维模型</div>
|
|
|
<el-switch v-model="isShow3D" size="large" active-text @change="changeModel" />
|
|
|
@@ -130,25 +154,29 @@
|
|
|
|
|
|
<div class="tips">试运行阶段服务范围：夏阳街道、盈浦街道、赵巷镇</div>
|
|
|
<div class="yjdpInfoDialog" v-show="yjdpInfoDialogShow">
|
|
|
- <div class="close" @click="closeYJDP">×</div>
|
|
|
+ <div class="title">
|
|
|
+ <div v-if="nowPoint != null"><el-image style="width: 18px; height: 18px;top: 2px;padding-right: 5px;" :src="getICONPATH(nowPoint.properties['类型'])" />{{ nowPoint.properties["类型"] }}</div>
|
|
|
+ <div class="close" @click="closeYJDP">×</div>
|
|
|
+ </div>
|
|
|
<div class="content" v-if="nowPoint != null">
|
|
|
<el-scrollbar>
|
|
|
<div class="item">店铺名称: {{ nowPoint.properties["店铺名称"] }}</div>
|
|
|
<div class="item">店铺类型: {{ nowPoint.properties["店铺类型"] }}</div>
|
|
|
<div class="item">街镇名称: {{ nowPoint.properties["街镇"] }}</div>
|
|
|
- <div class="item">道路名称: {{ nowPoint.properties["道路名称"] }}</div>
|
|
|
+ <!-- <div class="item">道路名称: {{ nowPoint.properties["道路名称"] }}</div> -->
|
|
|
<div class="item">店铺地址: {{ nowPoint.properties["地址"] }}</div>
|
|
|
</el-scrollbar>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="kzdpInfoDialog" v-show="kzdpInfoDialogShow">
|
|
|
- <div class="close" @click="closeKZDP">×</div>
|
|
|
+ <!-- <div class="close" @click="closeKZDP">×</div> -->
|
|
|
+ <div class="title"><div v-if="nowPoint != null">空置店铺</div><div class="close" @click="closeKZDP">×</div></div>
|
|
|
<div class="content" v-if="nowPoint != null">
|
|
|
<el-scrollbar>
|
|
|
<div class="item">店铺名称: {{ nowPoint.properties["店铺名称"] }}</div>
|
|
|
<div class="item">店铺类型: {{ nowPoint.properties["店铺类型"] }}</div>
|
|
|
<div class="item">街镇名称: {{ nowPoint.properties["街镇"] }}</div>
|
|
|
- <div class="item">道路名称: {{ nowPoint.properties["道路名称"] }}</div>
|
|
|
+ <!-- <div class="item">道路名称: {{ nowPoint.properties["道路名称"] }}</div> -->
|
|
|
<div class="item">店铺地址: {{ nowPoint.properties["地址"] }}</div>
|
|
|
</el-scrollbar>
|
|
|
</div>
|
|
|
@@ -467,7 +495,7 @@ export default {
|
|
|
layerList: arr,
|
|
|
wmslayer: {},
|
|
|
|
|
|
- curFileName:'沿街店铺-20260317.geojson',
|
|
|
+ curFileName:'沿街店铺-20261020.geojson',
|
|
|
|
|
|
heatmapPanelShow: false,
|
|
|
heatmapList: arrHeatmap,
|
|
|
@@ -485,7 +513,20 @@ export default {
|
|
|
kdwlPointTCHandle:1,
|
|
|
layerRequesting: {},
|
|
|
layerAbortControllers: {},
|
|
|
-
|
|
|
+ filterArr:['餐饮业','零售业','居民服务业','广播、电视、电影和录音制作业','体育业','娱乐业','商业服务业','住宿业','卫生'],//过滤显示的字段
|
|
|
+ filterOptions:[
|
|
|
+ {value:'餐饮业',label:'餐饮业',icon:'point-cy.png'},
|
|
|
+ {value:'零售业',label:'零售业',icon:'point-ls.png'},
|
|
|
+ {value:'居民服务业',label:'居民服务业',icon:'point-jmfw.png'},
|
|
|
+ {value:'广播、电视、电影和录音制作业',label:'广播、电视、电影和录音制作业',icon:'point-ys.png'},
|
|
|
+ {value:'体育业',label:'体育业',icon:'point-ty.png'},
|
|
|
+ {value:'娱乐业',label:'娱乐业',icon:'point-yl.png'},
|
|
|
+ {value:'商业服务业',label:'商业服务业',icon:'point-syfw.png'},
|
|
|
+ {value:'住宿业',label:'住宿业',icon:'point-zs.png'},
|
|
|
+ {value:'卫生',label:'卫生',icon:'point-ws.png'},
|
|
|
+ ],
|
|
|
+ filterProps:{multiple:true},
|
|
|
+ isShowFilter:false,
|
|
|
yhfkForm: {
|
|
|
name: "",
|
|
|
tele: "",
|
|
|
@@ -886,35 +927,45 @@ export default {
|
|
|
fetch("./static/data/"+this.curFileName)
|
|
|
.then(response => response.json())
|
|
|
.then(function (result) {
|
|
|
+ that.isShowFilter= true;
|
|
|
// 过滤空店铺数据
|
|
|
- result=result.features.filter(person =>
|
|
|
- person.properties['店铺名称'] != '空'
|
|
|
+ const res =result.features.filter(person =>
|
|
|
+ person.properties['店铺名称'] != '空' && person.properties['店铺类型'] != '空'
|
|
|
// (person.properties['店铺名称'] != '空' && person.properties['街镇'] != '夏阳街道' && person.properties['街镇'] != '盈浦街道')
|
|
|
);
|
|
|
// let arr = []
|
|
|
- // result.forEach(element => {
|
|
|
+ // res.forEach(element => {
|
|
|
// arr.push(element.properties['街镇'])
|
|
|
// });
|
|
|
// const uniqueArray = [...new Set(arr)]
|
|
|
// console.log(uniqueArray);
|
|
|
-
|
|
|
- that.pointYJDPArr = result.map(function (pointInfo) {
|
|
|
- return viewer.entities.add(new SkyScenery.Entity({
|
|
|
- position: SkyScenery.Cartesian3.fromDegrees(pointInfo.geometry.coordinates[0], pointInfo.geometry.coordinates[1]),
|
|
|
- type: "yjdp",
|
|
|
- info: {
|
|
|
- coor: [pointInfo.geometry.coordinates[0], pointInfo.geometry.coordinates[1]],
|
|
|
- properties: pointInfo.properties
|
|
|
- },
|
|
|
- billboard: {
|
|
|
- image: "./static/image/point-dp.png",
|
|
|
- disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
|
|
- scale: 0.3,
|
|
|
- horizontalOrigin: SkyScenery.HorizontalOrigin.CENTER,
|
|
|
- verticalOrigin: SkyScenery.VerticalOrigin.BOTTOM,
|
|
|
- }
|
|
|
- }));
|
|
|
+ let arrs = []
|
|
|
+ that.pointYJDPArr = res.map(function (pointInfo) {
|
|
|
+ // let str = {value: pointInfo.properties['类型'],label: pointInfo.properties['类型']}
|
|
|
+ // arrs.push(str)
|
|
|
+ let arr = [];
|
|
|
+ that.filterOptions.forEach(element => {
|
|
|
+ arr.push(element.label)
|
|
|
+ });
|
|
|
+ if(arr.includes(pointInfo.properties['类型'])){
|
|
|
+ return viewer.entities.add(new SkyScenery.Entity({
|
|
|
+ position: SkyScenery.Cartesian3.fromDegrees(pointInfo.geometry.coordinates[0], pointInfo.geometry.coordinates[1]),
|
|
|
+ type: "yjdp",
|
|
|
+ info: {
|
|
|
+ coor: [pointInfo.geometry.coordinates[0], pointInfo.geometry.coordinates[1]],
|
|
|
+ properties: pointInfo.properties
|
|
|
+ },
|
|
|
+ billboard: {
|
|
|
+ image: that.getICONPATH(pointInfo.properties['类型']),
|
|
|
+ disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
|
|
+ scale: 0.2,
|
|
|
+ horizontalOrigin: SkyScenery.HorizontalOrigin.CENTER,
|
|
|
+ verticalOrigin: SkyScenery.VerticalOrigin.BOTTOM,
|
|
|
+ }
|
|
|
+ }));
|
|
|
+ }
|
|
|
})
|
|
|
+ // that.filterOptions = that.uniqueByKey(arrs, 'value');
|
|
|
})
|
|
|
} else {
|
|
|
// 删除
|
|
|
@@ -924,13 +975,52 @@ export default {
|
|
|
this.pointYJDPArr = []
|
|
|
this.yjdpInfoDialogShow = false;
|
|
|
this.nowPoint = null
|
|
|
+ this.isShowFilter= false;
|
|
|
}
|
|
|
this.pointTCHandle();
|
|
|
},
|
|
|
+ getICONPATH(param){
|
|
|
+ let imgName = "";
|
|
|
+ this.filterOptions.forEach(element => {
|
|
|
+ if(element.label == param){
|
|
|
+ imgName = element.icon
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return `./static/image/${imgName}`;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 数组对象去重
|
|
|
+ * @param {Array} arr 原始数组
|
|
|
+ * @param {string} key 去重依据字段，如'id'
|
|
|
+ * @returns {Array} 去重后新数组
|
|
|
+ */
|
|
|
+ uniqueByKey(arr, key) {
|
|
|
+ return Object.values(arr.reduce((acc, item) => {
|
|
|
+ if (!acc[item[key]]) {
|
|
|
+ acc[item[key]] = item;
|
|
|
+ }
|
|
|
+ return acc;
|
|
|
+ }, {}));
|
|
|
+ },
|
|
|
closeYJDP() {
|
|
|
this.yjdpInfoDialogShow = false;
|
|
|
this.nowPoint = null
|
|
|
},
|
|
|
+ handleTypeChange(){
|
|
|
+ // 切换过滤条件时执行
|
|
|
+ const rawArr = JSON.parse(JSON.stringify(this.filterArr))
|
|
|
+ // 当前结构
|
|
|
+ const selectTypes = rawArr.map(item => item[0])
|
|
|
+ viewer.entities.values.forEach(entity => {
|
|
|
+ if(entity.type === 'yjdp') {
|
|
|
+ if(entity.info.properties['类型'] == undefined){
|
|
|
+ entity.show = true
|
|
|
+ }else{
|
|
|
+ entity.show = selectTypes.includes(entity.info.properties['类型']);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
// 空置店铺
|
|
|
addkzdp() {
|
|
|
let that = this;
|
|
|
@@ -941,11 +1031,11 @@ export default {
|
|
|
.then(response => response.json())
|
|
|
.then(function (result) {
|
|
|
// 过滤空店铺数据
|
|
|
- result=result.features.filter(person =>
|
|
|
- person.properties['店铺名称'] == '空'
|
|
|
+ const res = result.features.filter(person =>
|
|
|
+ person.properties['店铺名称'] == '空' || person.properties['店铺类型'] == '空'
|
|
|
);
|
|
|
// console.log('[ ddd ] >', result)
|
|
|
- that.pointKZDPArr = result.map(function (pointInfo) {
|
|
|
+ that.pointKZDPArr = res.map(function (pointInfo) {
|
|
|
return viewer.entities.add(new SkyScenery.Entity({
|
|
|
position: SkyScenery.Cartesian3.fromDegrees(pointInfo.geometry.coordinates[0], pointInfo.geometry.coordinates[1], 0.5),
|
|
|
type: "kzdp",
|
|
|
@@ -954,9 +1044,9 @@ export default {
|
|
|
properties: pointInfo.properties
|
|
|
},
|
|
|
billboard: {
|
|
|
- image: "./static/image/kzdp.png",
|
|
|
+ image: "./static/image/point-null.png",
|
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
|
|
- scale: 0.3,
|
|
|
+ scale: 0.2,
|
|
|
horizontalOrigin: SkyScenery.HorizontalOrigin.CENTER,
|
|
|
verticalOrigin: SkyScenery.VerticalOrigin.BOTTOM,
|
|
|
}
|
|
|
@@ -1012,7 +1102,7 @@ export default {
|
|
|
that.nowPoint = entity.info;
|
|
|
that.nowPoint["type"] = "yjdp";
|
|
|
let xy = that.lonlatConvertToScreenXY(entity.info.coor)
|
|
|
- document.querySelector(".yjdpInfoDialog").style.top = (xy.y - 250) + "px";
|
|
|
+ document.querySelector(".yjdpInfoDialog").style.top = (xy.y - 220) + "px";
|
|
|
document.querySelector(".yjdpInfoDialog").style.left = (xy.x - 150) + "px";
|
|
|
// document.querySelector("#yjdpInfoDialog")
|
|
|
// that.removePanel();
|
|
|
@@ -1022,7 +1112,7 @@ export default {
|
|
|
that.nowPoint = entity.info;
|
|
|
that.nowPoint["type"] = "kzdp";
|
|
|
let xy = that.lonlatConvertToScreenXY(entity.info.coor)
|
|
|
- document.querySelector(".kzdpInfoDialog").style.top = (xy.y - 250) + "px";
|
|
|
+ document.querySelector(".kzdpInfoDialog").style.top = (xy.y - 220) + "px";
|
|
|
document.querySelector(".kzdpInfoDialog").style.left = (xy.x - 150) + "px";
|
|
|
} else if (entity.type == "tjdw") {
|
|
|
that.tjdwInfoDialogShow = true
|
|
|
@@ -1104,10 +1194,10 @@ export default {
|
|
|
|
|
|
} else {
|
|
|
if (obj.type == "yjdp") {
|
|
|
- document.querySelector(".yjdpInfoDialog").style.top = (xy.y - 250) + "px";
|
|
|
+ document.querySelector(".yjdpInfoDialog").style.top = (xy.y - 220) + "px";
|
|
|
document.querySelector(".yjdpInfoDialog").style.left = (xy.x - 150) + "px";
|
|
|
} else if (obj.type == "kzdp") {
|
|
|
- document.querySelector(".kzdpInfoDialog").style.top = (xy.y - 250) + "px";
|
|
|
+ document.querySelector(".kzdpInfoDialog").style.top = (xy.y - 220) + "px";
|
|
|
document.querySelector(".kzdpInfoDialog").style.left = (xy.x - 150) + "px";
|
|
|
} else if (obj.type == "tjdw") {
|
|
|
document.querySelector(".tjdwInfoDialog").style.top = (xy.y - 300) + "px";
|
|
|
@@ -2556,26 +2646,37 @@ export default {
|
|
|
top: 0px;
|
|
|
left: 0px;
|
|
|
max-width: 400px;
|
|
|
- height: 200px;
|
|
|
+ // height: 200px;
|
|
|
+ height: auto;
|
|
|
// background: #01346f99;
|
|
|
background: #ffffff;
|
|
|
border-radius: 10px;
|
|
|
-
|
|
|
- .close {
|
|
|
- font-size: 24px;
|
|
|
+ .title{
|
|
|
position: absolute;
|
|
|
top: 6px;
|
|
|
- right: 8px;
|
|
|
+ display: flex;
|
|
|
line-height: 24px;
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
+ left: 20px;
|
|
|
+ right: 10px;
|
|
|
+ font-weight: bold;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .close {
|
|
|
+ font-size: 24px;
|
|
|
+ // position: absolute;
|
|
|
+ // top: 6px;
|
|
|
+ // right: 8px;
|
|
|
+ // line-height: 24px;
|
|
|
+ // width: 24px;
|
|
|
+ // height: 24px;
|
|
|
cursor: pointer;
|
|
|
// color: #ffffff;
|
|
|
color: #000000;
|
|
|
}
|
|
|
|
|
|
.content {
|
|
|
- height: 160px;
|
|
|
+ min-width: 280px;
|
|
|
+ height: 130px;
|
|
|
// color: #ffffff;
|
|
|
color: #000000;
|
|
|
margin: 30px 0px 10px 20px;
|
|
|
@@ -2592,26 +2693,36 @@ export default {
|
|
|
top: 0px;
|
|
|
left: 0px;
|
|
|
width: 300px;
|
|
|
- height: 200px;
|
|
|
+ height:auto;
|
|
|
+ // height: 200px;
|
|
|
// background: #01346f99;
|
|
|
background: #ffffff;
|
|
|
border-radius: 10px;
|
|
|
-
|
|
|
- .close {
|
|
|
- font-size: 24px;
|
|
|
+ .title {
|
|
|
position: absolute;
|
|
|
top: 6px;
|
|
|
- right: 8px;
|
|
|
+ display: flex;
|
|
|
line-height: 24px;
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
+ left: 20px;
|
|
|
+ right: 10px;
|
|
|
+ font-weight: bold;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .close {
|
|
|
+ font-size: 24px;
|
|
|
+ // position: absolute;
|
|
|
+ // top: 6px;
|
|
|
+ // right: 8px;
|
|
|
+ // line-height: 24px;
|
|
|
+ // width: 24px;
|
|
|
+ // height: 24px;
|
|
|
cursor: pointer;
|
|
|
// color: #ffffff;
|
|
|
color: #000000;
|
|
|
}
|
|
|
|
|
|
.content {
|
|
|
- height: 160px;
|
|
|
+ height: 130px;
|
|
|
// color: #ffffff;
|
|
|
color: #000000;
|
|
|
margin: 30px 0px 10px 20px;
|
|
|
@@ -2763,6 +2874,40 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .filterCascader{
|
|
|
+ position: absolute;
|
|
|
+ top: 80px;
|
|
|
+ right: 140px;
|
|
|
+ }
|
|
|
+ .filterCascader-mb{
|
|
|
+ position: absolute;
|
|
|
+ top: 65px;
|
|
|
+ right: 58px;
|
|
|
+ }
|
|
|
+ /* 重点：穿透级联面板内部样式，限制节点宽度 */
|
|
|
+ :deep(.el-cascader-panel .el-cascader-node__label) {
|
|
|
+ width: 100% !important;
|
|
|
+ padding: 0 !important;
|
|
|
+ }
|
|
|
+ .cascader-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6px;
|
|
|
+ width: 100%;
|
|
|
+ max-width: 200px; /* 控制这一行最大宽度，根据面板宽度调整！ */
|
|
|
+ }
|
|
|
+ .cascader-label {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .cascader-icon {
|
|
|
+ flex-shrink: 0;
|
|
|
+ color: #909399;
|
|
|
+ }
|
|
|
+
|
|
|
.zxqIframeContainer-mb-mx {
|
|
|
position: absolute;
|
|
|
top: 0px;
|
mork
