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