标签：Cesium 判断 false name viewer var cesium 矩形 arrEntity
**如果有用的话，请点个赞。谢谢！！！ **
获取 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>
**如果有用的话，请点个赞。谢谢！！！ **
标签：Cesium,判断,false,name,viewer,var,cesium,矩形,arrEntity 来源： https://www.cnblogs.com/hustshu/p/16196053.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。