開源的前端GIS空間分析庫介紹 （二）jsts與ol結合

文章目錄

• 前言
• 1 html中使用
• 2 幾何對象轉換
• • ol轉jsts
  • jsts轉ol
• 3 前端子產品化項目中引用

前言

openlayers是一個偏重量型的前端GIS可視化類庫，但是它基本上不具備空間分析運算的能力。舉個例子，比如：

1、判斷線與線是否交叉

2、線是否穿過多邊形

這些比較典型的空間判斷，ol其實都不具備。是以這個有時候比較尴尬。

jsts是一個前端GIS空間分析庫，在能力上能很好的彌補openlayers的短闆。下面介紹下openlayers于jsts的用法。

1 html中使用

如果是在html中使用， 在script标簽中添加這兩個庫的引用就可以了。

<script src="https://cdn.jsdelivr.net/gh/openlayers/[email protected]/en/v6.5.0/build/ol.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jsts/2.6.1/jsts.min.js"></script>
           

2 幾何對象轉換

jsts中提供了對于ol中geometry類型的解析器。用法如下：

var parser = new jsts.io.OL3Parser();
parser.inject(
  ol.geom.Point,
  ol.geom.LineString,
  ol.geom.LinearRing,
  ol.geom.Polygon,
  ol.geom.MultiPoint,
  ol.geom.MultiLineString,
  ol.geom.MultiPolygon
);
           

即， 将ol中的幾何類注入到jsts中。

這樣就可以将ol的geometry對象與jsts的幾何對象進行互相轉換了。看看兩個簡單的轉換示例。

ol轉jsts

var olPoint = new ol.geom.Point([1,1])
var jstsPoint = parser.read(olPoint)
console.log(jstsPoint.getCoordinate())
           

jsts轉ol

var wktReader = new jsts.io.WKTReader()
var jstsLine = wktReader.read('LINESTRING (1 1, 1 2, 1 3, 1 4)')
var olLine = parser.write(jstsLine)
console.log(olLine.getCoordinates()) 
           

3 前端子產品化項目中引用

ol中的相關類都正常引入，jsts庫中，似乎所有的核心類子產品都在’jsts/org/locationtech/jts’目錄下，是以用從該路徑下引入需要的類.

如

import OL3Parser from 'jsts/org/locationtech/jts/io/OL3Parser'
import OverlayOp from 'jsts/org/locationtech/jts/operation/overlay/OverlayOp'
import DistanceOp from 'jsts/org/locationtech/jts/operation/distance/DistanceOp'
           

如果要将ol的幾何對象轉換成jsts的，記得先inject。

那麼，通過将ol幾何對象轉換為jsts中的幾何對象，這樣就可以利用jsts的空間分析能力，來彌補ol空間分析能力不足的問題了。

本文參考：

1.openlayers官網jsts示例