其他分享
首页 > 其他分享> > cesium 判断点是否在 矩形内部

cesium 判断点是否在 矩形内部

作者:互联网

**如果有用的话,请点个赞。谢谢!!! **
获取 AccessToken

// 获取标注点数据
var e = {xmin: 121.82231604690318, xmax: 121.88772157220355, ymin: 29.262764912884027, ymax: 29.297503199828064}; //一块区域
$.ajax({
    url: "http://data.marsgis.cn/mars_imap/pub/map/pointRandom",
    data: {
        xmin: e.xmin,
        ymin: e.ymin,
        xmax: e.xmax,
        ymax: e.ymax,
        count: 100
    },
    type: "get",
    dataType: "json",
    contentType: "application/x-www-form-urlencoded",
    success: function(e) {
        addData(e.data);//添加标注点
    }
})
var arrEntity = []; // 所有图标点集合
var selectEntitypoint = []; // 在矩形内部图标点集合
function addData(e){
	for (var t = 0, a = e.length; t < a; t++) {
        var r = e[t],
        i = viewer.entities.add({
            name: r.name,
            position: Cesium.Cartesian3.fromDegrees(r.x, r.y, 0),
            billboard: {
                image: "img/marker/mark3.png",
                scale: .8,
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND
            },
            tooltip: r.name,
            data: r
        });
        arrEntity.push(i)
    }
    return arrEntity
}

// 矩形
var greenRectangle = viewer.entities.add({
	name : 'Green translucent, rotated, and extruded rectangle at height with outline',
    rectangle : {
        coordinates : Cesium.Rectangle.fromDegrees(121.818142, 29.272462,121.844391, 29.293354),
        material : Cesium.Color.RED.withAlpha(0.5)  
    }
});
viewer.flyTo(greenRectangle);

// 判断点是否在矩形内部
for (var i = 0; i < arrEntity.length; i++) {
	var r = arrEntity[i].position.getValue();
	// 判断是否在区域内部 true在内部 
	var v = Cesium.Rectangle.contains(rectangle, Cesium.Cartographic.fromCartesian(r));
	if(v){pointImg(arrEntity[i])}
}
function pointImg(point){ //改变图标
    point.billboard.image = "img/marker/mark4.png";
    selectEntitypoint.push(point);
}

更新版

在这里插入图片描述
在这里插入图片描述
完整代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>cesium 判断点是否在矩形内部</title>
    <script src="https://cesiumjs.org/releases/1.51/Build/Cesium/Cesium.js"></script>
    <link href="https://cesiumjs.org/releases/1.51/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

</head>
<body>
    <button id="open">开始分析</button>
    <div id="cesiumContainer"></div>
    <script>
        // cesium 秘钥
        Cesium.Ion.defaultAccessToken = '你的秘钥';
        var viewer = new Cesium.Viewer('cesiumContainer',{
            geocoder: false,                //是否显示地名查找控件
            sceneModePicker: false,         //是否显示投影方式控件
            navigationHelpButton: false,    //是否显示帮助信息控件
            baseLayerPicker: false,         //是否显示图层选择控件
            homeButton: false,              //是否显示Home按钮
            fullscreenButton: false,        //是否显示全屏按钮    
            timeline:false,                 //时间轴控件 
            animation:false,                //动画控件 
        }),
        open = document.getElementById("open");

        //去cesium logo水印 或 css
        viewer.cesiumWidget.creditContainer.style.display = "none";//去cesium logo水印
        
        // 获取标注点数据
        var e = {xmin: 121.82231604690318, xmax: 121.88772157220355, ymin: 29.262764912884027, ymax: 29.297503199828064}; //一块区域
        $.ajax({
            url: "http://data.marsgis.cn/server/pointRandom/",
            data: {
                xmin: e.xmin,
                ymin: e.ymin,
                xmax: e.xmax,
                ymax: e.ymax,
                count: 100
            },
            type: "get",
            dataType: "json",
            contentType: "application/x-www-form-urlencoded",
            success: function(e) {
                addData(e);//添加标注点
            }
        })
        var arrEntity = []; // 所有图标点集合
        var selectEntitypoint = []; // 在矩形内部图标点集合
        function addData(e){
            for (var t = 0, a = e.length; t < a; t++) {
                var r = e[t],
                i = viewer.entities.add({
                    name: r.name,
                    position: Cesium.Cartesian3.fromDegrees(r.x, r.y, 0),
                    billboard: {
                        image: "./acting.png",
                        scale: .8,
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                        heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND
                    },
                    tooltip: r.name,
                    data: r
                });
                arrEntity.push(i)
            }
            return arrEntity
        }

        // 矩形
        var greenRectangle = viewer.entities.add({
            name : 'Green translucent, rotated, and extruded rectangle at height with outline',
            rectangle : {
                coordinates : Cesium.Rectangle.fromDegrees(121.818142, 29.272462,121.844391, 29.293354),
                material : Cesium.Color.RED.withAlpha(0.5)  
            }
        });
        viewer.flyTo(greenRectangle);

        open.onclick = function(){
            console.log("open",greenRectangle.rectangle.coordinates.getValue())
            for (var i = 0; i < arrEntity.length; i++) {
                var r = arrEntity[i].position.getValue();
                // 判断是否在区域内部 true在内部 
                var v = Cesium.Rectangle.contains(greenRectangle.rectangle.coordinates.getValue(), Cesium.Cartographic.fromCartesian(r));
                console.log(v,r )
                if(v){pointImg(arrEntity[i])}
            }
            function pointImg(point){ //改变图标
                point.billboard.image = "./marker/default2.png";
                selectEntitypoint.push(point);
            }
        }

        
    </script>
</body>
</html>

**如果有用的话,请点个赞。谢谢!!! **

本文转自 https://blog.csdn.net/weixin_42448623/article/details/98507084?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.pc_relevant_default&utm_relevant_index=2,如有侵权,请联系删除。

标签:Cesium,判断,false,name,viewer,var,cesium,矩形,arrEntity
来源: https://www.cnblogs.com/hustshu/p/16196053.html