离线环境中使用ArcGIS API加载mapbox矢量切片地图

最新推荐文章于 2024-08-18 15:08:48 发布

無法顯示

最新推荐文章于 2024-08-18 15:08:48 发布

阅读量2.5k

点赞数 1

文章标签： javascript 开发语言 arcgis

本文链接：https://blog.csdn.net/sawa123/article/details/120890268

版权

1.离线部署ArcGIS JS API

如果使用ES module模式加载ArcGIS JS API，则可以跳过此步。

ES module加载的具体操作请移步官网

Install and set up | Overview | ArcGIS API for JavaScript 4.21 | ArcGIS DeveloperDocumentation site for ArcGIS API for JavaScript on ArcGIS for Developers.https://developers.arcgis.com/javascript/latest/install-and-set-up/

这里介绍离线下载并部署ArcGIS JS API的方法：

1.下载ArcGIS JS API，下载地址：

Downloads | ArcGIS Developer

2.配置tomcat以及JDK，具体方法参考：非常详细图文JDK和Tomcat安装和配置的图文教程_追梦赤子心-CSDN博客_tomcat配置jdk

3.解压ArcGIS JS API安装包，将文件夹移至tomcat/webapp下，即可完成离线部署。

2.下载mapbox矢量切片

1.这里推荐一个离线地图下载器：

mapdownload: mapbox离线地图下载

2.运行程序：点击mapdownload64.exe，填写下载参数等信息。

参数中token可以在mapbox官网随便找个示例复制粘贴。

3.下载完毕之后将整个下载文件夹复制粘贴到tomcat/webapp下。

4.几个文件夹：fonts为地图的字体文件，source中包含各个级别的矢量切片，sprites文件夹中为地图图标。

3.示例代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>Intro to MapView - Create a 2D map</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet"
    href="http://localhost:8181/arcgis_js_v421_api/arcgis_js_api/javascript/4.21/esri/themes/light/main.css" />
  <script src="http://localhost:8181/arcgis_js_v421_api/arcgis_js_api/javascript/4.21/init.js"></script>
  <script src="http://localhost:8181/jquery/jQueryDownload/jquery-3.1.1.min.js"></script>


  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/WebTileLayer",
      "esri/layers/VectorTileLayer",
      "esri/layers/TileLayer",
    ], function (Map, MapView, WebTileLayer, VectorTileLayer, TileLayer) {

      // 封装ajax函数
      const fetch = (url) => {
        const p = new Promise((resolve, reject) => {
          $.ajax(url, {
            dataType: 'json',
            success: function (result) {
              resolve(result);
            },
            error: function () {
              reject(new Error('返回错误'))
            }
          })
        })
        return p
      }


      const queryStyleJson = async (url) => {
        try {
          const res = await fetch(url)
          return res
        } catch (e) {
          console.error(e)
        }
      }

      // 获取服务器上的style文件（这里以本机为例）
      queryStyleJson('http://localhost:8181/mapdownload/style.json').then((res) => {
        // console.log('dddd', res);

        // 设置矢量切片源
        res.sources.composite = {
          type: "vector",
          tiles: ["http://localhost:8181/mapdownload/source/composite/tiles/{z}/{x}/{y}.pbf"],
        }
        // 设置地图小图标
        res.sprite = "http://localhost:8181/mapdownload/sprites/sprite"
        // 设置字体文件
        res.glyphs = "http://localhost:8181/mapdownload/fonts/{fontstack}/{range}.pbf"

        let vtlLayer = new VectorTileLayer({ style: res });
        var map = new Map({
          basemap: { baseLayers: [vtlLayer] },
        });
        var view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 9,
          center: [117.5, 39.5],
        });

      })


    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>