<!-- 版权所有 泰瑞数创科技（北京）有限公司 -->
|
<!DOCTYPE html>
|
<html lang="en">
|
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>缓冲范围分析</title>
|
<link rel="stylesheet" href="./CimSDK/CimSDK.min.css">
|
<link rel="stylesheet" href="./CimSDK/Workers/layui/css/layui.css">
|
<style>
|
.funcBox {
|
position: absolute;
|
top: 30px;
|
padding: 10px;
|
width: 350px;
|
background-color: rgba(0, 0, 0, .7);
|
border-radius: 4px;
|
left: 20px;
|
color: #fff;
|
}
|
|
.layui-form-item {
|
text-align: center;
|
}
|
|
.layui-form-label {
|
width: unset !important;
|
padding: 9px 0px !important;
|
}
|
|
.layui-input-block {
|
margin-left: 90px !important;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div id="sdkContainer"></div>
|
<!--按钮-->
|
<div class="funcBox layui-form">
|
<div class="layui-form-item">
|
<label class="layui-form-label">缓冲范围(km)</label>
|
<div class="layui-input-block">
|
<input type="number" id="buff" placeholder="请输入缓冲范围(km)" value="1" class="layui-input">
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<div class="layui-input-block">
|
<button class="layui-btn" onclick="add3()">面</button>
|
<button class="layui-btn" onclick="clear1()">清除</button>
|
</div>
|
</div>
|
</div>
|
<script src="./CimSDK/Workers/jquery-3.5.0.min.js"></script>
|
<script src="./CimSDK/CimSDK.min.js"></script>
|
<script src="./CimSDK/Workers/layui/layui.js"></script>
|
<script>
|
window.earthCtrl = new SmartEarth.EarthCtrl("sdkContainer");
|
window.Viewer = earthCtrl.viewer;
|
earthCtrl.camera.stop(); //取消飞行状态
|
earthCtrl.camera.jumpTo({ //跳转视角
|
destination: new SmartEarth.Cesium.Cartesian3.fromDegrees(116, 39, 500000)
|
});
|
|
let buffRadius = 1;
|
let Buffers = []
|
|
$('#buff').on('input propertychange', function (event) {
|
let num = $(this).val();
|
if (num < 0) {
|
layui.layer.msg('请输入一个大于0的数值');
|
$(".layui-btn").prop('disabled', true);
|
} else {
|
buffRadius = num;
|
$(".layui-btn").prop('disabled', false);
|
}
|
});
|
|
//画面
|
function add3() {
|
buff = earthCtrl.Analysis.DrawPolygonBuffer(0, function () {
|
let area = buff.positions.flat().join(" ");
|
console.log(area);
|
let url = `https://skyzt.bda.gov.cn/gisserver/wfsserver/liushisijiayuanqu1012?format=json&version=1.3.0&request=GetFeature&typename=64家园区基本情况范围coordinates10092&propertyname=*&filter=<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc"><ogc:Intersects><ogc:PropertyName /><gml:Polygon xmlns:gml="http://www.opengis.net/gml" srsName="EPSG:4326"><gml:exterior><gml:LinearRing><gml:posList>${area}</gml:posList></gml:LinearRing></gml:exterior></gml:Polygon></ogc:Intersects></ogc:Filter>`
|
$.get(url, function (result) {
|
console.log(result)
|
});
|
|
})
|
|
}
|
|
|
//加载ArcGIS在线影像服务
|
ArcgisImageryLayer();
|
function ArcgisImageryLayer() {
|
const layer = earthCtrl.factory.createImageryLayer({
|
sourceType: "arcgis",
|
url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
|
});
|
}
|
</script>
|
</body>
|
|
</html>
|
