|
|
@@ -7,11 +7,12 @@ import VectorLayer from "ol/layer/Vector.js";
|
|
|
import WKT from "ol/format/WKT.js";
|
|
|
import ScaleLine from "ol/control/ScaleLine";
|
|
|
import { useRouter } from "vue-router";
|
|
|
-import {unByKey} from "ol/Observable";
|
|
|
+import { unByKey } from "ol/Observable";
|
|
|
import Style from "ol/style/Style";
|
|
|
import Icon from "ol/style/Icon";
|
|
|
-import {Cluster, Vector as VectorSource} from "ol/source";
|
|
|
-import {newPoint} from "@/utils/map";
|
|
|
+import { Cluster, Vector as VectorSource } from "ol/source";
|
|
|
+import { Fill, Circle, Stroke } from "ol/style";
|
|
|
+import { newPoint } from "@/utils/map";
|
|
|
import eventBus from "@/api/eventBus";
|
|
|
import Overlay from 'ol/Overlay'
|
|
|
|
|
|
@@ -36,12 +37,13 @@ class SamplePointLayer {
|
|
|
this.isUpdatePoint = null
|
|
|
this.isUpdateArea = null
|
|
|
|
|
|
- this.treeClusterLayer = new KMap.VectorLayer("tree-cluster",999,{
|
|
|
- minZoom:15,
|
|
|
- source:this.clusterSource,
|
|
|
- style:(f)=> this.getStyle(f)})
|
|
|
- this.yellowBlockLayer = new KMap.VectorLayer("yellow-block",999,{
|
|
|
- minZoom:15,
|
|
|
+ this.treeClusterLayer = new KMap.VectorLayer("tree-cluster", 999, {
|
|
|
+ minZoom: 15,
|
|
|
+ source: this.clusterSource,
|
|
|
+ style: (f) => this.getStyle(f)
|
|
|
+ })
|
|
|
+ this.yellowBlockLayer = new KMap.VectorLayer("yellow-block", 999, {
|
|
|
+ minZoom: 15,
|
|
|
// source:this.clusterSource,
|
|
|
// source:"POINT(113.61396985128522 23.5859386716038)",
|
|
|
style: () => {
|
|
|
@@ -56,9 +58,9 @@ class SamplePointLayer {
|
|
|
map.addLayer(this.treeClusterLayer.layer)
|
|
|
// map.addLayer(this.yellowBlockLayer.layer);
|
|
|
|
|
|
- let point = new Feature(new Point([113.61396985128522,23.5859386716038]));
|
|
|
- let point1 = new Feature(new Point([113.61390710255375 ,23.586379215663726]));
|
|
|
- let point2 = new Feature(new Point([113.61491218688275 ,23.58671519555776]));
|
|
|
+ let point = new Feature(new Point([113.61396985128522, 23.5859386716038]));
|
|
|
+ let point1 = new Feature(new Point([113.61390710255375, 23.586379215663726]));
|
|
|
+ let point2 = new Feature(new Point([113.61491218688275, 23.58671519555776]));
|
|
|
// this.yellowBlockLayer.addFeature(point);
|
|
|
// this.yellowBlockLayer.addFeature(point1);
|
|
|
// this.yellowBlockLayer.addFeature(point2);
|
|
|
@@ -84,8 +86,18 @@ class SamplePointLayer {
|
|
|
console.log('name', name);
|
|
|
})
|
|
|
that.blueRegionLayer = null
|
|
|
+ that.pointType = ""
|
|
|
+ that.pointArr = []
|
|
|
+
|
|
|
+ // 切换点位图标
|
|
|
+ eventBus.off("changePointType")
|
|
|
+ eventBus.on("changePointType", ({ legend, colorObj }) => {
|
|
|
+ console.log('legend, colorObj', legend, colorObj);
|
|
|
+ that.togglePointType(legend, colorObj)
|
|
|
+ })
|
|
|
}
|
|
|
- getIconStyle(feature){
|
|
|
+ getIconStyle(feature) {
|
|
|
+ const color = feature.get("color")
|
|
|
const activeCompare = feature.get('activeCompare')
|
|
|
let style = new Style({
|
|
|
image: new Icon({
|
|
|
@@ -94,36 +106,50 @@ class SamplePointLayer {
|
|
|
scale: activeCompare ? 0.5 : feature.get('scale'),
|
|
|
})
|
|
|
});
|
|
|
- return style
|
|
|
+
|
|
|
+ let style2 = new Style({
|
|
|
+ image: new Circle({
|
|
|
+ radius: 6, // 半径
|
|
|
+ stroke: new Stroke({ // 边界样式
|
|
|
+ color: '#fff', // 边界颜色
|
|
|
+ width: 2 // 边界宽度
|
|
|
+ }),
|
|
|
+ fill: new Fill({ // 填充样式
|
|
|
+ color // 填充颜色
|
|
|
+ })
|
|
|
+ })
|
|
|
+ });
|
|
|
+ return color ? (activeCompare ? style : style2) : style
|
|
|
}
|
|
|
//多点的过滤方法
|
|
|
- manyFeatureFilter(features){
|
|
|
+ manyFeatureFilter(features) {
|
|
|
let res = features[0]
|
|
|
- if(features.length == 1){
|
|
|
+ if (features.length == 1) {
|
|
|
return res
|
|
|
}
|
|
|
- for(let item of features){
|
|
|
+ for (let item of features) {
|
|
|
res = res.get('status') > item.get('status') && item.get('noImg') === 0 && item.get('wys') === 1 ? res : item
|
|
|
}
|
|
|
return res;
|
|
|
}
|
|
|
//得到点样式
|
|
|
- getStyle(feature){
|
|
|
+ getStyle(feature) {
|
|
|
feature = this.manyFeatureFilter(feature.get('features'))
|
|
|
return this.getIconStyle(feature)
|
|
|
}
|
|
|
|
|
|
- initData(farmId, regionId){
|
|
|
+ initData(farmId, regionId) {
|
|
|
let that = this
|
|
|
let selectAll = undefined
|
|
|
- if(regionId===0){
|
|
|
- selectAll = 1
|
|
|
+ if (regionId === 0) {
|
|
|
+ selectAll = 1
|
|
|
}
|
|
|
- const areaId = selectAll?undefined:regionId
|
|
|
- VE_API.variety.pointList({farmId, regionId: areaId, selectAll}).then(({data})=>{
|
|
|
+ const areaId = selectAll ? undefined : regionId
|
|
|
+ VE_API.variety.pointList({ farmId, regionId: areaId, selectAll }).then(({ data }) => {
|
|
|
+ this.pointArr = data
|
|
|
let features = []
|
|
|
- for(let item of data){
|
|
|
- item.iconName='defalut'
|
|
|
+ for (let item of data) {
|
|
|
+ item.iconName = 'defalut'
|
|
|
that.getIcon(item)
|
|
|
let point = newPoint(item);
|
|
|
features.push(point)
|
|
|
@@ -133,40 +159,94 @@ class SamplePointLayer {
|
|
|
features: features,
|
|
|
});
|
|
|
that.clusterSource.setSource(source)
|
|
|
- setTimeout(()=>{
|
|
|
- that.mapRef.fit(that.clusterSource.source.getExtent(), {padding:[100,100,100,100]})
|
|
|
- },100)
|
|
|
+ setTimeout(() => {
|
|
|
+ that.mapRef.fit(that.clusterSource.source.getExtent(), { padding: [100, 100, 100, 100] })
|
|
|
+ }, 100)
|
|
|
})
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-toggleFilePoint(arr) {
|
|
|
- let that = this
|
|
|
- // 清除旧的 blueRegionLayer 图层
|
|
|
- that.clearCluster()
|
|
|
- if (that.blueRegionLayer) {
|
|
|
- that.blueRegionLayer.source.clear();
|
|
|
- }
|
|
|
- if(arr&&arr.length>0){
|
|
|
- let features = []
|
|
|
- for(let item of arr){
|
|
|
- item.iconName='defalut'
|
|
|
- that.getIcon(item)
|
|
|
- let point = newPoint(item);
|
|
|
- features.push(point)
|
|
|
- // console.log('item.dyImg',item.dyImg);
|
|
|
+ togglePointType(sampleData, colorObj) {
|
|
|
+ console.log('togglePointType------------', sampleData);
|
|
|
+ let that = this
|
|
|
+ that.clearCluster()
|
|
|
+ if (!sampleData) {
|
|
|
+ let features = []
|
|
|
+ for (let item of this.pointArr) {
|
|
|
+ item.iconName = 'defalut'
|
|
|
+ that.getIcon(item)
|
|
|
+ let point = newPoint(item);
|
|
|
+ features.push(point)
|
|
|
+ // console.log('item.dyImg',item.dyImg);
|
|
|
+ }
|
|
|
+ const source = new VectorSource({
|
|
|
+ features: features,
|
|
|
+ });
|
|
|
+ that.clusterSource.setSource(source)
|
|
|
+ setTimeout(() => {
|
|
|
+ that.mapRef.fit(that.clusterSource.source.getExtent(), { padding: [100, 100, 100, 100] })
|
|
|
+ }, 100)
|
|
|
+ return
|
|
|
}
|
|
|
- const source = new VectorSource({
|
|
|
- features: features,
|
|
|
+ // 遍历 sampleData
|
|
|
+ Object.entries(sampleData.obj).forEach(([key, geoHashSample]) => {
|
|
|
+ // 根据 key 找到 legend 中的颜色
|
|
|
+ const legendItem = colorObj.list.find(item => item.val === key);
|
|
|
+ const color = legendItem ? legendItem.color : null;
|
|
|
+ if (color && geoHashSample.length > 0) {
|
|
|
+ let features = []
|
|
|
+ this.pointArr.forEach(point => {
|
|
|
+ if (geoHashSample.includes(point.geoHashSample)) {
|
|
|
+ point.iconName = 'defalut'
|
|
|
+ point.color = color
|
|
|
+ that.getIcon(point)
|
|
|
+ let pointRes = newPoint(point);
|
|
|
+ features.push(pointRes)
|
|
|
+ } else {
|
|
|
+ point.iconName = 'defalut'
|
|
|
+ point.color = "#DDDDDD"
|
|
|
+ that.getIcon(point)
|
|
|
+ let pointRes = newPoint(point);
|
|
|
+ features.push(pointRes)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ const source = new VectorSource({
|
|
|
+ features: features,
|
|
|
+ });
|
|
|
+ that.clusterSource.setSource(source)
|
|
|
+ // setTimeout(() => {
|
|
|
+ // that.mapRef.fit(that.clusterSource.source.getExtent(), { padding: [100, 100, 100, 100] })
|
|
|
+ // }, 100)
|
|
|
+ }
|
|
|
});
|
|
|
- that.clusterSource.setSource(source)
|
|
|
- setTimeout(()=>{
|
|
|
- that.mapRef.fit(that.clusterSource.source.getExtent(), {padding:[100,100,100,100]})
|
|
|
- },100)
|
|
|
}
|
|
|
-};
|
|
|
|
|
|
- addMapSingerClick(kmap){
|
|
|
+
|
|
|
+ toggleFilePoint(arr) {
|
|
|
+ let that = this
|
|
|
+ // 清除旧的 blueRegionLayer 图层
|
|
|
+ // that.clearCluster()
|
|
|
+ if (that.blueRegionLayer) {
|
|
|
+ that.blueRegionLayer.source.clear();
|
|
|
+ }
|
|
|
+ if (arr && arr.length > 0) {
|
|
|
+ let features = []
|
|
|
+ for (let item of arr) {
|
|
|
+ item.iconName = 'defalut'
|
|
|
+ that.getIcon(item)
|
|
|
+ let point = newPoint(item);
|
|
|
+ features.push(point)
|
|
|
+ }
|
|
|
+ const source = new VectorSource({
|
|
|
+ features: features,
|
|
|
+ });
|
|
|
+ that.clusterSource.setSource(source)
|
|
|
+ setTimeout(() => {
|
|
|
+ that.mapRef.fit(that.clusterSource.source.getExtent(), { padding: [100, 100, 100, 100] })
|
|
|
+ }, 100)
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ addMapSingerClick(kmap) {
|
|
|
let that = this
|
|
|
// 创建弹窗图层
|
|
|
this.popup = new Overlay({
|
|
|
@@ -184,16 +264,16 @@ toggleFilePoint(arr) {
|
|
|
kmap.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
|
|
|
if (layer instanceof VectorLayer && layer.get("name") === "tree-cluster") {
|
|
|
hasFeature = true
|
|
|
- if(that.curPoint){
|
|
|
+ if (that.curPoint) {
|
|
|
that.curPoint.set("iconName", "defalut");
|
|
|
}
|
|
|
const featureArr = feature.get("features")
|
|
|
let fs = featureArr[0]
|
|
|
- for(let item of featureArr){
|
|
|
+ for (let item of featureArr) {
|
|
|
fs = fs.get('status') > item.get('status') ? fs : item
|
|
|
}
|
|
|
that.curPoint = fs
|
|
|
- if(that.isUpdatePoint){
|
|
|
+ if (that.isUpdatePoint) {
|
|
|
fs.set("iconName", "active");
|
|
|
}
|
|
|
if (!that.isCompare) {
|
|
|
@@ -242,51 +322,50 @@ toggleFilePoint(arr) {
|
|
|
<div class="item-val">${fs.get("khl")}%</div>
|
|
|
</div>
|
|
|
`;
|
|
|
-
|
|
|
+
|
|
|
document.getElementById('tag-nh').style.display = fs.get("nonghu") == 1 ? "inline-block" : 'none'
|
|
|
that.popup.setPosition(evt.coordinate)
|
|
|
} else {
|
|
|
console.log('fs.getProperties()', fs.getProperties());
|
|
|
- eventBus.emit("click:point",{farmId:fs.get("farmId"),sampleId:fs.get("sampleId"), data: fs.getProperties()})
|
|
|
+ eventBus.emit("click:point", { farmId: fs.get("farmId"), sampleId: fs.get("sampleId"), data: fs.getProperties() })
|
|
|
}
|
|
|
} else {
|
|
|
// fs.set("iconName", "active")
|
|
|
fs.set("activeCompare", fs.get("activeCompare") ? false : true);
|
|
|
if (fs.get("activeCompare")) {
|
|
|
- that.comparePointArr.push(fs)
|
|
|
+ that.comparePointArr.push(fs)
|
|
|
} else {
|
|
|
that.comparePointArr = that.comparePointArr.filter(item => item.get("id") !== fs.get("id"))
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
if (that.comparePointArr.length > 2) {
|
|
|
that.comparePointArr[0].set("activeCompare", false);
|
|
|
that.comparePointArr.shift();
|
|
|
}
|
|
|
- console.log('that.comparePointArr', that.comparePointArr);
|
|
|
// fs.set("icon", require('@/assets/images/map/active-icon-small.png'));
|
|
|
- eventBus.emit("clickToCompare:point",that.comparePointArr)
|
|
|
+ eventBus.emit("clickToCompare:point", that.comparePointArr)
|
|
|
}
|
|
|
}
|
|
|
if (layer instanceof VectorLayer && layer.get("name") === "yellow-block") {
|
|
|
hasFeature = true
|
|
|
- eventBus.emit("click:yellowBlock",feature.get("geometry").flatCoordinates[0])
|
|
|
+ eventBus.emit("click:yellowBlock", feature.get("geometry").flatCoordinates[0])
|
|
|
}
|
|
|
})
|
|
|
- if(!hasFeature){
|
|
|
- kmap.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
|
|
|
- if (layer instanceof VectorLayer && layer.get("name") === "regionLayer") {
|
|
|
- hasFeature = false
|
|
|
- if(that.curArea){
|
|
|
- that.curArea.set("bgName", "defalut");
|
|
|
- }
|
|
|
- that.curArea = feature
|
|
|
- if(that.isUpdateArea){
|
|
|
- feature.set("bgName", "active");
|
|
|
- eventBus.emit("click:updateArea",{name:feature.get("id"),value:feature.get("blueZone")})
|
|
|
- }else{
|
|
|
- eventBus.emit("click:area",{name:feature.get("id"),value:feature.get("highYield")})
|
|
|
- }
|
|
|
+ if (!hasFeature) {
|
|
|
+ kmap.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
|
|
|
+ if (layer instanceof VectorLayer && layer.get("name") === "regionLayer") {
|
|
|
+ hasFeature = false
|
|
|
+ if (that.curArea) {
|
|
|
+ that.curArea.set("bgName", "defalut");
|
|
|
+ }
|
|
|
+ that.curArea = feature
|
|
|
+ if (that.isUpdateArea) {
|
|
|
+ feature.set("bgName", "active");
|
|
|
+ eventBus.emit("click:updateArea", { name: feature.get("id"), value: feature.get("blueZone") })
|
|
|
+ } else {
|
|
|
+ eventBus.emit("click:area", { name: feature.get("id"), value: feature.get("highYield") })
|
|
|
}
|
|
|
+ }
|
|
|
})
|
|
|
if (that.isCompare) {
|
|
|
eventBus.emit("quitCompare")
|
|
|
@@ -299,44 +378,46 @@ toggleFilePoint(arr) {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
- resetPoint(){
|
|
|
+ resetPoint() {
|
|
|
this.isUpdatePoint = null
|
|
|
console.log('this.curPoint', this.curPoint);
|
|
|
- if(this.curPoint){
|
|
|
+ if (this.curPoint) {
|
|
|
// this.curPoint.set("iconName", "defalut");
|
|
|
this.curPoint.set("activeCompare", false);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- updatePointStatus(e){
|
|
|
+ updatePointStatus(e) {
|
|
|
this.isUpdatePoint = e
|
|
|
}
|
|
|
|
|
|
- updateAreaStatus(e){
|
|
|
+ updateAreaStatus(e) {
|
|
|
this.isUpdateArea = e
|
|
|
}
|
|
|
|
|
|
- getIcon(item){
|
|
|
+ // 切换点位数据
|
|
|
+
|
|
|
+ getIcon(item) {
|
|
|
// let imgSrc = require(`@/assets/images/map/${item.iconName}-icon.png`)
|
|
|
let imgSrc = require('@/assets/images/map/status/status-zc.png')
|
|
|
let scale = 0.8
|
|
|
- if(item.status == 1){
|
|
|
+ if (item.status == 1) {
|
|
|
imgSrc = require('@/assets/images/map/status/status-szyc.png')
|
|
|
}
|
|
|
- if(item.status == 2){
|
|
|
+ if (item.status == 2) {
|
|
|
imgSrc = require('@/assets/images/map/status/status-bh.png')
|
|
|
}
|
|
|
- if(item.status == 3){
|
|
|
+ if (item.status == 3) {
|
|
|
imgSrc = require('@/assets/images/map/status/status-ch.png')
|
|
|
}
|
|
|
|
|
|
- if(item.wys === '1'){
|
|
|
+ if (item.wys === '1') {
|
|
|
scale = 0.3
|
|
|
imgSrc = require('@/assets/images/map/status/wns.png')
|
|
|
}
|
|
|
|
|
|
- if(item.farmId === 90263){
|
|
|
- if(item.noImg === 1){
|
|
|
+ if (item.farmId === 90263) {
|
|
|
+ if (item.noImg === 1) {
|
|
|
imgSrc = require('@/assets/images/map/status/defalut-icon.png')
|
|
|
scale = 0.3
|
|
|
}
|
|
|
@@ -346,14 +427,14 @@ toggleFilePoint(arr) {
|
|
|
item["scale"] = scale
|
|
|
}
|
|
|
|
|
|
- reset(farm, region){
|
|
|
+ reset(farm, region) {
|
|
|
this.clearCluster()
|
|
|
this.initData(farm.id, region.id)
|
|
|
}
|
|
|
|
|
|
// 清除聚合图层，解除绑定
|
|
|
clearCluster() {
|
|
|
- if (this.treeClusterLayer) {
|
|
|
+ if (this.treeClusterLayer && this.treeClusterLayer.layer.getSource().getSource()) {
|
|
|
this.treeClusterLayer.layer.getSource().getSource().clear()
|
|
|
}
|
|
|
}
|
刘秀芳