Webanwendungen haben stark von der Einbeziehung von Karten profitiert und Benutzern wertvolle standortbezogene Informationen bereitgestellt. Karten haben unsere Interaktion mit der Welt verändert, von der Navigation durch unbekannte Orte bis hin zur Entdeckung nahegelegener Restaurants. Daher erfreut sich die Integration von Karten in Websites in letzter Zeit immer größerer Beliebtheit. Dennoch kann die Gestaltung von Karten, die sowohl funktional als auch benutzerfreundlich sind, eine Herausforderung darstellen, insbesondere für diejenigen, denen es an Erfahrung in diesem Bereich mangelt. In diesem Artikel gebe ich nützliche Tipps zum Erstellen effektiver Karten in Ihrem Browser.
Lassen Sie uns über Technologien diskutieren. Bei der Arbeit mit Karten verwenden wir normalerweise drei Ebenen:
Rendern der Benutzeroberfläche, einschließlich Schaltflächen und Formularen. In unserem Stack übernimmt React diese Rolle;
Rendern der Karte und Ermöglichen der Benutzerinteraktion. Wir verwenden hierfür Mapbox;
Abrufen von Daten vom Server, z. B. Informationen zu Markierungen oder Polygonen. Zum Abrufen von Daten verwenden wir die integrierte Abruffunktion des Browsers.
Sehen wir uns jeden Punkt an, um ein besseres Verständnis unseres Technologie-Stacks bei der Arbeit mit Karten zu erlangen.
Der
Da das Ändern von Elementen auf einer Seite für einen Browser der teuerste Vorgang ist, ist es wichtig, ihn so effizient wie möglich durchzuführen. Um dieses Problem zu lösen, haben Facebook-Ingenieure die React-Bibliothek entwickelt, die schnelle und unkomplizierte Elementänderungen auf einer Seite ermöglicht. React sorgt nicht nur für schnelle Zustandsänderungen auf einer Seite, sondern ermöglicht uns auch, dies deklarativ zu tun, ohne direkt mit DOM-Elementen zu arbeiten. Stattdessen verwenden wir normalerweise eine Abstraktion
// It's our state. Is the user our friend or not? // false by default const [isFriend, setIsFriend] = useState(false) // Depending on the state, we show the text on the button const buttonText = isFriend ? 'Your my Friend' : 'Add as Friend' // There is JSX, syntax for UI // In this case, we display a button, when clicked, we change the state return ( <button onClick={() => setIsFriend(true)}>{buttonText}</button> )
Es ist möglich, Komponenten mit gewöhnlichen DOM-Elementen wie Formularen, Schaltflächen und Eingaben am unteren Ende der Hierarchie zu verschachteln. Durch die Zusammenstellung dieser einfachen Elemente können wir komplexere Elemente erstellen, beispielsweise ein vollständiges Formular:
const Form = () => ( <form> <input name="Email"/> <input name="Password"/> </form> ) const App = () => ( <main> <h1>My form!</h1> <Form /> </main> )
Wie unterstützt uns React im Kontext von Karten? Da die Karte auf der Seite interaktiv ist, ähnlich einer Schaltfläche oder einem Formular, ist es unser Ziel, ihre Darstellung und Interaktion durch Ereignisse wie Klicks auf der Karte zu optimieren. React kann dabei helfen, diese Optimierung zu erreichen. Hier ist ein Beispiel dafür, wie es funktioniert:
// Use React to render the map with different event handlers // and render markers return ( <BaseMap onInitMap={() => console.log('I am alive!')} onClickMap={() => console.log('Click!')} onDestroyMap={() => console.log('Oh no!')} > <ClustersMarkers /> <PostsMarkers /> <ListingsMarkers /> </BaseMap> )
Bei der Arbeit mit React ist es wichtig zu bedenken, dass es eine effiziente Manipulation von Elementen auf der Seite, schnelle Änderungen und die Interaktion mit ihnen über Ereignisse ermöglicht. Dies wird durch eine HTML-ähnliche Abstraktion erreicht, die es einfach macht, komplexe Komponenten aus einfacheren zu erstellen.
Lassen Sie uns nun die Karte selbst besprechen. Das Erstellen und Verwenden von Karten kann eine Herausforderung sein, und nur wenige Produktunternehmen können Karten von Grund auf entwerfen. Typischerweise verlassen sich die meisten Menschen auf vorgefertigte Bibliotheken mit einer benutzerfreundlichen API, die sich bewährt hat.
Es stehen zahlreiche Anbieter dynamischer Karten zur Verfügung, darunter Google Maps, Leaflet, Bing Maps, Mapbox und mehr. Wir werden uns jedoch darauf konzentrieren
Mapbox-Angebote
Darüber hinaus bietet Mapbox eine
Mapbox bietet eine Vielzahl von
Schauen wir uns die Mapbox-Karten noch einmal an. Was bedeutet das
Es initialisiert die Karte in einem HTML-Element auf der Seite;
Es lädt und rendert Bilder, aus denen die Karte besteht.
Es zeichnet zusätzliche Elemente, wie z. B. Markierungen, unter Verwendung von GeoJson als Eingabedaten;
Es generiert Ereignisse wie Klicks oder Zoomänderungen, die verarbeitet werden können.
Schauen wir uns jeden dieser Artikel genauer an.
Mapbox ist auf die Kartendarstellung mithilfe von Kacheln spezialisiert. Kacheln sind kleine quadratische Bilder, die die größere Karte bilden. Die Standardgröße einer Kachel beträgt 512 x 512 Pixel und kann beides sein
Nur damit Sie es wissen: Mit Mapbox Studio können wir die spezifischen Daten auswählen, die wir in die Kartenkacheln aufnehmen möchten. Diese Plättchen werden dann auf a gelegt
<canvas width="100" height="100" />
Mapbox übernimmt das Laden, Einfügen und Aktualisieren von Kacheln. Wir müssen lediglich angeben, wo die Karte angezeigt werden soll, und die Anfangsbedingungen angeben, z. B. die Zoomstufe oder die Koordinaten der Karte. Um Mapbox verwenden zu können, benötigen Sie eine
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; const map = new mapboxgl.Map({ container: 'map', // we can use an Id or an element style: 'mapbox://styles/mapbox/streets-v11', // URL for styles center: [-74.5, 40], // initial coordinates [lng, lat] zoom: 9, // initial zoom });
Danach erhalten wir eine Karte auf der Seite in einem Element mit der ID „map“.
Um den Benutzern mehr Informationen auf der Karte zu bieten, zeigen wir häufig den Standort einer bestimmten Einrichtung oder die Grenzen eines bestimmten Gebiets an. Um dies zu erreichen, verwenden wir ein bestimmtes Datenformat namens
GeoJSON ist das Standardformat zum Speichern geografischer Strukturen auf Karten. Es kann verschiedene primitive Typen speichern, die geografische Objekte wie Adressen, Orte, Straßen, Autobahnen, Grenzen, Länder, Staaten und Kombinationen davon beschreiben, die als Multipart bezeichnet werden. GeoJSON wurde 2008 eingeführt und wird wie folgt dargestellt:
{ "type": "Feature", // also can be FeatureCollection, it's collection of Feature "geometry": { "type": "Point", // also can be LineString, Polygon, MultiPolygon "coordinates": [125.6, 10.1] // for other types you can use Array with coordinates }, "properties": { // it's metadata, we can you that to show something on the map "name": "Dinagat Islands" } }
Lassen Sie uns über das in Mapbox verwendete Koordinatensystem sprechen. Standardmäßig verwendet Mapboxmap.setProjection
verwenden.
Jetzt besprechen wir, wie GeoJSON auf der Karte angezeigt wird. Mapbox bietet zwei Entitäten, die für uns hilfreich sein werden:
Um Polygone oder Markierungen auf der Karte anzuzeigen, müssen wir die Daten im GeoJson-Format vom Server abrufen. Dann erstellen wir eine Quelle, geben die Daten ein und verbinden sie mit der erforderlichen Ebene.
const geoJsonFeature = { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [ [-67.13734, 45.13745], [-66.96466, 44.8097], [-68.03252, 44.3252], [-67.13734, 45.13745] ] } } // Create source with our data map.addSource('ourSource', { 'type': 'geojson', 'data': geoJsonFeature }); // Add layer for background map.addLayer({ 'id': 'background', 'type': 'fill', 'source': 'ourSource', // название нашего source 'layout': {}, 'paint': { 'fill-color': '#0080ff', 'fill-opacity': 0.5 } }); // Add layer for border map.addLayer({ 'id': 'border', 'type': 'line', 'source': 'ourSource', 'layout': {}, 'paint': { 'line-color': '#000', 'line-width': 3 } });
Nachdem wir diesen Code ausgeführt haben, erhalten wir das Ergebnis:
Weitere Informationen zu diesem Thema finden Sie unteron
Methode mit dem gewünschten Ereignistyp auf, ähnlich wie wir mit DOM-Elementen arbeiten.
map.on('mousemove', (e) => { console.log(JSON.stringify(e.point)); }); // Result: {"x":330,"y":49}
Zusammenfassend: Woran müssen wir uns erinnern? Mit Mapbox können wir eine Karte anzeigen, unsere Daten darauf zeichnen und Kartenereignisse verarbeiten. Gleichzeitig übernimmt Mapbox das Laden und Anzeigen von Bildern (Kacheln).
Ein Wort dazu
Was ist zu beachten? Wir rufen Daten vom Server ab, und dafür gibt es viele Bibliotheken, aber wir werden Fetch verwenden. Als nächstes werden wir uns ansehen, wie wir dies konkret bei der Arbeit mit Karten tun, da es hier Nuancen gibt.
Sehen wir uns nun an, wie die oben beschriebenen Technologien zusammenarbeiten. Zuerst rufen wir mit fetch die Daten zur Darstellung des Polygons ab. Dann deklarieren wir die Initialisierung der Karte und fügen nach dem Laden das Polygon zur Karte hinzu.
Ein funktionierendes Beispiel finden Sie auch unter
const useFetch = () => { /* Our data { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [ [ [-67.13734, 45.13745], [-68.03252, 44.3252], [-68.90478, 47.18479], [-67.13734, 45.13745], ] ] } } */ const [data, setData] = useState(null) useEffect(() => { fetch('https://our-api.com/polygon') .then(response => response.json()) .then(setData) .catch(e => { console.error(e) }) }, [setData]) return { data } } const BaseMap = () => { // Use the hook to fetch data const { data } = useFetch(GET_REGION); // Map instance const map = useRef(null); // DOM element const mapContainer = useRef(null); // Main logic - init the map and add the event useEffect(() => { if (map.current) { return; // initialize map only once } mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; map.current = new mapboxgl.Map({ container: mapContainer.current, style: 'mapbox://styles/mapbox/light-v10', // style URL (it's Mapbox's core style) center: [-68.137343, 45.137451], // starting position zoom: 5 // starting zoom }); // Handle event map.on('load', () => { const sourceId = 'source-region' // Add a data source containing GeoJSON data map.addSource(sourceId, { 'type': 'geojson', 'data': data.region // our data from Apollo }); // Add a new layer to visualize the polygon map.addLayer({ 'id': 'background', 'type': 'fill', 'source': sourceId, // reference the data source 'paint': { 'fill-color': '#0080ff', // blue color fill 'fill-opacity': 0.5 } }); // Add a black outline around the polygon map.addLayer({ 'id': 'outline', 'type': 'line', 'source': sourceId, 'paint': { 'line-color': '#000', 'line-width': 3 } }); }); }); return <div ref={mapContainer} />; }
Wir haben uns den Technologie-Stack angesehen, der unserer zukünftigen Architektur zugrunde liegt. Im folgenden Artikel besprechen wir die Prinzipien, die beim Entwurf einer Kartenarchitektur helfen, wie man eine möglichst geringe Kopplung und hohe Kohäsion von Modulen erreicht und wie man ein skalierbares Kartensystem verwaltet und entwickelt.
Vielen Dank für eure Aufmerksamkeit! Ich wünsche ihnen einen wunderbaren Tag.