如何使用单张地图以角度将90度弧线放置在5公里半径的圆内，以及如何更改圆的颜色

分类：编程问答

如何解决如何使用单张地图以角度将90度弧线放置在5公里半径的圆内，以及如何更改圆的颜色

在我的angualr项目中，我用传单创建了地图，并创建了5km半径的圆，其坐标来自后端。


 "drone1": {
        "Drone": {
            "Droneid": 1001,"latlong": [
                {
                    "lat": 12.979377,"lon": 80.195147
                },{
                    "lat": 12.957052,"lon": 80.241433
                },{
                    "lat": 12.95379,"lon": 80.230627
                },{
                    "lat": 12.956634,"lon": 80.18737
                },{
                    "lat": 12.952619,"lon": 80.17072
                },{
                    "lat": 12.950946,"lon": 80.150122
                },{
                    "lat": 12.949356,"lon": 80.134757
                }
            ]
        }

从上述对象中，我创建了一个半径为5 km的圆，索引号为0，索引号为1的无人机图标，索引号为2的点。

如果无人机进入5公里以内，它必须从第二个索引位置移动到另一个地方，圆圈必须变成红色，否则变成蓝色。

我已经完成了上述对象的移动无人机和颜色更改，但是现在我的要求是我还有另一个JSON对象（drone2），如下所示：

 "drone2": {
        "Drone": {
            "Droneid": 1002,{
                    "lat": 13.021618,"lon": 80.140019
                },{
                    "lat": 13.000376,"lon": 80.164602
                },{
                    "lat": 12.991009,"lon": 80.174901
                },{
                    "lat": 12.980304,"lon": 80.184514
                },{
                    "lat": 12.965416,"lon": 80.20838
                },{
                    "lat": 12.936976,"lon": 80.24117
                }
            ]
        }
    }
}

因此，对于该对象，我还必须创建半径为5 km的圆，并从索引中移出与上面相同的功能。

但是当我尝试使用圆形颜色时，只有一架无人机改变了颜色，而另一种则没有改变。

.component.ts 

var latlngs = this.drones.drone1.Drone.latlong;
var latlngs02 = this.drones.drone2.Drone.latlong;
var START_IDX = 2;
var latlngIdx = START_IDX; // 0 = Circle,1 = First position
var marker;
var circlemark;
var circle;
latlngs.forEach((latlong,idx)=>{
    var latlng = L.latLng(latlong.lat,latlong.lon)
    
    if(idx === 0){
      var jammer = {"name":"Jammer 1","lat":latlong.lat,"lon":latlong.lon,"isCollapsed":false};
      var sensor = {"name":"Sensor 1","lon":latlong.lon};
      circlemark = L.circle(latlng,{radius:5000}).addTo(map);
     marker = L.marker(latlng,{icon:sensoricon}).addTo(map);
      marker = L.marker(latlng,{icon:jammericon}).addTo(map);
 
    }else if(idx===1){
      marker = L.marker(latlng,{icon:myIcon}).addTo(map);
    }else if(idx>=2){
      var circleMarker = L.circle(latlng,{color: 'red'},{radius:100}).addTo(map)
    }
});
var Quadrant1 = createQuadrant(circlemark,0).addTo(map);
var Quadrant2 = createQuadrant(circlemark,90).addTo(map);
var Quadrant3 = createQuadrant(circlemark,180).addTo(map);
var Quadrant4 = createQuadrant(circlemark,270).addTo(map);


function nextLatLng(){
    if(marker){
        if(latlngIdx === latlngs.length){ 
            latlngIdx = START_IDX;
            
        }
        marker.setLatLng(latlngs[latlngIdx]);
        inQuadrant(Quadrant1,marker);
        inQuadrant(Quadrant2,marker);
        inQuadrant(Quadrant3,marker);
        inQuadrant(Quadrant4,marker);
        
        latlngIdx++;
        
        setTimeout(nextLatLng,TIME); 
    }
}
nextLatLng();

function getDistanceFromLatLonInKm(lat1,lon1,lat2,lon2) {
  var R = 6371; // Radius of the earth in km
  var dLat = deg2rad(lat2-lat1);  // deg2rad below
  var dLon = deg2rad(lon2-lon1); 
  var a = 
    Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * 
    Math.sin(dLon/2) * Math.sin(dLon/2)
    ; 
  var c = 2 * Math.atan2(Math.sqrt(a),Math.sqrt(1-a)); 
  var d = R * c; // Distance in km
  
  return d;
}

function deg2rad(deg) {
  return deg * (Math.PI/180)
}

function createQuadrant(circle,degree){
    var degree
    var p1 = L.GeometryUtil.destination(circle.getLatLng(),degree,circle.getRadius());
  var p2 = L.GeometryUtil.destination(circle.getLatLng(),degree+22.5,circle.getRadius());
  var p3 = L.GeometryUtil.destination(circle.getLatLng(),degree+45,circle.getRadius());
  var p4 = L.GeometryUtil.destination(circle.getLatLng(),degree+67.5,circle.getRadius());
  var p5 = L.GeometryUtil.destination(circle.getLatLng(),degree+90,circle.getRadius());
  return L.polygon([circle.getLatLng(),p1,p2,p3,p4,p5]);
}

function isMarkerInsidePolygon(marker,poly) {
  var inside = false;
  var x = marker.getLatLng().lat,y = marker.getLatLng().lng;
  for (var ii=0;ii<poly.getLatLngs().length;ii++){
      var polyPoints = poly.getLatLngs()[ii];
      for (var i = 0,j = polyPoints.length - 1; i < polyPoints.length; j = i++) {
          var xi = polyPoints[i].lat,yi = polyPoints[i].lng;
          var xj = polyPoints[j].lat,yj = polyPoints[j].lng;

          var intersect = ((yi > y) != (yj > y))
              && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
          if (intersect) inside = !inside;
      }
  }

  return inside;
};
function inQuadrant(quadrant,marker){
    var inPolygon = isMarkerInsidePolygon(marker,quadrant);
  if(inPolygon){
    quadrant.setStyle({color: 'red'});
  }else{
    quadrant.setStyle({color: '#3388ff'});
  }
}

我要将两架无人机放置在地图上，并从索引2移动（对于索引0放置了圆圈，索引1放置了无人机图标的圆圈），如果有任何无人机进入内部，则必须更改颜色变成红色，否则变成蓝色。

有人可以帮我吗？

解决方法

您遇到了问题，某些变量被多次使用。

我为您创建了一个类，现在您可以使用drone1 = new L.Drone(map,latlngs)

轻松创建新的无人机了 

  var map = L.map('map').setView([12.979377,80.195147],12);

  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',{
    maxZoom: 180,attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors,' +
      '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,' +
      'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',id: 'mapbox.streets'
  }).addTo(map);
  
  

  var D1 = {
    "drone1":{
      "Drone":{
            "Droneid":
              1001,"latlong":
              [
                {
                  "lat": 12.979377,"lon": 80.195147
                },{
                  "lat": 12.957052,"lon": 80.241433
                },{
                  "lat": 12.95379,"lon": 80.230627
                },{
                  "lat": 12.956634,"lon": 80.18737
                },{
                  "lat": 12.952619,"lon": 80.17072
                },{
                  "lat": 12.950946,"lon": 80.150122
                },{
                  "lat": 12.949356,"lon": 80.134757
                }
              ]
          }
      }
  };
  var D2 = {
    "drone2": {
      "Drone": {
        "Droneid": 1002,"latlong": [
          {
            "lat": 12.979877,"lon": 80.195147
          },{
            "lat": 13.021618,"lon": 80.140019
          },{
            "lat": 13.000376,"lon": 80.164602
          },{
            "lat": 12.991009,"lon": 80.174901
          },{
            "lat": 12.980304,"lon": 80.184514
          },{
            "lat": 12.965416,"lon": 80.20838
          },{
            "lat": 12.936976,"lon": 80.24117
          }
        ]
      }
    }
  }

  var latlngs = D1.drone1.Drone.latlong;
  var latlngs02 = D2.drone2.Drone.latlong;


  L.Drone = L.Class.extend({
    START_IDX: 2,latlngIdx: this.START_IDX,// 0 : Circle,1 : First position
    marker: null,circle: null,TIME: 500,latlngs: null,droneMarker: null,timeout: null,initialize(map,data) {
      this.map = map;
      this.addDroneData(data);
      this.showDroneData();
      this.startDroneMoving();
    },addDroneData(data) {
      this.latlngs = data;
    },showDroneData() {
      this.latlngs.forEach((latlong,idx) => {
        var latlng = L.latLng(latlong.lat,latlong.lon);

        if (idx === 0) {
          var jammer = {"name": "Jammer 1","lat": latlong.lat,"lon": latlong.lon,"isCollapsed": false};
          var sensor = {"name": "Sensor 1","lon": latlong.lon};
          this.circle = L.circle(latlng,{radius: 5000}).addTo(map);
          L.marker(latlng).addTo(map);
          L.marker(latlng).addTo(map);
        } else if (idx === 1) {
          this.droneMarker = L.marker(latlng).addTo(map);
          L.circle(latlng,{color: 'red'},{radius: 100}).addTo(map)
        } else if (idx >= 2) {
          L.circle(latlng,{radius: 100}).addTo(map)
        }
      });
      this.Quadrant1 = this.createQuadrant(this.circle,0).addTo(map);
      this.Quadrant2 = this.createQuadrant(this.circle,90).addTo(map);
      this.Quadrant3 = this.createQuadrant(this.circle,180).addTo(map);
      this.Quadrant4 = this.createQuadrant(this.circle,270).addTo(map);


    },startDroneMoving(){
      this.nextLatLng();
    },stopDroneMoving(){
      clearTimeout(this.timeout);
    },createQuadrant(circle,degree) {
      var p1 = L.GeometryUtil.destination(circle.getLatLng(),degree,circle.getRadius());
      var p2 = L.GeometryUtil.destination(circle.getLatLng(),degree + 22.5,circle.getRadius());
      var p3 = L.GeometryUtil.destination(circle.getLatLng(),degree + 45,circle.getRadius());
      var p4 = L.GeometryUtil.destination(circle.getLatLng(),degree + 67.5,circle.getRadius());
      var p5 = L.GeometryUtil.destination(circle.getLatLng(),degree + 90,circle.getRadius());
      return L.polygon([circle.getLatLng(),p1,p2,p3,p4,p5]);
    },nextLatLng() {
      if (this.droneMarker) {
        if (!this.latlngIdx || this.latlngIdx === this.latlngs.length) {
          this.latlngIdx = this.START_IDX;

        }
        this.droneMarker.setLatLng(this.latlngs[this.latlngIdx]);
        this.inQuadrant(this.Quadrant1); //this.droneMarker
        this.inQuadrant(this.Quadrant2);
        this.inQuadrant(this.Quadrant3);
        this.inQuadrant(this.Quadrant4);

        this.latlngIdx++;

        this.timeout = setTimeout(()=>{this.nextLatLng()},this.TIME);
      }
    },isMarkerInsidePolygon(marker,poly) {
      var inside = false;
      var x = marker.getLatLng().lat,y = marker.getLatLng().lng;
      for (var ii = 0; ii < poly.getLatLngs().length; ii++) {
        var polyPoints = poly.getLatLngs()[ii];
        for (var i = 0,j = polyPoints.length - 1; i < polyPoints.length; j = i++) {
          var xi = polyPoints[i].lat,yi = polyPoints[i].lng;
          var xj = polyPoints[j].lat,yj = polyPoints[j].lng;

          var intersect = ((yi > y) != (yj > y))
            && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
          if (intersect) inside = !inside;
        }
      }

      return inside;
    },inQuadrant(quadrant) {
  var inPolygon = this.isMarkerInsidePolygon(this.droneMarker,quadrant);
  if (inPolygon) {
    quadrant.setStyle({color: 'red'});
    quadrant.addTo(this.map);
  } else {
    quadrant.removeFrom(this.map);
    quadrant.setStyle({color: '#3388ff'});
  }
}
  });
  
  
  
  
  
  
  
  
var drone1 = new L.Drone(map,latlngs);
var drone2 = new L.Drone(map,latlngs02);
  
  
#map {
       width: 600px;
       height: 400px;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-geometryutil@0.9.3/src/leaflet.geometryutil.min.js"></script>
<div id='map'>

我还添加了功能drone1.startDroneMoving()和drone1.stopDroneMoving()

更新

仅显示红色象限：


    inQuadrant(quadrant) {
      var inPolygon = this.isMarkerInsidePolygon(this.droneMarker,quadrant);
      if (inPolygon) {
        quadrant.setStyle({color: 'red'});
        quadrant.addTo(this.map);
      } else {
        quadrant.removeFrom(this.map);
        quadrant.setStyle({color: '#3388ff'});
      }
    }

示例：https://jsfiddle.net/falkedesign/fu39n1so/

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
VM VirtualBox中安装centos时报错：设置基础软件仓库时出错
参考1 参考2 解决方案 # 点击安装源 协议选择 http:// 路径填写 mirrors.aliyun.com/centos/8.3.2011/BaseOS/x86_64/os URL类型 软件库URL 其他路径 # 版本 7 mirrors.aliyun.com/centos/7/os/x86
kafka常见问题
报错1 [root@slave1 data_mocker]# kafka-console-consumer.sh --bootstrap-server slave1:9092 --topic topic_db [2023-12-19 18:31:12,770] WARN [Consumer clie
hive常见问题
错误1 # 重写数据 hive (edu)&gt; insert overwrite table dwd_trade_cart_add_inc &gt; select data.id, &gt; data.user_id, &gt; data.course_id, &gt; date_format(
装载数据时报错：Failed to execute spark task, with exception 'org.apache.hadoop.hive.ql.metadata.HiveException(Failed to create spark client.)'
错误1 hive (edu)&gt; insert into huanhuan values(1,&#39;haoge&#39;); Query ID = root_20240110071417_fe1517ad-3607-41f4-bdcf-d00b98ac443e Total jobs = 1
flume常见问题
报错1：执行到如下就不执行了，没有显示Successfully registered new MBean. [root@slave1 bin]# /usr/local/software/flume-1.9.0/bin/flume-ng agent -n a1 -c /usr/local/softwa
hadoop集群常见错误
虚拟及没有启动任何服务器查看jps会显示jps，如果没有显示任何东西 [root@slave2 ~]# jps 9647 Jps 解决方案 # 进入/tmp查看 [root@slave1 dfs]# cd /tmp [root@slave1 tmp]# ll 总用量 48 drwxr-xr-x. 2
hive常见错误
报错1 hive&gt; show databases; OK Failed with exception java.io.IOException:java.lang.RuntimeException: Error in configuring object Time taken: 0.474 se
Linux常见错误
报错1 [root@localhost ~]# vim -bash: vim: 未找到命令 安装vim yum -y install vim* # 查看是否安装成功 [root@hadoop01 hadoop]# rpm -qa |grep vim vim-X11-7.4.629-8.el7_9.x
使用sqoop一直卡在：mapreduce.Job: Running job: job_1703173956074_0001
修改hadoop配置 vi /usr/local/software/hadoop-2.9.2/etc/hadoop/yarn-site.xml # 添加如下 &lt;configuration&gt; &lt;property&gt; &lt;name&gt;yarn.nodemanager.res
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot