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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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