|
@@ -22,6 +22,7 @@
|
|
|
import bigemap from '@/utils/bigemap/map'
|
|
|
import Tiff from "tiff.js";
|
|
|
import axios from "axios";
|
|
|
+
|
|
|
let map;
|
|
|
export default {
|
|
|
name: "bigeMap",
|
|
@@ -30,8 +31,8 @@ export default {
|
|
|
mapValue: {
|
|
|
immediate: true,
|
|
|
handler(value) {
|
|
|
- if(value.params !== undefined){
|
|
|
- console.log("地形图:"+value)
|
|
|
+ if (value.params !== undefined) {
|
|
|
+ console.log("地形图:" + value)
|
|
|
this.mapData = value
|
|
|
this.initBigeMap()
|
|
|
}
|
|
@@ -48,10 +49,10 @@ export default {
|
|
|
cone: {},
|
|
|
mTime: null,
|
|
|
code: 230000,
|
|
|
- mapData:{},// 传过来的值
|
|
|
+ mapData: {},// 传过来的值
|
|
|
href: window.location.href,
|
|
|
- level:6,
|
|
|
- center:[],
|
|
|
+ level: 6,
|
|
|
+ center: [],
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
@@ -63,9 +64,13 @@ export default {
|
|
|
bigemap.then(() => {
|
|
|
// window.BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
|
|
|
//window.BM.Config.HTTP_URL = 'http://10.124.252.244/webgis-api';
|
|
|
+
|
|
|
window.BM.Config.HTTP_URL = process.env.VUE_APP_GIS_API;
|
|
|
let ip1 = process.env.VUE_APP_GIS_API;
|
|
|
let ip2 = 'http://49.4.78.194:17143';
|
|
|
+ // window.BM.Config.HTTP_URL = 'http://49.4.78.194:17143';
|
|
|
+ // let ip1 = 'http://49.4.78.194:17143';
|
|
|
+ // let ip2 = 'http://49.4.78.194:17143';
|
|
|
let mapid = 'bigemap.re-huafu'
|
|
|
// window.BM.Config.HTTP_URL = 'http://192.168.1.181:9000';
|
|
|
// arcgis-satellite
|
|
@@ -75,6 +80,7 @@ export default {
|
|
|
let map = window.BM.map('map', null, {
|
|
|
center: [30, 104],
|
|
|
minZoom: 6,
|
|
|
+ maxZoom: 12,
|
|
|
zoom: 11,
|
|
|
zoomControl: true,
|
|
|
attributionControl: false,
|
|
@@ -104,16 +110,16 @@ export default {
|
|
|
return tile;
|
|
|
}
|
|
|
});
|
|
|
- new CanvasLayer({maxZoom:12}).addTo(map);
|
|
|
+ new CanvasLayer({maxZoom: 12}).addTo(map);
|
|
|
}
|
|
|
)
|
|
|
- window.Bmap=map;
|
|
|
- this.bMap=map;
|
|
|
+ window.Bmap = map;
|
|
|
+ this.bMap = map;
|
|
|
//首尾需要一致
|
|
|
let mask = window.BMturf.polygon([[[-180, -90], [180, -90], [180, 90], [-180, 90], [-180, -90]]]);
|
|
|
let geo2;
|
|
|
fetch('/js/geojson/230000/' + this.code + '.geojson').then(res => res.json()).then(data => {
|
|
|
- // fetch('/js/geojson/' + this.code + '.geojson').then(res => res.json()).then(data => {
|
|
|
+ // fetch('/js/geojson/' + this.code + '.geojson').then(res => res.json()).then(data => {
|
|
|
geo2 = window.BM.geoJSON(data, {
|
|
|
style: function () {
|
|
|
return {
|
|
@@ -145,7 +151,7 @@ export default {
|
|
|
fillOpacity: 0
|
|
|
});
|
|
|
}).addTo(this.bMap);
|
|
|
- window.geo2=geo2;
|
|
|
+ window.geo2 = geo2;
|
|
|
//限制拖动
|
|
|
this.bMap.setMaxBounds(geo2.getBounds());
|
|
|
this.bMap.fitBounds(geo2.getBounds());
|
|
@@ -165,23 +171,23 @@ export default {
|
|
|
// this.setHeatMap(this.bMap);
|
|
|
//绑定事件
|
|
|
this.bindEvents(this.bMap);
|
|
|
- if(this.mapData.level !== null){
|
|
|
+ if (this.mapData.level !== null) {
|
|
|
_self.level = this.mapData.level
|
|
|
_self.center = this.mapData.center
|
|
|
- this.bMap.setView(this.mapData.center,this.mapData.level)
|
|
|
+ this.bMap.setView(this.mapData.center, this.mapData.level)
|
|
|
// this.bMap.setZoom(this.mapData.level)
|
|
|
// this.bMap.panTo(this.mapData.center)
|
|
|
}
|
|
|
|
|
|
|
|
|
})
|
|
|
- let sIconurl = 'http://'+_self.href.split("//")[1].split("/")[0]+'/largeScreenImg/station.png'
|
|
|
- let hfSIconurl = 'http://'+_self.href.split("//")[1].split("/")[0]+'/largeScreenImg/huafuStation.png'
|
|
|
+ let sIconurl = 'http://' + _self.href.split("//")[1].split("/")[0] + '/largeScreenImg/station.png'
|
|
|
+ let hfSIconurl = 'http://' + _self.href.split("//")[1].split("/")[0] + '/largeScreenImg/huafuStation.png'
|
|
|
let pIconurl = 'http://' + _self.href.split("//")[1].split("/")[0] + '/largeScreenImg/project.png'
|
|
|
let fjIconurl = 'http://' + _self.href.split("//")[1].split("/")[0] + '/img/fengji.png'
|
|
|
|
|
|
// 所有场站标记点位
|
|
|
- if(this.mapData.allStationInfo !== null && this.mapData.allStationInfo !== undefined){
|
|
|
+ if (this.mapData.allStationInfo !== null && this.mapData.allStationInfo !== undefined) {
|
|
|
let data = this.mapData.allStationInfo
|
|
|
let station_icon = window.BM.icon({
|
|
|
iconUrl: sIconurl,
|
|
@@ -193,29 +199,29 @@ export default {
|
|
|
iconSize: [35, 55],
|
|
|
iconAnchor: [35, 55]
|
|
|
})
|
|
|
- for(let item of data.otherStation){
|
|
|
- let coordinate = [Number(item.latitude),Number(item.longitude)]
|
|
|
- let marker = window.BM.marker(coordinate,{
|
|
|
+ for (let item of data.otherStation) {
|
|
|
+ let coordinate = [Number(item.latitude), Number(item.longitude)]
|
|
|
+ let marker = window.BM.marker(coordinate, {
|
|
|
icon: station_icon,
|
|
|
riseOnHover: true
|
|
|
}).addTo(this.bMap);
|
|
|
marker.on('mouseover', function (e) {
|
|
|
marker.bindTooltip('<div>场站名称:' + item.stationName + '</div>' + '<div>经度:' + item.longitude + '</div>' + '<div>纬度:' + item.latitude + '</div>',
|
|
|
- {permanent:true,className:'infoToolTip',offset:[0,-30]}).openTooltip();
|
|
|
+ {permanent: true, className: 'infoToolTip', offset: [0, -30]}).openTooltip();
|
|
|
})
|
|
|
marker.on('mouseout', function () {
|
|
|
marker.bindTooltip().closeTooltip();
|
|
|
})
|
|
|
}
|
|
|
- for(let item of data.HDStation){
|
|
|
- let coordinate = [Number(item.latitude),Number(item.longitude)]
|
|
|
- let marker = window.BM.marker(coordinate,{
|
|
|
+ for (let item of data.HDStation) {
|
|
|
+ let coordinate = [Number(item.latitude), Number(item.longitude)]
|
|
|
+ let marker = window.BM.marker(coordinate, {
|
|
|
icon: hf_station_icon,
|
|
|
riseOnHover: true
|
|
|
}).addTo(this.bMap);
|
|
|
marker.on('mouseover', function (e) {
|
|
|
marker.bindTooltip('<div>场站名称:' + item.stationName + '</div>' + '<div>经度:' + item.longitude + '</div>' + '<div>纬度:' + item.latitude + '</div>',
|
|
|
- {permanent:true,className:'infoToolTip',offset:[0,-30]}).openTooltip();
|
|
|
+ {permanent: true, className: 'infoToolTip', offset: [0, -30]}).openTooltip();
|
|
|
})
|
|
|
marker.on('mouseout', function () {
|
|
|
marker.bindTooltip().closeTooltip();
|
|
@@ -232,26 +238,28 @@ export default {
|
|
|
iconAnchor: [30, 50]
|
|
|
})
|
|
|
for (let item of data) {
|
|
|
- let coordinate = [Number(item.latitude), Number(item.longitude)]
|
|
|
- let marker = window.BM.marker(coordinate, {
|
|
|
- icon: station_icon,
|
|
|
- riseOnHover: true
|
|
|
- }).addTo(this.bMap);
|
|
|
- // 悬浮动作
|
|
|
- marker.on('mouseover', function (e) {
|
|
|
- marker.bindTooltip('<div>项目名称:' + item.projectNameEasy + '</div>' + '<div>经度:' + item.longitude + '</div>' + '<div>纬度:' + item.latitude + '</div>',
|
|
|
- {permanent:true,className:'infoToolTip',offset:[0,-30]}).openTooltip();
|
|
|
- })
|
|
|
- marker.on('mouseout', function () {
|
|
|
- marker.bindTooltip().closeTooltip();
|
|
|
- })
|
|
|
- // 点击动作
|
|
|
- marker.on('click', function (e) {
|
|
|
- let project = {id: item.id,projectSort: item.projectName}
|
|
|
- sessionStorage.setItem("projectInfo", JSON.stringify(project))
|
|
|
- _self.$store.dispatch('equipmentInfo/projectInfo', JSON.stringify(project))
|
|
|
- _self.$router.push({path: "/homepage/projectInfo"})
|
|
|
- })
|
|
|
+ if (item.latitude !== undefined) {
|
|
|
+ let coordinate = [Number(item.latitude), Number(item.longitude)]
|
|
|
+ let marker = window.BM.marker(coordinate, {
|
|
|
+ icon: station_icon,
|
|
|
+ riseOnHover: true
|
|
|
+ }).addTo(this.bMap);
|
|
|
+ // 悬浮动作
|
|
|
+ marker.on('mouseover', function (e) {
|
|
|
+ marker.bindTooltip('<div>项目名称:' + item.projectNameEasy + '</div>' + '<div>经度:' + item.longitude + '</div>' + '<div>纬度:' + item.latitude + '</div>',
|
|
|
+ {permanent: true, className: 'infoToolTip', offset: [0, -30]}).openTooltip();
|
|
|
+ })
|
|
|
+ marker.on('mouseout', function () {
|
|
|
+ marker.bindTooltip().closeTooltip();
|
|
|
+ })
|
|
|
+ // 点击动作
|
|
|
+ marker.on('click', function (e) {
|
|
|
+ let project = {id: item.id, projectSort: item.projectName}
|
|
|
+ sessionStorage.setItem("projectInfo", JSON.stringify(project))
|
|
|
+ _self.$store.dispatch('equipmentInfo/projectInfo', JSON.stringify(project))
|
|
|
+ _self.$router.push({path: "/homepage/projectInfo"})
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
// 华富场站标记点位
|
|
@@ -261,7 +269,7 @@ export default {
|
|
|
iconUrl: sIconurl,
|
|
|
iconSize: [30, 50],
|
|
|
iconAnchor: [30, 50],
|
|
|
- className:'stationIcon',
|
|
|
+ className: 'stationIcon',
|
|
|
})
|
|
|
for (let item of data) {
|
|
|
let coordinate = [Number(item.latitude), Number(item.longitude)]
|
|
@@ -272,16 +280,16 @@ export default {
|
|
|
// 悬浮动作
|
|
|
marker.on('mouseover', function (e) {
|
|
|
marker.bindTooltip('<div>场站名称:' + item.stationName + '</div>' + '<div>经度:' + item.longitude + '</div>' + '<div>纬度:' + item.latitude + '</div>',
|
|
|
- {permanent:true,className:'infoToolTip',offset:[0,-30]}).openTooltip();
|
|
|
+ {permanent: true, className: 'infoToolTip', offset: [0, -30]}).openTooltip();
|
|
|
})
|
|
|
marker.on('mouseout', function () {
|
|
|
marker.bindTooltip().closeTooltip();
|
|
|
})
|
|
|
// 点击动作
|
|
|
marker.on('click', function (e) {
|
|
|
- let station = {id: item.id,stationName: item.stationName}
|
|
|
- sessionStorage.setItem("stationInfo",JSON.stringify(station))
|
|
|
- _self.$store.dispatch('equipmentInfo/stationInfo',JSON.stringify(station))
|
|
|
+ let station = {id: item.id, stationName: item.stationName}
|
|
|
+ sessionStorage.setItem("stationInfo", JSON.stringify(station))
|
|
|
+ _self.$store.dispatch('equipmentInfo/stationInfo', JSON.stringify(station))
|
|
|
_self.$router.push({path: "/homepage/stationInfo"})
|
|
|
})
|
|
|
}
|
|
@@ -293,31 +301,33 @@ export default {
|
|
|
iconUrl: pIconurl,
|
|
|
iconSize: [35, 55],
|
|
|
iconAnchor: [35, 55],
|
|
|
- className:'stationIcon',
|
|
|
+ className: 'stationIcon',
|
|
|
})
|
|
|
let fj_icon = window.BM.icon({
|
|
|
iconUrl: fjIconurl,
|
|
|
iconSize: [30, 30],
|
|
|
iconAnchor: [30, 30],
|
|
|
- className:'stationIcon',
|
|
|
+ className: 'stationIcon',
|
|
|
})
|
|
|
- for(let item of data.fan){
|
|
|
- let coordinate = [Number(item.latitudeFan),Number(item.longitudeFan)]
|
|
|
- let marker = window.BM.marker(coordinate,{
|
|
|
+ for (let item of data.fan) {
|
|
|
+ let coordinate = [Number(item.latitudeFan), Number(item.longitudeFan)]
|
|
|
+ let marker = window.BM.marker(coordinate, {
|
|
|
icon: fj_icon,
|
|
|
riseOnHover: true
|
|
|
}).addTo(this.bMap);
|
|
|
}
|
|
|
- for(let item of data.coordinatesList){
|
|
|
- if(item.length>0){
|
|
|
- let latlngs = []
|
|
|
- for (let coor of item){
|
|
|
- latlngs.push([Number(coor.latitude),Number(coor.longitude)])
|
|
|
- window.BM.marker([Number(coor.latitude),Number(coor.longitude)]).addTo(this.bMap);
|
|
|
+ for (let coordinatesList of data.coordinatesList) {
|
|
|
+ for (let item of coordinatesList) {
|
|
|
+ if (item.length > 0) {
|
|
|
+ let latlngs = []
|
|
|
+ for (let coor of item) {
|
|
|
+ latlngs.push([Number(coor.latitude), Number(coor.longitude)])
|
|
|
+ window.BM.marker([Number(coor.latitude), Number(coor.longitude)]).addTo(this.bMap);
|
|
|
+ }
|
|
|
+ var polygon = BM.polygon(latlngs).addTo(this.bMap);
|
|
|
+ // 让地图适配当前的线段
|
|
|
+ this.bMap.fitBounds(polygon.getBounds());
|
|
|
}
|
|
|
- var polygon = BM.polygon(latlngs).addTo(this.bMap);
|
|
|
- // 让地图适配当前的线段
|
|
|
- this.bMap.fitBounds(polygon.getBounds());
|
|
|
}
|
|
|
}
|
|
|
for (let item of data.towerList) {
|
|
@@ -329,12 +339,12 @@ export default {
|
|
|
// 悬浮动作
|
|
|
marker.on('mouseover', function (e) {
|
|
|
// console.log(item)
|
|
|
- if(item.type === 'project'){
|
|
|
- marker.bindTooltip('<div>项目名称:' + item.projectName + '</div>'+ '<div>测风塔名称:' + item.towerName + '</div>' + '<div>经度:' + item.longitude + '</div>' + '<div>纬度:' + item.latitude + '</div>',
|
|
|
- {permanent:true,className:'infoToolTip',offset:[0,-30]}).openTooltip();
|
|
|
- }else{
|
|
|
- marker.bindTooltip('<div>场站名称:' + item.stationName + '</div>'+ '<div>测风塔名称:' + item.towerName + '</div>' + '<div>经度:' + item.longitude + '</div>' + '<div>纬度:' + item.latitude + '</div>',
|
|
|
- {permanent:true,className:'infoToolTip',offset:[0,-30]}).openTooltip();
|
|
|
+ if (item.type === 'project') {
|
|
|
+ marker.bindTooltip('<div>测风塔名称:' + item.towerName + '</div>' + '<div>经度:' + item.longitude + '</div>' + '<div>纬度:' + item.latitude + '</div>',
|
|
|
+ {permanent: true, className: 'infoToolTip', offset: [0, -30]}).openTooltip();
|
|
|
+ } else {
|
|
|
+ marker.bindTooltip('<div>测风塔名称:' + item.towerName + '</div>' + '<div>经度:' + item.longitude + '</div>' + '<div>纬度:' + item.latitude + '</div>',
|
|
|
+ {permanent: true, className: 'infoToolTip', offset: [0, -30]}).openTooltip();
|
|
|
}
|
|
|
|
|
|
})
|
|
@@ -343,13 +353,13 @@ export default {
|
|
|
})
|
|
|
// 点击动作
|
|
|
marker.on('click', function (e) {
|
|
|
- if(item.type === 'project'){
|
|
|
- let project = {projectId:item.projectId,equipmentNo:item.towerNo}
|
|
|
+ if (item.type === 'project') {
|
|
|
+ let project = {projectId: item.projectId, equipmentNo: item.towerNo}
|
|
|
sessionStorage.setItem("emailWindTowerInfo", JSON.stringify(project))
|
|
|
_self.$store.dispatch('equipmentInfo/emailWindTowerInfo', JSON.stringify(project))
|
|
|
_self.$router.push({path: "/homepage/emailResourcesInfo"})
|
|
|
- }else {
|
|
|
- let station = {stationId:item.stationId,equipmentNo:item.towerNo}
|
|
|
+ } else {
|
|
|
+ let station = {stationId: item.stationId, equipmentNo: item.towerNo}
|
|
|
sessionStorage.setItem("realWindTowerInfo", JSON.stringify(station))
|
|
|
_self.$store.dispatch('equipmentInfo/realWindTowerInfo', JSON.stringify(station))
|
|
|
_self.$router.push({path: "/homepage/realResourcesInfo"})
|
|
@@ -398,14 +408,14 @@ export default {
|
|
|
[43.422993, 121.183134],
|
|
|
[53.564656, 135.091461],
|
|
|
];
|
|
|
- window.imgOverlay=window.BM.imageOverlay(imageUrl, imageBounds).addTo(map);
|
|
|
+ window.imgOverlay = window.BM.imageOverlay(imageUrl, imageBounds).addTo(map);
|
|
|
map.fitBounds(imageBounds);
|
|
|
};
|
|
|
fr.readAsArrayBuffer(new Blob([res.data]));
|
|
|
});
|
|
|
},
|
|
|
//绑定事件-监听地图级别和拖动
|
|
|
- bindEvents(map){
|
|
|
+ bindEvents(map) {
|
|
|
let _self = this
|
|
|
map.on('moveend', function (e) {
|
|
|
const c = this.getCenter();
|
|
@@ -515,19 +525,20 @@ export default {
|
|
|
</script>
|
|
|
<style>
|
|
|
|
|
|
-.infoToolTip{
|
|
|
- color: white;
|
|
|
- background: rgba(0, 133, 212, 0.75);
|
|
|
+.infoToolTip {
|
|
|
+ color: white !important;
|
|
|
+ background: rgba(0, 133, 212, 0.75) !important;
|
|
|
border: .5px solid #0085d4;
|
|
|
}
|
|
|
|
|
|
-.my_default_tooltip{
|
|
|
- color: transparent;
|
|
|
- background: transparent;
|
|
|
+.my_default_tooltip {
|
|
|
+ color: transparent !important;
|
|
|
+ background: transparent !important;
|
|
|
border: none;
|
|
|
/*font-size: 18px;*/
|
|
|
}
|
|
|
-.my_default_tooltip::before{
|
|
|
+
|
|
|
+.my_default_tooltip::before {
|
|
|
display: none;
|
|
|
}
|
|
|
</style>
|