使用JavaScript创建地理空间和高级地图

地理空间信息系统（GIS）是制图学和信息技术领域，与地理和空间数据的存储，处理，分析和表示有关。 您可能最熟悉GIS服务，这些服务会生成动态的二维瓷砖地图，自MapQuest以来，该地图在网络上就很突出。

直到最近，要在2D地图之外开发地理空间应用程序都需要全面的GIS服务，例如ArcGIS，Nokia Here或Google Maps。 这些API功能强大，但它们也很昂贵，学习繁琐并且将地图开发人员锁定在一个解决方案上。 幸运的是，现在有大量有用的开源JavaScript工具可用于处理高级制图和地理空间分析。

在本文中，我将研究如何使用JavaScript和HTML来实现GIS技术，重点是用于特定任务的轻量级工具。 我将介绍的许多工具都基于诸如Mapbox，CloudMade和MapZen之类的服务，但是这些都是模块化的库，可以作为包添加到Node.js或在Web浏览器中进行分析。

注意 ：最好直接在CodePen上查看本文中嵌入的CodePen示例。

几何和3D

距离与测量

具有小型，集中的库来执行距离测量和转换操作（例如查找地理围栏的面积或将英里转换为公里）特别有用。 以下库可与代表地理空间的GeoJSON格式的对象一起使用。

• Geolib提供了两个纬度-纬度坐标之间的距离（和估计的时间）计算。 Geolib的一个方便功能是按距离排序，可按距离对列表或数组进行排序。 该库还支持高程。
• 下一部分将介绍Turf.js ，它还提供了一个距离函数来计算两点之间的大圆距离 。 另外，Turf.js计算面积，沿路径的距离以及点之间的中点。
• Sylvester是JavaScript中用于几何，向量和矩阵数学的库。 当线和平面的基本测量还不够时，此库很有用。

3D

尽管上述库对于2D地理投影效果很好，但三维GIS是一个令人兴奋且广阔的领域，这很自然，因为我们生活在3D空间中。 幸运的是，WebGL和HTML5画布也为Web开发人员打开了新的3D技术 。

• Three.js是一个用于几何对象和网格对象的JavaScript库。 Three.js的Three GeoJSON扩展提供了一种在3D平面和球体上呈现GeoJSON对象的简单方法。
• OSM建筑物项目允许地图设计者将建筑物表示为2D地图上的3D对象。 该项目使用OpenLayers和Leaflet。 这可以发挥很大的作用，例如Tom Holderness 用OSM Buildings绘制了伦敦地图 。

这是一个如何在3D对象上显示GeoJSON功能的示例：

在CodePen上使用 SitePoint（ @SitePoint ）的Three.js查看Pen 3D Map Sphere 。

您还可以查看Byron Houwen 在WebGL和JavaScript上的文章 ，该文章展示了如何使用Three.js创建地球的地形图。

地理特征和点

GIS中的许多工作涉及处理点，形状，符号和其他特征。 最基本的任务是向地图添加形状或点要素。 完善的Leaflet库和新手Turf.js使此操作变得更加容易，并允许用户使用要素集合。

• 对于在网络和移动设备上显示点，符号以及所有类型的功能， Leaflet仅仅是最佳选择。 该库支持矩形 ， 圆形 ， 多边形 ， 点 ， 自定义标记和各种图层。 它可以快速执行并处理多种格式。 该库还具有丰富的第三方插件生态系统 。
• Turf.js是Mapbox提供的用于地理空间分析的库。 Turf.js的一大优点是，您可以创建一个功能集，然后在使用Leaflet呈现数据之前对它们进行空间分析，修改（地理处理）并简化它们。 与Geolib一样，Turf.js将计算路径长度，要素中心，要素内部的点。
• 简单地图D3只需定义GeoJSON对象和数据属性即可创建合奏和其他符号体系。

以下是使用Turf.js计算加利福尼亚州所有县的人口密度，然后将结果显示为Leaflet choropleth地图的示例。

请在CodePen上按SitePoint（ @SitePoint ）查看各县的笔人口密度 。

Turf.js中的一个关键概念是诸如多边形之类的地理要素的集合 。 这些功能通常是您要分析，处理或显示在地图上的GeoJSON功能。 您从带有一系列县要素的GeoJSON对象开始。 然后，从该对象创建一个集合：

collection = turf.featurecollection(counties.features);

使用此集合，您可以执行许多有用的操作。 您可以使用连接，相交，插值和排除来变换一个或多个集合。 您可以计算描述性统计数据，分类和样本分布。

在人口密度的情况下，您可以计算自然中断（ Jenks优化 ）或人口密度的分位数分类：

breaks = turf.jenks(collection, "pop_density", 8);

计算了人口密度（人口除以面积）值，并将其存储为每个县的属性，但是该操作适用于任何要素属性。

使用点

点是一种特殊的地理特征，代表纬度-经度坐标（及相关数据）。 这些功能通常在Web应用程序中使用，例如在地图上显示附近的一组商家。

Turf.js对点提供了许多不同的操作，包括查找要素中的质心点以及创建包含所有点的矩形或多边形。 您还可以根据点计算统计信息，例如基于每个点的数据值的平均值。

Leaflet.js的扩展也可以在处理大量问题时提供帮助：

• Leaflet的标记群集非常适合可视化Turf或较大点集的结果。 该库本身可以处理数百个点，但是有诸如Marker Cluster和Mask Canvas之类的插件可以处理数十万个点。
• Leaflet的Heat根据点数据创建动态热图。 它甚至适用于具有数千个点的数据集。

地理编码和路由

路由，地理编码和反向地理编码位置需要在线服务，例如Google或Nokia Here，但是最近的库使实现更加容易。 也有合适的开源替代方案。

HTML5 Geolocation API提供了一种简单的方法来获取设备的GPS位置（具有用户许可）：

navigator.geolocation.getCurrentPosition(function(result){
  // do something with result.coords
);

位置感知的Web应用程序可以将Turf.js空间分析方法用于高级技术，例如对地图要素内部或外部的位置进行地理围栏。 例如，您可以从上述示例中获取结果，并使用turf.inside方法查看该坐标是否在给定邻域的边界内。

• GeoSeach是用于地理编码的Leaflet插件，允许开发人员在ArcGIS，Google和OpenStreetMaps地理编码器之间进行选择。 将控件添加到基本地图后，它将自动使用所选的地理编码服务在地图上显示最佳搜索结果。 该库旨在可扩展到其他第三方服务。
• Geo for Node.js是一个地理编码库，它使用Google的Geocode API进行地理编码和反向地理编码。 它还支持Geohash系统，用于纬度-经度坐标的URL编码。

与地理编码一样，有大量的路由和定向服务，但是它们会花费您很多。 一种可靠的开源替代方案是MapZen的开源路由机器（OSRM）服务。 它为汽车，自行车和行人路线提供免费服务。 Transit Mix巧妙地使用OSRM路由工具在其运输计划工具中创建路线。

空间和网络分析

我已经提到了一些可以使用Turf.js和其他库实现的空间分析方法，但是我只涉及了广阔世界的一小部分。 我创建了一个示例应用程序，该应用程序说明了我介绍的几种技术。

请参阅CodePen上的SitePoint （ @SitePoint ）进行Pen LA的兴趣点分析 。

结论

在本文中，我希望能够对可用于使用JavaScript执行地理空间分析和地理处理的工具进行全面概述。 您已经在项目中使用这些库了吗？ 我错过了吗？ 在评论中让我知道。

如果您想进一步利用JavaScript进行地理空间分析和地理处理，这里有更多资源和实用程序：

• NetworkX和D3.js - Mike Dewars关于D3.js的书包括许多将D3与地图和空间分析结合使用的示例。 一个更有趣的示例是创建纽约地铁的有向图，这是通过使用NetworkX分析MTA的Google Transit规范来完成的。
• Simply.js — Turf使用Vladimir Agafonkin的Simply.js进行形状简化。 该库也可以作为独立的Node.js软件包安装，用于在线或离线处理文件。
• d3 Geo Exploder -Ben Southgate的d3.geo.exploder使您可以将地理特征（geoJSON）转换为其他形状，例如网格或散点图。
• Shp-使用此库将shapefile（和数据文件）转换为GeoJSON
• ToGeoJSON —使用此库可将KML和GPX转换为GeoJSON
• Shp2stl –使用此库可将地理数据转换为可渲染或3D打印的3D模型。
• MetaCRS和Proj4js-使用这些库在坐标系之间转换。

From: https://www.sitepoint.com/javascript-geospatial-advanced-maps/