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'
import { initMap, CreatMap, addFeature, JstsUtils } from './mapCommon.js'

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 () {
    self = this;
    initMap();
    CreatMap(self);
  },
  methods: {
    Geometry1 (layer) {
      //创建几何体1
      // var geomt3 = document.getElementById("geomtext3");
      this.wktpolygon = this.value1;
      addFeature(this.wktpolygon, self.map.layers, 1);
    },
    Geometry2 (layer) {

      //创建几何体2
      // var geomt2 = document.getElementById("geomtext");
      this.wktpolygon2 = this.value2;
      addFeature(this.wktpolygon2, self.map.layers, 2);
    },
    Intersection (par1) {   //提取公共的方法
      var convexHullFeature = new OpenLayers.Feature.Vector('convexHullVector')
      convexHullFeature.geometry = JstsUtils({ name: "intersection", firstwkt: this.value1, secondwkt: this.value2 });
      // 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() + "平方米")
      addFeature(feature, self.map.layers, 3)
    }

  }
}

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

mapCommon.js：

/* eslint-disable no-throw-literal */
/* eslint-disable camelcase */
/* eslint-disable no-undef */
let initMap = (name, url) => {
  // debugger
  OpenLayers.Layer.OFFLINEMAP = OpenLayers.Class(OpenLayers.Layer.XYZ, {
    name: 'MYMAP',
    // eslint-disable-next-line no-template-curly-in-string
    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) {
      a == null && (a = new OpenLayers.Layer.OFFLINEMAP(this.name, this.url, this.getOptions()))
      // eslint-disable-next-line no-return-assign
      return a = OpenLayers.Layer.XYZ.prototype.clone.apply(this, [a])
    },
    CLASS_NAME: 'OpenLayers.Layer.OFFLINEMAP'
  })
}
let CreatMap = (_this) => {
  // var _this = this
  console.log('223')
  console.log(_this)
  // debugger
  // console.log(_this.map)
  console.log('22oooo3')
  // debugger
  _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);
  // eslint-disable-next-line no-template-curly-in-string
  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: 10,
        strokeOpacity: 0.5,
        strokeColor: 'pink'
      }
    }))
    polystyle.rules = rules
  }
  // 添加样式过滤器
  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: 10,
    fillOpacity: 0.1,
    fillColor: 'green',
    strokeWidth: 5,
    strokeOpacity: 1,
    graphicZIndex: 1,
    strokeColor: '#F0D25D'
  })
  var wfslayer = new OpenLayers.Layer.Vector('testlayer', {
    styleMap: new OpenLayers.StyleMap({
      'default': polystyle,
      'select': this.wfvectorselectedstyle
    })
  })
  this.layer = wfslayer
  _this.map.addLayer(wfslayer)
}
let toGeometryFromWkt = (wkt) => {
  var geometry = null
  var wkt_reader
  if (wkt_reader == null) {
    wkt_reader = new OpenLayers.Format.WKT() // wkt对象
  }
  geometry = wkt_reader.read(wkt)
  // eslint-disable-next-line no-new-object
  var obj = new Object()
  obj.name = 'name'
  obj.wkt = wkt
  geometry.attributes = obj
  return geometry
}
let addFeature = (wkt, layer, i) => {
  // debugger;
  var geometry = toGeometryFromWkt(wkt)
  $.extend(geometry.attributes, {
    NAME: 'name',
    WKT: wkt,
    'COLOR': i
  }) // 扩展属性
  console.log(geometry)
  if (wkt != null) {
    this.layer.addFeatures(geometry)
  }
}

let JstsUtils = (param) => {
  var firstgeom = null
  var secondgeom = null
  var jsts_firstgeom = null
  var jsts_secondgeom = null
  var jsts_result_geom = null
  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()
  if (param.firstwkt) {
    firstgeom = toGeometryFromWkt(param.firstwkt)
    jsts_firstgeom = jsts_parser.read(firstgeom.geometry.clone())
  }
  if (param.secondwkt) {
    secondgeom = toGeometryFromWkt(param.secondwkt)
    jsts_secondgeom = jsts_parser.read(secondgeom.geometry.clone())
  }
  // 空间分析功能
  switch (param.name) {
    case 'buffer':
      // 缓冲区
      jsts_result_geom = jsts_firstgeom.buffer(parseFloat(param.radius == null ? 0.0 : param.radius))
      break
    case 'union':
      jsts_result_geom = jsts_firstgeom.union(jsts_secondgeom)
      break
    case 'intersection':
      jsts_result_geom = jsts_firstgeom.intersection(jsts_secondgeom)
      break
    case 'symDifference':
      jsts_result_geom = jsts_firstgeom.symDifference(jsts_secondgeom)
      break
    case 'getBoundary':
      jsts_result_geom = jsts_firstgeom.getBoundary()
      break
    case 'getCentroid':
      jsts_result_geom = jsts_firstgeom.getCentroid()
      break
    case 'convexHull':
      jsts_result_geom = jsts_firstgeom.convexHull()
      break
    default:
      throw 'data format error!'
  }
  //  //转成openlayer geometry 对象
  return jsts_parser.write(jsts_result_geom)
}

export {
  initMap,
  CreatMap,
  toGeometryFromWkt,
  addFeature,
  JstsUtils
}
export default {}