话不多说 直接上代码
// 先创建雷达圈的layer 雷达范围
createLeiDaFanWeiLayer() {
this.LeiDaFanWeiLayer = new FeatureLayer({
title: "LeiDaFanWeiLayer",
geometryType: "polygon",
outFields: ["*"],
objectIdField: "OBJECTID",
source: [],
popupEnabled: true,
visible: false,
renderer: {
type: "simple",
symbol: {
type: "simple-fill",
color: [255, 0, 0, 0],
outline: {
width: 1,
color: "green",
},
},
},
fields: [
{
name: "OBJECTID",
alias: "OBJECTID",
type: "oid",
},
{
name: "name",
alias: "name",
type: "string",
},
],
});
this.map.add(this.LeiDaFanWeiLayer);
},
// GIS 实现雷达方法 传入经纬度坐标
createLeiDaLayer(data) {
// let p0 = this.lngLatToXY([125.1, 14.5]);
// this.addLeiDaFanWeiLayer([125.1, 14.5])
this.addLeiDaFanWeiLayer(data)
let p0 = this.lngLatToXY(data);
this.scan(p0)
},
scan(p0) {
let that = this
let _offColor = (0.1 / that.offAngTotal) * that.offAngle //透明度步长,0.1是最前面线条的透明度
let _lineWidth = 8 * that.offAngle //线条宽度
//记录转动角度
that.stareAngle += 10;
if ((that.stareAngle - that.endAngle) > that.offAngTotal) {
that.endAngle = that.stareAngle - that.offAngTotal;
}
that.linesList = []
clearTimeout(that.Timer) // 清除残留的雷达线
//清掉现有线条
that.view.graphics.items.forEach(item => {
if (item.attributes == 'linesList') {
that.view.graphics.remove(item)
}
})
//画上新线条
for (let i = that.endAngle, j = 0; i < that.stareAngle; i += that.offAngle, j += _offColor) {
let p = that.getPoint(p0, i); //r,g,b,a;a,alpha,代表透明度,0为完全透明,1为完全不透明
let color = [0, 185, 0, j.toFixed(3) * 1];
let line = that.getLine(color, _lineWidth, p0, p);
line.geometry = that.toGeographic(line.geometry)
let lineInfo = {
attributes: 'linesList',
geometry: line.geometry,
symbol: line.symbol,
}
that.linesList.push(lineInfo);
}
if (this.LeiDaFanWeiLayer.visible) {
that.linesList.forEach(item => {
that.view.graphics.add(item);
})
that.Timer = setTimeout(() => {
that.scan(p0)
}, 250);
}
},
getPoint(center, angle) {//获得圆弧上的点(平面坐标)
let radius = 800 * 1000; //雷达扫描范围为800千米;转换为米 //平面坐标与球面坐标存在误差
let sin = Math.sin(angle * Math.PI / 180);
let cos = Math.cos(angle * Math.PI / 180);
let x = center[0] + radius * sin;
let y = center[1] + radius * cos;
return [x, y];
},
getLine(color, lineWidth, p1, p2) {//绘制一条半径
//画线
const polyline = new Polyline({
type: "polyline",
paths: [[p1, p2]],
spatialReference: { wkid: 102100 },
});
const style = new Graphic({
geometry: polyline,
symbol: {
type: "simple-line",
color,
lineWidth,
width: 2,
},
});
return style
},
lngLatToXY(pt) {//经纬度转化为平面坐标
let _f = 6378137, _p = 0.017453292519943;
let lng = pt[0];//经度
let lat = pt[1];//纬度
if (lat > 89.999999) { lat = 89.999999; }
else if (lat < -89.999999) { lat = -89.999999; }
let c = lat * _p;
let x = lng * _p * _f;
let y = _f / 2 * Math.log((1 + Math.sin(c)) / (1 - Math.sin(c)));
return [x, y];
},
// 经纬度转换
toGeographic(geometry) {
if (geometry.spatialReference.wkid !== 4326) {
geometry = webMercatorUtils.webMercatorToGeographic(geometry);
}
return geometry;
},
// 雷达圈范围
addLeiDaFanWeiLayer(p0) {
// 判断有没有创建 有就删除
if (this.LeiDaFanWeiList) {
this.LeiDaFanWeiLayer.applyEdits({ deleteFeatures: this.LeiDaFanWeiList });
}
const LeiDaFanWei1 = new Circle({
// center: [111.816293, 21.571691],
center: p0,
geodesic: true,
numberOfPoints: 100,
radius: 200, // 半径
radiusUnit: "kilometers", // 单位
});
const LeiDaFanWei2 = new Circle({
// center: [111.816293, 21.571691],
center: p0,
geodesic: true,
numberOfPoints: 100,
radius: 400,
radiusUnit: "kilometers",
});
const LeiDaFanWei3 = new Circle({
// center: [111.816293, 21.571691],
center: p0,
geodesic: true,
numberOfPoints: 100,
radius: 600,
radiusUnit: "kilometers",
});
const LeiDaFanWei4 = new Circle({
// center: [111.816293, 21.571691],
center: p0,
geodesic: true,
numberOfPoints: 100,
radius: 800,
radiusUnit: "kilometers",
});
this.LeiDaFanWeiList = [
{
geometry: LeiDaFanWei1,
attributes: { name: "" }
},
{
geometry: LeiDaFanWei2,
attributes: { name: "" }
},
{
geometry: LeiDaFanWei3,
attributes: { name: "" }
},
{
geometry: LeiDaFanWei4,
attributes: { name: "" }
}
];
this.LeiDaFanWeiLayer.applyEdits({ addFeatures: this.LeiDaFanWeiList });
},