|
|
|
@ -33,6 +33,7 @@
|
|
|
|
<!-- 右侧地图区域 -->
|
|
|
|
<!-- 右侧地图区域 -->
|
|
|
|
<div class="map-container">
|
|
|
|
<div class="map-container">
|
|
|
|
<div id="mars2dContainerSSS" class="mars2d-container"></div>
|
|
|
|
<div id="mars2dContainerSSS" class="mars2d-container"></div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -67,7 +68,11 @@ import ProjectList from '@/views/components/analysis/projectList.vue'
|
|
|
|
import { getBasicInformationPage } from "@/api/ManageApi/index";
|
|
|
|
import { getBasicInformationPage } from "@/api/ManageApi/index";
|
|
|
|
import { debounce } from 'lodash';
|
|
|
|
import { debounce } from 'lodash';
|
|
|
|
|
|
|
|
|
|
|
|
// 自定义指令，点击外部关闭弹窗
|
|
|
|
import suzhouData from '@/assets/json/suzhou.json'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 自定义指令
|
|
|
|
|
|
|
|
// 点击外部关闭弹窗
|
|
|
|
const clickOutside = {
|
|
|
|
const clickOutside = {
|
|
|
|
bind(el, binding, vnode) {
|
|
|
|
bind(el, binding, vnode) {
|
|
|
|
el.clickOutsideEvent = function (event) {
|
|
|
|
el.clickOutsideEvent = function (event) {
|
|
|
|
@ -92,6 +97,8 @@ export default {
|
|
|
|
data() {
|
|
|
|
data() {
|
|
|
|
const basePathUrl = window.basePathUrl || "";
|
|
|
|
const basePathUrl = window.basePathUrl || "";
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
|
|
|
|
markerIcon: require('@/assets/images/detailsicon/icon-定位@2x.png'),
|
|
|
|
|
|
|
|
projectMarker: null,
|
|
|
|
isCollapsed: false,
|
|
|
|
isCollapsed: false,
|
|
|
|
searchBox: '',
|
|
|
|
searchBox: '',
|
|
|
|
searchList: [],
|
|
|
|
searchList: [],
|
|
|
|
@ -138,11 +145,11 @@ export default {
|
|
|
|
show: true
|
|
|
|
show: true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
],
|
|
|
|
],
|
|
|
|
center: { lat: 31.3456, lng: 120.5957 },
|
|
|
|
center: { lat: 31.3356, lng: 120.7157 },
|
|
|
|
zoom: 11,
|
|
|
|
zoom: 11,
|
|
|
|
minZoom: 10,
|
|
|
|
minZoom: 10,
|
|
|
|
maxZoom: 20,
|
|
|
|
maxZoom: 20,
|
|
|
|
zoomControl: true,
|
|
|
|
// zoomControl: true,
|
|
|
|
chinaCRS: 'GCJ02'
|
|
|
|
chinaCRS: 'GCJ02'
|
|
|
|
},
|
|
|
|
},
|
|
|
|
map: null
|
|
|
|
map: null
|
|
|
|
@ -166,27 +173,23 @@ export default {
|
|
|
|
this.map.on('load', this.onMapLoad);
|
|
|
|
this.map.on('load', this.onMapLoad);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 地图加载完成后的回调
|
|
|
|
|
|
|
|
onMapLoad() {
|
|
|
|
onMapLoad() {
|
|
|
|
// console.log('地图加载完成');
|
|
|
|
|
|
|
|
this.addSuzhouIndustrialParkLayer();
|
|
|
|
this.addSuzhouIndustrialParkLayer();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// 添加苏州园区高亮区域
|
|
|
|
// 园区
|
|
|
|
async addSuzhouIndustrialParkLayer() {
|
|
|
|
async addSuzhouIndustrialParkLayer() {
|
|
|
|
try {
|
|
|
|
try {
|
|
|
|
const response = await fetch('/config/suzhou.json');
|
|
|
|
const geoJsonData = suzhouData; // 直接使用导入的数据
|
|
|
|
const geoJsonData = await response.json();
|
|
|
|
|
|
|
|
const graphicLayer = new mars2d.layer.GraphicLayer({
|
|
|
|
const graphicLayer = new mars2d.layer.GraphicLayer({
|
|
|
|
name: "苏州园区高亮区域",
|
|
|
|
name: "苏州园区高亮区域",
|
|
|
|
zIndex: 10
|
|
|
|
zIndex: 10
|
|
|
|
});
|
|
|
|
});
|
|
|
|
this.map.addLayer(graphicLayer);
|
|
|
|
this.map.addLayer(graphicLayer);
|
|
|
|
// 3. 添加GeoJSON数据
|
|
|
|
|
|
|
|
const polygon = mars2d.Util.geoJsonToGraphics(geoJsonData, {
|
|
|
|
const polygon = mars2d.Util.geoJsonToGraphics(geoJsonData, {
|
|
|
|
style: {
|
|
|
|
style: {
|
|
|
|
fill: true,
|
|
|
|
fill: true,
|
|
|
|
fillColor: "#2B62F1",
|
|
|
|
fillColor: "#2B62F1",
|
|
|
|
fillOpacity: 0.3,
|
|
|
|
fillOpacity: 0.3,
|
|
|
|
stroke: true,
|
|
|
|
stroke: true,
|
|
|
|
color: "#2B62F1",
|
|
|
|
color: "#2B62F1",
|
|
|
|
opacity: 0.8,
|
|
|
|
opacity: 0.8,
|
|
|
|
@ -195,14 +198,9 @@ export default {
|
|
|
|
tooltip: "苏州工业园区"
|
|
|
|
tooltip: "苏州工业园区"
|
|
|
|
});
|
|
|
|
});
|
|
|
|
graphicLayer.addGraphic(polygon);
|
|
|
|
graphicLayer.addGraphic(polygon);
|
|
|
|
|
|
|
|
} catch (error) {
|
|
|
|
} catch (error) {}
|
|
|
|
console.error('加载苏州园区数据失败:', error);
|
|
|
|
},
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
handleClear() {
|
|
|
|
|
|
|
|
this.showLocationIcon = false;
|
|
|
|
|
|
|
|
this.searchList = [];
|
|
|
|
|
|
|
|
this.hasSearched = false;
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
toggleCollapse() {
|
|
|
|
toggleCollapse() {
|
|
|
|
this.isCollapsed = !this.isCollapsed;
|
|
|
|
this.isCollapsed = !this.isCollapsed;
|
|
|
|
@ -212,6 +210,7 @@ export default {
|
|
|
|
this.searchList = [];
|
|
|
|
this.searchList = [];
|
|
|
|
this.hasSearched = false;
|
|
|
|
this.hasSearched = false;
|
|
|
|
this.showLocationIcon = false;
|
|
|
|
this.showLocationIcon = false;
|
|
|
|
|
|
|
|
this.showLocationIcon = false;
|
|
|
|
return;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.debouncedSearch();
|
|
|
|
this.debouncedSearch();
|
|
|
|
@ -234,18 +233,23 @@ export default {
|
|
|
|
this.hasSearched = true;
|
|
|
|
this.hasSearched = true;
|
|
|
|
if (response && response.code === 200 && response.data) {
|
|
|
|
if (response && response.code === 200 && response.data) {
|
|
|
|
this.searchList = response.data.records;
|
|
|
|
this.searchList = response.data.records;
|
|
|
|
|
|
|
|
if (this.searchList.length === 0) {
|
|
|
|
|
|
|
|
this.$message.warning('查无此项目');
|
|
|
|
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
this.searchList = [];
|
|
|
|
this.searchList = [];
|
|
|
|
|
|
|
|
this.$message.warning('查无此项目');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
.catch(error => {
|
|
|
|
.catch(error => {
|
|
|
|
console.error('搜索失败:', error);
|
|
|
|
console.error('搜索失败:', error);
|
|
|
|
this.hasSearched = true;
|
|
|
|
this.hasSearched = true;
|
|
|
|
this.searchList = [];
|
|
|
|
this.searchList = [];
|
|
|
|
|
|
|
|
this.$message.error('搜索失败，请重试');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
centerMap(item) {
|
|
|
|
centerMap(item) {
|
|
|
|
if (!item.jsdd) {
|
|
|
|
if (!item.longitude || !item.latitude) {
|
|
|
|
this.$message.warning('该项目未落图！');
|
|
|
|
this.$message.warning('该项目未落图！');
|
|
|
|
return;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -267,56 +271,61 @@ export default {
|
|
|
|
this.map.flyTo([lat, lng], 17);
|
|
|
|
this.map.flyTo([lat, lng], 17);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
this.showLocationIcon = true;
|
|
|
|
// 坐标定位
|
|
|
|
this.setRandomIconPosition();
|
|
|
|
this.map.flyTo([item.latitude, item.longitude], 17);
|
|
|
|
this.showDialog();
|
|
|
|
|
|
|
|
|
|
|
|
// 标记
|
|
|
|
|
|
|
|
this.addProjectMarker(item);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
showDialog() {
|
|
|
|
handleClear() {
|
|
|
|
if (this.selectedProject.name) {
|
|
|
|
this.showLocationIcon = false;
|
|
|
|
this.dialogVisible = true;
|
|
|
|
this.searchList = [];
|
|
|
|
} else {
|
|
|
|
this.hasSearched = false;
|
|
|
|
this.$message.warning('请选择一个项目');
|
|
|
|
this.searchBox = '';
|
|
|
|
|
|
|
|
this.dialogVisible = false;
|
|
|
|
|
|
|
|
// 移除标记
|
|
|
|
|
|
|
|
if (this.projectMarker) {
|
|
|
|
|
|
|
|
this.map.removeLayer(this.projectMarker);
|
|
|
|
|
|
|
|
this.projectMarker = null;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
this.map.setView(this.mapOptions.center, this.mapOptions.zoom);
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
addProjectMarker(item) {
|
|
|
|
|
|
|
|
if (this.projectMarker) {
|
|
|
|
|
|
|
|
this.map.removeLayer(this.projectMarker);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.projectMarker = new mars2d.graphic.Marker({
|
|
|
|
|
|
|
|
latlng: [item.latitude, item.longitude],
|
|
|
|
|
|
|
|
style: {
|
|
|
|
|
|
|
|
image: this.markerIcon,
|
|
|
|
|
|
|
|
width: 32,
|
|
|
|
|
|
|
|
height: 44,
|
|
|
|
|
|
|
|
anchor: [16, 44]
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
interactive: true,
|
|
|
|
|
|
|
|
cursor: 'pointer'
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 点击图标
|
|
|
|
|
|
|
|
this.projectMarker.on(mars2d.EventType.click, (event) => {
|
|
|
|
|
|
|
|
this.selectedProject = { ...item };
|
|
|
|
|
|
|
|
this.dialogVisible = true;
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.map.addLayer(this.projectMarker);
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
showDialog() {
|
|
|
|
|
|
|
|
this.dialogVisible = true;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
closeDialog() {
|
|
|
|
closeDialog() {
|
|
|
|
this.dialogVisible = false;
|
|
|
|
this.dialogVisible = false;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
setRandomIconPosition() {
|
|
|
|
|
|
|
|
// 计算最大可随机范围
|
|
|
|
|
|
|
|
const maxTop = 105;
|
|
|
|
|
|
|
|
const maxLeft = 110;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const randomTop = Math.floor(Math.random() * maxTop);
|
|
|
|
|
|
|
|
const randomLeft = Math.floor(Math.random() * maxLeft);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.iconPosition = {
|
|
|
|
|
|
|
|
position: 'absolute',
|
|
|
|
|
|
|
|
top: `${randomTop}px`,
|
|
|
|
|
|
|
|
left: `${randomLeft}px`,
|
|
|
|
|
|
|
|
cursor: 'pointer'
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
<style scoped>
|
|
|
|
.container {
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.containertwo {
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.mapareaone {
|
|
|
|
|
|
|
|
height: 24.5rem;
|
|
|
|
|
|
|
|
grid-column: span 2;
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 控制按钮样式 */
|
|
|
|
|
|
|
|
.collapse-control {
|
|
|
|
.collapse-control {
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
left: -1.5rem;
|
|
|
|
left: -1.5rem;
|
|
|
|
@ -328,7 +337,7 @@ export default {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
justify-content: center;
|
|
|
|
z-index: 10000;
|
|
|
|
z-index: 1001;
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@ -338,7 +347,7 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.leftdiv {
|
|
|
|
.leftdiv {
|
|
|
|
width: 36%;
|
|
|
|
width: 38%;
|
|
|
|
height: 100%;
|
|
|
|
height: 100%;
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
left: 0rem;
|
|
|
|
left: 0rem;
|
|
|
|
@ -346,7 +355,9 @@ export default {
|
|
|
|
background: #FFFFFF;
|
|
|
|
background: #FFFFFF;
|
|
|
|
border-radius: 0.5rem;
|
|
|
|
border-radius: 0.5rem;
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
z-index: 9999;
|
|
|
|
z-index: 1000;
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
overflow-y: auto;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.mainarea {
|
|
|
|
.mainarea {
|
|
|
|
@ -354,20 +365,6 @@ export default {
|
|
|
|
overflow: auto;
|
|
|
|
overflow: auto;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.blueicon {
|
|
|
|
|
|
|
|
width: 20rem;
|
|
|
|
|
|
|
|
height: 20rem;
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
background-image: url(../../../assets/images/行政区划@2x.png);
|
|
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
top: 4.5rem;
|
|
|
|
|
|
|
|
right: 7.4rem;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.icondiv {
|
|
|
|
.icondiv {
|
|
|
|
width: 8rem;
|
|
|
|
width: 8rem;
|
|
|
|
height: 8rem;
|
|
|
|
height: 8rem;
|
|
|
|
@ -389,7 +386,7 @@ export default {
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
right: 1rem;
|
|
|
|
right: 1rem;
|
|
|
|
top: 1rem;
|
|
|
|
top: 1rem;
|
|
|
|
z-index: 9999;
|
|
|
|
z-index: 900;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.search-results {
|
|
|
|
.search-results {
|
|
|
|
@ -401,7 +398,7 @@ export default {
|
|
|
|
border: 1px solid #E5E5E5;
|
|
|
|
border: 1px solid #E5E5E5;
|
|
|
|
border-radius: 0.5rem;
|
|
|
|
border-radius: 0.5rem;
|
|
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
|
z-index: 9999;
|
|
|
|
z-index: 900;
|
|
|
|
max-height: 15rem;
|
|
|
|
max-height: 15rem;
|
|
|
|
overflow-y: auto;
|
|
|
|
overflow-y: auto;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -425,12 +422,12 @@ export default {
|
|
|
|
color: #606266;
|
|
|
|
color: #606266;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 悬浮div样式 */
|
|
|
|
/* 悬浮div */
|
|
|
|
.app-container {
|
|
|
|
.app-container {
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
top: 19%;
|
|
|
|
top: 20%;
|
|
|
|
left: 39%;
|
|
|
|
left: 53%;
|
|
|
|
height: 17rem;
|
|
|
|
height: 15rem;
|
|
|
|
width: 18rem;
|
|
|
|
width: 18rem;
|
|
|
|
background-color: #fff;
|
|
|
|
background-color: #fff;
|
|
|
|
border-radius: 4px;
|
|
|
|
border-radius: 4px;
|
|
|
|
@ -488,7 +485,24 @@ export default {
|
|
|
|
font-family: aliregular;
|
|
|
|
font-family: aliregular;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 地图容器样式 */
|
|
|
|
/* 所有容器 */
|
|
|
|
|
|
|
|
.container {
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.mapareaone {
|
|
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
grid-column: span 2;
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.containertwo {
|
|
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.map-container {
|
|
|
|
.map-container {
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
height: 100%;
|
|
|
|
|
