Получите данные из geoJSON и сохраните их в Pannellum
Я создаю веб-сайт с помощью LeafletJS и Pannellum, и мне интересно, как получить «имя файла» в geoJSON ниже в качестве изображения объекта Pannellum «panorama:».
Что я хочу сделать, так это то, что когда пользователь нажимает на маркер на карте, пользователь будет загружен в сцену «имя файла» в виде панорамного изображения. Изображения находятся в папке "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 без копирования и вставки каждого из них.
- Снизит ли производительность переменная geoJsonData из файла leaflet.js?
Это пример того, что я делаю, слева есть маркеры, которые пользователь может щелкнуть.