地图已知一个坐标和一个半径生成随机多边形_Eirice的博客

背景
这个方案背景其实就是上篇中那次快速响应的一个额外需求，客户需要一个面来表示一个特定的区域，但客户只能提供一个点，且要求生成的图形不能是很规则的圆，长方形或者正方形

需求分析：已知一个点center,一个半径R。我们首先能想到的就是一个圆。以当前圆的圆心为基点我们可以将该圆切割成4个象限。那么是否我们可以使用随机的角度去去这个四个象限内的随机坐标呢？
初次实验，结果是成立的满足可以四边形需求。但仍不满足我们多边不含（四边）的需求。如果想做我们需要一个合理的算法支撑。时间是不允许我这样考虑的
换个思路：外部支撑吧！首先想到的就是Turf.js作为一个空间分析处理的库，理论上它是满足的。
果然发现了一个类circle

有了转译的算法工具那么剩下的就是数据处理了
1.获取数据源

  /**
       * @Description: 获取数据

       * @Author: ShiWei

       * @Date: 2020-09-14
       */
      getQsCenter(){
        let code=[]
        qs.data.map((item)=>{
           code.push([item.longitude,item.latitude])
        })
        this.getMorePoint(code)
      },

2.处理脏数据（数据中会有重复的点位）

   /**
       * @Description: 去除数据中重复点位信息

       * @Author: ShiWei

       * @Date: 2020-09-14
       */
      getMorePoint(code){
        for(var i=0; i<code.length; i++){
          for(var j=i+1; j<code.length; j++){
            if(code[i][0]===code[j][0]){         //第一个等同于第二个，splice方法删除第二个
              code.splice(j,1);
              j--;
            }
          }
        }
        //todo 调用随机面方法
        this.getAnyPoint(code)
      },

3.生成随机边

   /**
       * @Description:生成一个范围值内的随机数

       * @Author: ShiWei

       * @Date: 2020-09-14
       */
     randomNum(minNum,maxNum){
      switch(arguments.length){
    case 1:
      return parseInt(Math.random()*minNum+1,10);
      break;
    case 2:
      return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
      break;
    default:
      return 0;
      break;
  }
  },

4.生成随机多边形面

      /**
       * @Description:随机面图

       * @Author: ShiWei

       * @Date: 2020-09-14
       */
      getAnyPoint(codes){
       let code=codes;
       let polygon=[];
       for(let i=0;i<code.length;i++){
         let tep=this.randomNum(5,9);  //边数
         var center = code[i];  //中心点
         var radius = 5;        //地理半径
         var options = {steps: tep, units: 'kilometers', properties: {foo: 'bar'}}; //实体
         var circle = turf.circle(center, radius, options);
         polygon.push(circle);
       }
       //添加实体标识对象用来渲染颜色
        polygon.map((ik,index)=>{
          ik.properties.value=index+1;
        })
        let source = this.mapController.makeFeatureCollection(polygon);
        this.mapController.addSource(this.map, "ls-source", source);
        this.drwWinCenter('ls-center','ls-source',this.map);
      },

5.绘制多边形面

     /**
       * @Description:多边形面
        stops 色值识别区域
       * @Author: ShiWei

       * @Date: 2020-09-08
       */
      drwWinCenter(id,source,map){
        if (map.getLayer(id)) {
          map.removeLayer(id)
        }
        //区域面图层
        map.addLayer({
            "id": id,
            "type": "fill",
            "source": source,
            "layout": {
              "visibility": "visible",
            },
            "paint": {
              "fill-color":{
                "type": "interval",
                "property": "value",
                "stops": [
                  [0, "#2D91EA"],
                  [1, "#49DA5D"],
                  [5, "#EB7F0B"],
                  [7, "#EEBD3A"],
                  [10, "#F22A2A"],
                ]
              },
              "fill-opacity": 0.2,
              "fill-outline-color":{
                "type": "interval",
                "property": "value",
                "stops": [
                  [0, "#000"],
                  [1, "#49DA5D"],
                  [5, "#EB7F0B"],
                  [7, "#EEBD3A"],
                  [10, "#F22A2A"],
                ]
              }
            }
        })
      },

//效果预览

本文转自 https://blog.csdn.net/qq_40696108/article/details/108638026，如有侵权，请联系删除。