ArcGIS API for JavaScript 3.x加载带有参数的服务（weixin公众号【图说GIS】）

前言

在使用ArcGIS API for JavaScript 3.x加载带有参数的服务是发现参数会被方法忽略掉。
有如下两种解决方案

方法

1. API自带的方法（推荐，不繁琐！）

参考《ArcGIS JS API for Javascript 3.x自定义服务传参》一文。核心代码如下，来自官方API

require([
  "esri/request", ... 
], function(esriRequest, ... ) {
  function myCallbackFunction(ioArgs) {
    // inspect ioArgs
    console.log(ioArgs.url, ioArgs.content);

    // or, change some query parameters if necessary
    ioArgs.content = ioArgs.content || {};
    ioArgs.content.token = "ABCDEF123456";

    // don't forget to return ioArgs.
    return ioArgs;
  }

  // where the argument ioArgs is of type: dojo.__XhrArgs (or) dojo.io.script.__ioArgs

  esriRequest.setRequestPreCallback(myCallbackFunction);
  ...
});

2.代理（解决问题的另一种思路）

我们可以通过代理方式拦截发出的请求。
如我要请求的服务url是：http://www.tianditu.cn/map/rest/services/Hosted/TDT_DT/VectorTileServer?njtoken=xxxxxx

1. 开发环境代理
   我们可以通过webpack的代理配置如下：

 devServerConfig.proxy = {
      "/map/": {
            target: 'http://www.tianditu.cn', secure: false, changeOrigin: true,
            pathRewrite: function (path, req) {
               if (path.indexOf("?") > -1) {
                  path = `${path}&njtoken=xxxxxx`
               } else {
                  path = `${path}?njtoken=xxxxxx`
               }
               return path
            }
     },
  }

3. nginx部署环境

 server {
        listen 8080;
        server_name localhost;
        location /{
            root html/web;
            try_files $uri /index.html;
        }

        location /map/ {  
            set $path 'http://www.tianditu.cn';
            set $token 'njtoken=xxxxxx';
            set $str '?';
            if ($request_uri ~* "[?]"){
                set $str "&";
            }
            proxy_pass   $path$request_uri$str$token;
        }
    }

4. 程序代码实现
   这里要注意的是地址，为以上配置的代码。

const map = new Map('map', {
       center: [118.795367, 31.921581],
       zoom: 14,
});
const url = "/map/rest/services/Hosted/TDT_DT/VectorTileServer"
const vectorTileLayer = new VectorTileLayer(url);
map.addLayer(vectorTileLayer);