Leaflet是一种开源的JavaScript 地图库,算是WebGIS中比较主流的地图库,轻量、插件丰富、社区活跃度高,相对来说比较成熟。就在前不久,刚发布了新版本1.3.3。
下面,将介绍如何显示ArcGIS基础底图。
首先,在加载Leaflet的代码和样式,Leaflet.js、leaflet.css;加载Esri Leaflet库: esri-leflet.js。
<!-- lets load Leaflet's .js and .css from CDN-->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!-- Load Esri Leaflet from CDN. it has no .css stylesheet of its own, only .js -->
<script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js"></script>
支持的基础底图
支持ArcGIS Online的基础底图:如Streets(街道图)、Topographic(地形图)、Gray(灰色风格的地图)、DarkGray(深灰色风格的地图)。这几类底图,只需要在定义basemap图层时,指定其名字即可访问得到。
var map = L.map('map', {
center: [28.2, 113.03],
zoom: 8
});
var layer = L.esri.basemapLayer(Streets).addTo(map);
完整的代码如下:
<html>
<head>
<meta charset=utf-8 />
<title>Showing an ArcGIS basemap</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- Load Leaflet from CDN -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js"
integrity="sha512-6BBVttv13OVrrUSoGmy9/aIVHateyIEGFaQxqnzCgXT9LNCAQ1Cxxj43R6Eq0ynydS7a7bLLfmEWwXFiO6lW2g=="
crossorigin=""></script>
<style>
body { margin:0; padding:0; }
#map { position: absolute; top:0; bottom:0; right:0; left:0; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map', {
center: [28.2, 113.03],
zoom: 8
});
var layer = L.esri.basemapLayer('Streets').addTo(map);
</script>
</body>
</html>
最后结果显示如下: