|
|
@@ -0,0 +1,429 @@
|
|
|
+import * as KMap from "@/utils/ol-map/KMap";
|
|
|
+import * as util from "@/common/ol_common.js";
|
|
|
+import config from "@/api/config.js";
|
|
|
+import { Point } from 'ol/geom';
|
|
|
+import Feature from "ol/Feature";
|
|
|
+import Style from "ol/style/Style";
|
|
|
+import Photo from "ol-ext/style/Photo";
|
|
|
+import { Fill, Text, Icon, Stroke } from "ol/style.js";
|
|
|
+import { newPoint} from "@/utils/map";
|
|
|
+
|
|
|
+/**
|
|
|
+ * @description 地图层对象
|
|
|
+ */
|
|
|
+class IndexMap {
|
|
|
+ constructor() {
|
|
|
+ let that = this;
|
|
|
+ let vectorStyle = new KMap.VectorStyle();
|
|
|
+ this.vectorStyle = vectorStyle;
|
|
|
+ // 位置图标
|
|
|
+ this.clickPointLayer = new KMap.VectorLayer("clickPointLayer", 9999, {
|
|
|
+ style: (f) => {
|
|
|
+ return new Style({
|
|
|
+ image: new Icon({
|
|
|
+ src: require("@/assets/img/home/farm-point.png"),
|
|
|
+ scale: 0.5,
|
|
|
+ anchor: [0.5, 1],
|
|
|
+ }),
|
|
|
+ });
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ this.gardenPointLayer = new KMap.VectorLayer("gardenPointLayer", 99, {
|
|
|
+ minZoom: 6,
|
|
|
+ maxZoom: 22,
|
|
|
+ style: (feature) => {
|
|
|
+ let style1 = new Style({
|
|
|
+ image: new Photo({
|
|
|
+ src: "https://birdseye-img.sysuimars.com/ai_result/2023/11/20/tree_4414/img_27572.jpg" + '?imageView2/1/w/300/interlace/1',
|
|
|
+ radius: 19,
|
|
|
+ shadow: 0,
|
|
|
+ crop: true,
|
|
|
+ onload: function () {
|
|
|
+ that.gardenPointLayer.layer.changed();
|
|
|
+ },
|
|
|
+ displacement: [-1, -1],
|
|
|
+ stroke: new Stroke({
|
|
|
+ width: 2,
|
|
|
+ color: "#fdfcfc00",
|
|
|
+ }),
|
|
|
+ }),
|
|
|
+ });
|
|
|
+ let style2 = new Style({
|
|
|
+ image: new Photo({
|
|
|
+ src: require("@/assets/img/map/garden-border.png"),
|
|
|
+ radius: 24,
|
|
|
+ shadow: 0,
|
|
|
+ crop: false,
|
|
|
+ onload: function () {
|
|
|
+ that.gardenPointLayer.layer.changed();
|
|
|
+ },
|
|
|
+ displacement: [0, -6],
|
|
|
+ stroke: new Stroke({
|
|
|
+ width: 0,
|
|
|
+ color: "#fdfcfc00",
|
|
|
+ }),
|
|
|
+ }),
|
|
|
+ });
|
|
|
+ let style3 = new Style({
|
|
|
+ text: new Text({
|
|
|
+ // text: '2.18 农事1',
|
|
|
+ text: feature.get('mapInfo'),
|
|
|
+ offsetX: 0,
|
|
|
+ offsetY: -30,
|
|
|
+ font: "bold 12px sans-serif",
|
|
|
+ fill: new Fill({ color: "#fff" }), // 字体颜色
|
|
|
+ }),
|
|
|
+ });
|
|
|
+
|
|
|
+ const canvas = document.createElement('canvas');
|
|
|
+ const ctx = canvas.getContext('2d');
|
|
|
+
|
|
|
+ // 矩形的参数
|
|
|
+ const x = 150; // 矩形中心点的x坐标
|
|
|
+ const y = 100; // 矩形中心点的y坐标
|
|
|
+ const width = 98; // 矩形的宽度
|
|
|
+ const height = 20; // 矩形的高度
|
|
|
+ const cornerRadius = 8; // 圆角半径
|
|
|
+
|
|
|
+ // 创建渐变
|
|
|
+ const gradient = ctx.createLinearGradient(x - width / 2, y, x + width / 2, y);
|
|
|
+ gradient.addColorStop(0, '#2199F8'); // 渐变起始颜色
|
|
|
+ gradient.addColorStop(1, '#2199F8'); // 渐变结束颜色
|
|
|
+
|
|
|
+ // 绘制圆角矩形
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.moveTo(x - width / 2 + cornerRadius, y - height / 2); // 左上角
|
|
|
+ ctx.lineTo(x + width / 2 - cornerRadius, y - height / 2); // 上边
|
|
|
+ ctx.arc(x + width / 2 - cornerRadius, y - height / 2 + cornerRadius, cornerRadius, -Math.PI / 2, 0); // 右上角
|
|
|
+ ctx.lineTo(x + width / 2, y + height / 2 - cornerRadius); // 右边
|
|
|
+ ctx.arc(x + width / 2 - cornerRadius, y + height / 2 - cornerRadius, cornerRadius, 0, Math.PI / 2); // 右下角
|
|
|
+ ctx.lineTo(x - width / 2 + cornerRadius, y + height / 2); // 下边
|
|
|
+ ctx.arc(x - width / 2 + cornerRadius, y + height / 2 - cornerRadius, cornerRadius, Math.PI / 2, Math.PI); // 左下角
|
|
|
+ ctx.lineTo(x - width / 2, y - height / 2 + cornerRadius); // 左边
|
|
|
+ ctx.arc(x - width / 2 + cornerRadius, y - height / 2 + cornerRadius, cornerRadius, Math.PI, -Math.PI / 2); // 左上角
|
|
|
+ ctx.closePath();
|
|
|
+
|
|
|
+ // 填充颜色
|
|
|
+ ctx.fillStyle = gradient;
|
|
|
+ ctx.fill();
|
|
|
+ const newStyle = new Style({
|
|
|
+ image: new Icon({
|
|
|
+ src: canvas.toDataURL(),
|
|
|
+ displacement: [0, 56],
|
|
|
+ }),
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ return [style1, style2, newStyle, style3];
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ initMap(location, target, isCapital) {
|
|
|
+ let level = 16;
|
|
|
+ let coordinate = util.wktCastGeom(location).getFirstCoordinate();
|
|
|
+ this.kmap = new KMap.Map(target, level, coordinate[0], coordinate[1], null, 8, 22, isCapital ? "img" : "vec");
|
|
|
+ let xyz2 = config.base_img_url3 + "map/lby/{z}/{x}/{y}.png";
|
|
|
+ this.kmap.addXYZLayer(xyz2, { minZoom: 8, maxZoom: 22 }, 2);
|
|
|
+ this.kmap.addLayer(this.clickPointLayer.layer);
|
|
|
+ this.kmap.addLayer(this.gardenPointLayer.layer);
|
|
|
+ if (isCapital) {
|
|
|
+ this.initData()
|
|
|
+ const point = ["113.61652616170711,23.58399613872042", "113.61767554789421, 23.590079887444034", "113.62757101477101, 23.590796948574365", "113.62240816252164, 23.59499176519138"]
|
|
|
+ } else {
|
|
|
+ let point = new Feature(new Point(coordinate))
|
|
|
+ this.clickPointLayer.addFeature(point)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ initData() {
|
|
|
+ const gardenList = [{
|
|
|
+ "consequenceText": "如果不做本次农事，会导致您的产量、质量下降15%，管理得分降低5分",
|
|
|
+ "id": "274655",
|
|
|
+ "reCheckText": "本次农事复核成效优异，作物产量潜力实现大幅增长，虫害风险控制优异，未发现虫害风险",
|
|
|
+ "farmName": "荔枝博览园",
|
|
|
+ "farmPoint": "POINT(113.61652616170711 23.58399613872042)",
|
|
|
+ "orderId": "745923635683790848",
|
|
|
+ "area": 2.719998598098755,
|
|
|
+ "expert": 91356,
|
|
|
+ "orderStatus": 4,
|
|
|
+ "activeStatus": 0,
|
|
|
+ "farmId": 766,
|
|
|
+ "regionId": 2,
|
|
|
+ "speciesId": "1",
|
|
|
+ "speciesName": "荔枝",
|
|
|
+ "agriculturalId": 24,
|
|
|
+ "farmWorkId": "699343457474318336",
|
|
|
+ "farmWorkLibId": "699343457474318336",
|
|
|
+ "farmWorkLibName": "梢期防虫",
|
|
|
+ "farmWorkName": "梢期防虫",
|
|
|
+ "expertIcon": "https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png",
|
|
|
+ "expertName": "韦帮稳",
|
|
|
+ "expertUserIcon": "",
|
|
|
+ "expertUserName": "韦帮稳",
|
|
|
+ "icon": 4,
|
|
|
+ "indexChart": [],
|
|
|
+ "indexName": "",
|
|
|
+ "beforeExecuteDate": "2024-12-03",
|
|
|
+ "checkDate": null,
|
|
|
+ "executeDate": "2025-08-15",
|
|
|
+ "indexJson": "",
|
|
|
+ "code": "BZ-BC-04-SQFC-20",
|
|
|
+ "expertPrescription": "",
|
|
|
+ "condition": "单树嫩叶率大于20.0%",
|
|
|
+ "solarName": "",
|
|
|
+ "reCheck": null,
|
|
|
+ "menu": 1,
|
|
|
+ "isEdit": 0,
|
|
|
+ "isMaster": null,
|
|
|
+ "num": null,
|
|
|
+ "purpose": "",
|
|
|
+ "selfExec": null,
|
|
|
+ "defaultFarmWork": 0,
|
|
|
+ "farmWorkType": 3,
|
|
|
+ "farmWorkTypeName": "病虫",
|
|
|
+ "type": 1,
|
|
|
+ "execute": 4,
|
|
|
+ "updateDate0": "2025-08-20",
|
|
|
+ "updateDate1": null,
|
|
|
+ "updateDate2": null,
|
|
|
+ "updateDate3": null,
|
|
|
+ "updateDate4": null,
|
|
|
+ "updateDate5": null,
|
|
|
+ "usageMode": "叶面施",
|
|
|
+ "serviceMain": "广州泽秾丰农资有限公司",
|
|
|
+ "updateDate6": null,
|
|
|
+ "confirmPicture": [],
|
|
|
+ "executeMain": "广州泽秾丰农资有限公司",
|
|
|
+ "storeShortName": "泽秾丰",
|
|
|
+ "weatherWarningMsg": "",
|
|
|
+ "executeEvidence": [],
|
|
|
+ "userEvaluation": null,
|
|
|
+ "reviewDate": null,
|
|
|
+ "reviewDate2": null,
|
|
|
+ "reviewImage": [],
|
|
|
+ "reviewImage2": [],
|
|
|
+ "serviceRegion": "广州市从化区荔枝博览园",
|
|
|
+ "cost": null,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "consequenceText": "如果不做本次农事，会导致您的产量、质量下降15%，管理得分降低5分",
|
|
|
+ "id": "274656",
|
|
|
+ "reCheckText": "本次农事复核成效优异，作物产量潜力实现大幅增长，控梢情况优秀，叶芽绿在5%以内",
|
|
|
+ "farmName": "荔枝博览园",
|
|
|
+ "farmPoint": "POINT(113.61767554789421 23.590079887444034)",
|
|
|
+ "orderId": "745923638623997952",
|
|
|
+ "area": 2.719998598098755,
|
|
|
+ "expert": 91356,
|
|
|
+ "orderStatus": 4,
|
|
|
+ "activeStatus": 0,
|
|
|
+ "farmId": 766,
|
|
|
+ "regionId": 2,
|
|
|
+ "speciesId": "1",
|
|
|
+ "speciesName": "荔枝",
|
|
|
+ "agriculturalId": 24,
|
|
|
+ "farmWorkId": "699343457474318337",
|
|
|
+ "farmWorkLibId": "699343457474318337",
|
|
|
+ "farmWorkLibName": "控梢",
|
|
|
+ "farmWorkName": "控梢",
|
|
|
+ "expertIcon": "https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png",
|
|
|
+ "expertName": "韦帮稳",
|
|
|
+ "expertUserIcon": "",
|
|
|
+ "expertUserName": "韦帮稳",
|
|
|
+ "icon": 4,
|
|
|
+ "indexChart": [],
|
|
|
+ "indexName": "",
|
|
|
+ "beforeExecuteDate": "2024-12-15",
|
|
|
+ "checkDate": null,
|
|
|
+ "executeDate": "2024-12-03",
|
|
|
+ "indexJson": "",
|
|
|
+ "code": "YJ-TJ-04-KS-14",
|
|
|
+ "expertPrescription": "",
|
|
|
+ "condition": "园区叶芽率大于10.0%",
|
|
|
+ "solarName": "",
|
|
|
+ "reCheck": null,
|
|
|
+ "menu": 1,
|
|
|
+ "isEdit": 0,
|
|
|
+ "isMaster": null,
|
|
|
+ "num": null,
|
|
|
+ "purpose": "",
|
|
|
+ "selfExec": null,
|
|
|
+ "defaultFarmWork": 0,
|
|
|
+ "farmWorkType": 1,
|
|
|
+ "farmWorkTypeName": "调节",
|
|
|
+ "type": 0,
|
|
|
+ "execute": 4,
|
|
|
+ "updateDate0": "2025-08-20",
|
|
|
+ "updateDate1": null,
|
|
|
+ "updateDate2": null,
|
|
|
+ "updateDate3": null,
|
|
|
+ "updateDate4": null,
|
|
|
+ "updateDate5": null,
|
|
|
+ "usageMode": "叶面施",
|
|
|
+ "serviceMain": "广州泽秾丰农资有限公司",
|
|
|
+ "updateDate6": null,
|
|
|
+ "confirmPicture": [],
|
|
|
+ "executeMain": "广州泽秾丰农资有限公司",
|
|
|
+ "storeShortName": "泽秾丰",
|
|
|
+ "weatherWarningMsg": "",
|
|
|
+ "executeEvidence": [],
|
|
|
+ "userEvaluation": null,
|
|
|
+ "reviewDate": null,
|
|
|
+ "reviewDate2": null,
|
|
|
+ "reviewImage": [],
|
|
|
+ "reviewImage2": [],
|
|
|
+ "serviceRegion": "广州市从化区荔枝博览园",
|
|
|
+ "cost": null,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "consequenceText": "如果不做本次农事，会导致您的产量、质量下降50%，管理得分降低15分",
|
|
|
+ "id": "274657",
|
|
|
+ "reCheckText": "本次农事复核成效优异，作物产量潜力实现大幅增长，树体营养较充足，土壤肥力增加",
|
|
|
+ "farmName": "荔枝博览园",
|
|
|
+ "farmPoint": "POINT(113.62757101477101 23.590796948574365)",
|
|
|
+ "orderId": "745923641274798080",
|
|
|
+ "area": 2.719998598098755,
|
|
|
+ "expert": 91356,
|
|
|
+ "orderStatus": 4,
|
|
|
+ "activeStatus": 0,
|
|
|
+ "farmId": 766,
|
|
|
+ "regionId": 2,
|
|
|
+ "speciesId": "1",
|
|
|
+ "speciesName": "荔枝",
|
|
|
+ "agriculturalId": 24,
|
|
|
+ "farmWorkId": "699343457474318338",
|
|
|
+ "farmWorkLibId": "699343457474318338",
|
|
|
+ "farmWorkLibName": "基肥",
|
|
|
+ "farmWorkName": "基肥",
|
|
|
+ "expertIcon": "https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png",
|
|
|
+ "expertName": "韦帮稳",
|
|
|
+ "expertUserIcon": "",
|
|
|
+ "expertUserName": "韦帮稳",
|
|
|
+ "icon": 4,
|
|
|
+ "indexChart": [],
|
|
|
+ "indexName": "",
|
|
|
+ "beforeExecuteDate": "2024-12-15",
|
|
|
+ "checkDate": null,
|
|
|
+ "executeDate": "2024-12-15",
|
|
|
+ "indexJson": "",
|
|
|
+ "code": "BZ-YY-04-JF-300",
|
|
|
+ "expertPrescription": "",
|
|
|
+ "condition": "基肥日期大于1215",
|
|
|
+ "solarName": "",
|
|
|
+ "reCheck": null,
|
|
|
+ "menu": 1,
|
|
|
+ "isEdit": 0,
|
|
|
+ "isMaster": null,
|
|
|
+ "num": null,
|
|
|
+ "purpose": "",
|
|
|
+ "selfExec": null,
|
|
|
+ "defaultFarmWork": 0,
|
|
|
+ "farmWorkType": 2,
|
|
|
+ "farmWorkTypeName": "营养",
|
|
|
+ "type": 1,
|
|
|
+ "execute": 4,
|
|
|
+ "updateDate0": "2025-08-20",
|
|
|
+ "updateDate1": null,
|
|
|
+ "updateDate2": null,
|
|
|
+ "updateDate3": null,
|
|
|
+ "updateDate4": null,
|
|
|
+ "updateDate5": null,
|
|
|
+ "usageMode": "根部施",
|
|
|
+ "serviceMain": "广州泽秾丰农资有限公司",
|
|
|
+ "updateDate6": null,
|
|
|
+ "confirmPicture": [],
|
|
|
+ "executeMain": "广州泽秾丰农资有限公司",
|
|
|
+ "storeShortName": "泽秾丰",
|
|
|
+ "weatherWarningMsg": "",
|
|
|
+ "executeEvidence": [],
|
|
|
+ "userEvaluation": null,
|
|
|
+ "reviewDate": null,
|
|
|
+ "reviewDate2": null,
|
|
|
+ "reviewImage": [],
|
|
|
+ "reviewImage2": [],
|
|
|
+ "serviceRegion": "广州市从化区荔枝博览园",
|
|
|
+ "cost": null,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "consequenceText": "如果不做本次农事，会导致您的产量、质量下降10%，管理得分降低3分",
|
|
|
+ "id": "274658",
|
|
|
+ "reCheckText": "本次农事复核成效优异，作物产量潜力实现大幅增长，病虫害基数得到大幅下降，未发现病虫害风险",
|
|
|
+ "farmName": "荔枝博览园",
|
|
|
+ "farmPoint": "POINT(113.62240816252164 23.59499176519138)",
|
|
|
+ "orderId": "745923644080787456",
|
|
|
+ "area": 2.719998598098755,
|
|
|
+ "expert": 91356,
|
|
|
+ "orderStatus": 4,
|
|
|
+ "activeStatus": 0,
|
|
|
+ "farmId": 766,
|
|
|
+ "regionId": 2,
|
|
|
+ "speciesId": "1",
|
|
|
+ "speciesName": "荔枝",
|
|
|
+ "agriculturalId": 24,
|
|
|
+ "farmWorkId": "699343457474318339",
|
|
|
+ "farmWorkLibId": "699343457474318339",
|
|
|
+ "farmWorkLibName": "清园",
|
|
|
+ "farmWorkName": "清园",
|
|
|
+ "expertIcon": "https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png",
|
|
|
+ "expertName": "韦帮稳",
|
|
|
+ "expertUserIcon": "",
|
|
|
+ "expertUserName": "韦帮稳",
|
|
|
+ "icon": 4,
|
|
|
+ "indexChart": [],
|
|
|
+ "indexName": "",
|
|
|
+ "beforeExecuteDate": "2024-12-27",
|
|
|
+ "checkDate": null,
|
|
|
+ "executeDate": "2024-12-15",
|
|
|
+ "indexJson": "",
|
|
|
+ "code": "BZ-BC-04-QY-100",
|
|
|
+ "expertPrescription": "",
|
|
|
+ "condition": "清园日期大于1215",
|
|
|
+ "solarName": "",
|
|
|
+ "reCheck": null,
|
|
|
+ "menu": 1,
|
|
|
+ "isEdit": 0,
|
|
|
+ "isMaster": null,
|
|
|
+ "num": null,
|
|
|
+ "purpose": "",
|
|
|
+ "selfExec": null,
|
|
|
+ "defaultFarmWork": 0,
|
|
|
+ "farmWorkType": 3,
|
|
|
+ "farmWorkTypeName": "病虫",
|
|
|
+ "type": 1,
|
|
|
+ "execute": 4,
|
|
|
+ "updateDate0": "2025-08-20",
|
|
|
+ "updateDate1": null,
|
|
|
+ "updateDate2": null,
|
|
|
+ "updateDate3": null,
|
|
|
+ "updateDate4": null,
|
|
|
+ "updateDate5": null,
|
|
|
+ "usageMode": "叶面施",
|
|
|
+ "serviceMain": "广州泽秾丰农资有限公司",
|
|
|
+ "updateDate6": null,
|
|
|
+ "confirmPicture": [],
|
|
|
+ "executeMain": "广州泽秾丰农资有限公司",
|
|
|
+ "storeShortName": "泽秾丰",
|
|
|
+ "weatherWarningMsg": "",
|
|
|
+ "executeEvidence": [],
|
|
|
+ "userEvaluation": null,
|
|
|
+ "reviewDate": null,
|
|
|
+ "reviewDate2": null,
|
|
|
+ "reviewImage": [],
|
|
|
+ "reviewImage2": [],
|
|
|
+ "serviceRegion": "广州市从化区荔枝博览园",
|
|
|
+ "cost": null,
|
|
|
+ }]
|
|
|
+ for (let item of gardenList) {
|
|
|
+ item.mapInfo = item.executeDate?.replace(/^\d{4}-(\d{2})-(\d{2})$/, '$1.$2') + ' ' + item.farmWorkName
|
|
|
+ this.gardenPointLayer.source.addFeature(newPoint(item, "farmPoint", "myGarden"))
|
|
|
+ }
|
|
|
+ this.kmap.getView().fit(this.gardenPointLayer.source.getExtent(), { padding: [20, 2, 20, 2] });
|
|
|
+ // const finalZoom = this.kmap.getView().getZoom();
|
|
|
+ // if (finalZoom > 18) {
|
|
|
+ // this.kmap.getView().setZoom(18);
|
|
|
+ // }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default IndexMap;
|
