ArcGIS JS API使用本地切片

最新推荐文章于 2024-07-07 10:08:32 发布

shijie_nihao

最新推荐文章于 2024-07-07 10:08:32 发布

阅读量3.5k

点赞数 2

分类专栏： ArcGIS JS API 文章标签： ArcGIS JS API 本地切片

本文链接：https://blog.csdn.net/shijie_nihao/article/details/86736145

版权

ArcGIS JS API 专栏收录该内容

14 篇文章 3 订阅

订阅专栏

记录步骤如下：

假设已经有了地图瓦片数据，无论是ArcGIS，还是百度、高德、天地图，在这个文章里，使用的是ArcGIS地图瓦片数据。ArcMap发布缓存地图服务后会在server的目录下生成切片数据。

1、复制_alllayers目录到IIS或者tomcat的服务器目录下，再了解下ArcGIS切片的目录结构。

2、在Conf.xml和conf.cdi文件中获取切片数据的参数信息。

3、自定义切片图层类。

define(["dojo/_base/declare",
"esri/layers/TiledMapServiceLayer",
"esri/SpatialReference",
"esri/geometry/Extent",
"esri/layers/TileInfo"], function (declare, TiledMapServiceLayer) {
return declare('customTileLyr',TiledMapServiceLayer, { //没定义类名，就以文件名为准第一个参数是父类
constructor: function (baseUrl) {
this.url=baseUrl; //下面的参数信息参考2中的截图
this.spatialReference = new esri.SpatialReference({ wkid: 4326 });
this.initialExtent = this.fullExtent = new esri.geometry.Extent(73.45100463562233, 18.159038005131432, 134.97679764650596, 53.531943152223576, this.spatialReference);
this.tileInfo = new esri.layers.TileInfo({
"rows": 256,
"cols": 256,
"compressionQuality": 0,
"origin": {"x": -400.0, "y": 400.0},
"spatialReference": { "wkid": 4326 },
"lods": [
{"level": 0, "scale": 32000000, "resolution": 0.07614275218656896},
{"level": 1, "scale": 16000000, "resolution": 0.03807137609328448},
{"level": 2, "scale": 8000000, "resolution": 0.01903568804664224},
{"level": 3, "scale": 4000000, "resolution": 0.00951784402332112},
{"level": 4, "scale": 2000000, "resolution": 0.00475892201166056},
{"level": 5, "scale": 1000000, "resolution": 0.00237946100583028},
{"level": 6, "scale": 500000, "resolution": 0.00118973050291514}]
});
this.loaded = true;
this.onLoad(this);
},
getTileUrl: function (level, row, col) {
return "http://localhost/_alllayers/" +
"L" + dojo.string.pad(level, 2, '0') + "/" +
"R" + dojo.string.pad(row.toString(16), 8, '0') + "/" +
"C" + dojo.string.pad(col.toString(16), 8, '0') + "." +
"png";
}
});
});

4、使用自定义图层类显示地图。

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>本地瓦片地图</title>
        <style>
            html, body, #mapDiv {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
            body {
                background-color: #FFF;
                overflow: hidden;
            }
        </style>
        <script>
            var dojoConfig = {
                async: true,
                packages: [{
                    name: "js",
                    location: location.pathname.replace(/\/[^/]*$/, '') + '/js'
                }]
            };
        </script>
        <link rel="stylesheet" href="http://localhost/arcgis_api_v325/3.25/dijit/themes/tundra/tundra.css">
        <link rel="stylesheet" href="http://localhost/arcgis_api_v325/3.25/esri/css/esri.css">
        <script type="text/javascript" src="http://localhost/arcgis_api_v325/3.25/init.js"></script>
    </head>
    <body>
        <div id="mapDiv"></div>
        <script type="text/javascript">
            var map;
            require(["esri/map","js/customTiledLyr"], function (Map,customTiledLyr) {
                map=new Map("mapDiv");
                var tileUrl='http://localhost/_alllayers/';
                var customTileLyr = new customTiledLyr(tileUrl);
                map.addLayer(customTileLyr);
            });
        </script>
    </body>
</html>

对于其他本地瓦片地图，套路都是一样的。最终效果图如下：

shijie_nihao

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
ArcGIS JS API使用本地切片

记录步骤如下：假设已经有了地图瓦片数据，无论是ArcGIS，还是百度、高德、天地图，在这个文章里，使用的是ArcGIS地图瓦片数据。ArcMap发布缓存地图服务后会在server的目录下生成切片数据。 1、复制_alllayers目录到IIS或者tomcat的服务器目录下，再了解下ArcGIS切片的目录结构。 2、在Conf.xml和conf.cdi...
复制链接

扫一扫

专栏目录