diff --git a/src/components/site/previewOfSiteStatus.vue b/src/components/site/previewOfSiteStatus.vue
index d2b9624..ff925de 100644
--- a/src/components/site/previewOfSiteStatus.vue
+++ b/src/components/site/previewOfSiteStatus.vue
@@ -8,6 +8,7 @@
class="fwStyle"
@click='fwClick'
/>
+
@@ -404,7 +405,7 @@
import Fill from "ol/style/Fill";
import Text from "ol/style/Text";
import Circle from "ol/style/Circle";
-
+import GeoJSON from "ol/format/GeoJSON";
import Stroke from "ol/style/Stroke";
import Draw from "ol/interaction/Draw";
import dragzoom from "ol/interaction/DragZoom";
@@ -508,11 +509,24 @@
};
},
methods: {
+ //根据行政区域编号去请求json转化为Feature再去定位
+ async gotoAreaBycode(CODE)
+ {
+ let response=await fetch(
+ "https://geo.datav.aliyun.com/areas/bound/geojson" + "?code=" + CODE
+ );
+
+ let data=await response.json();
+ console.log(data)
+
+ },
//复位功能
fwClick(){
this.map.getView().setCenter([114,30])
- this.map.getView().setZoom(5)
+ this.map.getView().setZoom(5)
+
},
+
//根据当前项目后台坐标计算出的中心飞行到指定城市
flyToCity()
{
@@ -525,7 +539,7 @@
},
//项目图层切换
- initPointToMap(projectNo){
+ initPointToMap(projectNo,areaCode){
this.$http
.post(this.nozzle.listStationBase, {
data: {
@@ -535,7 +549,7 @@
.then(response => {
console.log(response)
if (response.data.code === 1) {
- this.showCluster(response.data.data);
+ this.showCluster(response.data.data,areaCode);
}
})
},
@@ -738,7 +752,7 @@
this.ChecksplatformCode = this.ProjectList[index]["groupNo"];
//刷新联动地图上的点位按照项目实际的个数
console.log(this.ChecksplatformCode)
- this.initPointToMap(this.ChecksplatformCode)
+ this.initPointToMap(this.ChecksplatformCode,"500000")
// 限制数组的长度不超过10个
// console.log(this.historyList.length);
@@ -1362,7 +1376,7 @@
},
//显示cluster聚簇界面
- showCluster(clusterData) {
+ async showCluster(clusterData,areaCode) {
//初始化kkLayer
if (this.source) {
this.source.clear();
@@ -1383,6 +1397,48 @@
return this.getStyleOfCar(feature);
}
});
+
+ //初始化项目行政区域边框
+ // Create layer
+ if (this.vectorSourceArea) {
+ this.vectorSourceArea.clear();
+ }
+
+ let response=await fetch(
+ "https://geo.datav.aliyun.com/areas_v2/bound/" + areaCode +".json"
+ );
+
+ let dataJson=await response.json();
+
+ let areaFeature=new GeoJSON().readFeatures(dataJson)
+
+ this.vectorSourceArea = new SourceVector({
+ features: areaFeature,
+ });
+
+ var vectorArea = new LayerVector({
+ renderMode: "image",
+ maxResolution: 2,
+ zIndex: 2,
+ source: this.vectorSourceArea,
+ style: (feature) => {
+ return new Style({
+ stroke: new Stroke({
+ color: "#8A2BE2",
+ lineCap: "butt",
+ width: 3,
+ })
+ });
+ },
+ });
+ this.map.addLayer(vectorArea);
+
+ //定位过去
+ //开始根据routeFeature定位
+ /* console.log(areaFeature[0].getGeometry().getExtent())
+ console.log(areaFeature[0].geometryChangeKey_.target.extent_) */
+ var extent = areaFeature[0].getGeometry().getExtent();
+ this.map.getView().fit(extent, this.map.getSize());
@@ -1395,6 +1451,7 @@
this.south = 90;
this.east = -180;
this.west = 180;
+ debugger
for (var i = 0; i < clusterData.length; i++) {
cell = clusterData[i];
if (cell.lon != null && cell.lat != null) {
@@ -1490,7 +1547,7 @@
//飞行到指定的城市项目中心点
// this.flyToCity()
//?要判断currentZoom加哪一个
- if(this.currentZoom>=10)
+ if(this.currentZoom>=8)
this.map.addLayer(this.vector);
else
this.map.addLayer(this.layer);
@@ -1580,7 +1637,7 @@
.then(response => {
console.log(response)
if (response.data.code === 1) {
- this.showCluster(response.data.data);
+ this.showCluster(response.data.data,"420000");
}
})
@@ -1613,7 +1670,7 @@
else {
/* console.log("点击了聚簇"+e.coordinate) */
this.map.getView().setCenter([e.coordinate[0],e.coordinate[1]])
- this.map.getView().setZoom(10)
+ this.map.getView().setZoom(13)
}
}
@@ -1640,13 +1697,13 @@
var zoom=this.map.getView().getZoom()
- if(zoom>=10&&this.currentZoom<10)
+ if(zoom>=8&&this.currentZoom<8)
/* if(this.map.getView().getZoom()>10) */
{
this.map.removeLayer(this.layer)
this.map.addLayer(this.vector);
}
- else if(zoom<10&&this.currentZoom>=10)
+ else if(zoom<8&&this.currentZoom>=8)
{
this.map.removeLayer(this.vector)
this.map.addLayer(this.layer);
@@ -2183,6 +2240,7 @@
z-index: 99;
cursor: pointer;
}
+
.bubble {
width: 200px;
height: 50px;