1.释义2.基类扩展 GasPipeTiledLayerdefine([ dojo/_base/declare, esri/layers/TiledMapServiceLayer, esri/layers/TileInfo, esri/geometry/Extent, esri/geometry/Point, esri/SpatialReference ], function (declare, TiledMapServiceLayer, TileInfo, Extent, Point, SpatialReference) { var GasPipeTiledLayer declare(TiledMapServiceLayer, { declaredClass: gas.GasPipeTiledLayer, constructor: function (url, options) { options options || {}; this.url url; this.token options.token || ; this.imageFormat options.imageFormat || png32; this.dpi options.dpi || 96; this.transparent (options.transparent ! undefined) ? options.transparent : true; this._wkt options.wkt; // ---- 图层坐标系与范围必须是带 spatialReference 的实例官方例子同款---- var sr new SpatialReference({ wkt: this._wkt }); this.spatialReference sr; var fe options.fullExtent || {}; this.fullExtent new Extent( fe.xmin ! undefined ? fe.xmin : -107515.33047514148, fe.ymin ! undefined ? fe.ymin : 164445.357368109, fe.xmax ! undefined ? fe.xmax : 234750.35405622757, fe.ymax ! undefined ? fe.ymax : 321079.0039687356, sr); var ie options.initialExtent || {}; this.initialExtent new Extent( ie.xmin ! undefined ? ie.xmin : -30841.8383137422, ie.ymin ! undefined ? ie.ymin : 158130.5129524738, ie.xmax ! undefined ? ie.xmax : 148719.61650742192, ie.ymax ! undefined ? ie.ymax : 340572.6328242448, sr); // ---- LOD必须与底图地图一致否则瓦片错位 ---- var lods options.lods; if (!lods || !lods.length) { throw new Error([GasPipeTiledLayer] 必须传入 options.lods与底图切片方案一致 可从底图图层的 tileInfo.lods 获取); } this._lodByLevel {}; for (var i 0; i lods.length; i) { this._lodByLevel[lods[i].level] lods[i]; } // ---- 切片方案网格原点取 fullExtent 左上角 ---- // origin 只决定网格从哪里开始划分影响行列号不影响与底图的对齐 // 对齐只取决于每级的 resolution 是否一致与底图相同已保证。 var tileSize options.tileSize || 512; this.tileInfo new TileInfo({ rows: tileSize, cols: tileSize, dpi: 96, origin: new Point(this.fullExtent.xmin, this.fullExtent.ymax, sr), spatialReference: sr, lods: lods }); this.loaded true; this.onLoad(this); }, // 核 心 // 框架对视口内每张需要的瓦片调用一次本方法即有几张图调用几次 // 返回该瓦片的 export URL图片加载/定位/清理全部由基类管理 getTileUrl: function (level, row, col) { var lod this._lodByLevel[level]; if (!lod) { return ; } var ti this.tileInfo; var res lod.resolution; var spanX ti.cols * res; // 单瓦片覆盖的地图宽度米 var spanY ti.rows * res; // 单瓦片覆盖的地图高度米 // 网格原点 行列号 → 瓦片的地图范围 var xmin ti.origin.x col * spanX; var xmax xmin spanX; var ymax ti.origin.y - row * spanY; var ymin ymax - spanY; return this._buildExportUrl(xmin, ymin, xmax, ymax, ti.cols, ti.rows); }, // 令牌过期时可动态更新并刷新 setToken: function (token) { this.token token; this.refresh(); }, /** 构造 export 请求 URL参数与原单图请求一致bbox/size 为瓦片级 */ _buildExportUrl: function (xmin, ymin, xmax, ymax, w, h) { var base this.url; if (base.charAt(base.length - 1) /) { base base.slice(0, -1); } // 空间参考按 {wkt:...} JSON 传递与原请求格式一致 var srJson JSON.stringify({ wkt: this._wkt }); var params []; if (this.token) { params.push(token encodeURIComponent(this.token)); } params.push(dpi this.dpi); params.push(transparent this.transparent); params.push(format this.imageFormat); params.push(bbox encodeURIComponent(xmin , ymin , xmax , ymax)); params.push(bboxSR encodeURIComponent(srJson)); params.push(imageSR encodeURIComponent(srJson)); params.push(size encodeURIComponent(w , h)); params.push(fimage); return base /export? params.join(); } }); return GasPipeTiledLayer; });3.调用!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 link relstylesheet hrefhttps://js.arcgis.com/3.27/esri/css/esri.css style html, body, #mapDiv { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; font-family: Microsoft YaHei, sans-serif; } /style script var _baseUrl location.href.replace(/[?#].*$/, ).replace(/[^\/]*$/, ); var dojoConfig { async: true, packages: [{ name: gas, location: _baseUrl }] }; /script script srchttps://js.arcgis.com/3.27//script script // 模块加载失败时把具体失败的 URL 打到控制台方便定位 if (window.require require.on) { require.on(error, function (err) { var url err err.info err.info[0] err.info[0].url; console.error([模块加载失败], url || err); }); } /script /head body div idmapDiv/div script require([ esri/map, esri/geometry/Extent, esri/SpatialReference, esri/config, esri/layers/ArcGISTiledMapServiceLayer, gas/GasPipeDynamicLayer ], function (Map, Extent, SpatialReference, esriConfig, ArcGISTiledMapServiceLayer, GasPipeDynamicLayer) { // 配 置 var SERVICE_URL https://geoscene/rest/services/网/MapServer; var TOPO_URL https://geoscene/rest/services/地形图/MapServer; var TOKEN TQinOe7jhrNE1xm8FyXVKaN06xz53CUztuQJaid5XrU8NCNhVj_cd24v-Ov9ABkzOGhIUi02s91Ic_SRqC9-Lg..; var WKT UNIT[Degree,0.0174532925199433]], PROJECTION[Gauss_Kruger],PARAMETER[False_Easting,0.0], PARAMETER[False_Northing,0.0],PARAMETER[Central_Meridian,113.28], PARAMETER[Scale_Factor,1.0],PARAMETER[Latitude_Of_Origin,0.0], UNIT[Meter,1.0]]; var spatialReference new SpatialReference({ wkt: WKT }); var map new Map(mapDiv, { spatialReference: spatialReference, extent: new Extent({ xmin: -30841.8383137422, ymin: 158130.5129524738, xmax: 148719.61650742192, ymax: 340572.6328242448, spatialReference: spatialReference }), logo: false, slider: true, sliderStyle: small }); var topoLayer new ArcGISTiledMapServiceLayer(TOPO_URL ?token encodeURIComponent(TOKEN), { id: topoLayer }); topoLayer.on(load, function () { var gasLayer new GasPipeDynamicLayer(SERVICE_URL, { id: gasPipeLayer, token: TOKEN, tileSize: 512, lods: topoLayer.tileInfo.lods, imageFormat: png32, dpi: 96, transparent: true, wkt: WKT }); map.addLayer(gasLayer); }); map.addLayer(topoLayer); }); /script /body /html