开源的前端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示例