import * as KMap from "@/utils/ol-map/KMap"; import * as util from "@/common/ol_common.js"; import config from "@/api/config.js"; import Style from "ol/style/Style"; import Icon from "ol/style/Icon"; import { Point } from 'ol/geom'; import Feature from "ol/Feature"; import * as proj from "ol/proj"; import { getArea } from 'ol/sphere.js'; import WKT from "ol/format/WKT.js"; import proj4 from "proj4" import { register } from "ol/proj/proj4"; proj4.defs("EPSG:38572", "+proj=merc +a=6378137 +b=6378137 +lat_ts=0 +lon_0=0 +x_0=0 +y_0=0 +k=1 +units=m +nadgrids=@null +wktext +no_defs +type=crs"); register(proj4); /** * @description 地图层对象 */ class DrawRegionMap { 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/garden-point.png"), scale: 0.5, anchor: [0.5, 1], }), }); }, }); } initMap(location, target) { let level = 16; let coordinate = util.wktCastGeom(location).getFirstCoordinate(); this.kmap = new KMap.Map(target, level, coordinate[0], coordinate[1], null, 8, 22); 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.setMapPoint(coordinate) this.kmap.initDraw((e) => { // drawend事件:绘制结束后的处理(支持绘制多个地块) }) this.kmap.startDraw() this.kmap.modifyDraw() } setAreaGeometry(geometryArr, needFitView = false) { let that = this geometryArr.map(item => { // 不使用 setLayerWkt,而是手动添加要素,避免自动缩放视图 const format = new WKT() const mapProjection = that.kmap.map.getView().getProjection() let geometry = format.readGeometry(item, { dataProjection: 'EPSG:4326', featureProjection: mapProjection }) let f = new Feature({ geometry: geometry }) that.kmap.polygonLayer.source.addFeature(f) }) // 根据参数决定是否需要自适应地块范围 if (needFitView) { this.fitView() } } fitView() { let extent = this.kmap.polygonLayer.source.getExtent() // 地图自适应到区域可视范围 this.kmap.getView().fit(extent, { duration: 500, padding: [100, 100, 100, 100] }); } clearLayer() { // this.kmap.removeLayer(this.clickPointLayer.layer) this.kmap.polygonLayer.source.clear(); } getAreaGeometry() { const features = this.kmap.getLayerFeatures() let geometryArr = [] let area = 0 const format = new WKT() // 获取图层上的Polygon,转成WKT用于回显 features.forEach(item => { // 使用 writeGeometry 而不是 writeFeature,因为 setLayerWkt 期望的是几何体的 WKT const geometry = item.getGeometry() geometryArr.push(format.writeGeometry(geometry, { dataProjection: 'EPSG:4326', featureProjection: this.kmap.map.getView().getProjection() })) let geom = geometry.clone() geom.transform(proj.get("EPSG:4326"), proj.get("EPSG:38572")) let areaItem = getArea(geom) areaItem = (areaItem + areaItem / 2) / 1000; area += areaItem }) return { geometryArr, mianji: area.toFixed(2) } // 修改为 mianji 字段,与创建页面保持一致 } setMapPosition(center) { this.kmap.getView().animate({ center, zoom: 17, duration: 500, }); this.setMapPoint(center) } setMapPoint(coordinate) { this.clickPointLayer.source.clear() let point = new Feature(new Point(coordinate)) this.clickPointLayer.addFeature(point) } // 删除当前地块(删除最新绘制的一个地块) deleteCurrentPolygon() { if (!this.kmap || !this.kmap.polygonLayer) return; const features = this.kmap.polygonLayer.source.getFeatures(); if (features && features.length > 0) { const lastFeature = features[features.length - 1]; this.kmap.polygonLayer.source.removeFeature(lastFeature); } } } export default DrawRegionMap;