Arcgis瓦片--js客户端加载
接上篇博客，下载好arcgis格式的瓦片数据以后，需要用js客户端在前端加载出来。这里介绍两种方案：
1、使用超图iServer将瓦片发布成rest地图服务，或者arcgis地图服务，客户端直接加载
2、将瓦片部署到tomcat服务器下，使用js客户端解析加载
备注：arcgis-js客户端的本地部署见博客：
使用iServer发布成服务对接
1、在iServer管理界面，点击发布arcgis缓存
2、选择发布rest地图服务和arcgis地图服务
3、发布完成后的服务地址
http://localhost:8090/iserver/services/map-agscache-0313/arcgisrest/0313/MapServer
http://localhost:8090/iserver/services/map-agscache-0313/rest js预览地图服务如下：
4、使用arcgis-js请求发布的MapServer服务，代码如下：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Load a basic WebMap - 4.3</title>
<style>
* {
padding: 0;
margin: 0;
} html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style> <script>
var dojoConfig = {
async: true,
packages: [{
name: "js",
location: location.pathname.replace(/\/[^/]*$/, '') + '/js'
}]
};
</script>
<link rel="stylesheet" href="http://localhost:8090/arcgis_js_api/library/3.25/3.25/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://localhost:8090/arcgis_js_api/library/3.25/3.25/esri/css/esri.css">
<script type="text/javascript" src="http://localhost:8090/arcgis_js_api/library/3.25/3.25/init.js"></script> <script type="text/javascript">
var map;
require(["esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ImageParameters",
"esri/geometry/Extent",
"esri/SpatialReference",
], function (Map, ArcGISDynamicMapServiceLayer, ImageParameters, Extent, SpatialReference) {
map = new Map("mapDiv"); var imageParameters = new ImageParameters();
imageParameters.format = "png"; //set the image type to PNG24, note default is PNG8. var extent = new esri.geometry.Extent( -6332699.066701883,-14857661.096458122, 25217355.589120373,33742317.61887661, new SpatialReference({
wkid: 3857
})); var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer(
"http://localhost:8090/iserver/services/map-agscache-0313/arcgisrest/0313/MapServer", {
id: "base",
"opacity": 1.0,
"imageParameters": imageParameters,
"fullExtent": extent,
"disableClientCaching": true
}); map.addLayer(dynamicMapServiceLayer); });
</script> </head> <body>
<div id="mapDiv"></div>
</body> </html>
使用arcgis-js直接对接
1、基于TiledMapServiceLayer封装一个layer，将瓦片数据直接放到tomcat目录下即可，其中数据范围，坐标系，中心点，比例尺级别等在瓦片数据的.cdi和.xml中有记录
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: 102113 });
this.initialExtent = this.fullExtent = new esri.geometry.Extent(13738103.530723013000000, 5123421.131898794300000, 13743912.744872687000000, 5128007.353595904100000, this.spatialReference);
this.tileInfo = new esri.layers.TileInfo({
"rows": 256,
"cols": 256,
"compressionQuality": 0,
"origin": { "x": -20037508.342787001, "y":20037508.342787001 },
"spatialReference": { "wkid": 102113 },
"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.29858214164761665, "scale": 1128.4971760000001 },
]
});
this.loaded = true;
this.onLoad(this);
},
getTileUrl: function (level, row, col) {
return "http://localhost:8090/0318-data/_alllayers/" +
"L" + dojo.string.pad(level, 2, '0') + "/" +
"R" + dojo.string.pad(row.toString(16), 8, '0').toUpperCase() + "/" +
"C" + dojo.string.pad(col.toString(16), 8, '0').toUpperCase() + "." +
"jpg";
}
});
});
2、web页面，初始化上面封装的layer
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Load a basic WebMap - 4.3</title>
<style>
* {
padding: 0;
margin: 0;
} html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style> <script>
var dojoConfig = {
async: true,
packages: [{
name: "js",
location: location.pathname.replace(/\/[^/]*$/, '') + '/js'
}]
};
</script>
<link rel="stylesheet" href="http://localhost:8090/arcgis_js_api/library/3.25/3.25/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://localhost:8090/arcgis_js_api/library/3.25/3.25/esri/css/esri.css">
<script type="text/javascript" src="http://localhost:8090/arcgis_js_api/library/3.25/3.25/init.js"></script> <script type="text/javascript">
var map;
require(["esri/map", "js/customTiledLyr"], function (Map, customTiledLyr) {
map = new Map("mapDiv");
var tileUrl = 'http://localhost:8090/0318-data/_alllayers/';
var customTileLyr = new customTiledLyr(tileUrl);
map.addLayer(customTileLyr);
});
</script> </head> <body>
<div id="mapDiv"></div>
</body> </html>
3、运行测试页面，加载效果如下：
参考：
https://blog.csdn.net/dahongdahong/article/details/52754903
https://blog.csdn.net/shijie_nihao/article/details/86736145
Arcgis瓦片--js客户端加载的更多相关文章
- Arcgis for Js之加载wms服务
概述:本节讲述Arcgis for Js加载ArcgisServer和GeoServer发布的wms服务. 1.定义resourceInfo var resourceInfo = { extent: ...
- (转载）arcgis for js - 解决加载天地图和WMTS服务,WMTS服务不显示的问题,以及wmts服务密钥。
1 arcgis加载天地图和wmts服务 arcgis for js加载天地图的例子网上有很多,这里先不写了,后期有空再贴代码,这里主要分析下WMTS服务为什么不显示,怎么解决. 条件:这里的WMTS ...
- 从 bootup.js 学习加载脚本等资源
本文内容 如何使用 示例 参考资料 本文的目的在于,通过 bootup.js 的源代码,认识如何从客户端加载服务器的文件,特别是 JavaScript 文件,注入到页面,并存储在本地缓存,以扩展对 J ...
- 页面加载异常 清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍，防止浏览器缓存
js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法 一.CSS和 ...
- 也说JS脚本加载控制
问题背景 前端采用的 iframe + html 做后台管理系统.现在js.jquery插件非常多,每次页面都是引用就类似这样: <script src="../Scripts/jqu ...
- Silverlight客户端加载DWG图纸方案
前段时间一直再研究怎么才能在Silverlight客户端加载 DWG图纸,ArcGIS API For Silverlight中可以加载Shp文件,但是不能加载DWG,最后想出了一个方法步骤如下: 1 ...
- ArcGIS api for javascript——加载查询结果，悬停显示信息窗口
转自原文 ArcGIS api for javascript——加载查询结果,悬停显示信息窗口 描述 本例在开始和地图交互前执行一个查询任务并加在查询结果.这允许用户鼠标悬停在任意郡县时立即见到Inf ...
- js 模版加载到前端
js 模版加载到前端 简单有效不高端 配个路由 /js/:filename , 用 readTemplate 响应请求,前端可以按模块方式直接 require 模板 'use strict' var ...
- 前端设计中关于外部js文件加载的速度优化
在一般情况下,许多人都是将<script>写在了<head>标签中,而许多浏览器都是使用单一的线程来加载js文件的,从上往下,从左往右. 若是加载过程出错,那么网页就会阻塞,就 ...
随机推荐
- ASP.NET WebApi OWIN 实现 OAuth 2.0（自定义获取 Token）
相关文章:ASP.NET WebApi OWIN 实现 OAuth 2.0 之前的项目实现,Token 放在请求头的 Headers 里面,类似于这样: Accept: application/jso ...
- 仿微信的IM聊天时间显示格式(含iOS/Android/Web实现)[图文+源码]
本文为原创分享,转载请注明出处. 1.引言 即时通讯IM应用中的聊天消息时间显示是个再常见不过的需求,现在都讲究用户体验,所以时间显示再也不能像传统软件一样简单粗地暴显示成“年/月/日 时:分:秒”这 ...
- [Swift]LeetCode395. 至少有K个重复字符的最长子串 | Longest Substring with At Least K Repeating Characters
Find the length of the longest substring T of a given string (consists of lowercase letters only) su ...
- [Swift]LeetCode952. 按公因数计算最大组件大小 | Largest Component Size by Common Factor
Given a non-empty array of unique positive integers A, consider the following graph: There are A.len ...
- 上次被人说TK不好咯，这次给你整个高大上的
0.环境 操作系统:Windows Python版本:3.6.0 1.前言 PyQt是一个创建GUI应用程序的工具包.它是Python编程语言和Qt库的成功融合.Qt库是目前最强大的库之一. 2.效果 ...
- 关于CGI 和 PHP-FPM需要弄清的
https://blog.csdn.net/gao_yu_long/article/details/79390510 补充一点: 如果php-cgi -b 127.0.0.1:6999,则6999端口 ...
- HBase篇--HBase操作Api和Java操作Hbase相关Api
一.前述. Hbase shell启动命令窗口,然后再Hbase shell中对应的api命令如下. 二.说明 Hbase shell中删除键是空格+Ctrl键. 三.代码 1.封装所有的API pa ...
- 要想学好Java编程，构造器、方法重载、this关键字、垃圾回收机制，这4关一定要过！
有人说,你应该关注时事.财经,甚至流行的电影.电视剧,才有可能趁着热点写出爆文:有人说,你别再写“无聊”的技术文了,因为程序员的圈子真的很小,即便是像鸿洋那样的招牌大牛,文章是那么的干货,浏览量有多少 ...
- SQL注入: with rollup特性
题目名称:因缺思汀的绕过 题目地址:http://www.shiyanbar.com/ctf/1940 1.with rollup: with rollup关键字会在所有记录的最后加上一条记录,该记录 ...
- oracle数据库默认是10次尝试失败后锁住用户
一般数据库默认是10次尝试失败后锁住用户 1.查看FAILED_LOGIN_ATTEMPTS的值select * from dba_profiles: 2.修改为无限次(为安全起见,不建议使用)alt ...