Openlayers2 perform spatial analysis using --jsts library error

An error
title

 

When designing two feacture when they reported this error has been reported: Union, SymDifference, Intersection, function has been impossible to achieve

solution:

Drawn graphics do not intersect, jsts can not be calculated intersection position

<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-10 16:10:56
 * @LastEditTime: 2019-09-17 11:49:57
 * @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">Intersection</h3>
      <small>最后更新时间: 2019年09月10日</small>
    </div>
    <div class="layout">
      <Layout>
        <Sider hide-trigger>
          <span class="title">Intersection</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,12615554.963811828 2649848.008031188,12615854.963811828 2649848.008031188))</textarea></div>
            <div> 几何体2:<Button type="info" id="btn03" @click="Geometry2">绘制</Button> <Button type="info" id="" @click="Intersection">运行</Button> </div>
            <textarea type="text" id="geomtext3" rows="1" cols="80">POLYGON((12615854.963811828 2649448.008031188,12615400.963811828 2649958.008031188,12617194.963811828 2649448.008031188))</textarea>
          </Header>
          <!-- 12615854.96 12615884.06,12615844.26 12615874.66,12615784.06 12615834.06,12615894.16 12615984.06,12615854.96 12615884.06-->
          <Footer>
            <div id="map" style="width: 100%;height: 650px" @click="init()"></div>
          </Footer>
        </Layout>
      </Layout>
    </div>

  </div>
</template>
<script>
export default {
  nam: 'Intersection',
  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: "red"   //颜色
      });
      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]);
    },
    Intersection () {   //提取公共的方法
      // 使用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 = this.map.getLayersBy("name", "testlayer");
      var fts = layer[0].features;
      // //转成jsts geometry 对象
      var jsts_geomA = this.wktpolygon;
      var jsts_geomB = this.wktpolygon2;
      var jsts_geomA = jsts_parser.read(fts[0].geometry.clone());
      var jsts_geomB = jsts_parser.read(fts[1].geometry.clone());
      // //通过jsts空间扩展能力去算多点的外接矩形
      // A和B进行相交分析
      var intersection = jsts_geomA.intersection(jsts_geomB);

      //  //转成openlayer geometry 对象
      var transforgeometry = jsts_parser.write(intersection);
      var convexHullFeature = new OpenLayers.Feature.Vector('convexHullVector', {
        styleMap: new OpenLayers.StyleMap(this.wfvectorselectedstyle)  //设置图层样式
      });
      convexHullFeature.geometry = transforgeometry;
      layer[0].addFeatures([convexHullFeature]);
      // var difference = jsts_geomB.difference(jsts_geomA)
    },

  }
}

</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>

 

effect:

http://gis.ibbeck.de/ginfo/apps/OLExamples/OL210/JSTS_Example/jsts_example.asp

view-source:http://gis.ibbeck.de/ginfo/apps/OLExamples/OL210/JSTS_Example/jsts_example.asp

http://locationtech.github.io/jts/javadoc/

// A和B进行相交分析
   1.   var intersection = jsts_geomA.intersection(jsts_geomB);
2.// //通过jsts空间扩展能力去算多点的外接矩形
      var jsts_result_geom = jsts_geomA.convexHull(); //外接矩形
3.      var jsts_result_geom = jsts_geomA.getCentroid(); //求重心
4.      var jsts_result_geom = jsts_geomA.buffer(40); //缓冲区
5.      var jsts_result_geom = jsts_geomA.getBoundary(); //获取边界
6.      var unions = jsts_geomA.union(jsts_geomB);  // A合并B
7.     var symDifference = jsts_geomA.symDifference(jsts_geomB);//       // A、B对称异同
8.     // A异同B分析
      var difference = a.difference(b)

 

Published 98 original articles · won praise 4 · views 20000 +

Guess you like

Origin blog.csdn.net/weixin_42416812/article/details/100922286