地理信息系統 (GIS) 近年來得到了廣泛的關注。事實上，在160多年前，地理空間數據就已確定了1854年致命的倫敦霍亂爆發的源頭，并在其中發揮了重要的作用。約翰·斯諾醫生是當地的一名醫生，他冒著生命危險，對霍亂的起因、來源和傳播途徑進行了跟蹤式調查和研究，證明霍亂不是通過空氣，而是帶病毒患者的排泄物和糞便，經下水道溢出污染了飲用水傳播的，并繪制了霍亂病例密度圖。這個觀點與當時的傳統觀念完全不同，正是他憑著正義感、敬業和執著，拯救了眾多英國人的生命。
今天，本文將介紹5個現代開源地圖工具，幫助大家使用 Reaction 和其他開源工具構建 GIS 應用程序。
構建 GIS 應用程序之前需要了解的5個工具
首先我們需要了解一下可以讓地圖繪制工作變得更容易的5個基本工具。
添加微信好友, 獲取更多信息
復制微信號
1.創建 Reaction App
如果您剛剛接觸 JavaScript 和 Reaction 系統，那么首先需要在 React 中創建 “Hello World” 應用程序，在編寫之一行 JavaScript 代碼之前，需要組裝幾個庫和配置。Create React App 應用程序在此過程中起到了決定性的作用，Facebook React 團隊開發的命令行工具采用 “batteries-included” *** ，通過包含所有必要的庫、啟動程序文件甚至單元測試框架，幫助快速創建功能齊全的 React 應用程序。
2.Geo *** ON.io
Geo *** ON 是一種可讀的格式，用于描述和共享 GIS 數據，并受到許多地理空間庫和應用程序的廣泛支持，Geo *** ON.io 站點是 Geo *** ON 數據的在線沙箱。
例如，可以這樣描述比薩斜塔的位置：
{
"type": "Feature",
"properties": {
"description": "Leaning Tower of Pisa"
},
"geometry": {
"type": "Point",
"coordinates": [10.39659, 43.72305]
}
}
3. Leaflet
Leaflet 是用于移動端交互地圖的主要開源 JavaScript 庫。 *** 庫的大小為38k左右，但是擁有大部分開發者需要的全部地圖功能。Leaflet 保持著簡單、性能和實用性的設計思想。它可以在所有主要的桌面和移動端平臺上高效的運轉，可以擴展插件，它有一個易用和文檔清晰的 API，還有一個簡單、易讀的源代碼，它使地理信息系統大眾化，并將地理地圖引入 *** 應用程序。該庫由 Vladimir Agafonkin 于2012年創建，自此后已成為用于構建地圖的事實上的開源 JavaScript 庫，API 很容易使用。
美國加利福尼亞州使用 leaflet 和熱圖插件構建的戶外攀巖墻熱圖
4.Turf.js
Turf.js 是一個用于空間分析的 JavaScript 庫。它包括傳統的空間操作，用于創建 Geo *** ON 數據的幫助函數，以及數據分類和統計工具。 Turfjs 可以作為客戶端插件添加到您的網站，也可以使用 Node.js 運行 Turf 服務器端。
Turf.js 可以執行常見的地理空間功能，例如測試點是否位于多邊形內，或者進行更復雜的 k- 均值計算，進而為熱圖準備數據。例如，以下公式將計算舊金山和東京成田機場之間的距離：
const fromSFO = turf.point([-122.3790, 37.6218]);
const toNRT = turf.point([140.3731, 35.7709]);
const options = {units: 'miles'};
var distance = turf.distance(fromSFO, toNRT, options);
5.OpenStreetMap
OpenStreetMap (簡稱 O *** ，中文是公開地圖) 是一個網上地圖協作計劃，目標是創造一個內容自由且能讓所有人編輯的世界地圖。OpenStreetMap 由史蒂夫·科斯特于2004年創立，是全球更大的協同地圖項目。與 *** 類似，該平臺通過添加和標記當地的道路、高速公路、建筑、河流等，很容易的繪制出我們周圍的世界地圖。這些地圖數據在開放許可下可用。此教程應用程序能夠直接連接到 OpenStreetMap 的 REST API 服務器以獲取布拉格的所有城堡。商業用戶可以下載 “weekly planet file”，這是它整個數據庫的導出，數據文件大約 40GB 。
Overpass-turbo
Overpass-turbo 是一個交互式站點，用于嘗試對 OpenStreetMap 數據庫進行查詢。如要查看布拉格市中心10公里范圍內的所有城堡，請輸入 “Praha” 查詢，然后單擊運行。請注意，地圖不會自動縮放到我們的搜索結果，必須在搜索框中輸入布拉格才能使地圖居中。
[out:json];
node[name="Praha"];
(
way[historic=castle](around:10000);
relation[historic=castle](around:10000);
);
out body;
>;
out skel qt;
構建GIS應用程序
要了解如何構建 GIS 應用程序，那么首先讓我們創建一個城堡探索器應用程序。
1.使用 Create React App 創建應用程序
按照 Create React App 存儲庫中的說明創建工作的 React 應用程序。
# mkdir react-map
# cd react-map
# create-react-app.
這將生成一個新的項目結構。請注意以下兩個文件，因為需要在下一步中進行編輯。
- Public/index.html：應用程序的主索引.html；
- SRC/App.js：React 組件的入口點
使用以下命令啟動應程序：
# npm start
在瀏覽器中驗證該應用程序是否在 http://localhost:3000 上運行。
2.設置 Leaflet 庫和 React 包裝器
接下來，在項目中引入 Leaflet 和 React-Leaflet。后者是一個包裝庫，令 Leaflet 可以作為 React 組件工作。
使用以下命令安裝 Leaflet 和 React-Leaflet：
#npm install --save react-leaflet leaflet
在項目中找到 public/index.html 并添加指向 leaflet.cssde 的主鏈接以及定位 CSS div。地圖將在此 div 內呈現。
<head>
...
<link rel="stylesheet" integrity="sha512-Rk *** 5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="/>
<style>
.leaflet-container {
height: 650px;
width: 800px;
}
</style>
...
</head>
3.創建之一個地圖組件
在 Leaflet 中 *** 地圖的 *** 在概念上類似于在 GIMP 或 Photoshop 中使用圖層的方式。要顯示自定義數據，例如興??趣點標記，請將其添加到 Leaflet 圖層，然后將該圖層添加到 Leaflet 地圖。
render() {
return (
<Map >
<TileLayer url="tile server url"/>
<YourDataLayerComponent/>
</Map>
);
}
創建一個新的地圖組件并將地圖以捷克共和國布拉格為中心。通過編輯 MyMap.js 在市中心放置一個標記，如下所示：
src/MyMap.js
import React from "react";
import { Map, TileLayer, Marker } from "react-leaflet";
export default class MyMap extends React.Component {
constructor(props) {
super(props);
this.state = {
lat: 50.0893,
lng: 14.4284,
zoom: 12
};
}
render() {
const position = [this.state.lat, this.state.lng];
return (
<Map center={position} zoom={this.state.zoom}>
<TileLayer
attribution="? <a href="http://o *** .org/copyright">OpenStreetMap</a> contributors"
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[this.state.lat, this.state.lng]} />
</Map>
);
}
}
現在可以將 MyMap 組件連接到項目的入口點組件，只需將 App.js 內容替換為以下內容：
src/App.js
import React, { Component } from "react";
import MyMap from "./MyMap";
class App extends Component {
render() {
return <MyMap />;
}
}
export default App;
瀏覽器現在應該顯示布拉格地圖, 可以使用鼠標縮放和平移地圖。
更多詳情請在CodePen上查看：https://codepen.io/openbeta/pen/QmdvqP。
4.在地圖上顯示城堡
在此步驟中，將提取 historic=castle 在 OpenStreetMap 中標記的建筑結構, 并將其顯示在地圖上, 可以使用以下命令 query-overpass 獲取從 OpenStreetMap 的 API 服務器獲取數據的庫，
#npm i --save query-overpass
在 Castles.js 中為城堡組件創建一個新文件：
src/Castles.js
import React from "react";
import { Geo *** ON, Marker } from "react-leaflet";
import * as overpass from "query-overpass";
export default class Castles extends React.Component {
constructor(props) {
super(props);
this.state = {
geojson: undefined
};
}
componentDidMount() {
const query = `[out:json];(way[historic=castle](around:10000, 50.0874654,14.4212535);\
relation[historic=castle](around:10000, 50.0874654,14.4212535););\
out body;>;out skel qt;`;
const options = {
flatProperties: true
};
overpass(query, this.dataHandler, options);
}
dataHandler = (error, o *** Data) => {
if (!error && o *** Data.features !== undefined) {
this.setState({ geojson: o *** Data });
}
};
render() {
return this.state.geojson ? <Geo *** ON data={this.state.geojson} /> : null;
}
}
在 MyMap.js 中將城堡組件添加到地圖中：
src/MyMap.js
import Castles from "./Castles";
...
render() {
const position = [this.state.lat, this.state.lng];
return (
<Map center={position} zoom={this.state.zoom}>
<TileLayer
attribution="? <a href="http://o *** .org/copyright">OpenStreetMap</a> contributors"
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[this.state.lat, this.state.lng]} />
<Castles />
</Map>
);
}
請查閱關于 codesandbox.io 的完整項目。
最后一步
如果檢查從 Overpass 返回的 *** ON，您將會看到大量的信息，例如每個城堡的物理地址，捷克語中的名稱以及 *** 文章等。您可以添加一個彈出窗口，以便在用戶單擊城堡時顯示其他詳細信息。
此外，該查詢是硬編碼的，用于搜索布拉格市中心半徑10公里范圍內的城堡。您可以改進城堡組件和查詢以處理任意緯度和經度，從而有效地將應用程序轉變為全球城堡瀏覽器！
來源鏈接：https://www.osgeo.cn/post/15c36
本站聲明:網站內容來源于 *** ,如有侵權,請聯系我們,我們將及時處理。
