Openlayers2实现相交面在vue中提取公共方法（一）

<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-10 16:10:56
 * @LastEditTime: 2019-10-22 15:12:10
 * @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" v-model="value1"></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" v-model="value2"></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>
import { Intersections, read } from './mapconfig'
export default {
  nam: 'Intersection',
  data () {
    return {
      map: null,
      wktpolygon2: null,
      wktpolygon: null,
      wfvectorselectedstyle: null,
      value1: 'POLYGON((12615854.963811828 2649848.008031188,12615454.963811828 2649448.008031188,12615554.963811828 2649848.008031188,12615854.963811828 2649848.008031188))',
      value2: 'POLYGON((12615854.963811828 2649448.008031188,12615400.963811828 2649958.008031188,12617194.963811828 2649448.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 polystyle = null;
      initStyle();
      function initStyle () {
        polystyle = new OpenLayers.Style(
          {
            pointRadius: 3.5,
            fillOpacity: 0.7,
            fillColor: "black",
            strokeWidth: 1,
            strokeOpacity: 1,
            graphicZIndex: 1
          });
        var rules = [];
        rules.push(new OpenLayers.Rule({
          filter: new OpenLayers.Filter.Comparison({
            type: OpenLayers.Filter.Comparison.EQUAL_TO,
            property: "COLOR",
            value: 1
          }),
          symbolizer: {
            fillOpacity: 0.5,
            fillColor: "blue",
            strokeWidth: 0.5,
            strokeOpacity: 0.5,
            strokeColor: "white"
          }
        }));
        rules.push(new OpenLayers.Rule({
          filter: new OpenLayers.Filter.Comparison({
            type: OpenLayers.Filter.Comparison.EQUAL_TO,
            property: "COLOR",
            value: 2
          }),
          symbolizer: {
            fillOpacity: 0.5,
            fillColor: "yellow",
            strokeWidth: 0.5,
            strokeOpacity: 0.5,
            strokeColor: "white"
          }
        }))
        rules.push(new OpenLayers.Rule({
          filter: new OpenLayers.Filter.Comparison({
            type: OpenLayers.Filter.Comparison.EQUAL_TO,
            property: "COLOR",
            value: 3
          }),
          symbolizer: {
            fillOpacity: 0.5,
            fillColor: "red",
            strokeWidth: 0.5,
            strokeOpacity: 0.5,
            strokeColor: "white"
          }
        }))
        polystyle.rules = rules;
      }

      var wfslayer = new OpenLayers.Layer.Vector("testlayer",
        {
          styleMap: new OpenLayers.StyleMap({ "default": polystyle })
        });
      this.layer = wfslayer;
      this.map.addLayer(wfslayer);


      // var feature = wfslayer.features[0];
      // var geometry = feature.geometry.clone();
      // geometry.transform(layerProj, targetProj);

    },
    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;

      // var geometry = geometry.geometry.clone();
      // // var geometry = feature2
      // geometry.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
      // console.log(geometry)

      return geometry;
    },
    addFeature (wkt, layer, i) {
      // debugger;
      var geometry = this.toGeometryFromWkt(wkt);
      $.extend(geometry.attributes, { NAME: "name", WKT: wkt, "COLOR": i });   //扩展属性
      console.log(geometry);
      // geometry.geometry.transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
      if (wkt != null) {
        layer.addFeatures(geometry);
      }

      // var feature = layer.features[0];
      // var geometry = feature.geometry.clone();
      // geometry.transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
      // // console.log(geometry)
    },
    Geometry1 (layer) {
      //创建几何体1
      // var geomt3 = document.getElementById("geomtext3");
      this.wktpolygon = this.value1;
      this.addFeature(this.wktpolygon, this.layer, 1);
    },
    Geometry2 (layer) {

      //创建几何体2
      // var geomt2 = document.getElementById("geomtext");
      this.wktpolygon2 = this.value2;
      this.addFeature(this.wktpolygon2, this.layer, 2);
    },
    Intersection (par1) {   //提取公共的方法
      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", 'intersection', this.wfvectorselectedstyle);
      var feature = convexHullFeature.geometry.toString()
      console.log("面积:" + convexHullFeature.geometry.getArea() + "平方米")

      this.addFeature(feature, this.layer, 3)

      // var feature = feature.features[0];
      // var geometry = feature.geometry.clone();

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

mapconfig.js:

/* eslint-disable no-unused-vars */
/* eslint-disable camelcase */
/* eslint-disable no-redeclare */

let Intersections = (map, jsts_geomA, jsts_geomB, par1, buffer) => { // 提取公共的方法
  // JSTS OpenLayersParser reads OpenLayers geometry to JSTS geometry / writes JSTS geometry to OpenLayers geometry
  // eslint-disable-next-line no-unused-vars
  // eslint-disable-next-line no-undef
  var jsts_reader = new jsts.io.WKTReader()
  // eslint-disable-next-line camelcase
  // eslint-disable-next-line no-undef
  var jsts_parser = new jsts.io.OpenLayersParser()
  /// /WKT转Geometry，points是一个点数组，如果为点，其长度为1，如果为线和面，长度大于1
  var layer = map.getLayersBy('name', par1)
  // 生成features
  var fts = layer[0].features
  var jsts_result_geom = null
  for (var i = 0; i < fts.length; i++) {
    if (i === 0) {
      var jsts_geomA = jsts_parser.read(fts[0].geometry.clone())
      if (buffer === 'buffer') {
        // eslint-disable-next-line camelcase
        jsts_result_geom = jsts_geomA.buffer(40) // 缓冲区
      } else if (buffer === 'getBoundary') {
        // eslint-disable-next-line camelcase
        jsts_result_geom = jsts_geomA.getBoundary()
      } else if (buffer === 'getCentroid') {
        // eslint-disable-next-line camelcase
        jsts_result_geom = jsts_geomA.getCentroid()
      } else if (buffer === 'convexHull') {
        // eslint-disable-next-line camelcase
        jsts_result_geom = jsts_geomA.convexHull()
      }
    } else if (i > 0) {
      var jsts_geomB = jsts_parser.read(fts[i].geometry.clone())
      // var jsts_geomA = jsts_parser.read(fts[0].geometry.clone())
      // var jsts_geomB = jsts_reader.read(fts[1].geometry.clone())
      if (buffer === 'union') {
        // eslint-disable-next-line camelcase
        jsts_result_geom = jsts_geomA.union(jsts_geomB)
      } else if (buffer === 'intersection') {
        // eslint-disable-next-line camelcase
        jsts_result_geom = jsts_geomA.intersection(jsts_geomB)
      } else if (buffer === 'symDifference') {
        // eslint-disable-next-line camelcase
        jsts_result_geom = jsts_geomA.symDifference(jsts_geomB)
        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
}
// eslint-disable-next-line camelcase
let read = (wktpolygon, jsts_parser, fts) => {
  // eslint-disable-next-line no-redeclare
  var wktpolygon = jsts_parser.read(fts[0].geometry.clone())
  return wktpolygon
  // var jsts_geomB = jsts_parser.read(fts[1].geometry.clone())
}

export default {
  Intersections,
  read

}