cesium如何判断实体点线面是否在多边形中

在学习cesium中,有这么一个需求,就是手动圈中一个面【多边形】,然后在地图上标注一些标实体,并判断这些实体哪些在面内加以区分。

  • 利用Turf.js库里面的booleanPointInPolygon API方法 ,取一个点和手动圈中多边形或多边形集合,并判断该点是否位于该多边形内部(多边形可以是凸多边形或凹多边形),在内部是point的color变为红色加以区分       booleanPointInPolygon | Turf.js中文网 (fenxianglu.cn)
  • 线和面是一样的道理,获取里面的positions位置与多边形进行判断,包含就让material变为红色加以区分。
    import * as Cesium from 'cesium';
    import { useEffect } from 'react';
    import Header from '../../components/Header/index'
    import { Button } from 'antd';
    import doesItIncludeEntities from '../../utils/measure'
    function App() {
      const style = {
        width: "100%",
        height: "100vh",
      }
      let viewer: Cesium.Viewer;
      let does: doesItIncludeEntities;
      useEffect(() => {
        Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ZDJiYWZjNy01YWIzLTQ5MDQtOWRjMC1lNzRjMzZlNDkxZjgiLCJpZCI6MTYzNzI4LCJpYXQiOjE2OTM0NzM4NTZ9.TZLI1V4-2pYZoVSbt-zOkV7Yx7elhjAsqfFt5h4Nrlk";
        viewer = new Cesium.Viewer('cesiumContainer', {
          shouldAnimate: true, //是否允许动画
          selectionIndicator: false,
          baseLayerPicker: false,
          fullscreenButton: false,
          geocoder: false,
          homeButton: false,
          infoBox: false,
          sceneModePicker: false,
          timeline: false,
          navigationHelpButton: false,
          navigationInstructionsInitiallyVisible: false,
          showRenderLoopErrors: false,
          shadows: false,
          terrain: Cesium.Terrain.fromWorldTerrain(),
        });
    
        viewer.scene.debugShowFramesPerSecond = true;
        viewer._cesiumWidget._creditContainer.style.display = "none"; //去除版权信息
        viewer.camera.setView({
          destination: new Cesium.Cartesian3(
            -2267365.9077936024,
            5026893.279706578,
            3202033.0742220455
          ),
          orientation: {
            heading: 6.275940369857615,
            pitch: -0.7210338041102347,
            roll: 6.283157048530953,
          },
        });
    
        //加载实体
        viewer.entities.add({
          id: 'point',
          name: "点1",
    
          position: new Cesium.Cartesian3(-2265189.515941492, 5021589.076157024, 3204135.208763753),
          point: {
            color: Cesium.Color.PINK,
            pixelSize: 20,
          },
          properties: {
            entityType: 'point'  // 添加 entityType 属性
          }
        })
        viewer.entities.add({
          id: 'point2',
          name: "点2",
    
          position: new Cesium.Cartesian3(-2266291.515941492, 5021589.076157024, 3204135.208763753),
          point: {
            color: Cesium.Color.WHITE,
      
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值