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>
**如果有用的话，请点个赞。谢谢！！！ **