esri-leaflet入门教程（2）-地图的HelloWorld

by 李远祥

常言道“君子性非异也，善假于物也”。这句话在IT界同样也适用，只不过IT界有更为时髦的说法：“不用重新制作轮子”。在当前各类框架盛行的年代，搭建Web应用程序已经是相当简单的了，不管是搭建界面的还是构建地图，都已经有现成的框架可以直接使用，使工程师们可以更加关注用户的需求而不是苦于编码。当然了，回归事物的本质，就是工程师们可以少写很多代码！！！ ^_^

闲话不提了，接下来当然就是说说学习esri-leaflet的一些准备了。如果到了开始写代码阶段还没有弄懂所谓的HTML、CSS、JavaScript的话，那可以直接将该网页关掉了，因为这个博客不会去讲基础的web开发内容。说说接下来用到的一些工具和技术，开发工具使用国内的HBuilder，可以在其官网下载 http://www.dcloud.io/ （没有为什么，因为简单，下载下来解压后直接可以使用），至于使用什么IDE根据各人喜好。界面框架使用Flat UI （在bootstrap 框架下衍生出来的框架，纯属个人喜好，用法跟bootstrap一样，只是笔者喜欢它的风格），现成的一个外观不错的框架，原因很简单，不需要重新发明轮子，不用自己重新去写界面的代码。地图框架那就不用说了，就是使用esri-leaflet 。需要下载esri-leaflet （下载地址 https://github.com/Esri/esri-leaflet/releases/tag/v1.0.0）和leaftlet原生脚本（下载地址 http://leafletjs.com/download.html）

准备工作妥善后就是创建工程了。使用IDE创建一个工程，然后将下载下来的脚本放在对应的目录，js的目录怎么放置，就开工程师们的习惯了。如下图，可以看出本次程序代码使用的一些技术框架

在工程中需要引用的框架当然是需要flatui，这是界面部分所使用的，然后就是地图部分的leaflet框架和esri-leaflet ，这两部分解压下来后其实只需要leaflet.js 和leaflet.css以及esri-leaflet.js ，相对于以前庞大的ArcGIS JavaScript API，区区200来K的大小，真是足够精简，并且不需要配置复杂的ArcGIS JavaScript API ，直接拿来即用。

接下来就是创建其界面和调用了。先不急着创建复杂的代码，可以先根据bootstrap或flatui搭建一个简单的界面，先让自己找一点成就感。先利用FlatUI去做一个常规的地图应用界面，当然要有菜单，地图控件，信息展示面板等。先来看看笔者用十分钟搭好的一个简单界面，当然这里面为了显示地图，先行加入了地图代码，如下图所示

FlatUI的界面是非常美观的，由于从bootstrap衍生出来，所以直接使用bootstrap的写法来编写就行了。接下来再看看地图Hello World的写法了。

首先需要引入leaflet和esri-leaflet的脚本，当然了，这个代码还会涉及到FlatUI，所以代码也一并贴出来。

      <title>Esri-leaflet 功能</title>

       <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <!-- Loading Bootstrap -->

     <link href="flatui/css/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

     <!-- Loading Flat UI -->

       <link href="flatui/css/flat-ui.css" rel="stylesheet">

        <link rel="shortcut icon" href="flatui/img/favicon.ico">

      <!-- 加载leaflet-->

      <link rel="stylesheet" href="leaflet/leaflet.css" />

     <script src="leaflet/leaflet.js"></script>

        <script src="esri/esri-leaflet.js"></script>

正如之前所说，其实引入的脚本部分并不多。界面的搭建就不多说了，主要的是在地图控件，需要在bootstrap的栅格布局中加入属于地图的DIV元素，例如设计好页面布局之后，在属于地图展示区域的div中给一个id名称如“mapDiv”，如下面代码所示

<div class="row">

    <div class="col-xs-9" id="mapDiv" style="top: 55px; height:600px;"></div><!--地图面板 –>

可以看到笔者为了让地图控件占位，设定了一下其大小，因为了bootstrap框架中宽度是自动适应的，所以设置高度即可，后面会在一些页面脚本中加入窗口大小响应代码，让地图的高度能够适用不同的窗口大小。

接下来再看其地图加载的脚本部分。在body标签中设计好界面之后，在代码的最后才加入初始化<script>，可以看下面代码

    <div class="row">

      <!--底部状态栏部分 -->

      <div class="col-xs-6" style="top: 50px;height: 50px;">

        <span class="label label-success">代码实例来自博客  GIS制图乐园  http://blog.csdn.net/liyuanxiang1984                                                              </span>

      </div>

    </div>

    <!--底部状态栏部分 -->

    </div>

    <script>

      var map = L.map("mapDiv").setView([37.75, -122.23], 10);

      L.esri.basemapLayer("Topographic").addTo(map);

      //初始化使计算Map控件大小

      document.getElementById("mapDiv").style.height = document.documentElement.clientHeight-80+"px";

      document.getElementById("panDiv").style.height = document.documentElement.clientHeight-110+"px";

      //当网页变化是重新计算地图控件的大小

      window.οnresize=function(){

        document.getElementById("mapDiv").style.height = document.documentElement.clientHeight-80+"px";

        document.getElementById("panDiv").style.height = document.documentElement.clientHeight-110+"px";

    </script>

    <script src="flatui/js/vendor/jquery.min.js"></script>

    <script src="flatui/js/flat-ui.min.js"></script>

  </body>

从上面的代码可以看到，初始化页面之后才初始化代码，esri-leaflet的写法非常简单，这个Hello World 程序就是先生成一个map，然后加载ArcGIS Online上的底图，并指定其初始显示区域。leaflet的写法大部分都是L. 开头，而esri-leaflet的写法也是遵循其规律，变为L.esri 开头。地图在一开始的初始化时就可以使用leaflet的setView 方法去指定初始化的位置了，两个参数分别是坐标和地图的级别。然后第二句 L.esri.basemapLayer("Topographic").addTo(map); 才是esri-leaflet的东西，使用basemapLayer方法去加载ArcGIS Online上的Topographic 底图，并将其加载到map控件上。其写法非常简约。

至于下面的代码就是设置页面加载时适应不同分辨率的屏幕，其地图区域的高度设置。还有就是在window.onresize 事件中也加入该调整代码，不然bootstrap是不认这些变化的。接下来再看看改变页面的大小时界面的自适应，如下图

第一个Hello World代码非常简单，主要是让读者知道常规的搭建模式。后面章节将会更加详细的接入ArcGIS的其他功能。

esri-leaflet入门教程（2）-地图的HelloWorld相关推荐

leafLet入门教程兼leafLet API中文文档参考
leafLet官方文档链接(英文原版):https://leafletjs.com/reference-1.3.4.html#marker-bindpopup 文章目录 leafLet教程一.简单入 ...
leafLet入门教程兼leafLet API中文文档参考
英文文档参考:https://leafletjs.com/reference-1.3.4.html#popup 博客参考:https://blog.csdn.net/qq_36595013/artic ...
esri-leaflet入门教程（1）-leaflet介绍
esri-leaflet入门教程(1)-esri leaflet介绍 by 李远祥关于leaflet,可能很多人比较陌生,如果搭上esri几个字母,可能会有更多的人关注.如果没有留意过leaflet ...
Leaflet基础入门教程（一）
leaflet是一个前端的轻量的gis框架,为什么说它轻量呢.因为相比于传统的"庞大的"GIS框架比如openlayers和mapbox,leaflet不仅代码体积小,而且API构 ...
leaflet加载离线地图教程以及下载离线地图瓦片工具
关于源码以及教程侵权请联系作者删除最近在做一个leaflet加载离线地图的东西,结果在网上找到一份相关的教程以及源码源码链接:https://pan.baidu.com/s/1cGew8PAU-L ...
GIS地图基础知识--入门教程
wenzhanhttp://www.gisbbs.net/viewthread.php?tid=106&extra=page%3D1 GIS地图基础知识--入门教程 GIS 地图知识 1 ...
Android百度地图开发入门教程
Android百度地图开发入门教程 1.平台注册登录 2.创建应用 3.Android studio配置 4.代码编写 5.最终效果(建议真机) 1.平台注册登录登录百度地图开放平台网站注册并登录 ...
(原创)LEON3入门教程(三)：基于LEON3的SOPC设计以及HELLOWORLD和流水灯
摘要:通过前两篇博客的介绍,Windows下基本的LEON3开发环境就已经搭建好了.这篇博客将要介绍LEON3 SOPC平台的搭建(使用Cygwin+GRLIB)和 LEON3 IDE(eclipse ...
esri-leaflet入门教程（5）- 动态绘制图形
esri-leaflet入门教程(5)- 动态绘制图形 by 李远祥在上一章节中已经说明了esr-leaflet是如何加载ArcGIS Server提供的各种服务,这些都是服务本身来决定的,API脚 ...

esri-leaflet入门教程（2）-地图的HelloWorld

esri-leaflet入门教程（2）-地图的HelloWorld相关推荐

最新文章

热门文章