在vue中使用ArcGIS API调取天地图底图并与ArcGIS Server发布的矢量瓦片相叠加

最新推荐文章于 2024-03-14 09:57:52 发布

L863683305

最新推荐文章于 2024-03-14 09:57:52 发布

阅读量3.8k

点赞数 3

文章标签： vue

本文链接：https://blog.csdn.net/L863683305/article/details/103940884

版权

1.如何在vue中使用ArcGIS API

在vue中想要让Webpack认识ArcGIS API需要安装esri-loader。

第一步：通过npm安装`esri-loader`

安装命令：npm install esri-loader -S

第二步：在需要使用ArcGIS API的页面进行引入

HTML部分：（注意：地图是要挂载在dom元素上的）

<template>
	<div id='map'> </div>
</template>

JS部分：
import esriLoader from 'esri-loader'

第三步：引入ArcGIS 的一些在线API，和在线样式链接（注意：为了获得地图更快的加载速度，和稳定性，我们需要离线部署一套ArcGIS API，过几天会单独出一期如何离线部署ArcGIS API）

JS部分：

mounted() {
	const option = {url:'https://js.arcgis.com/4.3/'};
}

CSS部分：

@import url("https://js.arcgis.com/4.3/esri/css/main.css")

第四步：开始书写我们加载地图的代码

注意：esriLoader有以下几个方法：

getScript() 从库里面获取JS文件；get the script injected by this library
isLoaded() 检测模块是否加载完成；
loadModules（[ ],options）用于加载ArcGIS模块；
loadCss（url）用于加载css文件；
loadScript（{url:‘xxxxxxxx’}）将js加载到页面上

在mounted钩子中进行挂载

mounted() {
const option = {url: 'https://js.arcgis.com/4.3/'}    //注意：不同版本的ArcGIS API的用法可能不一样

esriLoader.loadModules ([
		"dojo/dom",    //该模块定义了核心的dojo DOM构建API。
          "dojo/on",    //是用于DOM节点和其他事件发出对象的通用事件处理程序模块，提供规范化的事件侦听和事件分派功能。
          "dojo/_base/declare",   //包含用于定义Dojo类的函数，这些类支持Dojo中的标准面向对象的概念，使用来模拟基于类的继承的功能。
          "dojo/json",    //是基于标准的ES5的JSON对象进行JSON解析和序列化的模块
          "dojo/_base/lang",   //包含用于支持多态和其他语言构造的功能，这些功能是该工具包其余部分的基础。
          "dojo/_base/url",
          "dojo/string",     //提供了一些简单的字符串操作实用程序（包括修剪（trim）、填充（pad）、重复（rep）、替换（replace））
          "dojo/dom-construct",  //该模块定义了核心的dojo DOM构建API。此模块的返回变量的约定为domConstruct。
          "dojo/number",    //包含用户展示javascript Number对象的方法：格式化、解析和舍入
          "esri/Map",    //Map类创建一个容器和必须的DOM结构，以添加图层、图形、信息窗口和其他导航控件
          "esri/geometry/Extent",    //边界框的最小和最大X坐标和Y坐标
          "esri/layers/support/TileInfo",   //包含有关TileLayers、ElevationLayers和Web TileLayers的切片方案的信息
          "esri/layers/support/LOD",   //一个ArcGISTiledMapServiceLayer有许多的LOD（细节层次）的。每个LOD对应于给定比例或分辨率的地图。
          "esri/geometry/SpatialReference",   //定义视图、图层或任务参数的空间参考。这表示用于在地图中定位地理要素的投影坐标系或地理坐标系。每个投影的地理坐标系都是由众多周知的ID（WKID）或定义字符串（WKT）定义。
          "esri/geometry/Point",    //由X坐标和Y坐标定义的位置。它可以是地图单位或屏幕单位。
          "esri/views/MapView",   //MapView 显示Map实例的2D视图。
          "esri/views/SceneView",   //SceneView 显示Map实例的3D视图。
          "esri/layers/WebTileLayer",     //提供了一种简单的方法来将非ArcGIS Server地图图块添加为地图的图层。构造函数，通常如下的图案的URL模板http://some.domain.com/${level}/${col}/${row}/,其中level对应于缩放级别和列和行表示瓷砖的列和行。
          "esri/layers/VectorTileLayer",  //它呈现缓存的数据矢量切片。它与WebTiledLayer的相似之处在于呈现了缓存的数据，但是WebTileLayer渲染为一系类图像，而不是矢量数据。
          "esri/layers/TileLayer",   //允许我们使用ArcGIS Server REST APi公开的缓存地图服务，并将其作为图块图层添加到地图。缓存的服务从缓存访问图块，而不是动态渲染图像。因为它们被缓存，所以平铺的图层比MapImageLayers的渲染速度更快。要创建TileLayer的实例，我们必须引用缓存的地图服务的URL。
          "esri/layers/MapImageLayer",    //允许我们显示和分析来自地图服务中定义的子图层的数据，并导出图像而不是要素。
          "esri/widgets/LayerList",    //LayerList小部件提供了允许切换图层可见性的图层列表。
          "esri/core/urlUtils",   //使用URL的实用方法。
          "esri/core/JSONSupport",   //
          "dojo/domReady!"   //是AMD加载的插件，它将等待DOM完成加载后再返回。
],option).then(([
		  dom,
          on,
          declare,
          JSON,
          lang,
          url,
          string,
          domConstruct,
          number,
          Map,
          Extent,
          TileInfo,
          LOD,
          SpatialReference,
          Point,
          MapView,
          SceneView,
          WebTileLayer,
          VectorTileLayer,
          TileLayer,
          MapImageLayer,
          LayerList,
          urlUtils,
          JSONSupport
])=> {
	//创建一个OGC标准的天地图WMTS定制图层
	var TiandituWMTSLayer = WebTileLayer.createSubclass([JSONSupport], {
            declaredClass: "TiandituWMTSLayer",
            normalizeCtorArgs: function(b, c) {
              return "string" === typeof b
                ? lang.mixin({ urlTemplate: b }, c || {})
                : b;
            },
            getDefaults: function(b) {
              var sp = new SpatialReference({
                wkid: 4490
              });
              var c = new Extent(-180, -90, 180, 90, sp);
              return lang.mixin(this.arguments, {  //this.inherited(arguments)
                fullExtent: c,
                tileInfo: new TileInfo({
                  rows: 256,
                  cols: 256,
                  dpi: 90.71428571428571,
                  format: "PNG8",
                  compressionQuality: 0,
                  origin: new Point({ x: -180, y: 90, spatialReference: sp }),
                  spatialReference: sp,
                  lods: [
                    new LOD({
                      level: 1,
                      resolution: 0.703125,
                      scale: 295497593.05875003
                    }),
                    new LOD({
                      level: 2,
                      resolution: 0.3515625,
                      scale: 147748796.52937502
                    }),
                    new LOD({
                      level: 3,
                      resolution: 0.17578125,
                      scale: 73874398.264687508
                    }),
                    new LOD({
                      level: 4,
                      resolution: 0.087890625,
                      scale: 36937199.132343754
                    }),
                    new LOD({
                      level: 5,
                      resolution: 0.0439453125,
                      scale: 18468599.566171877
                    }),
                    new LOD({
                      level: 6,
                      resolution: 0.02197265625,
                      scale: 9234299.7830859385
                    }),
                    new LOD({
                      level: 7,
                      resolution: 0.010986328125,
                      scale: 4617149.8915429693
                    }),
                    new LOD({
                      level: 8,
                      resolution: 0.0054931640625,
                      scale: 2308574.9457714846
                    }),
                    new LOD({
                      level: 9,
                      resolution: 0.00274658203125,
                      scale: 1154287.4728857423
                    }),
                    new LOD({
                      level: 10,
                      resolution: 0.001373291015625,
                      scale: 577143.73644287116
                    }),
                    new LOD({
                      level: 11,
                      resolution: 0.0006866455078125,
                      scale: 288571.86822143558
                    }),
                    new LOD({
                      level: 12,
                      resolution: 0.00034332275390625,
                      scale: 144285.93411071779
                    }),
                    new LOD({
                      level: 13,
                      resolution: 0.000171661376953125,
                      scale: 72142.967055358895
                    }),
                    new LOD({
                      level: 14,
                      resolution: 8.58306884765625e-5,
                      scale: 36071.483527679447
                    }),
                    new LOD({
                      level: 15,
                      resolution: 4.291534423828125e-5,
                      scale: 18035.741763839724
                    }),
                    new LOD({
                      level: 16,
                      resolution: 2.1457672119140625e-5,
                      scale: 9017.8708819198619
                    }),
                    new LOD({
                      level: 17,
                      resolution: 1.0728836059570313e-5,
                      scale: 4508.9354409599309
                    }),
                    new LOD({
                      level: 18,
                      resolution: 5.3644180297851563e-6,
                      scale: 2254.4677204799655
                    }),
                    new LOD({
                      level: 19,
                      resolution: 2.6822090148925781e-6,
                      scale: 1127.2338602399827
                    }),
                    new LOD({
                      level: 20,
                      resolution: 1.3411045074462891e-6,
                      scale: 563.61693011999137
                    })
                  ]
                })
              });
            },
            properties: {
              copyright: "",
              legendEnabled: {
                json: {
                  readFrom: ["showLegend"],
                  read: function(b, c) {
                    return null != c.showLegend ? c.showLegend : !0;
                  }
                }
              },
              levelValues: {
                dependsOn: ["tileInfo"],
                get: function() {
                  var b = [];
                  if (!this.tileInfo) return null;
                  this.tileInfo.lods.forEach(function(c) {
                    b[c.level] = c.levelValue || c.level;
                  }, this);
                  return b;
                }
              },
              popupEnabled: {
                json: {
                  readFrom: ["disablePopup"],
                  read: function(b, c) {
                    return null != c.disablePopup ? !c.disablePopup : !0;
                  }
                }
              },
              spatialReference: new SpatialReference({ wkid: 4326 }),
              subDomains: null,
              tileServers: {
                value: null,
                dependsOn: ["urlTemplate", "subDomains", "urlPath"],

                get: function() {
                  var b = new url(this.urlTemplate),
                    c = b.scheme ? b.scheme + "://" : "//",
                    a = c + b.authority + "/",
                    e = this.subDomains,
                    d,
                    f = [];
                  -1 === b.authority.indexOf("{subDomain}") && f.push(a);
                  e &&
                    (0 < e.length && 1 < b.authority.split(".").length) &&
                    e.forEach(function(a, e) {
                      -1 < b.authority.indexOf("{subDomain}") &&
                        (d =
                          c + b.authority.replace(/\{subDomain\}/gi, a) + "/");
                      f.push(d);
                    }, this);
                  return (f = f.map(function(b) {
                    "/" !== b.charAt(b.length - 1) && (b += "/");
                    return b;
                  }));
                }
              },
              urlPath: {
                dependsOn: ["urlTemplate"],
                get: function() {
                  if (!this.urlTemplate) return null;
                  var b = this.urlTemplate,
                    a = new url(b);
                  return b.substring(
                    ((a.scheme ? a.scheme + "://" : "//") + a.authority + "/")
                      .length
                  );
                }
              },
              urlTemplate: null
            },
            getTileUrl: function(b, a, d) {
              b = this.levelValues[b];
              var e =
                  this.tileServers[a % this.tileServers.length] +
                  string.substitute(this.urlPath, {
                    level: b,
                    col: d,
                    row: a
                  });
                e = e
                  .replace(/\{level\}/gi, b)
                  .replace(/\{row\}/gi, a)
                  .replace(/\{col\}/gi, d);
              return urlUtils.addProxy(e);
            }
          });
          var options = {
            id: "tianDiTu_vec",
            label: "天地图矢量地图",
            visible: true,
            opacity: 1,
            style: "default",
            wmtslayer: "vec",
            tileMatrixSet: "c",
            format: "tiles",
            urlTemplate:
              "http://{subDomain}.tianditu.gov.cn/DataServer?T=vec_c&x={col}&y={row}&l={level}&tk=0ecb0b40b30f30fba48a13064f485e19",
            copyright: "TiandituWMTS",
            subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
          };
          var layer1 = new TiandituWMTSLayer(options);
          var map = new Map({
            layers: [layer1]
          });
          //矢量瓦片
          var tileLayer = new VectorTileLayer({
            title: "矢量瓦片图层",
            id: "vectorTileLayer",
            url:
              //自己的ArcGIS Server发布的服务地址
         
            visible: true
          });
          map.add(tileLayer);

          var view = new MapView({
            container: "map",
            zoom: 14,
            center: [100.98268973979392, 21.844773808801815],
            map: map
          });
          // create a layer list widget
          var layerList = new LayerList({
            view: view
          });
          view.ui.add(layerList, "bottom-right");
        }
      );
  }

其中不足之处，请多多指教

L863683305

关注

3
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
在vue中使用ArcGIS API调取天地图底图并与ArcGIS Server发布的矢量瓦片相叠加

1.如何在vue中使用ArcGIS API在vue中想要让Webpack认识ArcGIS API需要安装esri-loader。第一步：通过npm安装esri-loader安装命令：npm install esri-loader -S第二步：在需要使用ArcGIS API的页面进行引入HTML部分：（注意：地图是要挂载在dom元素上的）<template> <div...
复制链接

扫一扫