tianlong/Agriculture-front-end
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

画一个精确的圆

Browse Source
This commit is contained in:
jiangzhongzhi
2023-07-06 09:26:04 +08:00
parent 4b840698b5
commit d895c51712
1 changed files with 56 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/views/meteorological/monitor/drought/index.vue
View File

@ -646,6 +646,7 @@ const onclick = () => {
//选择范围
// getmeteorologicalFreezes();
meteorologicals()
};
const meteorologicals = () => {
for (const i in circleLayer.value) {
@ -666,33 +667,67 @@ const meteorologicals = () => {
for (const i in informationData.value) {
const centerLonLat = [parseFloat(informationData.value[i].msLongitude),
parseFloat(informationData.value[i].msLatitude)];
const radius = radio1.value / map.getView().getProjection().getMetersPerUnit(); // 将半径从米转换为度（EPSG:4326）
const circleGeometry = new ol.geom.Circle(centerLonLat, radius);
// 创建一个矢量图层
circleLayer.value[i] = new ol.layer.Vector({
source: new ol.source.Vector({
features: [
new ol.Feature({
geometry: circleGeometry
})
]
}),
style: new ol.style.Style({
// fill: new ol.style.Fill({
// color: 'rgba(255,255,255,0.5)'
// }),
stroke: new ol.style.Stroke({
color: 'rgb(255,255,0)', // 设置红色边框
width: 2
}),
//精确的圆
const points = 128;
const circleCoords = [];
for (let i = 0; i < points; i++) {
const angle = 2 * Math.PI * i / points;
const coordinate = ol.sphere.computeDestinationPoint(centerLonLat, radio1.value, angle);
circleCoords.push(coordinate);
}
// 创建一个具有给定半径的圆形
const circleFeature = new ol.Feature({
geometry: new ol.geom.Polygon([circleCoords])
});
// 为圆形创建一个样式
const circleStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgb(255,255,0)',
width: 2
})
});
// 添加矢量图层到地图
// 将圆形添加到矢量层
circleLayer.value[i] = new ol.layer.Vector({
source: new ol.source.Vector({
features: [circleFeature]
}),
style: circleStyle
});
if(informationData.value[i].warning!=='无灾害'){
map.addLayer(circleLayer.value[i]);
}
//不精确的圆
// const radius = radio1.value / map.getView().getProjection().getMetersPerUnit(); // 将半径从米转换为度（EPSG:4326）
// const circleGeometry = new ol.geom.Circle(centerLonLat, radius);
// // 创建一个矢量图层
// circleLayer.value[i] = new ol.layer.Vector({
// source: new ol.source.Vector({
// features: [
// new ol.Feature({
// geometry: circleGeometry
// })
// ]
// }),
// style: new ol.style.Style({
// // fill: new ol.style.Fill({
// // color: 'rgba(255,255,255,0.5)'
// // }),
// stroke: new ol.style.Stroke({
// color: 'rgb(255,255,0)', // 设置红色边框
// width: 2
// }),
// })
// });
// // 添加矢量图层到地图
// if(informationData.value[i].warning!=='无灾害'){
// map.addLayer(circleLayer.value[i]);
// }
// 创建一个点几何对象，使用EPSG:4326投影坐标
const iconPointGeometry = new ol.geom.Point(centerLonLat);
// 创建一个Feature，并将其几何对象设置为刚创建的点
@ -722,7 +757,7 @@ const meteorologicals = () => {
})
meteorologicalsPeople({flag:1,alertRange:radio1.value}).then(res => {
meteorologicalsPeople({flag:1,alertRange:radio1.value,data:value.value}).then(res => {
peopleData.value = res.data
for (const i in peopleData.value) {