leaflet.js
eegeo.js是基于流行的映射库Leaflet构建的开源 3D地图API。
有许多贴图库可让您嵌入或构建简单的2D贴图。 尤其是Google Maps , Bing Maps , HERE , Mapbox和OpenStreetMap 。 流行的映射抽象库(例如OpenLayers和Leaflet)还允许您更改地图的“基础层”,而无需更改应用程序逻辑。
随着Google Earth API的使用下降到NPAPI安全性的弃用 ,限制了3D地图API的选择。 确实存在替代方案,例如流行的Cesium库。 eegeo.js是另一种,它提供了从空间到室内地图的动态,真正无缝的3D世界地图。 在浏览器中使用WebGL。
入门
在本文中,我将向您展示嵌入精美的伦敦3D地图并使用Transport for London API添加一些基本功能有多么简单。
剧透:3D地图就像使用2D地图一样简单。
免责声明:我是eeGeo的SVP Software Development的高级副总裁,我负责eegeo.js的开发。
关于如何使用Leaflet有很多教程。 eeGeo.js是有意识地基于Leaflet构建的,因此已经熟悉Leaflet的开发人员可以立即启动并运行。 我彻底推荐了传单示例和文档 。
本文将介绍基本HTML,CSS,JavaScript和简单的映射概念。
您需要什么
本文将介绍一些关键组件:
- 传单( 文档 , 示例 )
- eeGeo.js( 文档 , 示例 )
- 伦敦运输(TfL)API
- Python,或用于上传HTML,CSS和JavaScript的位置
显示伦敦的2D地图
首先,让我们使用Leafet和Open Street Map创建伦敦的2D地图。 传单非常简单。 您只需要一点HTML来设置页面,一个<div>
来包含您的地图,以及几行JavaScript来创建和设置初始位置。
创建HTML
让我们用以下标记创建一个HTML文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Building Gorgeous 3D maps with eegeo.js and Leaflet</title>
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
</body>
</html>
包括传单
要包含Leaflet,就像添加Leaflet JavaScript库和CSS一样简单。 将它们包括在<head>
标记内:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
添加传单JavaScript
JavaScript的以下几行初始化Leaflet,并将OpenStreetMap用作图块层。 您可以将其添加为外部JavaScript文件,或者为简单起见,可以添加到<div id="map"/>
下面的<script></script>
块中:
var map = L.map('map',