Esri Leaflet 第一个例子：加载ArcGIS底图

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/leaflet@1.3.3/dist/leaflet.css" /><script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"></script><!-- Load Esri Leaflet from CDN.  it has no .css stylesheet of its own, only .js --><script src="https://unpkg.com/esri-leaflet@2.2.1/dist/esri-leaflet.js"></script>

支持的基础底图
支持ArcGIS Online的基础底图：如Streets（街道图）、Topographic（地形图）、Gray（灰色风格的地图）、DarkGray（深灰色风格的地图）。这几类底图，只需要在定义basemap图层时，指定其名字即可访问得到。因为在esri-leaflet.js中，已经对其做了定义，包括urlTemplate、options等参数。如果有需要，也可以按照同样的方式定义自己的底图。

var map = L.map('map', {center: [28.2, 113.03],zoom: 8});var layer = L.esri.basemapLayer(Streets).addTo(map);

esri-leaflet.js中有关tileLayer的定义如下：

var ot = "https:" !== window.location.protocol ? "http:" : "https:",at = e.TileLayer.extend({  //扩展TileLayerstatics: {TILES: {Streets: {  //图层名称urlTemplate: ot +"//{s}.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}", //图层URLoptions: {minZoom: 1, //缩放最小级别maxZoom: 19, //缩放最大级别subdomains: ["server", "services"], //子域名，可选attribution: "USGS, NOAA",    //属性提供者，可选attributionUrl: "https://static.arcgis.com/attribution/World_Street_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' /><!-- 从CDN加载Leaflet样式和脚本 --><link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="crossorigin=""/><script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="crossorigin=""></script><!-- 加载 Esri Leaflet --><script src="https://unpkg.com/esri-leaflet@2.2.1/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><!--创建一个id为map的div容器，用于显示地图-->
<div id="map"></div><script>
//新建Leaflet的地图对象 ，第一个参数为HTML元素的id，第二个参数是有关地图的定义，定义的内容有很多，常用的有中心点、初始级别、最大级别、最小级别、坐标参考系、渲染器等。具体可参照：
https://leafletjs.com/reference-1.3.2.html#map-optionvar map = L.map('map', {center: [28.2, 113.03],  //注意Leaflet中坐标点的定义：纬度在前，经度在后zoom: 8});var layer = L.esri.basemapLayer('Streets').addTo(map);  //定义basemapLayer并将其加载到地图容器中</script></body>
</html>

最后结果显示如下：

Esri Leaflet 第一个例子：加载ArcGIS底图相关推荐

leaflet + proj4 加载ARCGIS CGCS2000地理坐标栅格瓦片
作者:小牛 ,专注于地理信息系统.物联网大数据.微服务.云原生定义地图空间参考 leaflet 默认集成了常用的EPSG:3785 (墨卡托投影坐标),PSG:4326 (WGS84地理坐标系) ...
Angular(4)中加载Arcgis for JavaScript地图
背景近期我司项目的需要,采用Angular(4)+SpringBoot前后端分离的架构.并且在需要在项目中实现Arcgis地图. 本人之前有过Arcgis for JavaScript的小小填坑经验 ...
ArcGIS加载天地图底图服务（附个插件）
公众号[一点规划]原文链接 ArcGIS加载天地图底图服务(附个插件)https://mp.weixin.qq.com/s/ojElwAMYrjF7dc_IYu8J9A 之前我一直单独用的山东的天地图 ...
cesium加载arcgis server地图服务
1.制作arcgis server服务从bigmap中下载了全球1-8级 arcgis 瓦片,配置arcgis地图服务,并发布服务 http://www.bigemap.com/helps/doc2 ...
【C++】2048游戏系列---优化模块第一稿【加载图片】
[C++]2048游戏系列---优化模块第一稿[加载图片] (更新中--) 参考博客: https://blog.csdn.net/qq_39151563/article/details/104283 ...
Cesium加载ArcGIS的PBF矢量切片服务
Cesium 加载 ArcGIS 的 PBF 矢量切片服务矢量切片(Vector Tiles) 在 Cesium 中,我们使用的地图服务均为传统的栅格切片服务.即在服务端渲染好图片并进行切片,客户端 ...
arcgis中如何导出奥维可识别的图_如何在奥维中加载ArcGIS发布的地图服务
在工作中,您可能有大量的航拍图需要在奥维中加载显示,但直接导入航拍图的数据处理量较大.对电脑硬件的要求较高.因此,您可以通过ArcGIS将航拍图发布成地图服务,在奥维中以在线自定义地图的形式加载. 1 ...
开源GIS（二）——openlayers加载Arcgis和geoserver在线离线切片
一.引言开始开源gis的不归路,第一课便是加载底图,底图目前主流的都是wmts,以后会研究一下wms,本文介绍了普通网络在线切片(如谷歌百度高德等).Arcgis在线切片与离线切片.openlaye ...
ArcGIS加载天地图底图
1.天地图注册并申请服务器端Key 1.1 天地图API申请在该网址http://lbs.tianditu.gov.cn/home.html,"控制台"--"创建新应用 ...

Esri Leaflet 第一个例子：加载ArcGIS底图

Esri Leaflet 第一个例子：加载ArcGIS底图相关推荐

最新文章

热门文章