你可能会遇到这种情况，你在arcgis server发布一个动态服务，数据量太大，矢量服务加载起来特别慢，可能需要好几十秒。因此你想做下优化，下面提供一种解决方案。可以通过发送请求动态切片的方式进行优化，参考代码如下
创建一个BaseTileLayer自定义瓦片服务，你需要自己提供一个切片方案tileInfo ，全图范围fullExtent ，坐标系spatialReference
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Custom TileLayer - 4.13</title>
<!-- <link rel="stylesheet"
href="http://120.79.149.109:1000/arcgis_js_api/library/4.11/4.11/esri/themes/light/main.css" /> -->
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script src="https://js.arcgis.com/4.13/"></script>
<!-- <script src="http://120.79.149.109:1000/arcgis_js_api/library/4.11/4.11/init.js"></script> -->
<!-- <script type="text/javascript" src="http://172.30.239.33/arcgis_js_api/library/4.11/init.js"></script> -->
<script>
require([
"esri/Map",
"esri/request",
"esri/Color",
"esri/views/SceneView",
"esri/widgets/LayerList",
"esri/layers/BaseTileLayer",
"esri/views/MapView",
"esri/request",
"esri/geometry/SpatialReference",
], function (
Map,
esriRequest,
Color,
SceneView,
LayerList,
BaseTileLayer,
MapView,
Request,
SpatialReference
) {
var basesever = "http://localhost:6080/arcgis/rest/services/m/MapServer"
const spatialReference = new SpatialReference({
wkt: 'PROJCS["GUANGZHOU2000",GEOGCS["GCS_China_Geodetic_Coordinate_System_2000",DATUM["D_China_2000",SPHEROID["CGCS2000",6378137.0,298.257222101]],PRIMEM["Greenwich",0.0],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]]'
})
let tileInfo = cteatTileInfo()
let fullExtent = {
xmin:50202.723811513955,
ymin: 250958.97246361536,
xmax: 69821.51114110924,
ymax: 265974.3739430543,
spatialReference: spatialReference
}
//生成切片
function cteatTileInfo() {
let tileInfo = {
"rows": 256,
"cols": 256,
"dpi": 96,
"format": "PNG",
"compressionQuality": 0,
"origin": {
"x": -5623200,
"y": 10002100
},
"spatialReference": {
"wkt": "PROJCS[\"GUANGZHOU2000\",GEOGCS[\"GCS_China_Geodetic_Coordinate_System_2000\",DATUM[\"D_China_2000\",SPHEROID[\"CGCS2000\",6378137.0,298.257222101]],PRIMEM[\"Greenwich\",0.0],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]]"
},
"lods": [
{
"level": 0,
"resolution": 33.0729828126323,
"scale": 125000
},
{
"level": 1,
"resolution": 16.933367200067735,
"scale": 64000
},
{
"level": 2,
"resolution": 8.466683600033868,
"scale": 32000
},
{
"level": 3,
"resolution": 4.233341800016934,
"scale": 16000
},
{
"level": 4,
"resolution": 2.116670900008467,
"scale": 8000
}
]
}
return tileInfo
}
// 自定义切片
function customTileLayer(_option) {
let { url, tileInfo, fullExtent, spatialReference, depth } = _option;
if (!url || !tileInfo || !spatialReference) return;
if (depth) {
tileInfo.rows = depth;
tileInfo.cols = depth;
tileInfo.size = [depth, depth];
}
var TintLayer = BaseTileLayer.createSubclass({
properties: {
url: null
},
options: {
fullExtent: null,
tileInfo: null,
},
getTileUrl: function (level, row, col) {
var lt_x = tileInfo.origin.x + col * tileInfo.lods[level].resolution *
tileInfo.cols;
var lt_y = tileInfo.origin.y - (row * tileInfo.lods[level].resolution *
tileInfo.rows);
var rb_x = tileInfo.origin.x + (col + 1) * tileInfo.lods[level]
.resolution * tileInfo.cols;
var rb_y = tileInfo.origin.y - ((row + 1) * tileInfo.lods[level]
.resolution * tileInfo.rows);
var bbox = lt_x + "," + rb_y + "," + rb_x + "," + lt_y;
return basesever + "/export?bbox=" + bbox + "&size=" + tileInfo.rows + "," + tileInfo.cols +
"&bboxSR=" + tileInfo.spatialReference.wkid + "&imageSR=" + tileInfo
.spatialReference.wkid +
"&dpi=96&format=png8&transparent=true&layerDefs=&time=&layerTimeOptions=&dynamicLayers=&gdbVersion=&mapScale=&f=image";
},
fetchTile: function (level, row, col) {
var url = this.getTileUrl(level, row, col);
return esriRequest(url, {
responseType: "image"
}).then(
function (response) {
var image = response.data;
var width = this.tileInfo.size[0];
var height = this.tileInfo.size[0];
// create a canvas with 2D rendering context
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;
if (this.tint) {
context.fillStyle = this.tint.toCss();
context.fillRect(0, 0, width, height);
context.globalCompositeOperation = "difference";
}
// Draw the blended image onto the canvas.
context.drawImage(image, 0, 0, width, height);
return canvas;
}.bind(this)
);
}
});
var layer = new TintLayer({
url: decodeURIComponent(url),
fullExtent: fullExtent,
tileInfo: tileInfo,
spatialReference: spatialReference
});
return layer
}
var map = new Map({
layers: [customTileLayer({ url: basesever, tileInfo, fullExtent, spatialReference, depth: 256 })]
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 1
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
效果如下：
发送的请求如下
网友评论