arcgis js api 3.x加载arcgis server发布的静态离线切片

最新推荐文章于 2023-10-08 16:09:37 发布
最新推荐文章于 2023-10-08 16:09:37 发布
阅读量1.7k 收藏 5
点赞数 1
分类专栏： arcgis-js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xlp789/article/details/106090144
版权

一、通过ArcGIS Server发布切片（此步骤略），生成的切片路径

二、对离线数据进行调用 直接上代码，写一个js文件，封装一个自定义的切片类。


define(["dojo/_base/declare",
    "esri/geometry/Extent",
    "esri/SpatialReference",
    "esri/geometry/Point",
    "esri/layers/TileInfo",
    "esri/layers/TiledMapServiceLayer"], function (declare, Extent, SpatialReference, Point, TileInfo, TiledMapServiceLayer) {
    return declare("customTileLayer", TiledMapServiceLayer, {
        layertype: "road",//图层类型
        constructor: function (args) {
            this.spatialReference = new SpatialReference({
                wkid: 3857
            });
            declare.safeMixin(this, args);
            this.fullExtent = new Extent(13640980.459253557, 5083546.3075853717, 13775329.574925782, 5294633.0254636044, this.spatialReference);
            this.initialExtent = this.fullExtent;
            this.tileInfo = new TileInfo({
                "cols": 256,
                "rows": 256,
                "compressionQuality": 0,
                "origin": new Point(-20037508.342787, 20037508.342787, this.spatialReference),
                "spatialReference": this.spatialReference,
                "lods": [{
                    "level": 0,
                    "resolution": 156543.033928,
                    "scale": 591657527.591555
                }, {
                    "level": 1,
                    "resolution": 78271.5169639999,
                    "scale": 295828763.795777
                }, {
                    "level": 2,
                    "resolution": 39135.7584820001,
                    "scale": 147914381.897889
                }, {
                    "level": 3,
                    "resolution": 19567.8792409999,
                    "scale": 73957190.948944
                }, {
                    "level": 4,
                    "resolution": 9783.93962049996,
                    "scale": 36978595.474472
                }, {
                    "level": 5,
                    "resolution": 4891.96981024998,
                    "scale": 18489297.737236
                }, {
                    "level": 6,
                    "resolution": 2445.98490512499,
                    "scale": 9244648.868618
                }, {
                    "level": 7,
                    "resolution": 1222.99245256249,
                    "scale": 4622324.434309
                }, {
                    "level": 8,
                    "resolution": 611.49622628138,
                    "scale": 2311162.217155
                }, {
                    "level": 9,
                    "resolution": 305.748113140558,
                    "scale": 1155581.108577
                }, {
                    "level": 10,
                    "resolution": 152.874056570411,
                    "scale": 577790.554289
                }, {
                    "level": 11,
                    "resolution": 76.4370282850732,
                    "scale": 288895.277144
                }, {
                    "level": 12,
                    "resolution": 38.2185141425366,
                    "scale": 144447.638572
                }, {
                    "level": 13,
                    "resolution": 19.1092570712683,
                    "scale": 72223.819286
                }, {
                    "level": 14,
                    "resolution": 9.55462853563415,
                    "scale": 36111.909643
                }, {
                    "level": 15,
                    "resolution": 4.77731426794937,
                    "scale": 18055.954822
                }, {
                    "level": 16,
                    "resolution": 2.38865713397468,
                    "scale": 9027.977411
                }, {
                    "level": 17,
                    "resolution": 1.19432856685505,
                    "scale": 4513.988705
                }, {
                    "level": 18,
                    "resolution": 0.597164283559817,
                    "scale": 2256.994353
                }, {
                    "level": 19,
                    "resolution": 0.298582141647617,
                    "scale": 1128.497176
                }]
            });

            this.loaded = true;
            this.onLoad(this);
        },
        /**
         * @param level
         * @param row
         * @param col
         * @returns {string}
         */
        getTileUrl: function (level, row, col) {
            var url = "";
            	console.log(level, row, col)
              url="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";
            return url;
        }
    });
});

代码里的切片原点，比例尺，分辨率和坐标系统信息都可以在这两个配置文件里找到。

重点是getTileUrl这个函数，level是缩放级别，row是行号，col是列号，在我们前端缩放平移地图时，这三个值就能获取实际的值，如下图。根据将实际的这三个值我们拼接url找到实际对应存储的图片。这里有个就是十进制转16进制的问题。由于arcgis  切片里行号列号后八位是十六进制的值。所以我们是先将前端的行列号从十进制转成16进制，然后不足的八位的情况用0在前补充即可。

getTileUrl: function (level, row, col) {
            var url = "";
                console.log(level, row, col)
              url="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";
            return url;
        }

另外一种方法（其实就是十进制转十六进制的方法不同而已）

define(["dojo/_base/declare",
    "esri/layers/TiledMapServiceLayer",
    "esri/SpatialReference",
    "esri/geometry/Extent",
    "esri/layers/TileInfo"], function (declare, TiledMapServiceLayer) {
        return declare('customTileLayer1', TiledMapServiceLayer, {   //没定义类名，就以文件名为准     第一个参数是父类
            constructor: function (args) {
                this.spatialReference = new esri.SpatialReference({ wkid: 3857 });
				declare.safeMixin(this, args);
                this.initialExtent = this.fullExtent = new esri.geometry.Extent(13640980.459253557, 5083546.3075853717, 13775329.574925782, 5294633.0254636044, this.spatialReference);
                this.tileInfo = new esri.layers.TileInfo({
                    "rows": 256,
                    "cols": 256,
                    "compressionQuality": 0,
                    "origin": { "x": -20037508.342787001, "y": 20037508.342787001 },
                    "spatialReference": { "wkid": 3857 },
                    "lods": [{
                    "level": 0,
                    "resolution": 156543.033928,
                    "scale": 591657527.591555
                }, {
                    "level": 1,
                    "resolution": 78271.5169639999,
                    "scale": 295828763.795777
                }, {
                    "level": 2,
                    "resolution": 39135.7584820001,
                    "scale": 147914381.897889
                }, {
                    "level": 3,
                    "resolution": 19567.8792409999,
                    "scale": 73957190.948944
                }, {
                    "level": 4,
                    "resolution": 9783.93962049996,
                    "scale": 36978595.474472
                }, {
                    "level": 5,
                    "resolution": 4891.96981024998,
                    "scale": 18489297.737236
                }, {
                    "level": 6,
                    "resolution": 2445.98490512499,
                    "scale": 9244648.868618
                }, {
                    "level": 7,
                    "resolution": 1222.99245256249,
                    "scale": 4622324.434309
                }, {
                    "level": 8,
                    "resolution": 611.49622628138,
                    "scale": 2311162.217155
                }, {
                    "level": 9,
                    "resolution": 305.748113140558,
                    "scale": 1155581.108577
                }, {
                    "level": 10,
                    "resolution": 152.874056570411,
                    "scale": 577790.554289
                }, {
                    "level": 11,
                    "resolution": 76.4370282850732,
                    "scale": 288895.277144
                }, {
                    "level": 12,
                    "resolution": 38.2185141425366,
                    "scale": 144447.638572
                }, {
                    "level": 13,
                    "resolution": 19.1092570712683,
                    "scale": 72223.819286
                }, {
                    "level": 14,
                    "resolution": 9.55462853563415,
                    "scale": 36111.909643
                }, {
                    "level": 15,
                    "resolution": 4.77731426794937,
                    "scale": 18055.954822
                }, {
                    "level": 16,
                    "resolution": 2.38865713397468,
                    "scale": 9027.977411
                }, {
                    "level": 17,
                    "resolution": 1.19432856685505,
                    "scale": 4513.988705
                }, {
                    "level": 18,
                    "resolution": 0.597164283559817,
                    "scale": 2256.994353
                }, {
                    "level": 19,
                    "resolution": 0.298582141647617,
                    "scale": 1128.497176
                }]
                });
                this.loaded = true;
                this.onLoad(this);
				this.zeroPad=function(num, len, radix) {
					var str = num.toString(radix || 10);
					while (str.length < len) {
						str = "0" + str;
					}
					return str;
                }
            },
			/**
         * @param level
         * @param row
         * @param col
         * @returns {string}
         */
            getTileUrl: function (level, row, col) {
				console.log(level, row, col)
                return "http://localhost/_alllayers/" +
                "L" + this.zeroPad(level, 2, 10)+ "/" +
                "R" + this.zeroPad(row, 8, 16) + "/" +
                "C" + this.zeroPad(col, 8, 16) + "." +
                "png";
            }
        });
    });

最后我们在前端调用即可。

<!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(/\/[^/]*$/, '') + '/extLayers'
            }]
        };
    </script>
    <link rel="stylesheet" href="http://localhost/arcgis/library/3.27/3.27/esri/css/esri.css">
    <script type="text/javascript" src="http://localhost/arcgis/library/3.27/3.27/init.js"></script>
</head>
<body>
    <div id="mapDiv"></div>
    <script type="text/javascript">
        var map;
        require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "extLayers/customTileLayer1"], function (Map, ArcGISTiledMapServiceLayer, customTileLayer1) {
            map = new Map("mapDiv", {
                center: [123.38, 41.8],
                zoom: 12,
                logo: false
            });
            var DXT = new ArcGISTiledMapServiceLayer("http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer", { id: "DXT" });
            map.addLayer(DXT);
            var customTileLyr = new customTileLayer1();
            map.addLayer(customTileLyr);
        });
          
    </script>
   
</body>
</html>

 

L.傲骨雄风
关注
专栏目录
ArcGIS API for JavaScript 加载切片地图
ResponseBody的博客
04-04 4736
说明：本人是一个gis小白，由于网上的资料过于专业，当时学习的时候经常看不懂，于是写了一些简单的关于ArcGIS Api for javaScript分享，若该分享中出现错误，希望大家指出，若能帮助到各位，不胜荣幸。地图的发布在网上到处都有，这里不多说，值得注意的一点是选择缓存的时候不要选择“根据数据动态绘制”，要选择下面的那个选项发布完成之后登录站点查看刚刚发布的地图服务是否有Levels of...
arcgis api for js 4.x 绕过arcgis server加载arcgis切片服务
qq_33674300的博客
06-09 619
背景 前端使用arcgis api for 4.x，想使用arcgis server切片服务，但又不想买arcgis server。 准备切片 思路来自以下老哥 https://blog.csdn.net/lihao432/article/details/99710796 先在已有的arcgis server中发布服务，并且切好片。注意切片时，存储格式选为松散。切片方案我选择的arcgis online，其他的没试过。 切片转换 ArcGIS切片规则为：L+Z(级别)；R+Y(行号8位16进制)；C+
arcgis js 3.x加载arcgis server发布的离线静态切片问题
傲骨雄风的博客
11-23 647
1.遇到的问题 用arcgis js 3.x加载arcgis server发布的离线静态切片无法看到地图，分析其是找不到对应的行列号，决定行列号大小的因素无疑就是分辨率、切片大小、切片原点坐标，所以问题的重点是关注原点，调整原点坐标来测试； 最终改了原点坐标x和y，地图能正常显示了。 define(["dojo/_base/declare", "esri/layers/TiledMapServiceLayer", "esri/SpatialReference", "esr..
arcgis js 3.x和arcigs js 4.x加载postgis计算得矢量切片
傲骨雄风的博客
08-11 567
主要区别arcigs js 4.20(最新版本）支持match stop等函数（用这些函数可以进行分级渲染）,3.x不支持这些函数，另外我试了下4.16版本也不支持，应该是最新得版本才支持得。 1.arcgis js 3.37加载矢量切片 <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>Add a vector tile source</ti..
arcgis api for JavaScript发布切片，地图不显示
huatiananle的专栏
03-04 2931
    按照arcgis api for JavaScript4.6官方网站提供的方法进行尝试，ArcServer10.1发布的地图本地也能访问，但是一放在HTML中，用TileLayer方法，就是无法获取到地图。无奈尝试使用官方提供的例子中的REST URL进行尝试，发现成功，于是猜测问题出现在ArcServer发布出现问题，进行搜索和尝试，终于发现问题：在发布过程中，选择了默认的设置，没有进行...
arcgis for js 加载本地离线瓦片数据
11-05
此dome是根据实际开发的来经验，根据在91卫图上下载arcgisserver离线瓦片数据，将瓦片数据放入IIS下进行部署，通过访问加载本地离线瓦片数据
arcgis api for js 3.25的api文档
09-04
《ArcGIS API for JavaScript 3.25：深入解析与应用》 ArcGIS API for JavaScript是Esri公司推出的一款强大的地图开发工具，主要用于构建交互式的Web GIS应用。本篇文章将详细探讨3.25版本的API文档，涵盖其核心...
ArcGIS和ArcGIS Pro快速加载ArcGIS历史影像World Imagery Wayback
最新发布
04-08
3. 在弹出的对话框中，选择“添加 ArcGIS Server 网络服务”选项。 4. 输入Esri的在线服务URL（通常为http://services.arcgisonline.com）。 5. 登录你的Esri账号，如果有的话，或者选择匿名访问。 6. 浏览可用服务...
ARCGISServer加载切片地图
熊熊的Bear
07-17 2716
首先切片地图要用松散型的切片格式，切片切好了之后放在IIS里面 加载切片地图 dojo.require("esri.map"); dojo.ready(init); var map; function init() { initLayer(); map = new esri.Map("map");
ArcGIS API for JavaScript 3.x加载带有参数的服务（weixin公众号【图说GIS】）
ONEGISER的博客
11-20 934
前言 在使用ArcGIS API for JavaScript 3.x加载带有参数的服务是发现参数会被方法忽略掉。 有如下两种解决方案 方法 1. API自带的方法（推荐，不繁琐！） 参考《ArcGIS JS API for Javascript 3.x自定义服务传参》一文。核心代码如下，来自官方API require([ "esri/request", ... ], function(esriRequest, ... ) { function myCallbackFunction(ioArgs)
arcgis for js 天地图_基于ArcGIS API for JS在内网中加载显示WeServer发布的离线地图
weixin_39588432的博客
11-23 766
01.概述我们之前为大家分享过在三维地球开源平台离线加载卫星影像的方法，主要包括基于桌面端的OsgEarth开源三维地球和基于Web端的Cesium开源三维地球等平台的局域网离线影像加载。另外，也为大家分享过在二维开源平台离线加载卫星影像的方法，主要包括基于OpenLayers的内网WebGIS离线部署、基于MapBox的内网WebGIS离线部署和基于 GoogleMap 离线 API 在内网中加...
ArcGIS API for JavaScript 加载水经注离线地图
idomyway的博客
12-25 2185
前言 &nbsp;&nbsp;&nbsp;&nbsp;我们平时使用ArcGIS API加载地图服务时，一般使用的是ArcGIS Server发布的服务，在不利用开源Server的情况下，我们需要进行花一笔不小的费用来购买第三方Server，在项目较小，用不到Server深入的分析功能的时候，我们可以使用IIS或者Tomcat作为切片地图的服务器，通过扩展ArcGIS API的TiledMapSer...
离线的arcgis api for javascript加载天地图(版本:4.6和3.9)
qq_31152023的博客
07-18 1311
使用离线的arcgis api for javascript来加载天地图，主要展示两个版本，一个是4.6版本的，一个是3.6版本的。觉得应该好好收拾，记录一下。话不多说，看代码。 3.6版本，其中还加了一个小控件，鹰眼。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &lt...
ArcGIS API for JavaScript 离线地图调用源码示例功能
10-16 2070
一、概述 ArcGIS API for JavaScript离线地图调用源码示例提供了道路交通图的离线加载功能、卫星影像离线加载功能、矢量标注功能、矢量编辑功能和测量功能等，旨在为用户提供一个可以快速加载离线地图或在线地图的解决方案，并提供技术支持。 除了现有基本功能之外，还可以根据用户的实际需求免费开发工作量较小的新功能（包括个性化需求），如果工作量较大，则会根据工作量的大小和技
ArcGIS API for JavaScript部署开发
m0_53156691的博客
10-08 2192
简单来说，开发可以通过在线引用官网CDN和 通过下载本地开发包引用的两种形式来进行。（这里本地部署又分别可以通过NPM下载模块，或者在官网下载ArcGIS API for JavaScript开发包。而，和ES modules是js模块化开发的规范。可以了解：AMD modules 和 ES modules 两种都是异步的，都适用于前端。
Arcgis JS api 3.4 本地部署（IIS） 地图显示空白问题解决
Dzqingirl的博客
04-12 1764
Arcgis JS api 3.4 本地部署（IIS） 地图显示空白问题解决 最近正在学习Webgis，要将服务器上的地图在网页上实现可视化。 在本地部署aecgis api 过程 前期配置 开启IIS，将官网下载的api压缩包arcgis_js_v39_api.zip解压到C:\inetpub\wwwroot\arcgis_js_api目录下 打开C:\inetpub\wwwroot\arcg...
ArcGIS API for JavaScript----本地环境部署
GIS，加油呀~
11-06 1595
本文是主要是记录一下ArcGIS API For JS 的本地化部署的过程
gis 矢量切片读取_ArcGIS JS 4加载第三方矢量切片
weixin_39836876的博客
12-24 351
现在矢量切片越来越普及,对于地图渲染能更轻更快。ArcGIS JS 4.13可以实现加载第三方矢量切片,以下为代码示例,最下方是我之前切的建筑物数据。当切片大小在1M左右，加载效果还是可以。不过跟mapbox gl相比还是有些逊色，mapbox gl可以加载6M大小的切片，但ArcGIS JS 4却不行。矢量切片还是需要控制好大小，这样才能快速传输和渲染。var style = {"version...
arcgis api（四）3.x和4.x 加载geoserver的wmts切片服务
zhengjie0722的博客
09-24 3899
1.arcgis api 3.x 加载wmts服务 2.arcgis api 4.x 加载wmts服务 arcgis api 3.x 加载geoserver的wmts服务和wms服务都比较简单，有相对比较成熟的api类，但是4.x的WMTSLayer类加载wmts服务会有很多问题，api的示例很简单，但是，用在自己实际的geoserver的切片服务上，会报错，显示title和id未定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值