Vue项目openlayers中使用jsts处理wkt和geojson的交集-(geojson来源zpi解析)
读取压缩包中的shape看上一篇笔记:Vue项目读取zip中的ShapeFile文件,并解析为GeoJson
openlayers使用jsts官方示例:https://openlayers.org/en/latest/examples/jsts.html
jsts官方代码地址:https://github.com/bjornharrtell/jsts
我们从shape中读取到的geojson格式如下:
只有边界的一些坐标点,下面的把geojson和wkt做交集然后转化为wkt返回的方法:
import { Component, Emit, Vue } from 'vue-property-decorator';
import { mapGetters, mapMutations } from 'vuex';import WKT from 'ol/format/WKT';
// eslint-disable-next-line import/extensions
import * as jsts from 'jsts/dist/jsts.min.js';
import {Geometry,GeometryCollection, LinearRing, LineString, MultiLineString, MultiPoint, Point,
} from 'ol/geom';
import Polygon from 'ol/geom/Polygon';
import MultiPolygon from 'ol/geom/MultiPolygon';@Component({name: 'MapMxins',computed: {...mapGetters('map', ['getDrawingType',]),},methods: {...mapMutations('map', ['updateDrawingType',]),},
})
export default class MapMxins extends Vue {getDrawingType;updateDrawingType;/*** 处理工作区范围-如果上传了shpe** @params xzqData: 行政区数据* @params geojson:工作区范围数据* 用工作区范围和行政区范围做相交处理,保留交集就是最后的范围* return: {* geom: 工作区范围和行政区相交的geom,如果没有相交或者工作区范围无效则返回行政区geom* isValid: 工作区范围是否有效* }*/hansleWorkspace(xzqData, geojson) {// console.log('处理工作区范围-如果上传了shpe:', xzqData, geojson);const xzqGeom = xzqData.geom; // 行政区geomconst format = new WKT();const parser = new jsts.io.OL3Parser();parser.inject(Point,LineString,LinearRing,Polygon,MultiPoint,MultiLineString,MultiPolygon,GeometryCollection,);// eslint-disable-next-line consistent-returnreturn new Promise((resolve) => {// 工作区范围featuresconst workspaceFeatures = geojson.features;// 行政区featuresconst xzqFeatures = format.readFeatures(xzqGeom);// 行政区Geometryconst xzqGeometry = parser.read(xzqFeatures[0].getGeometry());const xzqReturn = {geom: xzqGeom,isValid: false,};console.log('xzqFeatures-workspaceFeatures:', xzqFeatures, workspaceFeatures);try {// 如果工作区范围是多个feature,合并成一个let newWfGeometry;if (workspaceFeatures.length > 0) {workspaceFeatures.forEach((wkFeature) => {// 获取类型const { type, coordinates: mapdata } = wkFeature.geometry;let geometry: Geometry;if (type === 'Polygon') {geometry = new Polygon(mapdata); // 创建一个 Polygon 对象const wfGeometry1 = parser.read(geometry);newWfGeometry = newWfGeometry ? newWfGeometry.union(wfGeometry1) : wfGeometry1;} else if (type === 'MultiPolygon') {// 为每个多边形创建 Polygonconst polygons = mapdata.map((polygonCoords) => new Polygon(polygonCoords));geometry = new MultiPolygon(polygons); // 创建一个 MultiPolygon 对象const wfGeometry1 = parser.read(geometry);newWfGeometry = newWfGeometry ? newWfGeometry.union(wfGeometry1) : wfGeometry1;} else {this.$message.error('工作区范围必须是面数据');resolve(xzqReturn);}});} else {this.$message.error('工作区范围不能为空');return resolve(xzqReturn);}// console.log('合并后的作曲范围数据newWfGeometry:', newWfGeometry, xzqGeometry);// 判断工作区范围和行政区范围是否相交if (newWfGeometry && xzqGeometry) {const intersects = newWfGeometry.intersects(xzqGeometry);if (intersects) {// 如果相交,取交集做工作区范围newWfGeometry = newWfGeometry.intersection(xzqGeometry);// 转为wktconst newWkt = format.writeGeometry(parser.write(newWfGeometry));// console.log(newWkt);return resolve({geom: newWkt,isValid: true,});}console.log('不相交相交');// 如果不相交,则返回行政区范围return resolve(xzqReturn);}} catch (err) {console.log('工作区范围数据解析出错:', err);return resolve(xzqReturn);}});}
}
使用:
// res 是我这里固定的wkt-行政区边界wkt
const geomWorkspace: any = await this.hansleWorkspace(res, this.shpeState.geojson);
console.log('处理后返回的geomWorkspace:', geomWorkspace);
调用后返回效果: