5 个快速构建地图应用程序的开源工具

2024-05-10 GIS 129
A⁺AA⁻

5 个快速构建地图应用程序的开源工具

地理信息系统 (GIS) 近年来得到了广泛的关注。事实上,在160多年前,地理空间数据就已确定了1854年致命的伦敦霍乱爆发的源头,并在其中发挥了重要的作用。约翰·斯诺医生是当地的一名医生,他冒着生命危险,对霍乱的起因、来源和传播途径进行了跟踪式调查和研究,证明霍乱不是通过空气,而是带病毒患者的排泄物和粪便,经下水道溢出污染了饮用水传播的,并绘制了霍乱病例密度图。这个观点与当时的传统观念完全不同,正是他凭着正义感、敬业和执着,拯救了众多英国人的生命。

今天,本文将介绍5个现代开源地图工具,帮助大家使用 Reaction 和其他开源工具构建 GIS 应用程序。

构建 GIS 应用程序之前需要了解的5个工具

首先我们需要了解一下可以让地图绘制工作变得更容易的5个基本工具。

微信号:MeetyXiao
添加微信好友, 获取更多信息
复制微信号

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]
    }
}

5 个快速构建地图应用程序的开源工具

3. Leaflet

Leaflet 是用于移动端交互地图的主要开源 JavaScript 库。 *** 库的大小为38k左右,但是拥有大部分开发者需要的全部地图功能。Leaflet 保持着简单、性能和实用性的设计思想。它可以在所有主要的桌面和移动端平台上高效的运转,可以扩展插件,它有一个易用和文档清晰的 API,还有一个简单、易读的源代码,它使地理信息系统大众化,并将地理地图引入 *** 应用程序。该库由 Vladimir Agafonkin 于2012年创建,自此后已成为用于构建地图的事实上的开源 JavaScript 库,API 很容易使用。

5 个快速构建地图应用程序的开源工具

美国加利福尼亚州使用 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

5 个快速构建地图应用程序的开源工具

在浏览器中验证该应用程序是否在 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" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" 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;

浏览器现在应该显示布拉格地图, 可以使用鼠标缩放和平移地图。

5 个快速构建地图应用程序的开源工具

更多详情请在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>
   );
 }

5 个快速构建地图应用程序的开源工具

请查阅关于 codesandbox.io 的完整项目。

最后一步

如果检查从 Overpass 返回的 *** ON,您将会看到大量的信息,例如每个城堡的物理地址,捷克语中的名称以及 *** 文章等。您可以添加一个弹出窗口,以便在用户单击城堡时显示其他详细信息。

此外,该查询是硬编码的,用于搜索布拉格市中心半径10公里范围内的城堡。您可以改进城堡组件和查询以处理任意纬度和经度,从而有效地将应用程序转变为全球城堡浏览器!

来源链接:https://www.osgeo.cn/post/15c36

本站声明:网站内容来源于 *** ,如有侵权,请联系我们,我们将及时处理。

客服微信号码

客服微信号码

客服微信号码

客服微信号码

留言咨询
提交留言

您将免费获得

  • 全面诊断

    您将获得专家对您公司申请资质所需条件的全面诊断服务,我们不同于传统代办公司,仅是提供一些通用的,浅显的建议

  • 找出疏忽点

    我们在了解您公司的基本情况之后,将挖掘出您公司目前不利于资质申请的疏忽点,还将详细说明您在申请资质时应当改善的确切的事项。

  • 分析需求

    我们通过丰富的从业经验,结合目前的实际情况,确认好符合您实际经营情况的资质需求。

  • 定制方案与报价

    对您的需求深入了解后,将结合您公司目前的情况,我们将为您量身定制一份资质代办方案及报价单。

获取方案

×
请设置您的cookie偏好
欢迎来到资质参谋
我们希望在本网站上使用cookie,以便保障本网站的安全、高效运转及服务优化,有关我们使用cookie的更多信息,请点击查看了解更多。
接收Cookies
决绝Cookies