Openlayers2根据半径画圆且实现多边形相接求叠加面积以及中心点经纬度

<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-10 16:10:56
 * @LastEditTime: 2019-10-24 10:47:30
 * @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">绘制</h3>
      <small>最后更新时间: 2019年09月10日</small>
    </div>
    <div class="layout">
      <Layout>
        <Sider hide-trigger>
          <span class="title">绘制</span>
        </Sider>
        <Layout>
          <Header>
            <div>
              <div>
                <span class="draw circle">请输入圆的半径:</span><Input v-model="value1" size="large" style="width: auto" placeholder="请输入半径" />
                <span class="draw circle"> 圆的中心点:</span><Input v-model="rad" size="large" style="width: auto" placeholder="请输入圆的中心点" />
                <Button type="info" id="cricle" @click="drawCricle($event)">画圆</Button>
              </div>
              <div>
                <span class="draw">请输入多边形wkt:</span><Input v-model="value2" size="large" style="width: auto" placeholder="请输入多边形wkt" />
                <Button type="info" id="polygon" @click="drawPolygon($event)">画多边形</Button>
                <Button type="info" id="Area" @click="Area($event)">计算叠加面积</Button>
                <Button type="info" id="clear" @click="ClearFeature($event)">清除图层</Button>
                <span class="draw circle"> 中心经纬度:</span><Input v-model="value3" size="large" style="width: auto" placeholder="返回中心经纬度" />
              </div>
            </div>
          </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 { createCircle } from './createCircle'
export default {
  nam: 'Intersection',
  data () {
    return {
      map: null,
      wktpolygon2: null,
      wktpolygon: null,
      wfvectorselectedstyle: null,
      value3: null,
      value1: 100,
      value2: 'MULTIPOLYGON (((113.33015337805  23.147351056403, 113.32656011691  23.144047023046, 113.3274584322  23.147351056403, 113.33015337805  23.147351056403)))',
      center: { x: 12615654.963811828, y: 2649648.008031188 },
      // rad: "12615554.963811828, 2649848.008031188"
      rad: "113.3274584322,23.147351056403"
    }
  },
  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: new OpenLayers.Projection("EPSG:4326"),
        displayProjection: new OpenLayers.Projection("EPSG:900913"),
        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: "#2e6e21",
            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.7,
            fillColor: "#9440ff",
            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);



      //画圆
      this.drawLayer = new OpenLayers.Layer.Vector("drawLayer", {
        styleMap: new OpenLayers.StyleMap()
      });
      this.showLayer = new OpenLayers.Layer.Vector("showLayer", {
        styleMap: new OpenLayers.StyleMap({          'default': {
            strokeColor: "#1a81ff",
            strokeOpacity: 1,
            strokeWidth: 1,
            fillColor: "#eb4d3d",
            fillOpacity: 0.1
          }        })
      });
      this.map.addLayers([this.drawLayer, this.showLayer]);
      this.drawCtrl = new OpenLayers.Control.DrawFeature(this.drawLayer, OpenLayers.Handler.Point);
      this.map.addControl(this.drawCtrl);
      // this.map.on({ "featureadded": this.Mapmousemove });//监听featureadded事件

      // // var point = {
      // //   x: 12615854.963811828,
      // //   y: 2649848.008031188
      // // }
      // // var polygon = OpenLayers.Geometry.Polygon.createRegularPolygon(point, 15, 37).toString();
      // // geometry = wkt_reader.read(polygon);

      this.drawCtrl.featureAdded = onEndDraw;
      function onEndDraw (feature) {
        this.drawCtrl.deactivate();
        // this.drawLayer.setVisibility(true);
        var start = feature.geometry;
        // this.drawLayer.addFeatures(start);
        var circle, moveEvt;
        this.map.events.register("mousemove", map, function (e) {
          moveEvt = e;
          // this.drawLayer.removeAllFeatures();
          var pt = this.map.getLonLatFromPixel(new OpenLayers.Pixel(e.x, e.y));
          // console.log(pt);
          // var pt = this.map.getLonLatFromPixel(new OpenLayers.Pixel(e.x, e.y));
          var end = new OpenLayers.Geometry.Point(pt.lon, pt.lat);
          var line = new OpenLayers.Geometry.LineString([start, end]);
          var radius = line.getLength();
          var geometry = createCircle(start, radius, 100, 0);
          var feature = new OpenLayers.Feature.Vector(geometry);
          circle = feature;
          // this.drawLayer.addFeatures(feature);
        });
        console.log(feature)
        this.map.events.register("click", map, function (e) {
          this.showLayer.removeAllFeatures();
          this.showLayer.addFeatures(circle);
          this.drawLayer.setVisibility(false);
        });
      }


    },
    // addCircle: function (lon, lat, radius, _id) {
    //   var point = new OpenLayers.Geometry.Point(lon, lat);
    //   var circle = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Polygon.createRegularPolygon(point, radius / 100000, 40, 0));
    //   circle.id = "circle_" + _id;
    //   this.vectors.addFeatures([circle], { silent: true });
    // },

    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, i) {
      // debugger;
      var geometry = this.toGeometryFromWkt(wkt);
      $.extend(geometry.attributes, { NAME: "name", WKT: wkt, "COLOR": i });   //扩展属性
      if (geometry.attributes.COLOR === 2) {
        geometry.geometry.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
        if (wkt != null) {
          layer.addFeatures(geometry);
        }
      } else {
        if (wkt != null) {
          layer.addFeatures(geometry);
        }
      }
      console.log(geometry);
    },
    drawCricle (e) {
      // isNaN(this.rad.indexOf(',')) == true
      if (this.rad.indexOf(',')) {
        console.log(this.rad.indexOf(','));
        // alert('输入的不是数字哦');
        var params = this.rad.split(",");
      }
      var center = new OpenLayers.Geometry.Point(params[0], params[1]);
      // var radius = 200;
      center.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
      var circle = new OpenLayers.Geometry.Polygon.createRegularPolygon(center, this.value1, 45);
      var addCircle = new OpenLayers.Feature.Vector(circle);
      // addCircle.geometry.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
      var feature = addCircle.geometry.toString()
      this.addFeature(feature, this.layer, 1)
    },
    drawPolygon (e) {
      //创建几何体2
      this.wktpolygon2 = this.value2;
      this.addFeature(this.wktpolygon2, this.layer, 2);
    },
    Area (e) {
      var convexHullFeature = new OpenLayers.Feature.Vector('convexHullVector')
      convexHullFeature.geometry = this.commonFunction.Intersections(this.map, this.CircleFeature, this.polygon, "testlayer", 'intersection');
      var feature = convexHullFeature.geometry.toString()
      this.addFeature(feature, this.layer, 3)
      alert("相交面积:" + convexHullFeature.geometry.getArea() + "平方米")
      // var centerLonlat = convexHullFeature.geometry.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
      var lonlat = convexHullFeature.geometry.getCentroid();
      lonlat.transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
      console.log("中心经纬度" + lonlat);
      this.value3 = lonlat;
    },
    ClearFeature (e) {
      this.layer.removeAllFeatures();
      this.value3 = "";
    }
  }
}

</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: 160px;
}
.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;
}

.draw {
  font-size: 19px;
  font-family: cursive;
  padding-right: 14px;
}
.circle {
  padding-right: 24px;
}
</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

}

效果图如下：