我正在尝试制作一个按钮，以便将其绑定到全景图中的特定位置。也就是说，当用户观看 360 度全景图时，按钮不应旋转。 我正在尝试制作一个按钮，以便将其绑定到全景图中的特定位置。也就是说，当用户查看 360 度全景图时，按钮不应旋转。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>panoramas</title> <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> <style> #switchButton { cursor: pointer; } </style> </head> <body> <a-scene> <a-assets> <img id="panorama1" src="1.jpg"> <img id="panorama2" src="2.jpg"> </a-assets> <a-sky id="panorama" src="#panorama1" rotation="0 -130 0"></a-sky> <a-entity id="cameraRig"> <a-camera></a-camera> </a-entity> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#CCC" id="switchButton"></a-plane> </a-scene> <script> const button = document.querySelector('#switchButton'); let currentPanorama = 1; button.addEventListener('mouseenter', () => { const panorama = document.querySelector('#panorama'); if (currentPanorama === 1) { panorama.setAttribute('src', '#panorama2'); currentPanorama = 2; } else { panorama.setAttribute('src', '#panorama1'); currentPanorama = 1; } }); </script> </body> </html> 我正在尝试制作一个按钮，以便将其绑定到全景图中的特定位置。也就是说，当用户查看 360 度全景图时，按钮不应旋转。 我解决你的问题 您需要做的是添加一个光标来处理 onlcick 事件，这是唯一的方法。 <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width"> <title>A-Frame HTML Shader - Dynamic</title> <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/aframe-html-shader.min.js"></script> <script> let currentPanorama = 1; AFRAME.registerComponent("click-log", { init: function () { this.myFunction = function () { const panorama = document.querySelector('#panorama'); if (currentPanorama === 1) { panorama.setAttribute('src', '#panorama2'); currentPanorama = 2; } else { panorama.setAttribute('src', '#panorama1'); currentPanorama = 1; } }; this.el.addEventListener("click", this.myFunction); }, remove: function () { this.el.removeEventListener("click", this.myFunction); } }); </script> </head> <body> <a-scene update-html> <a-camera> <a-cursor material="color: red"></a-cursor> </a-camera> <a-assets> <img id="panorama1" src="https://l13.alamy.com/360/PWNBM9/testing-new-cameralens-combination-in-my-garden-in-aarhus-denmark-PWNBM9.jpg"> <img id="panorama2" src="https://aframe.io/aframe/examples/boilerplate/panorama/puydesancy.jpg"> </a-assets> <a-sky id="panorama" src="#panorama1" rotation="0 -130 0"></a-sky> <a-entity id="cameraRig"> <a-camera></a-camera> </a-entity> <a-plane click-log position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#CCC" id="switchButton"></a-plane> </a-scene> </body> </html>
我想知道是否有办法固定下面参考图像中显示的测量值，以便调整我的草图以满足我想要实现的特定目标长度？无法...
我有下面的代码，它需要进行多次扫描。我知道这始终是 2880。画布应该将整个 360° 分成 2880 个扇区。下面代码中的循环将始终从 0...
我的浮点值是360F。我在 res/values 中创建了一个名为 float.xml 的文件。 浮动.xml 我的浮点值是 360F。我在 float.xml 中创建了一个名为 res/values 的文件。 float.xml <?xml version="1.0" encoding="utf-8"?> <resources> <item name="loading_circle_target" format="float" type="dimen">360</item> </resources> 然后像这样使用 @Composable fun LoadingCircle() { val currentRotation by transition.animateValue( 0F, targetValue = dimensionResource(id = R.dimen.loading_circle_target).value, // .. more code in here ) // more code in here } 我在这里遇到错误 android.content.res.Resources$NotFoundException: Resource ID #0x7f070346 type #0x4 is not valid at android.content.res.Resources.getDimension(Resources.java:766) at androidx.compose.ui.res.PrimitiveResources_androidKt.dimensionResource(PrimitiveResources.android.kt:79) 更新 我的最低sdk是21 如果您的目标至少是 API 29，则可以使用： val floatValue = LocalContext.current.resources.getFloat(R.dimen.loading_circle_target) @Composable fun LoadingCircle() { val currentRotation by transition.animateValue( 0F, targetValue = floatValue, // .. more code in here ) // more code in here } 我不得不恢复到旧的 is_phone bool，因为 booleanResource() 支持较旧的 API 级别。所以有 <resources> <bool name="is_phone">false</bool> </resources> 在 values-sw600dp 文件夹中并将其设置为正常值文件夹中的 true。然后就可以像这样使用了 @Composable fun LoadingCircle() { val currentRotation by transition.animateValue( 0F, targetValue = if (booleanResource(id = R.bool.is_phone)) 360f else 180f ) // more code in here }
我决定通过创建挪威夏季的公路旅行地图来开始学习 Leaflet 和 JavaScript，这是我的项目的可重复示例： 我决定通过创建挪威夏季的公路旅行地图来开始学习 Leaflet 和 JavaScript，这是我的项目的可重复示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/> <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.css" /> <script src="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script> <style> body { margin: 0; } #map { width: 100%; height: 100vh; } .carousel { max-width: 300px; margin: 10px auto; } .carousel img { width: 100%; height: auto; } /* Custom styling for Geiranger popup content */ .geiranger-popup-content { max-width: 500px; padding: 20px; } </style> </head> <body> <div id="map"></div> <script> var map = L.map('map').setView([61.9241, 6.7527], 6); var streetViewMarker = null; // Variable to keep track of the Street View marker L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); var roadTripCoordinates = [ [59.9139, 10.7522], // Oslo [62.2622, 10.7654], // Tynset [62.5949, 9.6926], // Oppdal [63.0071, 7.2058], // Atlantic Road [62.1040, 7.2054] // Geiranger ]; // Function to initialize Slick Carousel for a specific marker function initSlickCarousel(markerId, images) { $(`#${markerId}_carousel`).slick({ infinite: true, slidesToShow: 1, slidesToScroll: 1, dots: true, arrows: true }); // Add images to the carousel images.forEach(img => { $(`#${markerId}_carousel`).slick('slickAdd', `<div><img src="${img}" alt="Image"></div>`); }); } // Add markers for each destination with additional information and multiple pictures var destinations = [ { coordinates: [59.9139, 10.7522], name: 'Oslo', info: "../07/2023 : Start of the road-trip", images: ['https://www.ecologie.gouv.fr/sites/default/files/styles/standard/public/Oslo%2C%20Norvege_AdobeStock_221885853.jpeg?itok=13d8oQbU', 'https://via.placeholder.com/300', 'https://via.placeholder.com/300'] }, { coordinates: [62.2622, 10.7654], name: 'Tynset', info: "../07/2023 : Fly-fishing spot 1", images: ['https://www.czechnymph.com/data/web/gallery/fisheries/norway/glommahein/Kvennan_Fly_Fishing_20.jpg', 'https://via.placeholder.com/300', 'https://via.placeholder.com/300'] }, { coordinates: [62.5949, 9.6926], name: 'Oppdal', info: "../07/2023 : Awesome van spot for the night", images: ['https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFRtpLlHWr8j6S2jNStnq6_Z9qBe0jWuFH8Q&usqp=CAU', 'https://via.placeholder.com/300', 'https://via.placeholder.com/300'] }, { coordinates: [63.0071, 7.2058], name: 'Atlantic Road', info: "../07/2023 : Fjord fishing", images: ['https://images.locationscout.net/2021/04/atlantic-ocean-road-norway.jpg?h=1100&q=83', 'https://via.placeholder.com/300', 'https://via.placeholder.com/300'] }, { coordinates: [62.1040, 7.2054], name: 'Geiranger', info: "../07/2023 : Hiking 1", images: ['https://www.fjordtours.com/media/10968/nicola_montaldo-instagram-26th-may-2021-0717-utc.jpeg?anchor=center&mode=crop&width=1120&height=1120&rnd=133209254300000000&slimmage=True', 'https://via.placeholder.com/300', 'https://via.placeholder.com/300'] } ]; // Use Leaflet Routing Machine with Mapbox Routing plugin to get and display the route L.Routing.control({ waypoints: roadTripCoordinates.map(coord => L.latLng(coord[0], coord[1])), router: L.Routing.mapbox('MAP_BOX_KEY'), draggableWaypoints: false, addWaypoints: false, lineOptions: { styles: [{ color: 'brown', opacity: 0.7, weight: 2 }] } }).addTo(map); // Remove the leaflet-routing-container from the DOM var routingContainer = document.querySelector('.leaflet-routing-container'); if (routingContainer) { routingContainer.parentNode.removeChild(routingContainer); } destinations.forEach(function (destination) { var marker = L.marker(destination.coordinates).addTo(map); var markerId = destination.name.replace(' ', '_'); marker.bindPopup(` <b>${destination.name}</b><br> ${destination.info}<br> <div class="carousel" id="${markerId}_carousel"></div> `).on('popupopen', function () { // Initialize Slick Carousel when the marker popup is opened initSlickCarousel(markerId, destination.images); }).openPopup(); }); // Add Street View panorama on map click map.on('click', function (e) { if (streetViewMarker) { // Remove the existing Street View marker map.removeLayer(streetViewMarker); } let lat = e.latlng.lat.toPrecision(8); let lon = e.latlng.lng.toPrecision(8); streetViewMarker = L.marker([lat, lon]).addTo(map) .bindPopup(`<a href="http://maps.google.com/maps?q=&layer=c&cbll=${lat},${lon}&cbp=11,0,0,0,0" target="blank"><b> Cliquer ici pour avoir un aperçu de la zone ! </b></a>`).openPopup(); }); </script> </body> </html> 一切都按预期进行，我不得不说我对渲染非常满意。然而，通过查看 Stackoverflow 上的不同主题，我发现可以通过单击地图来显示 Google 街景视图。这个功能真的很酷，但我想限制仅在我的公路旅行行程中添加街景标记的选项。 有人可以帮我吗？ 您通过创建挪威夏季公路旅行地图开始了学习 Leaflet 和 JavaScript 的旅程，真是太棒了。到目前为止，您的项目设置看起来不错，我很乐意在您的进展过程中提供指导或帮助。 既然您已经包含了 Leaflet、Slick Carousel 和 Leaflet Routing Machine 库，看来您正计划使用 Slick Carousel 创建一个带有路线的交互式地图，也许还有一些附加功能。 以下是一些增强您的项目的建议： 地图初始化： 使用初始视图和要显示的任何特定标记或图层设置您的传单地图。 路由功能： 利用 Leaflet Routing Machine 将动态路线添加到您的地图。您可以自定义路线、添加航点并提供逐向指示。 照片轮播： 既然您提到了公路旅行地图，请考虑集成 Slick Carousel 来展示旅途中关键地点的照片或描述。这可以为您的地图添加视觉上吸引人的元素。 地图控制： 探索 Leaflet 插件或内置控件以增强用户体验。例如，您可以添加缩放控件或比例尺。 响应式设计： 确保您的地图能够响应不同的设备。 Leaflet 通常适合移动设备，但如果需要的话进行测试和调整是一个很好的做法。 数据层： 如果您有与您的公路旅行相关的特定数据点或事件，您可以使用标记或其他视觉元素在地图上表示它们。 JavaScript 交互性： 使用 JavaScript 为地图添加交互性。对于 ㅤ 实例，当用户单击标记时，您可以创建包含附加信息的弹出窗口。 记得迭代测试你的项目，并参考每个库的文档以获取详细的使用说明。 如果您有具体问题或在此过程中遇到挑战，请随时提问。祝您的公路旅行地图项目好运！