我正在使用 LeafletJS 和 Pannellum 创建一个网站，我想知道如何在下面的 geoJSON 中获取“文件名”作为 Pannellum“全景：”对象图像。
我想要做的是当用户点击地图上的标记时，用户将作为全景图像加载到“文件名”场景中。图像位于文件夹“N98E57/(panorama_images)”中。
这个 geoJSON 文件包含数以万计的数据。
这是我在leaflet.js 文件中的代码，其中包括geoJSON 数据。
const mymap = L.map('map').setView([2.3105274, 102.208572], 17);
const attribution = '©: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
const tiles = L.tileLayer(tileUrl,{attribution, "maxZoom":19}).addTo(mymap);
const circleIcon = L.icon({
iconUrl: 'img/circle.png',
iconSize: [10,10]
});
// const markers =
const geoJsonData =
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ 102.208572,2.3105274 ]
},
"properties": {
"filename":"N98E5700001.jpg",
"heading":164.2536013,
"pitch":1.029634,
"roll":0.8173105,
"date":"2021/07/26",
"time":"12:06:10"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ 102.208565,2.3105541 ]
},
"properties": {
"filename":"N98E5700002.jpg",
"heading":165.5862937,
"pitch":0.8566141,
"roll":1.0329013,
"date":"2021/07/26",
"time":"12:06:11"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ 102.2085582,2.310581 ]
},
"properties": {
"filename":"N98E5700003.jpg",
"heading":165.1950249,
"pitch":0.527374,
"roll":1.0406185,
"date":"2021/07/26",
"time":"12:06:12"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ 102.2085509,2.3106079 ]
},
"properties": {
"filename":"N98E5700004.jpg",
"heading":164.1811315,
"pitch":-0.2002318,
"roll":1.0031426,
"date":"2021/07/26",
"time":"12:06:13"
}
},
//
//
//
// More geoJson Data
//
//
//
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ 102.2358613,2.3216851 ]
},
"properties": {
"filename":"N98E5714990.jpg",
"heading":58.7339763,
"pitch":3.6986704,
"roll":-1.8172238,
"date":"2021/09/22",
"time":"16:00:50"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ 102.235838,2.3216676 ]
},
"properties": {
"filename":"N98E5714991.jpg",
"heading":51.1291412,
"pitch":2.4323448,
"roll":-2.0470457,
"date":"2021/09/22",
"time":"16:00:51"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ 102.2358162,2.321651 ]
},
"properties": {
"filename":"N98E5714992.jpg",
"heading":55.0974399,
"pitch":2.4972048,
"roll":-0.9417798,
"date":"2021/09/22",
"time":"16:00:51"
}
}
]};
var geojsonMarkerOptions = {
radius: 3,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
L.geoJSON(geoJsonData, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions);
}
}).addTo(mymap);
这是我的全景图.js 文件。因此，例如在这里，如果我一张一张地做，几乎需要数周或更长时间才能手工完成，复制并粘贴所有数千张图像。
所以在“全景：”我想从geoJSON中获取“文件名”
文件上也有数千个这个对象。
const viewer = pannellum.viewer('panorama', {
default: {
firstScene: "oneRoad",
author: "me",
sceneFadeDuration: 500,
autoLoad: true,
hfov: 110,
yaw: 180,
},
scenes: {
oneRoad: {
title: "#1",
type: "equirectangular",
panorama: "pano_img/pano_0000_000000.jpg",
hotSpots: [
{
pitch: -5,
yaw: 180,
type: "scene",
text: "Forward",
sceneId: "twoRoad",
}
]
},
twoRoad: {
title: "#2",
type: "equirectangular",
panorama: "pano_img/pano_0000_000002.jpg",
hotSpots: [
{
pitch: -5,
yaw: 180,
type: "scene",
text: "Forward",
sceneId: "threeRoad"
},
{
pitch: -5,
yaw: 0,
type: "scene",
text: "Backwards",
sceneId: "oneRoad"
}
]
},
threeRoad: {
title: "#3",
type: "equirectangular",
panorama: "pano_img/pano_0000_000003.jpg",
hotSpots: [
{
pitch: -5,
yaw: 180,
type: "scene",
text: "Forward",
sceneId: "fourRoad"
},
{
pitch: -5,
yaw: 0,
type: "scene",
text: "Backwards",
sceneId: "twoRoad"
}
]
},
fourRoad: {
title: "#4",
type: "equirectangular",
panorama: "pano_img/pano_0000_000004.jpg",
hotSpots: [
{
pitch: -5,
yaw: 180,
type: "scene",
text: "Forward",
sceneId: "fiveRoad"
}
,
{
pitch: -5,
yaw: 0,
type: "scene",
text: "Backwards",
sceneId: "threeRoad"
}
]
},
//
//
//
//More Panorama Object
//
//
简而言之;
- 我如何从 geoJSON 获取“文件名：”数据以放入 Panellum“全景：”
- 无需复制粘贴每一张即可在 Panellum 中获取大量全景图像的方法。
- Leaflet.js 文件中的“geoJsonData”变量是否会使性能变差？
