一.JSTS

前言

JSTS 是一个符合 OGC 规范的简单要素空间位置判定函数 JavaScript 库，JSTS 也是 Java 类库 JTS 的一个接口，且与 OpenLayer 具有互操作性。

目前原生的 OpenLayers 并不支持空间拓扑关系查询，此类库可以作为重要的补充。通过此类库，可以判断多种空间几何的位置关系，最初建立这个工程的目的是为 web 地图应用提供一套完整的类库来处理和分析简单几何体，但 jsts 也可以作为一个独立的几何库。

空间运算利用几何函数来接收输入的空间数据，对其进行分析，然后生成输出数据，输出数据为针对输入数据执行分析的派生结果。

可从空间运算中获得的派生数据包括：

• 作为输入要素周围缓冲区的面
• 作为对几何集合执行分析的结果的单个要素
• 作为比较结果以确定不与其他要素位于同一物理空间的要素部分的单个要素
• 作为比较结果以查找与其他要素的物理空间相交的要素部分的单个要素
• 由彼此不位于同一物理空间的输入要素部分组成的多部分 (multipart) 要素
• 作为两个几何的并集的要素

1.Buffer 操作

查看代码详情

<template>
  <div ref="map" class="map"></div>
</template>

<script>
export default {
  async mounted() {
    let {
      format: { GeoJSON },
      geom: {
        LinearRing,
        LineString,
        MultiLineString,
        MultiPoint,
        MultiPolygon,
        Point,
        Polygon,
      },
      Map,
      View,
      layer: { Tile: TileLayer, Vector: VectorLayer },
      source: { OSM, Vector: VectorSource },
      proj: { fromLonLat },
    } = ol
    const source = new VectorSource()
    let res = await this.$axios.get(
      this.$withBase("/data/geojson/roads-seoul.geojson")
    )
    console.log(res)
    const format = new GeoJSON()
    const features = format.readFeatures(res.data, {
      featureProjection: "EPSG:3857",
    })
    const parser = new this.$jsts.io.OL3Parser()
    parser.inject(
      Point,
      LineString,
      LinearRing,
      Polygon,
      MultiPoint,
      MultiLineString,
      MultiPolygon
    )
    for (let i = 0; i < features.length; i++) {
      const feature = features[i]
      const jstsGeom = parser.read(feature.getGeometry())
      const buffered = jstsGeom.buffer(40)
      feature.setGeometry(parser.write(buffered))
    }
    source.addFeatures(features)
    const vectorLayer = new VectorLayer({
      source: source,
    })
    const rasterLayer = new TileLayer({
      source: new OSM(),
    })
    const map = new Map({
      layers: [rasterLayer, vectorLayer],
      target: this.$refs.map,
      view: new View({
        center: fromLonLat([126.979293, 37.528787]),
        zoom: 15,
      }),
    })
  },
}
</script>