|
|
@@ -26,7 +26,7 @@ class SamplePointLayer {
|
|
|
this.regionId = regionId
|
|
|
let vectorStyle = new KMap.VectorStyle();
|
|
|
this.vectorStyle = vectorStyle;
|
|
|
- this.treeClusterLayer = new Cluster({
|
|
|
+ this.clusterSource = new Cluster({
|
|
|
distance: 10,
|
|
|
minDistance: 10,
|
|
|
});
|
|
|
@@ -45,45 +45,6 @@ class SamplePointLayer {
|
|
|
|
|
|
this.addMapSingerClick(map.map);
|
|
|
|
|
|
- // 对比
|
|
|
- this.isCompare = false
|
|
|
- this.comparePointArr = []
|
|
|
- eventBus.off("compareTree")
|
|
|
- eventBus.on("compareTree", (val) => {
|
|
|
- that.isCompare = val
|
|
|
- if (val === false) {
|
|
|
- that.comparePointArr.map(fs => {
|
|
|
- fs.set("activeCompare", false)
|
|
|
- });
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- // 果园档案
|
|
|
- that.fileLegend = []
|
|
|
- eventBus.off("change:mapPoint")
|
|
|
- eventBus.on("change:mapPoint", async (field) => {
|
|
|
- if (!this.fileLegend.length) {
|
|
|
- await VE_API.farm.fetchLegendList().then(({data}) => {
|
|
|
- this.fileLegend = data
|
|
|
- })
|
|
|
- }
|
|
|
- const colorObj = that.fileLegend.find(item => item.code === field)
|
|
|
- that.togglePointType(null, colorObj, true)
|
|
|
- colorObj.list = colorObj.items
|
|
|
- eventBus.emit("changePointLegend", {colorObj})
|
|
|
- })
|
|
|
- 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) {
|
|
|
const color = feature.get("color")
|
|
|
@@ -149,6 +110,10 @@ class SamplePointLayer {
|
|
|
features: features,
|
|
|
});
|
|
|
that.clusterSource.setSource(source)
|
|
|
+ // console.log('this.treeClusterLayer.layer.getSource()', that.treeClusterLayer.layer.getSource());
|
|
|
+ // if (!that.treeClusterLayer || !that.treeClusterLayer.layer.getSource()) {
|
|
|
+ // that.mapRef.addLayer(that.treeClusterLayer.layer)
|
|
|
+ // }
|
|
|
|
|
|
const layers = that.mapRef.map.getLayers().getArray();
|
|
|
const exists = layers.includes(that.treeClusterLayer.layer);
|
|
|
@@ -162,97 +127,6 @@ class SamplePointLayer {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
- togglePointType(sampleData, colorObj, isFile) {
|
|
|
- console.log('toggle3PointType------------', sampleData, colorObj);
|
|
|
- let that = this
|
|
|
- that.clearCluster()
|
|
|
- if (!sampleData) {
|
|
|
- let features = []
|
|
|
- for (let item of this.pointArr) {
|
|
|
- item.iconName = 'defalut'
|
|
|
- that.getIcon(item)
|
|
|
- if (isFile && colorObj) {
|
|
|
- const fieldVal = Number(item[colorObj.code])
|
|
|
- const legendItem = colorObj.items.find((colorItem) => {
|
|
|
- return fieldVal >= colorItem.range[0] && fieldVal <= colorItem.range[1];
|
|
|
- })
|
|
|
- const color = legendItem ? legendItem.color : null;
|
|
|
- item.color = color
|
|
|
- } else {
|
|
|
- item.color = null
|
|
|
- }
|
|
|
- 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
|
|
|
- }
|
|
|
- eventBus.emit("resetFileActive", colorObj.key || colorObj.name)
|
|
|
- // 遍历 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)
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- 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
|
|
|
// 创建弹窗图层
|
|
|
@@ -283,115 +157,7 @@ class SamplePointLayer {
|
|
|
if (that.isUpdatePoint) {
|
|
|
fs.set("iconName", "active");
|
|
|
}
|
|
|
- console.log('fs.getProperties()', fs.getProperties());
|
|
|
- if (!that.isCompare) {
|
|
|
- const noImg = fs.get("noImg")
|
|
|
- if (noImg === 1) {
|
|
|
- VE_API.mini_farm.getSampleFiles({ geoHashSample: fs.get('geoHashSample') }).then(({data}) => {
|
|
|
- // 无照片
|
|
|
- document.getElementById('file-text').innerHTML = `
|
|
|
- <div class="list-item">
|
|
|
- <div class="list-name">
|
|
|
- <img src="${require('@/assets/images/common/title-icon.png')}" alt="" />
|
|
|
- ${data.meta_info.dp_alert_info.key}
|
|
|
- </div>
|
|
|
- ${data.meta_info.dp_alert_info.statement}
|
|
|
- </div>
|
|
|
- <div class="list-item">
|
|
|
- <div class="list-name">
|
|
|
- <img src="${require('@/assets/images/common/title-icon.png')}" alt="" />
|
|
|
- ${data.meta_info.grow_alert_info.key}
|
|
|
- </div>
|
|
|
- ${data.meta_info.grow_alert_info.statement}
|
|
|
- </div>
|
|
|
- <div class="list-item">
|
|
|
- <div class="list-name">
|
|
|
- <img src="${require('@/assets/images/common/title-icon.png')}" alt="" />
|
|
|
- ${data.meta_info.nutrition_info.key}
|
|
|
- </div>
|
|
|
- ${data.meta_info.nutrition_info.statement}
|
|
|
- </div>
|
|
|
- <div class="list-item">
|
|
|
- <div class="list-name">
|
|
|
- <img src="${require('@/assets/images/common/title-icon.png')}" alt="" />
|
|
|
- ${data.meta_info.prescription_info.key}
|
|
|
- </div>
|
|
|
- ${data.meta_info.prescription_info.statement}
|
|
|
- </div>
|
|
|
- `;
|
|
|
- document.getElementById('file-overview').innerHTML = `
|
|
|
- <div class="base-item">
|
|
|
- <span class="label">品种</span>
|
|
|
- <div class="value">${fs.get("pz")}</div>
|
|
|
- </div>
|
|
|
- <div class="base-item">
|
|
|
- <span class="label">冠幅表面积</span>
|
|
|
- <div class="value">${data.meta_info.crown}平方米</div>
|
|
|
- </div>
|
|
|
- <div class="base-item">
|
|
|
- <span class="label">总枝条</span>
|
|
|
- <div class="value">${data.meta_info.branch_num}</div>
|
|
|
- </div>
|
|
|
- <div class="base-item">
|
|
|
- <span class="label">树龄</span>
|
|
|
- <div class="value">${data.meta_info.age}年</div>
|
|
|
- </div>
|
|
|
- `;
|
|
|
- document.getElementById('file-output').innerHTML = `
|
|
|
- <div class="box-item">
|
|
|
- <div class="item-name">产量估计</div>
|
|
|
- <div class="item-val">${data.production_info.production}斤</div>
|
|
|
- </div>
|
|
|
- <div class="box-item">
|
|
|
- <div class="item-name">高质果率</div>
|
|
|
- <div class="item-val">${data.production_info.quality.toFixed(0)}%</div>
|
|
|
- </div>
|
|
|
- <div class="box-item">
|
|
|
- <div class="item-name">雌花比例</div>
|
|
|
- <div class="item-val">${data.production_info.cihua_ratio.toFixed(0)}%</div>
|
|
|
- </div>
|
|
|
- `;
|
|
|
- document.getElementById('file-quality').innerHTML = `
|
|
|
- <div class="box-item">
|
|
|
- <div class="item-name">通风率</div>
|
|
|
- <div class="item-val">${data.ecology_info.ventilation}%</div>
|
|
|
- </div>
|
|
|
- <div class="box-item">
|
|
|
- <div class="item-name">透光率</div>
|
|
|
- <div class="item-val">${data.ecology_info.transmittance}%</div>
|
|
|
- </div>
|
|
|
- <div class="box-item">
|
|
|
- <div class="item-name">病虫比例</div>
|
|
|
- <div class="item-val">${data.ecology_info.dp_situation}%</div>
|
|
|
- </div>
|
|
|
- `;
|
|
|
-
|
|
|
- document.getElementById('tag-nh').style.display = fs.get("nonghu") == 1 ? "inline-block" : 'none'
|
|
|
- that.popup.setPosition(evt.coordinate)
|
|
|
- })
|
|
|
- } else {
|
|
|
- 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)
|
|
|
- } 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();
|
|
|
- }
|
|
|
- // fs.set("icon", require('@/assets/images/map/active-icon-small.png'));
|
|
|
- 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:point", { farmId: fs.get("farmId"), sampleId: fs.get("sampleId"), data: fs.getProperties() })
|
|
|
}
|
|
|
})
|
|
|
if (!hasFeature) {
|
刘秀芳