|
|
|
|
@ -16,7 +16,7 @@
|
|
|
|
|
<ProjectList />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 右侧搜索 -->
|
|
|
|
|
<div class="rightdiv">
|
|
|
|
|
<el-input v-model="searchBox" placeholder="请输入项目名称" class="search-input" @input="handleSearchInput"
|
|
|
|
|
@clear="handleClear" clearable>
|
|
|
|
|
@ -29,12 +29,10 @@
|
|
|
|
|
<div class="item-name">{{ item.name }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 右侧地图区域 -->
|
|
|
|
|
<div class="blueicon">
|
|
|
|
|
<div class="icondiv" v-if="showLocationIcon">
|
|
|
|
|
<img src="@/assets/images/detailsicon/icon-定位@2x.png" alt="定位" :style="iconPosition"
|
|
|
|
|
@click.stop="showDialog">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="map-container">
|
|
|
|
|
<div id="mars2dContainerSSS" class="mars2d-container"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -63,6 +61,8 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import 'mars2d/mars2d.css';
|
|
|
|
|
import * as mars2d from 'mars2d';
|
|
|
|
|
import ProjectList from '@/views/components/analysis/projectList.vue'
|
|
|
|
|
import { getBasicInformationPage } from "@/api/ManageApi/index";
|
|
|
|
|
import { debounce } from 'lodash';
|
|
|
|
|
@ -90,6 +90,7 @@ export default {
|
|
|
|
|
'click-outside': clickOutside
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
const basePathUrl = window.basePathUrl || "";
|
|
|
|
|
return {
|
|
|
|
|
isCollapsed: false,
|
|
|
|
|
searchBox: '',
|
|
|
|
|
@ -121,16 +122,87 @@ export default {
|
|
|
|
|
2: '在建',
|
|
|
|
|
3: '拟建'
|
|
|
|
|
},
|
|
|
|
|
// 地图相关配置
|
|
|
|
|
configUrl: basePathUrl + "config/config.json",
|
|
|
|
|
mapOptions: {
|
|
|
|
|
copyright: false,
|
|
|
|
|
basemaps: [
|
|
|
|
|
{
|
|
|
|
|
id: 2021,
|
|
|
|
|
chinaCRS: "GCJ02",
|
|
|
|
|
pid: 10,
|
|
|
|
|
name: "高德电子",
|
|
|
|
|
icon: "img/basemaps/gaode_vec.png",
|
|
|
|
|
type: "gaode",
|
|
|
|
|
layer: "vec",
|
|
|
|
|
show: true
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
center: { lat: 31.3456, lng: 120.5957 },
|
|
|
|
|
zoom: 11,
|
|
|
|
|
minZoom: 10,
|
|
|
|
|
maxZoom: 20,
|
|
|
|
|
zoomControl: true,
|
|
|
|
|
chinaCRS: 'GCJ02'
|
|
|
|
|
},
|
|
|
|
|
map: null
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.debouncedSearch = debounce(this.toSearch, 300);
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.initMap();
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
if (this.map) {
|
|
|
|
|
this.map.destroy();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 初始化地图
|
|
|
|
|
initMap() {
|
|
|
|
|
this.map = new mars2d.Map('mars2dContainerSSS', this.mapOptions);
|
|
|
|
|
this.map.on('load', this.onMapLoad);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 地图加载完成后的回调
|
|
|
|
|
onMapLoad() {
|
|
|
|
|
// console.log('地图加载完成');
|
|
|
|
|
this.addSuzhouIndustrialParkLayer();
|
|
|
|
|
},
|
|
|
|
|
// 添加苏州园区高亮区域
|
|
|
|
|
async addSuzhouIndustrialParkLayer() {
|
|
|
|
|
try {
|
|
|
|
|
const response = await fetch('/config/suzhou.json');
|
|
|
|
|
const geoJsonData = await response.json();
|
|
|
|
|
const graphicLayer = new mars2d.layer.GraphicLayer({
|
|
|
|
|
name: "苏州园区高亮区域",
|
|
|
|
|
zIndex: 10
|
|
|
|
|
});
|
|
|
|
|
this.map.addLayer(graphicLayer);
|
|
|
|
|
// 3. 添加GeoJSON数据
|
|
|
|
|
const polygon = mars2d.Util.geoJsonToGraphics(geoJsonData, {
|
|
|
|
|
style: {
|
|
|
|
|
fill: true,
|
|
|
|
|
fillColor: "#2B62F1",
|
|
|
|
|
fillOpacity: 0.3,
|
|
|
|
|
stroke: true,
|
|
|
|
|
color: "#2B62F1",
|
|
|
|
|
opacity: 0.8,
|
|
|
|
|
weight: 3
|
|
|
|
|
},
|
|
|
|
|
tooltip: "苏州工业园区"
|
|
|
|
|
});
|
|
|
|
|
graphicLayer.addGraphic(polygon);
|
|
|
|
|
|
|
|
|
|
} catch (error) {}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
handleClear() {
|
|
|
|
|
this.showLocationIcon = false;
|
|
|
|
|
this.searchList = [];
|
|
|
|
|
this.hasSearched = false;
|
|
|
|
|
this.showLocationIcon = false;
|
|
|
|
|
this.searchList = [];
|
|
|
|
|
this.hasSearched = false;
|
|
|
|
|
},
|
|
|
|
|
toggleCollapse() {
|
|
|
|
|
this.isCollapsed = !this.isCollapsed;
|
|
|
|
|
@ -139,7 +211,7 @@ export default {
|
|
|
|
|
if (this.searchBox.trim() === '') {
|
|
|
|
|
this.searchList = [];
|
|
|
|
|
this.hasSearched = false;
|
|
|
|
|
this.showLocationIcon = false;
|
|
|
|
|
this.showLocationIcon = false;
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
this.debouncedSearch();
|
|
|
|
|
@ -189,8 +261,15 @@ export default {
|
|
|
|
|
xzfl: item.xzfl || '暂无'
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 解析坐标并定位
|
|
|
|
|
if (item.jsdd && item.jsdd.includes(',')) {
|
|
|
|
|
const [lng, lat] = item.jsdd.split(',').map(Number);
|
|
|
|
|
this.map.flyTo([lat, lng], 17);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.showLocationIcon = true;
|
|
|
|
|
this.setRandomIconPosition();
|
|
|
|
|
this.showDialog();
|
|
|
|
|
},
|
|
|
|
|
showDialog() {
|
|
|
|
|
if (this.selectedProject.name) {
|
|
|
|
|
@ -203,11 +282,9 @@ export default {
|
|
|
|
|
this.dialogVisible = false;
|
|
|
|
|
},
|
|
|
|
|
setRandomIconPosition() {
|
|
|
|
|
// icondiv宽9rem(约135px)，高9rem(约135px)
|
|
|
|
|
// 图标宽1.7rem(约25.5px)，高2rem(约30px)
|
|
|
|
|
// 计算最大可随机范围
|
|
|
|
|
const maxTop = 105; // 135 - 30
|
|
|
|
|
const maxLeft = 110; // 135 - 25
|
|
|
|
|
const maxTop = 105;
|
|
|
|
|
const maxLeft = 110;
|
|
|
|
|
|
|
|
|
|
const randomTop = Math.floor(Math.random() * maxTop);
|
|
|
|
|
const randomLeft = Math.floor(Math.random() * maxLeft);
|
|
|
|
|
@ -224,7 +301,6 @@ export default {
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
/* 原有样式保持不变 */
|
|
|
|
|
.container {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
@ -234,7 +310,7 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mapareaone {
|
|
|
|
|
height: 26.5rem;
|
|
|
|
|
height: 24.5rem;
|
|
|
|
|
grid-column: span 2;
|
|
|
|
|
width: 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
@ -252,7 +328,7 @@ export default {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
z-index: 20;
|
|
|
|
|
z-index: 10000;
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -263,14 +339,14 @@ export default {
|
|
|
|
|
|
|
|
|
|
.leftdiv {
|
|
|
|
|
width: 36%;
|
|
|
|
|
height: 27rem;
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0rem;
|
|
|
|
|
top: 0rem;
|
|
|
|
|
background: #FFFFFF;
|
|
|
|
|
border-radius: 0.5rem;
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
z-index: 10;
|
|
|
|
|
z-index: 9999;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mainarea {
|
|
|
|
|
@ -313,6 +389,7 @@ export default {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 1rem;
|
|
|
|
|
top: 1rem;
|
|
|
|
|
z-index: 9999;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.search-results {
|
|
|
|
|
@ -324,7 +401,7 @@ export default {
|
|
|
|
|
border: 1px solid #E5E5E5;
|
|
|
|
|
border-radius: 0.5rem;
|
|
|
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
|
|
z-index: 15;
|
|
|
|
|
z-index: 9999;
|
|
|
|
|
max-height: 15rem;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
}
|
|
|
|
|
@ -340,7 +417,6 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item-name {
|
|
|
|
|
/* font-weight: bold; */
|
|
|
|
|
margin-bottom: 0.3rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -382,12 +458,10 @@ export default {
|
|
|
|
|
|
|
|
|
|
.dialog-title {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
/* font-weight: bold; */
|
|
|
|
|
font-family: aliregular;
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
padding-bottom: 10px;
|
|
|
|
|
border-bottom: 1px solid #EBEEF5;
|
|
|
|
|
/* background-color:#F5F7FA; */
|
|
|
|
|
color: #2B62F1;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
@ -413,4 +487,17 @@ export default {
|
|
|
|
|
color: #3D424C;
|
|
|
|
|
font-family: aliregular;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 地图容器样式 */
|
|
|
|
|
.map-container {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mars2d-container {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
border-radius: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
