第二のパッケージジオメトリライブラリjsts

 mapconfig.js：

/* eslint-disable no-undef */
/* eslint-disable no-unused-vars */
/* eslint-disable no-redeclare */
/* eslint-disable camelcase */
import OpenLayers from '../../../../../../static/gispage/openlayer'

// this.commonFunction.jstsStyle()
let jstsStyle = (wkt, layer, name) => {
  /**
   * jsts 例子
   **/
  // 添加样式过滤器
  var wfvectorstyle = new OpenLayers.Style({
    pointRadius: 30,
    fillOpacity: 0.7,
    fillColor: '#00b3f9',
    strokeWidth: 5,
    strokeOpacity: 1,
    graphicZIndex: 1,
    strokeColor: '#D44927' // 颜色
  })
  var wfvectorselectedstyle = new OpenLayers.Style({
    pointRadius: 30,
    fillOpacity: 0.7,
    fillColor: 'green',
    strokeWidth: 5,
    strokeOpacity: 1,
    graphicZIndex: 1,
    strokeColor: '#F0D25D'
  })
  var wfslayer = new OpenLayers.Layer.Vector('testlayer', {
    styleMap: new OpenLayers.StyleMap({
      'default': wfvectorstyle,
      'select': wfvectorselectedstyle
    })
  })
  map.addLayer(wfslayer)
  // 使用WKT format读取A和B两个点
  // JSTS reader, converts WKT geometry to JSTS geometry
  var jsts_reader = new jsts.io.WKTReader()
  // JSTS OpenLayersParser reads OpenLayers geometry to JSTS geometry / writes JSTS geometry to OpenLayers geometry
  var jsts_parser = new jsts.io.OpenLayersParser()
  var jsts_buffer_tolerance // 2 bzw. 100000 s. init(); //buffer
  var akt_jsts_operation = 1 // buffer
  /// /WKT转Geometry，points是一个点数组，如果为点，其长度为1，如果为线和面，长度大于1
  var layer = map.getLayersBy('name', name)
  var fts = layer[0].features
  // //转成jsts geometry 对象
  var jsts_geomA = wktpolygon
  // eslint-disable-next-line no-unused-vars
  var jsts_geomB = wktpolygon2
  var jsts_geomA = jsts_parser.read(fts[0].geometry.clone())
  var jsts_geomB = jsts_parser.read(fts[1].geometry.clone())
}
let Intersections = (map, wktpolygon, wktpolygon2, par1, buffer, mapStyle) => { // 提取公共的方法
  // JSTS reader, converts WKT geometry to JSTS geometry
  var jsts_reader = new jsts.io.WKTReader()
  // JSTS OpenLayersParser reads OpenLayers geometry to JSTS geometry / writes JSTS geometry to OpenLayers geometry
  var jsts_parser = new jsts.io.OpenLayersParser()
  var jsts_buffer_tolerance // 2 bzw. 100000 s. init(); //buffer
  var akt_jsts_operation = 1 // buffer
  /// /WKT转Geometry，points是一个点数组，如果为点，其长度为1，如果为线和面，长度大于1
  var layer = map.getLayersBy('name', par1)
  var fts = layer[0].features
  // //转成jsts geometry 对象
  var jsts_geomA = wktpolygon
  var jsts_geomB = wktpolygon2
  var jsts_geomA = jsts_parser.read(fts[0].geometry.clone())
  var jsts_geomB = jsts_parser.read(fts[1].geometry.clone())
  // //通过jsts空间扩展能力去算多点的外接矩形
  var jsts_result_geom = null
  if (buffer === 'buffer') {
    jsts_result_geom = jsts_geomA.buffer(40) // 缓冲区
  } else if (buffer === 'intersection') {
    jsts_result_geom = jsts_geomA.intersection(jsts_geomB)
  } else if (buffer === 'union') {
    jsts_result_geom = jsts_geomA.union(jsts_geomB)
  } else if (buffer === 'convexHull') {
    jsts_result_geom = jsts_geomA.convexHull()
  } else if (buffer === 'symDifference') {
    jsts_result_geom = jsts_geomA.symDifference(jsts_geomB)
  } else if (buffer === 'getCentroid') {
    jsts_result_geom = jsts_geomA.getCentroid()
  } else if (buffer == 'getBoundary') {
    jsts_result_geom = jsts_geomA.getBoundary()
  }

  console.log(jsts_result_geom)
  // console.log(jsts_result_geom.shell.points[0].x)
  //  //转成openlayer geometry 对象
  var transforgeometry = jsts_parser.write(jsts_result_geom)
  return transforgeometry
  // var convexHullFeature = new OpenLayers.Feature.Vector('convexHullVector', {
  //   styleMap: new OpenLayers.StyleMap(mapStyle) // 设置图层样式
  // })
  // convexHullFeature.geometry = transforgeometry
  // layer[0].addFeatures([convexHullFeature])
}
let read = (wktpolygon, jsts_parser, fts) => {
  var wktpolygon = jsts_parser.read(fts[0].geometry.clone())

  return wktpolygon
  // var jsts_geomB = jsts_parser.read(fts[1].geometry.clone())
}

export default {
  jstsStyle,
  Intersections,
  read

}

カプセル化の呼び出し： 

 

完全VUEのページ：convexHull.vue

<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-10 16:10:56
 * @LastEditTime: 2019-09-17 09:37:18
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="col-md-12">
    <!----路径导航---->
    <div class="myman_nav_route">
      您现在的位置：<a href="javascript:">开发支持</a> > <a href="javascript:">Javascript API</a> > <a href="javascript:">参考手册</a> > <a href="javascript:">事件</a>
      <div class="pull-right myman_nav_feedback">
        <i class="glyphicon glyphicon-list-alt"></i>
        用户反馈
      </div>
    </div>

    <!---- 中间详细内容 ---->
    <div class="myman_content">
      <h3 class="myman_title">ConvexHull</h3>
      <small>最后更新时间: 2019年09月10日</small>
    </div>
    <div class="layout">
      <Layout>
        <Sider hide-trigger>
          <span class="title">ConvexHull</span>
        </Sider>
        <Layout>
          <Header>
            <!-- 几何体1：
            <Input placeholder="Enter point" style="width: auto" />
            <Icon type="ios-contact" slot="prefix" />
            <Button type="info" id="btn03">运行</Button> -->
            <div> 几何体1：<Button type="info" id="btn03" @click="Geometry1">绘制</Button></div>
            <div><textarea type="text" id="geomtext" rows="1" cols="80">POLYGON((12615854.963811828 2649848.008031188,12615454.963811828 2649448.008031188,12615954.963811828 2649448.008031188,12615854.963811828 2649448.008031188,12615554.963811828 2649848.008031188))</textarea></div>
            <div> 几何体2：<Button type="info" id="btn03" @click="Geometry2">绘制</Button> <Button type="info" id="" @click="convexHull">运行</Button> </div>
            <textarea type="text" id="geomtext3" rows="1" cols="80">POLYGON((12615854.963811828 2649848.008031188,12615840.963811828 2649048.008031188,12615954.963811828 2649999.008031188,12615994.963811828 2649848.008031188,12615999.963811828 2649998.008031188,12615954.963811828 2649999.008031188))</textarea>
          </Header>
          <Footer>
            <div id="map" style="width: 100%;height: 650px" @click="init()"></div>
          </Footer>
        </Layout>
      </Layout>
    </div>

  </div>
</template>
<script>
export default {
  nam: 'ConvexHull',
  data () {
    return {
      map: null,
      wktpolygon2: null,
      wktpolygon: null,
      wfvectorselectedstyle: null,
      value1: 'POLYGON((12615854.963811828 2649848.008031188,12615454.963811828 2649448.008031188,12615954.963811828 2649448.008031188,12615854.963811828 2649448.008031188,12615554.963811828 2649848.008031188))',
      value2: 'POLYGON((12615854.963811828 2649848.008031188,12615840.963811828 2649048.008031188,12615954.963811828 2649999.008031188,12615994.963811828 2649848.008031188,12615999.963811828 2649998.008031188,12615954.963811828 2649999.008031188))'

    }
  },
  mounted () {
    this.initMap()
    // console.log(OpenLayers);
  },
  methods: {
    initMap () {
      OpenLayers.Layer.OFFLINEMAP = OpenLayers.Class(OpenLayers.Layer.XYZ, {
        name: "MYMAP",
        url: "https://nqi.gmcc.net:20443/tiles/${z}/${x}/${y}.png",
        sphericalMercator: !0, //是{String} The layer attribution.
        wrapDateLine: !0, //
        tileOptions: null, //{Object} o此Layer创建的OpenLayers.Tile实例的可选配置选项。
        isBaseLayer: true,
        initialize: function (a, b, c) {
          OpenLayers.Layer.XYZ.prototype.initialize.apply(this, arguments);
          this.tileOptions = OpenLayers.Util
            .extend({ //OpenLayers.Util.extend（目标对象，原对象）：将原对象中的所有非“undefined”属性拷贝到目标对象（包括"toString"函数）
              crossOriginKeyword: "anonymous" //{Object} 此Layer创建的OpenLayers.Tile实例的可选配置选项。默认是
            },
              this.options && this.options.tileOptions)
        },
        //创建此图层的克隆
        clone: function (a) {
          null == a && (a = new OpenLayers.Layer.OFFLINEMAP(this.name, this.url, this.getOptions()));
          return a = OpenLayers.Layer.XYZ.prototype.clone.apply(this, [a])
        },
        CLASS_NAME: "OpenLayers.Layer.OFFLINEMAP"
      });

      this.map = new OpenLayers.Map({
        div: "map",
        projection: "EPSG:900913",
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        maxExtent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34],
        uints: 'm',
        center: [12615854.963811828, 2649648.008031188],
        isBaseLayer: true,
        numZoomLevels: [0,
          16], //屏幕点:[Screen]:692,304,WGS84:113.32483033753087,23.13118398658761,level:14,Web Mercator:

        resolutions: [0.0439453125, 0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125]      });
      // console.log("经纬度是："+lonlat.lon+", "+lonlat.lat);
      var configIP = "https://nqi.gmcc.net:20443/tiles/${z}/${x}/${y}.png";
      var mapoptions = {
        name: "map",
        url: configIP,
        sphericalMercator: !0,
        wrapDateLine: !0,
        tileOptions: null,
        box: true,//允许框选
        numZoomLevels: 16,
        isBaseLayer: true,
      };

      // * 集合图层,从layer中继承
      var offlinemap = new OpenLayers.Layer.OFFLINEMAP(mapoptions);
      this.map.addLayer(offlinemap);

      /**
     * jsts 例子
     **/
      //添加样式过滤器
      var wfvectorstyle = new OpenLayers.Style({
        pointRadius: 30,
        fillOpacity: 0.7,
        fillColor: "#00b3f9",
        strokeWidth: 5,
        strokeOpacity: 1,
        graphicZIndex: 1,
        strokeColor: "#D44927"   //颜色
      });
      this.wfvectorselectedstyle = new OpenLayers.Style({
        pointRadius: 30,
        fillOpacity: 0.7,
        fillColor: "green",
        strokeWidth: 5,
        strokeOpacity: 1,
        graphicZIndex: 1,
        strokeColor: "#F0D25D"
      });
      var wfslayer = new OpenLayers.Layer.Vector("testlayer",
        {
          styleMap: new OpenLayers.StyleMap({ "default": wfvectorstyle, "select": this.wfvectorselectedstyle })
        });
      this.map.addLayer(wfslayer);

    },
    toGeometryFromWkt (wkt) {
      var geometry = null;
      var wkt_reader;
      if (wkt_reader == null) {
        wkt_reader = new OpenLayers.Format.WKT(); // wkt对象
      }
      geometry = wkt_reader.read(wkt);
      var obj = new Object();
      obj.name = "name";
      obj.wkt = wkt;
      geometry.attributes = obj;
      return geometry;
    },
    addFeature (wkt, layer) {
      var geometry = this.toGeometryFromWkt(wkt);
      $.extend(geometry.attributes, { NAME: "name", WKT: wkt });   //扩展属性
      if (wkt != null) {
        layer.addFeatures(geometry);
      }
    },
    Geometry1 () {
      //创建几何体1
      var geomt3 = document.getElementById("geomtext3");
      this.wktpolygon = geomt3.value;
      var layer = this.map.getLayersBy("name", "testlayer");
      this.addFeature(this.wktpolygon, layer[0]);
    },
    Geometry2 () {
      //创建几何体2
      var geomt2 = document.getElementById("geomtext");
      this.wktpolygon2 = geomt2.value;
      var layer = this.map.getLayersBy("name", "testlayer");   //getLayer(layerId:String):Layer	根据图层ID，获取图层对象
      console.log(layer)
      this.addFeature(this.wktpolygon2, layer[0]);
    },
    convexHull () {   //提取公共的方法
      var convexHullFeature = new OpenLayers.Feature.Vector('convexHullVector', {
        styleMap: new OpenLayers.StyleMap(this.wfvectorselectedstyle)
      })
      convexHullFeature.geometry = this.commonFunction.Intersections(this.map, this.value1, this.value2, "testlayer", 'convexHull', this.wfvectorselectedstyle);
      var layer = this.map.getLayersBy('name', 'testlayer')
      layer[0].addFeatures([convexHullFeature]);
    },

  }
}

</script>
<style scoped >
#map .olControlZoom {
  /*隐藏地图左上角的+-号*/
  display: none;
}
.myman_content {
  margin-top: 20px !important;
  border-bottom: 1px solid rgb(207, 204, 204);
}
.layout {
  margin-top: 20px;
}
.ivu-layout-sider,
.ivu-layout-header,
.ivu-layout-footer {
  border: 1px solid #d2d6de;
  height: 735px;
}
.ivu-layout-footer {
  background: white;
  padding: 10px 10px;
}
.ivu-layout-sider {
  background: #f4f4f4 !important;
  height: 900px;
}
.ivu-layout-header {
  background: #f4f4f4;
  height: 300px;
}
.ivu-layout.ivu-layout-has-sider {
  height: 900px;
}
.title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  background-color: #f7eee8;
  color: #30badf;
}
.jiheti {
  display: inline-block;
}
</style>