并且在 Mapbox 官网也推荐使用 Turf.js 作为空间分析库
Turf.js 是一个开源的空间分析库,由 Mapbox 供给。源码地点,在其官网中都有 Mapbox 作为底图的示例。
并且在 Mapbox 官网也保举使用 Turf.js 作为空间分析库。
用 Turf.js 是因为比来一个项目中要用到线的分隔断绝分手等成果,因为使用的是高德舆图,对这一项空间分析、拓扑的成果不敷,所以找到了这个库。
一、成果主要使用的成果:
1、线的交点--lineIntersect给定两条线,返回两条线的交点,交点个数可以是:0、1、2……n个
从源码中可知,,就是遍历两条线的线段(每两个点位一个线段),按照其坐标范畴得到是否有交点,有交点再计算交点位置。
下面是高德舆图的示例(用 MouseTool 画线)
sliceLine() { if (this.gaodeMap) { if (this.aMapSliceLine) { this.gaodeMap.baseMap.remove(this.aMapSliceLine) this.aMapSliceLine = null this.gaodeMap.baseMap.remove(this.intersectPointMarker) this.intersectPointMarker = [] } this.gaodeMap.baseMap.setDefaultCursor(‘crosshair‘) this.gaodeMap.drawPolyline({ strokeColor: ‘#33FF66‘, strokeWeight: 4 }) this.mouseToolEvent && this.gaodeMap.amapApi.event.removeListener(this.mouseToolEvent) this.mouseToolEvent = this.gaodeMap.amapApi.event.addListener( this.gaodeMap.mouseTool, ‘draw‘, event => { this.aMapSliceLine = event.obj this.gaodeMap.baseMap.setDefaultCursor(‘pointer‘) this.gaodeMap.mouseTool.close() // 进行交点计算 if (this.aMapLine) { let line1 = [], line2 = [] this.aMapLine.getPath().map(item => { line1.push([item.lng, item.lat]) }) this.aMapSliceLine.getPath().map(item => { line2.push([item.lng, item.lat]) }) let intersectPoint = lineIntersect( lineString(line1), lineString(line2) ) intersectPoint.features && intersectPoint.features.map(item => { this.intersectPointMarker.push( this.gaodeMap.addMarker({ position: item.geometry.coordinates }) ) }) } this.mouseToolEvent && this.gaodeMap.amapApi.event.removeListener(this.mouseToolEvent) } ) } }
2、线上的点分隔断绝分手线--lineSlice按照给定起始点和结束点,返回两点间的线,不在要分隔断绝分手的线上面,就找这两点离线比来的点,作为分隔断绝分手点。
3、分隔断绝分手线--lineSplit这个分隔断绝分手线,用来分隔断绝分手的可以是点、多点、线、多线、面等,对付非点的,第一步会找出和被支解线的交点,再按照这些点分隔断绝分手线。(即最终都是用电分隔断绝分手)
下面是切割线的高德舆图示例(MouseTool 画线)
// 切割线 splitLine() { if (this.gaodeMap) { if (this.aMapSplitLine) { this.gaodeMap.baseMap.remove(this.aMapSplitLine) this.aMapSplitLine = null this.gaodeMap.baseMap.remove(this.splitLines) this.splitLines = [] } this.gaodeMap.baseMap.setDefaultCursor(‘crosshair‘) this.gaodeMap.drawPolyline({ strokeColor: ‘#dd3333‘, strokeWeight: 4 }) this.mouseToolEvent && this.gaodeMap.amapApi.event.removeListener(this.mouseToolEvent) this.mouseToolEvent = this.gaodeMap.amapApi.event.addListener( this.gaodeMap.mouseTool, ‘draw‘, event => { this.aMapSplitLine = event.obj this.gaodeMap.baseMap.setDefaultCursor(‘pointer‘) this.gaodeMap.mouseTool.close() // 进行切割 if (this.aMapLine) { let line1 = [], line2 = [] this.aMapLine.getPath().map(item => { line1.push([item.lng, item.lat]) }) this.aMapSplitLine.getPath().map(item => { line2.push([item.lng, item.lat]) }) let split = lineSplit( lineString(line1), lineString(line2) ) split.features && split.features.map(item => { this.splitLines.push( this.gaodeMap.drawLine({ path: item.geometry.coordinates, strokeColor: randomColor2(), strokeWeight: 3, }) ) }) } this.mouseToolEvent && this.gaodeMap.amapApi.event.removeListener(this.mouseToolEvent) } ) } }
二、线的差集温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/31412.html