前言：
项目是用vue做的政府项目，有个需求是加载国土空间信息平台的Arcgis服务，这个申请下来是带ip的http请求，出于安全性考虑，政务网ip需要授权才能请求该服务，但是又不可能每个浏览器端都这么整，所以需要用国土空间信息平台的转发代理，地址形似于 httpsAddr/proxy?realAddr，前面的httpsAddr是政务网访问通用的。
问题就来了，这个?会被解析成queryParam的分隔符，相当于把realAddr看成了查询参数的键，值为空字符串。这个解析过程在esri-leaflet中也有，另外，Arcgis3.x与Arcgis4.x的解析不太一样。
API差异
除了地址外，手头上的数据还有服务类型，所以首先，需要先将调用加载服务的API对应情况搞清楚。在调试时，我是凭百度和猜词义的，今天又看了下arcgis文档，找到了对应关系的说明：
https://developers.arcgis.com/javascript/latest/functionality-matrix/#esrilayers
3.x中ArcGISDynamicMapServiceLayer、DynamicLayer对应4.x的MapImageLayer
3.x中ArcGISTiledMapServiceLayer对应4.x的TileLayer
还有个ImageLayer没用到，我是直接作为img.src放上去的，效果还可以。
下文均以Arcgis4.x为例
vue加载arcgis模块
vue加载arcgis模块并不是npm直接下载依赖包，而是安装了esri-loader模块，这个模块会动态请求https://js.arcgis.com/version 的依赖，有点像require，但是是require远程的。
esriLoader.loadModules('esri/request', 'esri/core/promiseUtils', 'esri/core/urlUtils'])
.then(([request, promiseUtils, urlUtils]) => { some code })
这种按需加载的方式效率很好，不会占用项目体积。而且，这样请求是有缓存的，也是一个小坑，后面再提。
修改原型
直接上结果，过程也忘了，还挺曲折的。
// methods
{
addTileLayer(id, url) {
esriLoader.loadModules(['esri/layers/TileLayer', 'esri/request', 'esri/core/promiseUtils', 'esri/core/urlUtils'])
.then(
([TileLayer, request, w, urlUtils]) => {
urlUtils.addQueryParameters = function (b, d) {
if (!d || Object.keys(d).length === 0) {
return b
} else {
for (let pkey in d) {
if (d.hasOwnProperty(pkey) && d[pkey]) {
let value = d[pkey]
b += `${pkey}=${value}&`
}
}
return b.substr(0, b.length - 1)
}
}
Object.defineProperty(TileLayer.prototype, "url", {
set: function (a) {
this._set('url', a)
},
enumerable: !0,
configurable: !0
})
TileLayer.prototype._fetchService = function (a) {
var b = this
return w.create(function (d, e) {
if (b.sourceJSON) {
d({ data: b.sourceJSON })
} else {
if (!b.parsedUrl) throw new c('tile-layer:undefined-url',
'layer\'s url is not defined')
// 修改url部分
request(url + '?f=json', {
responseType: 'json',
signal: a
}).then(d, e)
}
}).then(function (c) {
c.ssl && (b.url = b.url.replace(/^http:/i, 'https:'))
b.sourceJSON = c.data
b.read(c.data, { origin: 'service', url: b.parsedUrl })
if (10.1 === b.version && !P.isHostedAgolService(b.url)) return b._fetchServerVersion(b.url, a).then(function (a) {
b.read({ currentVersion: a })
}).catch(function () {
})
})
}
TileLayer.prototype.getTileUrl = function (level, row, col) {
return this.url + '/tile/' + level + '/' + row + '/' + col
}
this.arcGisLayer = null
let layer = new TileLayer({
id: id,
url: url
})
this.map.layers.add(layer)
this.arcGisLayerList[id] = layer
})
},
addDynamicLayer(id, url) {
esriLoader.loadModules([
'esri/layers/MapImageLayer',
'esri/request', 'esri/core/promiseUtils', 'esri/core/tsSupport/awaiterHelper',
'esri/core/tsSupport/generatorHelper', 'esri/core/tsSupport/assignHelper', 'esri/core/Error'
]).then((
[MapImageLayer, q, x, t, d, k, p]) => {
MapImageLayer.prototype._fetchService = function (a) {
return t(this, void 0, void 0, function () {
var b, e, f;
return d(this, function (d) {
switch (d.label) {
case 0:
return this.sourceJSON ? (this.read(this.sourceJSON, {
origin: "service",
url: this.parsedUrl
}), [2]) :
[4, q(url + '?f=json', { signal: a })];
case 1:
b = d.sent();
e = b.data;
if (f = b.ssl)
this.url = this.url.replace(/^http:/i, "https:");
this.sourceJSON = e;
// 修改url部分
this.read(e, {
origin: "service",
url: url
});
return [2]
}
})
})
}
MapImageLayer.prototype.fetchImage = function (a, b, d, e) {
var f = {
responseType: "image"
};
e && e.timestamp && (f.query = {
_ts: e.timestamp
});
e && e.signal && (f.signal = e.signal);
// 加了个？
var g = url + "/export?";
a = k({}, {}, this.createExportImageParameters(a, b, d, e), {
f: "image",
_ts: this.alwaysRefetch ? Date.now() : null
});
if (null != a.dynamicLayers && !this.capabilities.exportMap.supportsDynamicLayers)
return x.reject(new p("mapimagelayer:dynamiclayer-not-supported", "service " + this.url + " doesn't support dynamic layers, which is required to be able to change the sublayer's order, rendering, labeling or source.", {
query: a
}));
f.query = f.query ? k({}, a, f.query) : a;
// 新增
f.query.dynamicLayers && delete f.query.dynamicLayers
return q(g, f).then(function (a) {
return a.data
}).catch(function (a) {
if (x.isAbortError(a))
throw a;
throw new p("mapimagelayer:image-fetch-error", "Unable to load image: " + g, {
error: a
});
})
}
this.arcGisLayer = null
let layer = new MapImageLayer({
id: id,
url: url
})
this.map.layers.add(layer)
this.arcGisLayerList[id] = layer
})
}
}
修改部分主要在于_fetchService，将其request的url参数（原为this.url）修改为原始url，当然也可以修改this.url的set处理，示例里简单粗暴地完全赋值，实际也没用到。
_fetchService之后，TileLayer会调用getTileUrl获取瓦片数据，这里除了重写getTileUrl，还要重写urlUtils.addQueryParameters，具体过程有点迂回，在request的内部处理里面。
到addQueryParameters时，原来会解析成realAddr=，我当时的处理是直接改成
// b是url，d是参数对象
urlUtils.addQueryParameters = function (b, d) {
return b
}
也确实没问题，图个省事，d为空对象，当时也没有请求带参数的情况。
但是由于请求缓存的原因，这里的改动相当于全局修改，urlUtils是esri/core下的工具类。
而MapImageLayer在_fetchService之后会调用fetchImage，这个方法的请求是带参的，在request时也调用了addQueryParameters，所以就出了问题。最终是改成了最终结果那样。
至此，Arcgis加载带?的转发服务的实现思路就完了。
虽然产出成果不多，但也花了好几天时间，主要是压缩源码看的太费精力了，一是单字母的含义需要对应require的模块，二是三目表达式太多了，还带括号换行的，很容易漏掉断点，最难的是request部分的断点，跟进到addQueryParameters花了很多时间。不过好在肝出来了，下次看源码会更有经验一些。
