[PYTHON] Ich habe versucht, die Punktgruppendaten-DB der Präfektur Shizuoka mit Vue + Leaflet anzuzeigen
Was ich diesmal gemacht habe
Datenkarte der Präfekturpunktgruppe Shizuoka
GitHub - shizokaPCDB
Hinweis
Dieser Artikel ist kein Artikel, der LIDAR-Daten in der Broschüre anzeigt. Es zeigt die Informationen der Punktgruppendatenbank an (Datenerfassungsort, Erstellungsdatum usw.).
Einführung
Das Rock Shizuoka Prefectural Office verfügt über eine große Anzahl von LIDAR-Daten von Bauprodukten als offene Daten auf seiner eigenen Website Shizuoka Point Cloud DB (im Folgenden als "Shizuoka PCDB" bezeichnet). Es ist für die Öffentlichkeit zugänglich. Als ich die Quelle aus einer interessenorientierten Perspektive betrachtete, wurde mir klar, dass es möglich sein würde, Daten von außen zu erhalten (da JavaScript direkt in HTML geschrieben wurde). Wie Sie jedoch auf dieser Site und im obigen Bild sehen können, (1) ist die Anzahl der Markierungen groß und die Leistung wird beeinträchtigt, und (2) jedes Mal, wenn sich der Kartenbereich ändert, werden die in diesem Bereich enthaltenen Daten vom Server erfasst und die Leistung verschlechtert sich weiter. Ich dachte, es gibt zwei Probleme: Was ich tat. Ich dachte, dass es Raum für Verbesserungen geben könnte, wenn die Daten von außen bezogen werden könnten, und beschloss, sie weiterzuentwickeln.
Aus diesem Grund senden wir es auf zwei Arten: Zugriff und Formatierung der Datenbank und Anzeige an der Rezeption.
Technologie verwendet
- Flask
- Vue.js
- Vue2-leaflet
Zugriff und Formatierung der Datenbank
Zugriff
Mit Blick auf die Quelle der Shizuoka-PCDB wurden der Zugriff auf den Server und die Anzeige in Leaflet in etwa 100 Zeilen implementiert. Der Teil, der Daten vom Server abruft, wird unten gezeigt.
var data = { request : "MarkerSet",
Xmax : map.getBounds().getNorthEast().lng,
Xmin : map.getBounds().getSouthWest().lng ,
Ymax : map.getBounds().getNorthEast().lat,
Ymin : map.getBounds().getSouthWest().lat };
$.ajax("ankenmapsrc",{
type: "GET",
data: data,
success: function(data, dataType){
var myIcon = L.icon({
iconUrl: 'http://cdn.leafletjs.com/leaflet-0.5/images/[email protected]',
iconSize: [15,25],
iconAnchor: [5, 5],
});
//Die folgende Verarbeitung wird fortgesetzt
Wenn Sie mit den Abfragedaten auf ankenmapsrc zugreifen, können Sie die Daten abrufen. Hier haben Daten den Anforderungsnamen "MarkerSet" und Xmax, Xmin, Ymax, Ymin, die den zu erfassenden Bereich angeben. Der von Leaflet angezeigte Bereich wird in den vier Variablen des Bereichs gespeichert. Dieser Vorgang wird jedes Mal aufgerufen, wenn der Anzeigebereich der Broschüre aktualisiert wird. Mit anderen Worten, die Daten werden jedes Mal vom Server erfasst.
Schauen wir uns nun den Rückgabewert dieser Anfrage an.
30XXX01010001:2018 Nagiyama Reflex Furnace Measurement Business:138.96214537214:35.03962001009?
28XXX00030007:Wartungsprojekt für das Gebiet Shiraito no Taki Takimi Bridge Nr. 7:138.58870495572:35.312506370532?
28XXX00030008:Wartungsprojekt für das Gebiet Shiraito no Taki Takimi Bridge Nr. 8:138.58881502806:35.312596432406?
28XXX00030009:Wartungsprojekt für das Gebiet Shiraito no Taki Takimi Bridge Nr. 9:138.58892510063:35.312686494178?
29C2001011361:2017 [29-Ｃ２００１-Nr. 01] Ausgelagerte Übersicht über Außenwerbung auf der Izu-Halbinsel (Kannan Town Road)_1-Zeile 2):138.93794860595:35.083520492945
...
Ursprünglich gibt es keinen Zeilenumbruch, aber er wird zur Erklärung hinzugefügt. Wenn Sie sich diese Daten ansehen, sehen Sie, dass das Trennzeichen für jede Konstruktion "?" Und das Trennzeichen für jedes Datenelement ":" ist.
Gestaltung
Greifen Sie mit Flask auf Shizuoka PCDB zu und erstellen Sie einen API-Server, der auf die formatierten Daten reagiert.
import urllib.request, urllib.parse
import json
@app.route('/markers')
def getMarkers():
#Legen Sie den Breiten- und Längengrad einschließlich der gesamten Präfektur Shizuoka als ganzzahligen Wert fest, um alle Fälle zu erfassen.
xMax = 140
xMin = 137
yMax = 36
yMin = 33
params = {
'request':'MarkerSet',
'Xmax':xMax,
'Xmin':xMin,
'Ymax':yMax,
'Ymin':yMin
}
p = urllib.parse.urlencode(params)
url = "https://pointcloud.pref.shizuoka.jp/lasmap/ankenmapsrc?" + p
#Fordern Sie mit dem oben generierten URL-Parameter eine Anfrage an SIZUOKA POINT CLOUD DB an und rufen Sie die Zeichenfolge der Materialliste ab
allAnkenStr = ""
with urllib.request.urlopen(url) as res:
allAnkenStr = res.read().decode()
#Erstellen Sie json, um zurückzukehren
ankensObj = {
"ankenList":[]
}
ankenList = allAnkenStr.split('?')
for anken in ankenList:
ankenInfo = anken.split(':')
#Wenn unangemessene Daten vorhanden sind, überspringen Sie diese
if len(ankenInfo) != 4:
continue
#Konvertieren Sie den japanischen Kalender in den westlichen Kalender
yy = int(ankenInfo[0][:2])
#Reiwa
if yy < 24:
yyyy = 2018 + yy
else:
yyyy = 1988 + yy
ankenObj = {
"no":ankenInfo[0],
"name":ankenInfo[1],
"lon":ankenInfo[2],
"lat":ankenInfo[3],
"year":yyyy
}
ankensObj['ankenList'].append(ankenObj)
return jsonify(ankensObj)
Zu Beginn erläuterte Probleme (2) Jedes Mal, wenn sich der Kartenbereich ändert, werden die in diesem Bereich enthaltenen Daten vom Server erfasst und die Leistung weiter verringert. Es wurde gelöst von. Das liegt daran, dass die Gesamtzahl der Fälle etwa 1400 betrug und es nicht zu spät war, alle tatsächlich zu bekommen. Deshalb kamen wir zu dem Schluss, dass wir alle zuerst bekommen sollten.
Wir haben uns entschlossen, die erfassten Ankendaten zu analysieren und die Konstruktionsnummer, den Konstruktionsnamen, den Längen- / Breitengrad und das Baujahr als json zurückzugeben.
Anzeige vorne
Verbleibende Probleme (1) Die Anzahl der Marker ist groß und die Leistung wird beeinträchtigt, aber ich dachte, dass dies gelöst werden würde, wenn es mit Mapbox GL JS angezeigt würde, das schnell arbeitet. Als ich es implementierte, wurde die Markierungsanzeige jedoch langsamer als die Broschüre. Also habe ich dieses Problem gelöst, indem ich Leaflet's Marker Cluster übernommen habe.
In Bezug auf die Umgebungskonstruktion von Leaflet und Vue Try # 027 - Ich habe versucht, die Entwicklungsumgebung von Leaflet und Mapbox GL JS mit Vue.js zu erstellen Ich werde es weglassen, weil es detailliert ist. Installieren Sie außerdem vue2-leaflet-markercluster.
npm install vue2-leaflet-markercluster
Asynchrone Kommunikation zum API-Server mit Vue
Verwenden Sie die Fetch-API. Holen Sie sich die Daten mit App.vue und übergeben Sie sie an MapPane.vue.
App.vue
<MapPane :ankens="ankens"/>
App.vue
data() {
return {
ankens:[],
}
},
created() {
let vm = this
fetch("/markers")
.then(response => {
return response.json()
})
.then(data => {
//Nach dem Sortieren übergebe ich Daten
vm.ankens = data.ankenList.sort(function (a, b) {
if (a.no < b.no) {
return 1
}
if (a.no > b.no) {
return -1
}
return 0
}).sort(function (a, b) {
if (a.year < b.year) {
return 1
}
if (a.year > b.year) {
return -1
}
return 0
})
})
.catch(error => {
console.log(error)
alert("Ein Fehler ist aufgetreten.")
});
}
MapPane.vue
<template>
<div class="mapPane">
<l-map
:zoom="zoom"
:center="center"
:preferCanvas="true"
>
<l-control-scale
position="bottomleft"
:imperial="false"
:metric="true"
></l-control-scale>
<l-tile-layer
:name="tileProvider.name"
:visible="tileProvider.visible"
:url="tileProvider.url"
:attribution="tileProvider.attribution"
></l-tile-layer>
<Vue2LeafletMarkerCluster :options="clusterOptions" >
<LMarker v-for="anken in ankens" :key="anken.no" :lat-lng="makeLatLng(anken)" @click="onMarkerClick(anken.no)">
<LPopup :content="makeMarkerContent(anken)" ></LPopup>
</LMarker>
</Vue2LeafletMarkerCluster>
</l-map>
</div>
</template>
MapPane.vue
props: {
ankens:Array
},
MapPane.vue
<style scoped>
@import "~leaflet.markercluster/dist/MarkerCluster.css";
@import "~leaflet.markercluster/dist/MarkerCluster.Default.css";
</style>
Wickeln Sie LMarker in Vue2LeafletMarkerCluster ein und es wird funktionieren. Infolgedessen bilden die engen Markierungen Cluster und werden zusammen als ein Merkmal angezeigt, bis sie vergrößert werden. Infolgedessen wurde auch Problem (1) gelöst.
abschließend
In Zukunft möchte ich in der Lage sein, die Liste der Daten zu sortieren, zu durchsuchen und die zu ladende Animation anzuzeigen. Als ich die LIDAR-Daten nachgeschlagen habe, bin ich bei Shizuoka PCDB angekommen, aber es war eine unerwartet große Entgleisung. Herr Shizuoka, der eine so große Menge wertvoller Daten als offene Daten verwendet, ist wirklich Rock, und in letzter Zeit scheint sich die Präfektur Hyogo den Reihen der Rocker angeschlossen zu haben. ](Https://qiita.com/Yfuruchin/items/2a9b017d840c46c37f3e) Ich bin der Meinung, dass sich dieses Projekt ein wenig vom Mainstream der offenen Datennutzung unterscheidet, aber zumindest denke ich, dass es sich selbst verbessert hat. Ich möchte weiterhin eine Antenne im offenen Datenbereich aufstellen.
Recommended Posts