基于ArcGIS API 4.12 for JS 的开发实践（三）——Calcite Maps框架

最新推荐文章于 2019-09-05 16:11:00 发布

aplsc

最新推荐文章于 2019-09-05 16:11:00 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/aplsc/article/details/100537899

版权

ArcGIS API for JavaScript 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

Calcite Maps

1 篇文章 0 订阅

订阅专栏

1、Calcite Maps框架简介

在基于ArcGIS API 4.12 for JS开发的时候，经过基于ArcGIS API 4.12 for JS 的开发实践（一）——部署文中所述，已经成功构建了自己的地图网站，打通了构建map app的道路，但是不可否认，这个网站还是太简单，缺少一些美观的布局。我在搜索ArcGIS API 4.12 for JS的例子的时候，发现了这个Calcite Maps框架，这个框架是ESRI开发的开源框架，下载地址https://github.com/Esri/calcite-maps，它在ESRI中的例子是在https://developers.arcgis.com/javascript/latest/sample-code/frameworks-bootstrap/index.html这个地方。

这是一个基于Bootstrap前端框架的现代的地图程序，高度的自定义风格、样式等等。这个框架包含了大量的基于Bootstrap前端框架构建的CSS类，可以让你开发出不错UI的交互式地图程序。很多的Bootstrap components在这个框架里已经被包含，很容易添加。可以调整框架的色彩，包括深色模式和浅色模式，拥有14中顶部和底部的布局方式，支持ArcGIS JS 3.x, ArcGIS JS 4.x 和Esri Leaflet。

2、Calcite Maps框架下载和部署

这里Calcite Maps框架有两种下载模式，一种就是直接在https://github.com/Esri/calcite-maps开源社区下载，另外一种就是在VS Code中通过npm命令：npm bootstrap 。通过我的测试，npm命令指示下载bootstrap框架，并没有下载Calcite Maps，这里还是需要我们手动下载，然后把它放到我们的工程目录。

如上图所示，运行npm bootstrap命令后VS Code会自动创建“node_modules”文件夹，并在这个文件夹下面下载bootstrap。那我们手动下载的Calcite Maps最好也放到这个目录下面方便管理。有一点需要注意，如果你还有其他的模块是通过npm下载的话，这个手动加进来的Calcite Maps会被删掉，时刻记着备份吧。哈哈。要不就是放到其他目录下面，这样就不会被删掉了。

3、Calcite Maps前端代码演示及说明

前面下载的相当于一个类库，用来支撑我们构件Map App，那具体到前端的HTML怎么写，那么就新建一个HTML文件（index.html或者XXX.html）并拷入以下代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="description" content="ArcGIS JS v4, Calcite Maps and Bootstrap Example">
 
  <title>ArcGIS JS v4, Calcite Maps and Bootstrap Example</title>

  <!-- Calcite Maps Bootstrap -->
  <link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-bootstrap.min-v0.10.css">
  
  <!-- Calcite Maps -->
  <link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-arcgis-4.x.min-v0.10.css">

  <!-- ArcGIS JS 4 -->
  <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">

  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
    }
  </style>

</head>

<body class="calcite-maps calcite-nav-top">
  <!-- Navbar -->

  <nav class="navbar calcite-navbar navbar-fixed-top calcite-text-light calcite-bg-dark">
    <!-- Menu -->
    <div class="dropdown calcite-dropdown calcite-text-dark calcite-bg-light" role="presentation">
      <a class="dropdown-toggle" role="menubutton" aria-haspopup="true" aria-expanded="false" tabindex="0">
        <div class="calcite-dropdown-toggle">
          <span class="sr-only">Toggle dropdown menu</span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </a>
      <ul class="dropdown-menu" role="menu">
        <li><a role="menuitem" tabindex="0" data-target="#panelInfo" aria-haspopup="true"><span class="glyphicon glyphicon-info-sign"></span> About</a></li>
        <li><a role="menuitem" tabindex="0" href="#" data-target="#panelLegend" aria-haspopup="true"><span class="glyphicon glyphicon-list-alt"></span> Legend</a></li>
        <li><a role="menuitem" tabindex="0" href="#" id="calciteToggleNavbar" aria-haspopup="true"><span class="glyphicon glyphicon-fullscreen"></span> Full Map</a></li>
      </ul>
    </div>
    <!-- Title -->
    <div class="calcite-title calcite-overflow-hidden">
      <span class="calcite-title-main">Calcite Maps</span>
      <span class="calcite-title-divider hidden-xs"></span>
      <span class="calcite-title-sub hidden-xs">A Bootstrap theme for building modern map apps</span>
    </div>
    <!-- Nav -->
    <ul class="nav navbar-nav calcite-nav">
      <li>
        <div class="calcite-navbar-search calcite-search-expander">
          <div id="searchWidgetDiv"></div>
        </div>
      </li>
    </ul>
  </nav>

  <!--/.calcite-navbar -->

  <!-- Map  -->

  <div class="calcite-map calcite-map-absolute">
    <div id="mapViewDiv"></div>
  </div>

  <!-- /.calcite-map -->

  <!-- Panels -->

  <div class="calcite-panels calcite-panels-right calcite-text-light calcite-bg-dark panel-group">

    <!-- Panel - Basemaps -->

    <div id="panelInfo" class="panel collapse in">
      <div id="headingInfo" class="panel-heading" role="tab">
        <div class="panel-title">
          <a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseInfo"  aria-expanded="true" aria-controls="collapseInfo"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span><span class="panel-label">About</span></a> 
          <a class="panel-close" role="button" data-toggle="collapse" tabindex="0" href="#panelInfo"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>  
        </div>
      </div>
      <div id="collapseInfo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingInfo">
        <div class="panel-body">
          <p>This is my map app!</p>
        </div>
     </div>
    </div>

    <!-- Panel - Legend -->

    <div id="panelLegend" class="panel collapse">
      <div id="headingLegend" class="panel-heading" role="tab">
        <div class="panel-title">
          <a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseLegend" aria-expanded="false" aria-controls="collapseLegend"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span><span class="panel-label">Legend</span></a> 
          <a class="panel-close" role="button" data-toggle="collapse" tabindex="0" href="#panelLegend"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a> 
        </div>
      </div>
      <div id="collapseLegend" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingLegend">
        <div class="panel-body">            
          <div id="legendDiv"></div>
        </div>
      </div>
    </div>

  </div>

  <!-- /.calcite-panels -->

  <script type="text/javascript">
    var dojoConfig = {
      packages: [{
        name: "bootstrap",
        location: "https://esri.github.io/calcite-maps/dist/vendor/dojo-bootstrap"
      },
      {
        name: "calcite-maps",
        location: "https://esri.github.io/calcite-maps/dist/js/dojo"
      }]
    };
  </script>

  <!-- ArcGIS JS 4 -->
  <script src="https://js.arcgis.com/4.10/"></script>

  <script>
    
    require([
      // ArcGIS
      "esri/WebMap",
      "esri/views/MapView",

      // Widgets
      "esri/widgets/Home",
      "esri/widgets/Zoom",
      "esri/widgets/Compass",
      "esri/widgets/Search",
      "esri/widgets/Legend",
      "esri/widgets/BasemapToggle",
      "esri/widgets/ScaleBar",
      "esri/widgets/Attribution",

      // Bootstrap
      "bootstrap/Collapse",
      "bootstrap/Dropdown",

      // Calcite Maps
      "calcite-maps/calcitemaps-v0.10",
      // Calcite Maps ArcGIS Support
      "calcite-maps/calcitemaps-arcgis-support-v0.10",

      "dojo/domReady!"
    ], function(WebMap, MapView, Home, Zoom, Compass, Search, Legend, BasemapToggle, ScaleBar, Attribution,Collapse, Dropdown, CalciteMaps, CalciteMapArcGISSupport) {

      /******************************************************************
       *
       * Create the map, view and widgets
       * 
       ******************************************************************/

      // Map
      var map = new WebMap({
        portalItem: {
          id: "9f91f911f58540ceaac0300c55e18fbb"
        }
      });
      
      // View
      var mapView = new MapView({
        container: "mapViewDiv",
        map: map,
        padding: {
          top: 50,
          bottom: 0
        },
        ui: {components: []}
      });

      // Popup and panel sync
      mapView.when(function(){
        CalciteMapArcGISSupport.setPopupPanelSync(mapView);
      });

      // Search - add to navbar
      var searchWidget = new Search({
        container: "searchWidgetDiv",
        view: mapView
      });
      CalciteMapArcGISSupport.setSearchExpandEvents(searchWidget);

      // Map widgets
      var home = new Home({
        view: mapView
      });
      mapView.ui.add(home, "top-left");

      var zoom = new Zoom({
        view: mapView
      });
      mapView.ui.add(zoom, "top-left");

      var compass = new Compass({
        view: mapView
      });
      mapView.ui.add(compass, "top-left");
      
      var basemapToggle = new BasemapToggle({
        view: mapView,
        secondBasemap: "satellite"
      });
      mapView.ui.add(basemapToggle, "bottom-right");          
      
      var scaleBar = new ScaleBar({
        view: mapView
      });
      mapView.ui.add(scaleBar, "bottom-left");

      var attribution = new Attribution({
        view: mapView
      });
      mapView.ui.add(attribution, "manual");

      // Panel widgets - add legend
      var legendWidget = new Legend({
        container: "legendDiv",
        view: mapView
      });

    });
  </script>

</body>
</html>

上面代码是官网的示例代码，未修改，这里我们首先需要修改3各地方，也就是系统加载的CSS样式，一共三个，如下图所示：

首先，上图红框1中的URL应改为我们本地的链接：

"node_modules/calcite-maps/dist/css/calcite-maps-bootstrap.min-v0.8.css"

第二，上图红框2中的URL，同样改为我们本地的链接：

"node_modules/calcite-maps/dist/css/calcite-maps-arcgis-4.x.min-v0.8.css"

第三，上图红框2中的URL，依然改为我们本地的链接：

“http://localhost/arcgis_js_api/library/4.12/esri/css/main.css”

这里同学们是不是看到有什么不对劲的地方了？是的，第三个红框和第一、第二红框的URL不太一样，第一、第二红框中的URL都是本地文件夹中的地址，而第三个红框中的URL则是arcgis_js_api部署在IIS上的地址，为什么arcgis_js_api不能像前两个一样下载到本地工程目录呢？我测试了一下，确实不行，因为dojo.js这个文件里面要求的就是HTTP链接，而不是FTP链接。所以，arcgis_js_api不能像其他的一样通过nmp进行下载。

上面我们修改了CSS的加载路径，示例中是通过外网的URL进行，被我们修改成了本地的URL。接着我们修改JavaScript的加载路径，如下图：

首先，上图红框1中的URL应改为我们本地的链接：

"/node_modules/calcite-maps/dist/vendor/dojo-bootstrap"

第二，上图红框2中的URL，同样改为我们本地的链接：

"/node_modules/calcite-maps/dist/js/dojo"

这里是定义了两个加载包，一个名为bootstrap，一个名为calcite-maps，后面的代码里系统直接通过这两个名称来搜索路径下的js文件并加载，至于定义dojoConfig这个变量的来龙去脉这里就不多讲了，感兴趣想深入挖掘的可以自行百度。

最后，我们修改一下dojo.js的加载路径，默认也是通过外网加载，我们修改为本地arcgis_js_api的地址：

上图的“src”值修改为：“http://localhost/arcgis_js_api/library/4.12/dojo/dojo.js”，这个dojo.js是一定要成功加载的，不然下面的“require”代码块将不能执行。

4、将底图设置为本地地图服务

通过查看上面的代码，并修改了本地的CSS及JS文件加载路径，下面我们就要把示例中默认的ESRI底图替换为本地的地图服务，可以是ArcGIS Server发布的，也可以是其他开源软件发布的标准地图服务。

上述这块代码，就是示例中定义的底图，用的ESRI地图服务中的一个，这里我们可以把map中的layer替换为自己的layer。比如如下面代码所示，先引入两个图层：

var lakerLayer = new TileLayer({
  url: "http://localhost/ArcGIS/rest/services/lakes/MapServer",
  id: "lakes",
  opacity: 0.7
});

var roadLayer = new TileLayer({
  url: "http://localhos/ArcGIS/rest/services/roads/MapServer",
  id: "streets"
});

上面代码引入了两个本地的地图服务，也就是两个图层，然后把这两个图层加入到Map里面去，如下代码：

// Both layers were created prior to this code snippet
var map = new Map({
  basemap: "streets",
  layers: [roadLayer] // layers can be added as an array to the map's constructor
});

或者通过map.layers.add(lakerLayer )这种方式添加。上述步骤完成之后，就把示例中的CSS、JS以及Map都替换成本地的了。保存并刷新HTML，然后在浏览器中加载，可以看到如下图所示的样子（注：下图所展示的地图，我个人仍然用的是ESRI的地图，因为我没有自己创建地图服务）。

到目前，Calcite Maps框架我就给大家介绍到这里，具体到样式、功能各位感兴趣的就深入发掘，我这里就不赘述了。

aplsc

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
基于ArcGIS API 4.12 for JS 的开发实践（三）——Calcite Maps框架

1、Calcite Maps框架简介在基于ArcGIS API 4.12 for JS开发的时候，经过基于ArcGIS API 4.12 for JS 的开发实践（一）——部署文中所述，已经成功构建了自己的地图网站，打通了构建map app的道路，但是不可否认，这个网站还是太简单，缺少一些美观的布局。我在搜索ArcGIS API 4.12 for JS的例子的时候，发现了这个Calcite M...
复制链接

扫一扫