Tambahkan peta pom bensin – Beragampengetahuan
Proyek ReactAndGo untuk mengimpor harga gas Jerman untuk menunjukkan/memberitahukan harga murah di wilayah Anda. Untuk membantu Anda menemukan SPBU, tampilan peta dengan pin dan overlay telah ditambahkan.
menyediakan data
Kerangka kerja Gin digunakan untuk menyediakan antarmuka lainnya di gscontroller.go:
func searchGasStationLocation(c *gin.Context) {
var searchLocationBody gsbody.SearchLocation
if err := c.Bind(&searchLocationBody); err != nil {
log.Printf("searchGasStationLocation: %v", err.Error())
}
gsEntity := gasstation.FindBySearchLocation(searchLocationBody)
c.JSON(http.StatusOK, gsEntity)
}konteks’c‘ Ikat lokasi yang diminta ke ‘searchLocationBody‘ Berubah. ini ‘FindBySearchLocation(…)‘ fungsi mendapatkan pompa bensin dari repositori. Kemudian masukkan hasil frontend ke dalam ‘JSON(…)‘ Berfungsi untuk berubah menjadi respons HTTP JSON.
Framework Gorm digunakan untuk akses database melalui peta objek di gsrepo.go:
func FindBySearchLocation(searchLocation gsbody.SearchLocation)
[]gsmodel.GasStation {
var gasStations []gsmodel.GasStation
minMax := minMaxSquare{MinLat: 1000.0, MinLng: 1000.0,
MaxLat: 0.0, MaxLng: 0.0}
//max supported radius 20km and add 0.1 for floation point side effects
myRadius := searchLocation.Radius + 0.1
if myRadius > 20.0 {
myRadius = 20.1
}
minMax := calcMinMaxSquare(searchLocation.Longitude,
searchLocation.Latitude, myRadius)
database.DB.Where("lat >= ? and lat <= ? and lng >= ? and lng <= ?",
minMax.MinLat, minMax.MaxLat, minMax.MinLng,
minMax.MaxLng).Preload("GasPrices", func(db *gorm.DB) *gorm.DB {
return db.Order("date DESC").Limit(50)
}).Find(&gasStations)
//filter for stations in circle
filteredGasStations := []gsmodel.GasStation{}
for _, myGasStation := range gasStations {
distance, bearing := myGasStation.CalcDistanceBearing(
searchLocation.Latitude, searchLocation.Longitude)
if distance < myRadius && bearing > -1.0 {
filteredGasStations = append(filteredGasStations, myGasStation)
}
}
return filteredGasStations
}Pertama,’minMaxSquare‘ Struktur telah diinisialisasi. Kemudian periksa dan atur radius, dan ‘calcMinMaxSquare(…)‘ fungsi digunakan untuk menghitung koordinat batas kotak pencarian.
Gorm digunakan untuk memuat SPBU dalam rentang pencarian dengan harga dimuat sebelumnya dan dibatasi dalam urutan tanggal. Toko pompa bensin di ‘gasStations‘ Iris, filter azimuth dan radius, dan kembali.
dapatkan harga
Harga diambil di Main.tsx:
const fetchSearchLocation = (jwtToken: string) => {
const requestOptions2 = {
method: 'POST',
headers: { 'Content-Type': 'application/json',
'Authorization': `Bearer ${jwtToken}` },
body: JSON.stringify({ Longitude: globalUserDataState.Longitude,
Latitude: globalUserDataState.Latitude, Radius:
globalUserDataState.SearchRadius }),
signal: controller?.signal
}
fetch('/gasstation/search/location', requestOptions2)
.then(myResult => myResult.json() as Promise<GasStation[]>)
.then(myJson => { const myResult = myJson
.filter(value => value?.GasPrices?.length > 0).map(value => ({
location: value.Place + ' ' + value.Brand + ' ' + value.Street + ' '
+ value.HouseNumber, e5: value.GasPrices[0].E5,
e10: value.GasPrices[0].E10, diesel: value.GasPrices[0].Diesel,
date: new Date(Date.parse(value.GasPrices[0].Date)),
longitude: value.Longitude, latitude: value.Latitude
} as TableDataRow));
setRows(myResult);
setGsValues(myResult);
}Fungsi ‘fetchSearchLocation(…)‘ mendapatkan JwtToken dan tambahkan token ke header HTTP. Tubuh berisi Json longitude, latitudeDan searchRadius. Sinyal ini dapat digunakan untuk membatalkan permintaan. Ambil mengirimkan permintaan ke URL yang berisi konten.
JSON yang dihasilkan diubah menjadi larik objek TypeScript, yang difilter dan dipetakan ke ‘TableDataRow‘ objek. Kemudian atur garis ke status mundur ‘rows‘ Dan ‘gsValues‘ digunakan dalam komponen.
Tampilkan harga dan lokasi di peta
Lokasi pom bensin ditampilkan di komponen GsMap.tsx dengan pustaka OpenLayers dan petak OpenStreetMap. Definisi komponen dan ‘useEffect(…)‘ kait:
export default function GsMap(inputProps: InputProps) {
let map: Map;
let currentOverlay: Overlay | null = null;
useEffect(() => {
if (!map) {
// eslint-disable-next-line react-hooks/exhaustive-deps
map = new Map({
layers: [
new TileLayer({
source: new OSM(),
})
],
target: 'map',
view: new View({
center: [0, 0],
zoom: 1,
}),
});
}
const myOverlays = createOverlays();
addClickListener(myOverlays);
map.setView(new View({
center: fromLonLat([inputProps.center.Longitude,
inputProps.center.Latitude]),
zoom: 12,
}));
}, []);ini ‘GsMap‘ Komponen diinisialisasi sebagai InputProps Berisi data lokasi pusat dan pom bensin. Properti komponen didefinisikan, dan ‘useEffect(…)‘gunakan’ untuk membuat peta satu kaliOSM()'(OpenStreetMap) ‘TileLayer(…)‘ dan atur nilai pusat dan skala awal.lalu SPBU overlays Dan clicklisteners dibuat. Peta memiliki ‘baru’View‘ Koordinat dan faktor penskalaan dari properti yang disuntikkan.
Pin dan overlay untuk peta dibuat dalam fungsi berikut:
function createOverlays(): Overlay[] {
return inputProps.gsValues.map((gsValue, index) => {
const element = document.createElement('div');
element.id = nanoid();
element.innerHTML = `${gsValue.location}<br/>E5: ${gsValue.e5}<br/>E10:
${gsValue.e10}<br/>Diesel: ${gsValue.diesel}`;
const overlay = new Overlay({
element: element,
offset: [-5, 0],
positioning: 'bottom-center',
className: 'ol-tooltip-measure ol-tooltip .ol-tooltip-static'
});
overlay.setPosition(fromLonLat([gsValue.longitude, gsValue.latitude]));
const myStyle = element?.style;
if (!!myStyle) {
myStyle.display = 'block';
}
//map.addOverlay(overlay);
addPins(gsValue, element, index);
return overlay;
});
}
function addPins(gsValue: GsValue, element: HTMLDivElement, index: number) {
const iconFeature = new Feature({
geometry: new Point(fromLonLat([gsValue.longitude, gsValue.latitude])),
ttId: element.id,
ttIndex: index
});
const iconStyle = new Style({
image: new Icon({
anchor: [20, 20],
anchorXUnits: 'pixels',
anchorYUnits: 'pixels',
src: '/public/assets/map-pin.png',
}),
});
iconFeature.setStyle(iconStyle);
const vectorSource = new VectorSource({
features: [iconFeature],
});
const vectorLayer = new VectorLayer({
source: vectorSource,
});
map.addLayer(vectorLayer);
}ini ‘createOverlays()‘Peta fungsi’inputProps‘ di sebuah ‘Overlay[]‘.Pertama, elemen div overlay dibuat dengan ‘ uniknanoid()‘. ini ‘innerHTML‘ berisi teks overlay. Kemudian’Overlay(…)‘ Dibuat dengan kelas elemen, offset, pemosisian, dan gaya.Posisi overlay diatur dengan bantuan ‘fromLonLat(…)‘ fungsi dari OpenLayers. tampilan diatur, dan fungsi ‘addPins(…)‘ disebut.
Fungsi ‘addPins(…)‘ Buat fitur dengan ‘geometry‘ dari ‘Point(…)‘Untuk posisi, a’ttId‘ Dan ‘element.id‘ untuk pemetaan dan ‘ttIndex‘ untuk identifikasi. ini ‘Style(…)‘ dibuat untuk menunjukkan pin untuk ‘src‘Properti yang ditentukan’anchor‘ mengimbangi. ini ‘Feature‘ mendapatkan ‘Style‘ meletakkan. yang baru’VectorLayer‘ Dan ‘VectorSource‘ Termasuk ‘Feature‘ Ditambahkan ke peta sebagai layer baru untuk menampilkan pushpin dengan overlay jika diklik.
Fungsi ‘addClickListener(…)‘ Buat pendengar untuk pin:
function addClickListener(myOverlays: Overlay[]) {
map.on('click', (event: MapBrowserEvent<UIEvent>) => {
const feature = map.forEachFeatureAtPixel(event.pixel, (feature) => {
return feature;
});
if (!!currentOverlay) {
map.removeOverlay(currentOverlay);
// eslint-disable-next-line react-hooks/exhaustive-deps
currentOverlay = null;
}
if (!!feature?.get('ttIndex')) {
// eslint-disable-next-line react-hooks/exhaustive-deps
currentOverlay = myOverlays[feature?.get('ttIndex')];
map.addOverlay(currentOverlay as Overlay);
}
});
}
return (<div className={myStyle.MyStyle}>
<div id="map" className={myStyle.gsMap}></div>
</div>);ini ‘addClickListener(…)‘ Fungsi menempatkan ‘click‘ Pendengar untuk menangani acara di peta. Ini memeriksa apakah suatu lokasi di peta memiliki fitur yang terdaftar dan mengembalikannya. Kemudian’currentOverlay‘ properti diperiksa dan dihapus dari peta dan disetel ke ‘null‘ untuk memastikan bahwa hanya satu overlay yang ditampilkan setiap saat. Kemudian periksa apakah fungsinya ada dan memiliki ‘ttIndex‘. jika ini benar’ttIndex‘ untuk membaca dari ‘ overlaymyOverlays‘ larik dan atur ‘currentOverlay‘ Properti. akhirnya,’currentOverlay‘ ditambahkan ke peta untuk menampilkannya.
Peta ditampilkan di ‘kembali’<div id=”map”>…‘ Sambungkan ke peta menggunakan atribut id.
Kesimpulannya
Pustaka OpenLayers memudahkan tampilan peta. Juga mudah untuk mengklik untuk menambahkan pin dan overlay.ini OpenStreetMap Ubin Jerman berkualitas tinggi dan siap pakai. Menggunakan OpenLayers (dengan pengetikan berkualitas tinggi TypeScript) membuat pengembangan jauh lebih cepat. Di wilayah yang didukung dengan baik, OpenLayers dengan OpenStreetMap dapat menjadi alternatif yang mudah digunakan untuk penyedia peta komersial.
rencana pengembangan website
metode pengembangan website
jelaskan beberapa rencana untuk pengembangan website, proses pengembangan website, kekuatan dan kelemahan bisnis pengembangan website
, jasa pengembangan website, tahap pengembangan website, biaya pengembangan website
#Tambahkan #peta #pom #bensin
