前言：
????項(xiàng)目是用vue做的政府項(xiàng)目，有個(gè)需求是加載國土空間信息平臺的Arcgis服務(wù)，這個(gè)申請下來是帶ip的http請求，出于安全性考慮，政務(wù)網(wǎng)ip需要授權(quán)才能請求該服務(wù)，但是又不可能每個(gè)瀏覽器端都這么整，所以需要用國土空間信息平臺的轉(zhuǎn)發(fā)代理，地址形似于 httpsAddr/proxy?realAddr，前面的httpsAddr是政務(wù)網(wǎng)訪問通用的。
????問題就來了，這個(gè)?會被解析成queryParam的分隔符，相當(dāng)于把realAddr看成了查詢參數(shù)的鍵，值為空字符串。這個(gè)解析過程在esri-leaflet中也有，另外，Arcgis3.x與Arcgis4.x的解析不太一樣。
API差異
除了地址外，手頭上的數(shù)據(jù)還有服務(wù)類型，所以首先，需要先將調(diào)用加載服務(wù)的API對應(yīng)情況搞清楚。在調(diào)試時(shí)，我是憑百度和猜詞義的，今天又看了下arcgis文檔，找到了對應(yīng)關(guān)系的說明：
https://developers.arcgis.com/javascript/latest/functionality-matrix/#esrilayers
3.x中ArcGISDynamicMapServiceLayer、DynamicLayer對應(yīng)4.x的MapImageLayer
3.x中ArcGISTiledMapServiceLayer對應(yīng)4.x的TileLayer
還有個(gè)ImageLayer沒用到，我是直接作為img.src放上去的，效果還可以。
下文均以Arcgis4.x為例
vue加載arcgis模塊
vue加載arcgis模塊并不是npm直接下載依賴包，而是安裝了esri-loader模塊，這個(gè)模塊會動(dòng)態(tài)請求https://js.arcgis.com/version的依賴，有點(diǎn)像require，但是是require遠(yuǎn)程的。
esriLoader.loadModules('esri/request', 'esri/core/promiseUtils', 'esri/core/urlUtils'])
.then(([request, promiseUtils, urlUtils]) => { some code })
這種按需加載的方式效率很好，不會占用項(xiàng)目體積。而且，這樣請求是有緩存的，也是一個(gè)小坑，后面再提。
修改原型
直接上結(jié)果，過程也忘了，還挺曲折的。
// 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);
// 加了個(gè)？
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參數(shù)（原為this.url）修改為原始url，當(dāng)然也可以修改this.url的set處理，示例里簡單粗暴地完全賦值，實(shí)際也沒用到。
_fetchService之后，TileLayer會調(diào)用getTileUrl獲取瓦片數(shù)據(jù)，這里除了重寫getTileUrl，還要重寫urlUtils.addQueryParameters，具體過程有點(diǎn)迂回，在request的內(nèi)部處理里面。到addQueryParameters時(shí)，原來會解析成realAddr=，我當(dāng)時(shí)的處理是直接改成
// b是url，d是參數(shù)對象
urlUtils.addQueryParameters = function (b, d) {
return b
}
也確實(shí)沒問題，圖個(gè)省事，d為空對象，當(dāng)時(shí)也沒有請求帶參數(shù)的情況。
但是由于請求緩存的原因，這里的改動(dòng)相當(dāng)于全局修改，urlUtils是esri/core下的工具類。
MapImageLayer在_fetchService之后會調(diào)用fetchImage，這個(gè)方法是帶參的，在request時(shí)也調(diào)用了addQueryParameters，所以就出了問題。最終是改成了上面那樣。
至此，Arcgis加載帶?的轉(zhuǎn)發(fā)服務(wù)的實(shí)現(xiàn)思路就完了。
雖然產(chǎn)出成果不多，但也花了好幾天時(shí)間，主要是壓縮源碼看的太費(fèi)精力了，一是單字母的含義需要對應(yīng)require的模塊，二是三目表達(dá)式太多了，還帶括號換行的，很容易漏掉斷點(diǎn)，最難的是request部分的斷點(diǎn)，跟進(jìn)到addQueryParameters花了很多時(shí)間。不過好在肝出來了，下次看源碼會更有經(jīng)驗(yàn)一些。
