制作自己的Web服务瓦片地理底图
电子海图开发第十九篇web电子海图使用OpenLayers加载瓦片地图（共一百篇）
电子海图开发第十九篇web电子海图使用OpenLayers加载瓦片地图（共一百篇）构建OpenLayers，首先在在要web电子海图的网页中引入ol.js 和ol.css这两个文件，你可以到openlayers官网去下载这个文件，也可以到查看源代码下载这两个文件，并且可以查看演示的效果。
map的创建完整代码<!doctype html><html lang="en"><head><link rel="stylesheet" href="js/ol/ol.css" type="text/css"> < src="js/ol4.6.5.js"></><title>OpenLayers example</title></head><style>.map {height: 100%;width: 100%;}</style><body><h2>My Map</h2><div id="map" class="map"></div>< type="text/java">var seamap = new yer.Tile({source : new ol.source.XYZ({url : "http://112.126.96.159/Ship/Map?z={z}&y={y}&x={x}", projection : 'EPSG:3857'})});zoomslider = new ol.control.ZoomSlider();zoomcontrol = new ol.control.Zoom();map = new ol.Map({layers : [ seamap ],view : new ol.View({center : ol.proj.transform([ 119.22, 39.222 ], 'EPSG:4326','EPSG:3857'),projection : 'EPSG:3857',zoom : 5,minZoom : 2,maxZoom : 15,}),target : 'map',controls : [ zoomslider, zoomcontrol ]});</></body></html>1.这段代码的作用是在网页是显示一个地图；2.地图必须显示在一个div中，因此首先创建一个div；3.target:'map' 指定了地图要显示在id为map的div中；4.new yer.Tile定义了一个图层,数据来源是航易电子海图切片数据；5.new ol.View定义了地图的中心位置，范围和层级。
制作自己的Web服务瓦片地理底图
制作自己的Web服务瓦片地理底图最近的Web服务开发过程中遇到的问题是：如何制作自己的瓦片地理底图。
因为：1）在单位内网中使用，不能通过外网直接调用高德、百度、或者谷歌的在线地图；2）主要涉及海域的中、小比例尺应用，即使有高德离线地图，也不实用；3）只涉及轻量级、简单的Web服务，不想用ArcGIS Server 等高端系统作为后端支撑。
最后拟定的实施方案：1）采用ETOPO1、GEBCO_2014网格地形数据作为基础数据，绘制地理底图；2）通过Global Mapper软件将地理底图切割成OpenStreetMap（OSM）方式组织的瓦片地图；3）利用免费开源的Leaflet JS库实现地图交互。
下面一一道来，供作参考。
1.绘制地图1.1 下载ETOPO1数据首先从美国国家海洋和大气管理局（NOAA）的环境信息中心下载ETOPO1全球地形数据，网址https:///mgg/global/global.html。
ETOPO1的分辨率为1个弧分（约1.8公里），下载数据地理范围为：经度 60°E～ 180°E，纬度 20°S～60°N，图1为Sufer绘制的地形晕渲图。
（注：如果机器内存及软件处理能力足够，可全部采用GEBCO_2014数据绘图，不一定需要ETOPO1数据。
）图1：ETOPO1地形晕渲图1.2 下载GEBCO_2014数据从英国海洋数据中心（BODC）下载最新的通用大洋水深图数据GEBCO_2014，网址/data_and_products/gridded_bathymetry_data。
GEBCO制图项目由国际水道测量组织（IHO）和联合国教科文组织下属的政府间海洋学委员会（IOC）联合指导，并由英国海洋数据中心（BODC）负责更新与维护。
GEBCO_2014网格数据的分辨率为30弧秒（约0.9公里），下载数据地理范围为：经度 102°E～ 140°E，纬度 0°～42°N，图2为Sufer绘制的地形晕渲图。
WebGIS前端瓦片地图显示原理及实现
WebGIS前端⽡⽚地图显⽰原理及实现 ⽬前，有很多WebGIS开发包，ArcGIS API for JS、OpenLayers、LeafLetjs等为我们从事WebGIS开发的⼈封装了很多强⼤的功能。
我们很⽅便的使⽤这些库的时候，也让我们忽略了很多原理性的东西。
⽐如说，我之前⼀直在被⼀个问题困扰，就是如何将⼀个点正确的显⽰在浏览器屏幕的正确的位置，即经纬度坐标和屏幕坐标的转换问题。
直到我看到⼀位⼤⽜的博客（），⾥⾯对WebGIS的原理进⾏了深⼊的讲解。
看了他的⽂章后⼀直觉得，我写这篇⽂章是多余的。
但是⼤神的⽂章⾥⾯并没有详细讲解原理的代码实现。
个⼈觉得还是很有必要通过实现相应功能的⽅式了解其原理，⽽且实现时还是遇到了不少的问题，所以还是写了这篇⽂章。
在线地图及参数 以上的⽡⽚地图为例，服务中有⼏个⽐较关键的使⽤到的参数。
Height、Weight：每个⽡⽚的宽度和⾼度Resolution：每⼀个缩放级别下1像素代表的地图单位（投影坐标）Initial Extent：⽡⽚地图的范围获取地图⽡⽚通过观察arcgis地图的⽡⽚组织⽅式，/ArcGIS/rest/services/ChinaOnlineCommunityOnlyENG/MapServer/tile/缩放等级/⾏号/列号通过python程序将⼀定缩放等级的⽡⽚保存到本地我只抓取了0-5级别的⽡⽚，并按照arcgis⽡⽚的保存⽅式存储。
# -*- coding:utf-8 -*-import urllib2import urllibimport osimport mathdef GetPage(geturl):req = urllib2.Request(geturl)user_agent = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 ' \'(KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36'req.add_header('User-Agent', user_agent)response = urllib2.urlopen(req, timeout=10)page = response.read()return pagefor level in range(0,6):try:newdir = "MapTitles/"+str(level)os.makedirs(newdir.decode("utf-8"))except:passfor row in range(0,int(math.pow(2,level))):try:newdir = "MapTitles/"+str(level)+"/"+str(row)os.makedirs(newdir.decode("utf-8"))except:passfor col in range(0,int(math.pow(2,level))):f = open("MapTitles/"+str(level)+"/"+str(row)+"/"+str(col)+'.jpg', 'wb')dataurl = "/ArcGIS/rest/services/ChinaOnlineCommunityOnlyENG/MapServer/tile/"+str(level)+"/"+str(row)+"/"+str(col)data = GetPage(dataurl)f.write(data)f.close()passpasspassView Code展⽰页⾯展会页⾯只含有⼀个canvas元素作为地图容器。
WebGIS中瓦片地图关键技术研究
・ 京测绘 ・ 北
Ｗｅ Ｇ Ｓ中瓦Biblioteka 片地 图关键技术研究 ｂＩ苏 旭 明 谭 建 成
（ 中华 测 绘 服 务 公 司 ， 京 １ Ｏ ８ ） 北 ０ ０ ８
［ 摘 要 ］ 针 对 Ｗ ｅ Ｇ Ｓ 系统 的特 点 ， 出利 用 金 字塔 瓦 片地 图技 术 在服 务 器 端 预 先 生 成 不 同级 别 的 瓦 ｂＩ 提
１ ０
・ 京测绘 ・ 北
２１ ０ ２年 第 ２期
据 进 行人 库 或存储 管 理 ， 对 金 字 塔 地 图 瓦片 建 并
立 线 性 四 叉 树 瓦 片 索 引 。金 字 塔 的 每 层 分 别 对 应 某 个 比例 尺 的数据 集 ，最底 层 的地 图 比例 尺最 大 ， 顶层 的地 图 比例 尺 最小 。每一 个 比例 尺 的 最 数据 集 可 以对应 一 层 或 多 层 的金 字 塔 地 图瓦 片 。 利用 客 户端 的 Ａ ａ ｊｘ技 术 编 写各 类 丰 富 的 客 户端 操作 ， 其 能够 完美 地 控 制 地 图 瓦 片 和 地 理信 息 使
不 仅 同一 种 比例 尺 的 地 图在 跨 带 的位 置 会 有 裂 隙 ， 同 比例 尺 同一 范 围 区 域 由于投 影 变 形 大 小 不
… … ； 此 下去 ， 到 第 ８层 ， 如 直 构成 整 个 瓦 片金 字
塔 。注 意 当用 １：１ ０万 、 ２ ０ １： ５万 数 据 生 成 瓦 片
２１ ０ 第 ２期 ２年
・北 京 测 绘 ・
时， 任何 软件 系统 都 不 可 能 将 全 国 范 围 的 同一 比 例尺 数 据生成 一 张 整 的 图片 ， 时 图片 必 须 分 区 这 域生 成 ， 域 的 划 分 满 足 四叉 树 结 构 模 型 即 可 。 区 区域 图 片生成 后 ， 同样 方 法将 地 图切 割 成 相 同 按 大小 （ ５ ２ ６×２ ６像 素） ５ 的正 方 形 地 图 瓦 片 。下 表
用arcgis9.3实现瓦片图以及相关注意事项
用arcgis9.3实现瓦片图Arcgis server发布地图服务有两种形式：一种是用arcCatalog，另一种是用arcgis server manager，最近研究了下用这两种方法生成瓦片图，用server manager没有找到一次性生成全部瓦片的方法，只是在第一次使用是生成瓦片。
下面介绍下用arcgis catalog生成瓦片图的步骤：1、建立GIS服务器，发布mxd的map service。
打开catalog，展开GIS Servers，找到Add ArcGIS Server，双击出现下面的对话框，选择Manager GIS Services。
下一步：第一个是服务的URL，按图上写就可以，host Name是你电脑的名字。
点击完成。
出现红色方框中的内容。
右键点击Add new service，过程和manager一样，发布一个地图服务。
这里我新发布了一个test的服务。
2、用catalog做cathe图。
右键点击test，选择Service Properties。
选择cathe选项卡。
勾选Using tiles from a cathe that you will define below。
这里进行一些设置，Scales可以设置你要做tiles的比例尺，这里我就选择做成5级，地图中心点的X，Y坐标在创建时会根据你的地图提供一个默认的值，如这里的-5123300和10002300，在Image Setting里，可以设置切图的参数。
按图中配置好，点击上面的Create Tiles。
（在manager里面就没有这一项）。
注意不要勾选Create tiles on demand。
弹出Create map cathe的toolbox。
点击ok，直到提示complete。
最后到server的output目录查询cathe的结果，默认路径C:\arcgisserver\arcgiscache\test。
基于瓦片的web地图
做的一个网站中需要一个电子地图，姑且叫他web－gis吧！基本的实现机制是网页中的图片动态浏览，mapabc(也就是图盟：/)的网页地图应该也是基于这一机制实现的，google地图搜索就是mapabc提供的，当然我做的这个在功能方面和人家的还是差的远。
去年，还差点决定到这家公司面试去那。
现在这个网站中的电子地图开始时也不是我自己写的，代码来自于一个俄罗斯人，使用了mootools工具包，我只是在他代码的基础上进行了功能和界面的修改和增补。
地图图片是由很多小的图片组成的；也就是把一张大的地图图片，根据清晰度剪切成许多小的图片，再实时加载呈现出来。
当地图上有拖拽、双击等操作时，也需要重新加载地图。
你保存一下google 地图，就可以看到这些剪切出来的小图片了。
小图片的文件名称都是按照规则命名的，这样也是js加载图片的需要。
在地图上添加标识，是在地图上添加一个div，之后在它上面添加一个标识图片；当然这个div也要响应地图的所有事件。
将鼠标放在标识上方后出现提示框，点击提示框中的文字可以进行一些相关操作！这个提示框的实现也有很多例子！我不知道地图搜索部分是如何实现的，估计应该是通过要搜索的字符检索匹配的地点和地点坐标。
通过页面上的菜单可以在的图上显示这些地方，清晰度可以控制的。
现在还有一些细节方面的问题需要修改！最后一张是操作成功后用ExtJs做的信息提示框！网上有一个比较成熟的开源的地图浏览器,网址是：/projects/gsiv/,初始版本的名字叫Giant Scalable Image Viewer (GSIV)，现在官方网站上又出现了一个版本Giant-Ass Image V iewer(GSV)。
现在这个开源项目只是实现了图片的浏览，并且在IE下还有些问题。
有兴趣的朋友可以研究一下！。
使用BIGEMAP制作OSGEARTH瓦片地图
使用BIGEMAP制作OSGEARTH瓦片地图愈挫愈勇(QQ473943748)摘要: osgEarth是基于OSG的与GoogleEarth类似的跨平台地形SDK，笔者结合自己的经验，利用BIGEMAP来进行地图影像资源的下载，给大家介绍一种适用于osgEarth的TMS 地图瓦片数据集的制作方法。
关键词: BIGEMAP; OSGEARTH;瓦片一、引言OpenSceneGraph是一个开源的三维引擎，被广泛的应用在视化仿真、游戏、虚拟现实、科学计算、三维重建、地理信息、太空探索、石油矿产等领域。
OSG 采用标准C++和OpenGL编写而成，可运行在所有的Windows平台、OSX、GNU/Linux、IRIX、Solaris、HP-Ux、AIX、Android和FreeBSD 操作系统。
OSG 在各个行业均有着丰富的扩展，能够与使用OpenGL书写的引擎无缝的结合，使用国际上最先进的图形渲染技术，让每个用户都能站在巨人的肩上。
而osgEarth 是正是基于OSG的与GoogleEarth类似的跨平台地形SDK。
osgEarth的开源特性使得相当多的人对其进行了研究，而对于广大工程人员来说，一个漂亮的地图是其开展应用的第一步，为此，笔者结合自己的经验，给大家介绍一种适用于osgEarth的地图瓦片数据集的制作过程。
二、地图影像资源的收集本文笔者利用BIGEMAP（免费版）软件来进行地图影像资源的下载，以谷歌中国地图（图1）为例，选中菜单项中的“矩形框”，在地图上任意选取一个矩形区域（图2），后选择界面右上方的“编辑”，修改矩形框的范围为：-180.0-180.0 ，-90.0-90.0（图3），这样就框中了全球区域（图4）。
双击矩形区域内部，就弹出地图下载对话框（图5），将“存储选项”选择“瓦片：TMS ”，“PNG”图片格式，瓦片级别根据需要选择，由于硬盘空间原因，本文只选到了8级，单击“确定”后就开始了瓦片的下载，详细情况可以在“下载列表”里查看。
MapGIS瓦片数据制作手册
2
MapGIS 瓦片数据制作手册
图 1-2 瓦片裁剪裁剪信息设置界面
图 1-3 瓦片裁剪图层信息设置界面
3
MapGIS 数设置界面 表 1-1 瓦片裁剪功能部分参数说明表 参数名称 X Y 图片格式 高度 宽度 分辨率 大图大小 高级 矢量地图原点 x 坐标值 矢量地图原点 y 坐标值 PNG、GIF、JPEG 三种类型可供选择 256 和 512 两种类型可供选择，单位为像素 256 和 512 两种类型可供选择，单位为像素 用户可自定义，默认值为 96，单位为 DPI 可选择 1024、2048、4096，默认值为 1024，通常可以采用默认值 可点开设置“背景色、jpg 图片压缩比、GIF 是否透明、是否使用调色板、是否高质 量生成图片”等参数 导入 保存 另存 比例尺 可导入保存的“裁剪信息”的文件（.xml） 可保存“裁剪信息”的文件（.xml） 可另存“裁剪信息”的文件（.xml）道指定的位置 可点击“添加、删除”按钮，添加删除指定的级数。可以手动输入从第 1 级到指定 级的比例尺值，也可以点击“默认”按钮，设置第 1 级的比例尺，按照除以 2 自动 自上而下的方式，生成其它级别的比例尺。比例尺的值，可通过缩放地图到一定程 4 参数说明
1.1瓦片制作工具简介 .............................................................................................................. 2 1.2瓦片工具使用说明 .............................................................................................................. 2
使用HTML5canvas做地图（2）瓦片以及如何计算的
使⽤HTML5canvas做地图（2）⽡⽚以及如何计算的上⼀篇也说到⽡⽚，我们为什么使⽤⽡⽚？这⼀篇主要是关于如何拼接地图？下⾯的⼀张图，可以⼀眼明了，地图是如何切割以及拼接的。
⽡⽚信息包括切图原点，⽡⽚⼤⼩，格式，分辨率以及分辨率级别等。
切图原点，⼀般是整个坐标系的最左上⾓，⽐如说，web墨卡托是[-20037508.3427892, 20037508.3427892]。
切图原点右侧列数是正数，左侧的列数是负数，下侧⾏数是正数，上侧⾏数是负数。
⽡⽚的宽度、⾼度，⽬前互联⽹最常见的⽡⽚宽度和⾼度都是256像素。
⽡⽚格式，可能是png,jpg等。
分辨率，这⾥不是指电脑的分辨率。
⽽这⾥意思是⼀像素代表多少⽶，类似于⽐例尺。
分辨率级别，含有若⼲级别的分辨率，不同的分辨率下⾯，显⽰不同的要素信息。
例如，低分辨率下⾯，显⽰洲名称和海洋名称。
中分辨率下⾯，显⽰省名。
⾼分辨率下⾯，就显⽰POI信息。
互联⽹企业当中分辨率级别数在20上下。
地图范围，切图的范围，只在这个范围下⾯才切图，其他的区域都没有相应的⽡⽚。
如果把所有的分辨率都切完的话，是⾮常耗时间的。
仅仅是中国区域，⼀台8核的机器，也得需要⼀个⽉才能切完，更何况全世界了。
⾕歌使⽤的web墨卡托投影，分辨率级别⼀共22级，他的每⼀级分辨率⼤⼩20037508.3427892*2/(256*(2^i))。
20037508.3427892*2代表整个的X轴范围，256代表图⽚的像素⼤⼩，2代表是0级时有两列（有的地图0级只有1列，这个时候就是2^(i-1)），i代表级别。
这个时候，分辨率集合就是[78271.51696402031, 39135.758482010155, 19567.879241005077, 9783.939620502539,4891.969810251269, 2445.9849051256347, 1222.9924525628173, 611.4962262814087, 305.74811314070433, 152.87405657035217, 76.43702828517608, 38.21851414258804, 19.10925707129402, 9.55462853564701, 4.777314267823505, 2.3886571339117526,1.1943285669558763, 0.5971642834779382, 0.2985821417389691, 0.14929107086948454, 0.07464553543474227,0.037322767717371134]。
制作百度地图离线JavaScriptAPI加载本地瓦片地图
制作百度地图离线JavaScriptAPI加载本地⽡⽚地图1.⾸先获取百度 JavaScript API同样在浏览器中打开它，并另存为诸如“apiv1.3.min.js”还有百度地图必须的⼀些控件，光标，logo之类的图⽚也下载下来2.修改“apiv1.3.min.js”把⾥⾯的地图控件的图⽚，光标，logo等链接替换成本地的。
3.下载百度地图⽡⽚，这个有很多⽅法可以获取。
⽐如这个⼯具：4.开始使⽤离线地图api加载本地的地图切⽚现在，完全可以脱离⽹络使⽤百度地图了。
⽰例源码如下：1 <!DOCTYPE html>2 <html>34 <head>5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />6 <title>百度离线地图演⽰</title>7 <script type="text/javascript" src="js/apiv1.3.min.js"></script>8 <script type="text/javascript" src="js/map,oppc,navictrl,tile,copyrightctrl"></script>9 <!--script type="text/javascript" src="/api?v=1.3"></script-->10 <link rel="stylesheet" type="text/css" href="bmap.css" />11 </head>1213 <body>14 <div style="left:0;top:0;width:100%;height:100%;position:absolute;" id="container"></div>15 </body>1617 </html>18 <script type="text/javascript">19var tileLayer = new BMap.TileLayer({20 isTransparentPng: true21 });22 tileLayer.getTilesUrl = function (tileCoord, zoom) {23var x = tileCoord.x;24var y = tileCoord.y;25return 'maptile/' + zoom + '/' + x + '/' + y + '.png';26 }2728var map = new BMap.Map('container');29 map.addTileLayer(tileLayer);30 map.addControl(new BMap.NavigationControl());31 map.centerAndZoom(new BMap.Point(100.675, 39.007978), 5);32 map.enableScrollWheelZoom(); //启⽤滚轮放⼤缩⼩33 map.enableKeyboard(); //启⽤键盘操作，默认禁⽤。
瓦片地图的制作方案和接口设计
瓦片地图的制作方案和接口设计摘要：探讨了如何利用商业软件建设瓦片地图服务，使之符合天地图市级节点的建设规范，且有利于数字城市建设成果的推广应用。
通过计算和测试，得出了使用ArcGIS等商业软件制作瓦片地图的可行方案。
还设计了接口拓展方案，方便各种第三方平台对服务的调用，对“数字马鞍山”的推广起到了促进作用。
关键词：数字马鞍山；天地图；瓦片地图服务；规范；推广“数字马鞍山”地理空间框架建设项目自2010年启动以来，建设了DLG、DOM、DEM、地名地址库等多种形式、多种比例尺的地理空间数据，建成了统一的基础地理信息数据库，建立了马鞍山市权威、通用的地理信息公共平台。
2011年，国家测绘地理信息局印发了《关于“天地图”省市级节点建设方案的通知》“，天地图”省、市级节点是指国家地理信息公共服务平台公众版的省级分节点和市级信息基地，是“天地图”的重要组成部分，也是各省、市级地理信息公共服务平台。
因此，“数字马鞍山”地理信息公共平台公众版建设和天地图马鞍山市级节点建设应当合二为一，作为核心内容的瓦片地图服务既要满足天地图互联互通的需要1，也要最大限度地方便马鞍山市各企事业单位和公众调用。
1技术难点分析要将“数字马鞍山”地理信息公共平台接入天地图国家主节点，瓦片地图服务是一项核心内容，是国家测绘地理信息局对市级节点的重要评估对象，也是“数字马鞍山”应用单位对地理信息服务最基本、最重要的需求。
因此，在瓦片制作和服务接口设计时必须满足天地图接入的规范2，方便国家天地图主节点和其他天地图用户调用；接口尽可能覆盖应用单位的需求，使相关单位对系统不作改动即可直接调用“数字马鞍山”瓦片地图服务，这有利于“数字马鞍山”的推广，全面发挥数字城市建设的价值3,4。
本文重点讨论天地图马鞍山瓦片地图服务的设计方案，探讨利用商业软件制作地图瓦片的推算与设定，以及服务接口差异分析和拓展方案。
2瓦片制作方案地图瓦片是指按不同的比例尺将地图划分为固定大小的图片，客户端根据视图范围和比例尺直接调用已生成的图片，大大提升了服务器的响应效率，优化用户体验5。
基于Web地图瓦片服务(WMTS)的林区三维场景构建
Ｖ ０ ＿ １ ． ３ ３ ＮＯ ． ６ Ｊ ｕ ｎ ．２ ０ １ ３
基于 Ｗｅ ｂ地 图瓦片服务 （ ＷＭ Ｔ Ｓ ）的林 区 三维场景构建
杨志高， 易 衡
（ 中南林 业科技 大学，湖南 长 沙 ４ １ ０ ０ ０ ４ ）
摘 要 ：在轻量级林业信息系统 开发中，必须 降低 获取林区的遥感地 图及相关空 问数据 的成本 ，提高开发效率 。
关键 词：林区三维场景 ；瓦片地 中图分类号：￥ ７ ７ １ ． ３ 文献标志码 ：Ａ 文章编号：１ ６ ７ ３ ． ９ ２ ３ Ｘ（ ２ ０ １ ３ ） ０ ６ ． ０ ０ ３ ３ ． ０ ４
Ｃｏ ｎ ｓ ｔ ｒ ｕ ｃ ｔ ｉ ｏ ｎ ｏ ｆ ｆ ｏ ｒ ｅ ｓ ｔ ｅ ｄ ａ ｒ ｅ ａ ｔ ｈ ｒ ｅ ｅ ｄ ｉ ｍｅ ｎ ｓ ｉ ｏ ｎ ａ ｌ ｓ ｃ ｅ ｎ ｅ ｓ ｂａ ｓ ｅ ｄ ｏ ｎ Ｗ ｅ ｂ
第３ ３卷 第 ６期 ２ ０ １ ３年 ６月
中 南 林 业 科 技 大 学 学 报
Ｊ ｏ ｕ ｒ ｎ ａ ｌ ｏ ｆ Ｃｅ ｎ ｔ ｒ ａ ｌ Ｓ ｏ ｕ ｔ ｈ Ｕｎ ｉ ｖ ｅ ｒ ｓ ｉ ｔ ｙ ｏ ｆ Ｆｏ ｒ ｅ ｓ ｔ ｒ ｙ＆ Ｔ ｅ ｃ ｈ ｎ ｏ ｌ ｏ ｇ ｙ
ｉ ｍａ ｇ ｅ ｓ ｎｄ ａ ｓ ｐ ａ ｔ ｉ ａ ｌ ｄ ａ ｔ ａ ｗｅ ｒ ｅ ｏ ｂ ａｉ ｔ ｎ ｅ ｄ ａ ｔ ｌ ｏ ｗ ｃ ｏ ｓ ｔ ａ ｎｄ ｈ ｉ ｇ ｈ ｅ ｉｃ ｆ ｉ ｅ ｎ ｃ ｙ ， ｎｄ ａ ｈｅ ｔ ａ ｃ ｈ ｉ ｖ ｅ ｍｅ ｎ ｔ ｓ ｗｅ ｒ ｅ ａ ｐｐ ｌ ｉ ｅ ｄ ｉ ｎ ｈｅ ｔ ｃ ｏ ｎ ｓ ｔ ｒ ｕ ｃ ｔ ｉ ｏ ｎ ｏ ｆ ｆ ｏ ｒ ｅ ｓ ｔ ｅ ｄ ａ ｒ ｅ ａ ｔ ｈ ｒ ｅ ｅ — ｄ ｉ ｍｅ ｎｓ ｉ ｏ ｎ ａ ｌ ｓ ｃ ｅ ｎ ｅ ｓ ． Ｔｈ ｒ ｏ ｕ ｇ ｈ ｈｅ ｔ Ｗ Ｍ ＴＳ ｐ ｒ ｏ ｖ ｉ ｄ ｉ ｎ ｇ ｂ ｙ Ｇｏ ｏ ｇ ｌ ｅ ｃ ｏ ｍｐ ｎｉ ａ ｅ ｓ ， ｈｅ ｔ ｒ ｅ ｍｏ ｔ ｅ ｓ ｅ ｎ ｓ ｉ ｎ ｇ ｉ ｍａ ｇ ｅ ｙ ｒ ａ ｎ ｄ ｅ ｌ ｅ ｖ ａ ｔ ｉ ｏ ｎ ｄ ａ ｔ ａ ｏ ｆ
基于瓦片地图的地理信息系统研究与应用
基于瓦片地图的地理信息系统研究与应用随着科技的不断发展，地理位置信息的重要性越来越凸显。
尤其在现代社会中，人们经常需要查找地点、规划路径等，这些都离不开地理信息系统（Geographic Information System，简称GIS）。
而瓦片地图便是GIS中必不可少的一部分。
瓦片地图，如Google Maps和百度地图，是由一些经纬度、缩放级别、地图样式等信息组成的图片。
当用户需要使用地图时，他们会从特定的服务器上下载或呈现相应的瓦片。
由于瓦片地图能够在网站上快速且高效地展示地理信息，因此在大规模的网络地图服务中被广泛使用。
那么，如何基于瓦片地图建立地理信息系统呢？本文将重点探讨这一问题，并以Web地图应用为例进行研究和应用。
一、Web地图应用的基本组成Web地图应用是基于Web技术的GIS应用，它由前端和后端两个部分组成。
前端是用户使用的地图界面，包括地图的显示、操作、查询等功能。
后端是地图数据的处理和存储，包括数据的格式转换、存储、查询等功能。
前端部分需要实现以下功能：1. 地图界面的显示，可以使用各种地图引擎（如OpenLayers、Leaflet）进行开发。
2. 地图的操作，包括平移、缩放、旋转、倾斜等。
3. 地图的标注和图层控制，可以添加各种标注和图层，使地图的显示更加直观。
4. 地图的查询和分析功能，可以对地图上的数据进行查询和分析。
后端部分需要完成以下功能：1. 地图数据的转换和存储，将不同格式的地图数据（如矢量数据、影像数据）转换为瓦片数据，并存储在服务器中。
2. 地图数据的查询和分析，对服务器中存储的地图数据进行查询和分析，并将结果返回给前端。
3. 用户权限控制和数据安全，保护地图数据的安全性和隐私性。
二、基于瓦片地图的Web地图应用的优势基于瓦片地图的Web地图应用有如下优势：1. 瓦片地图具有快速、高效、易于缓存和存储的特点，可以有效地解决大规模地图数据的存储和传输问题。
在ArcGIS中发布GoogleEarth瓦片为网络地图服务(wms)
在ArcGIS中发布GoogleEarth瓦片为网络地图服务（wms）说明本案例实现内容：GoogleEarth瓦片地图的获取、在ArcGIS Server Manger中发布下载好的影像瓦片数据。
本实例使用软件版本：ArcGIS10.2，水经注万能地图下载器。
影像瓦片来源“水经注万能地图下载器”。
如果没有安装本软件，可以百度“水经注软件”到官方网站下载。
一、下载瓦片数据启动水经注万能地图下载器，选择“卫星.谷歌地球”在线地图，点击“框选下载区域”，双击下载区域，选择级数，如下图。
由于我们需要导出瓦片数据，为了增加缩放效果，这里我们从1级到10级都勾选上。
选择好级别后，点击开始下载。
下载完成后会弹出对话框询问是否要立即导出，选择“是”，然后显示“导出图片数据”对话框，如下图所示。
在该对话框中，选择导出“瓦片：ArcGIS Server”，导出级别“1-10”，点击“输出”按钮导出数据，并叠加上标签即可。
默认导出路径为“D:\SGDownload\ tt2_ArcgisServerTiles”。
二、在ArcGIS中发布服务首先把刚下载好的瓦片文件在arcmap中打开，可以预览到瓦片地图，如下图。
发布服务，选择“文件”，“共享为”，“服务”弹出对话框，点击“下一步”点击“继续”，弹出服务编辑器对话框。
这里的设置就是重点了。
1、点击“缓存”；2、选择“使用缓存中的切片”；2、选择“切片方案”；3、选择我们下载瓦片文件夹中的conf.xml文件；4、选择“手动构建缓存”；最后“发布”。
发布成功后，可以再ArcGIS manager中查看，然后会发现我发布的地图服务是空白的。
接下来就需要添加我们下载好的瓦片影像了。
在“目录”下右击发布好的文件，选择“管理缓存”，选择“导入缓存”，弹出对话框，导入下载好的瓦片如下图导入成功后，在ArcGIS Server Manager中保存并重新启动“testTiles”服务。
WebGIS-瓦片图灰度、倒置处理（filter）
WebGIS-⽡⽚图灰度、倒置处理（filter）以前使⽤百度、⾼德在线地图时，可以直接配置地图样式。
配置⼀些暗⿊等主题的，并可以在线加载。
现在项⽬中都使⽤的是 openlayers ，加载的地图底图基本都是⽡⽚形式。
系统主题⾊调成暗⿊的，还使⽤以前的地图怎么感觉都是不搭配的。
⽡⽚底图都是⼀张张图⽚，可以对这些图⽚处理就好了。
⼀、filterCSS3 的新特性 filter 可以对图⽚进⾏处理。
那么直接写 css 怎么样？经过⼀番查找，直接对加载地图的 canvas 设置 filter 样式就可以。
canvas {filter: grayscale(1) invert(1) !important;}在 openlayers 中对 canvas 设置了这个属性，所以要加 !important其中 grayscale 是做灰度处理，inver 是做倒置处理。
这两个可以单独使⽤，也可以结合使⽤。
根据⾃⼰主题搭配合理使⽤。
效果如下：看上去效果还是⽐前⾯好不少。
问题：在接下来有有了新问题：因为是对 canvas 做的 filter 处理，所以所有的地图、⾃⼰添加的点、线等都做了处理（这些是不想被处理的）。
寻找了⼀圈之后发现：openlayers 可以单独对⽡⽚处理。
⼆、openlayers 处理openlayers 可以对加载的任何图⽚做处理。
主要是通过tileLoadFunction通过搜索API发现在 ol/source 下⾯的能加载图⽚的基本都有这个函数。
如：XYZ、WMTS、Tile、BingMaps。
这个函数是在加载图⽚的时候对图⽚做了预处理。
具体代码实现如下：const vecLayer = new TileLayer({source: new XYZ({url: mapUrls['aMap-vec-a'],tileLoadFunction: function(imageTitle, src) {const img = new Image()img.crossOrigin = ''img.onload = () => {const canvas = document.createElement('canvas')const w = img.widthconst h = img.heightcanvas.width = wcanvas.height = hconst context = canvas.getContext('2d')context.drawImage(img, 0, 0, w, h, 0, 0, w, h)const imgData = context.getImageData(0, 0, w, h)for (let i = 0; i < imgData.height; i++) {for (let j = 0; j < imgData.width; j++) {const x = (i * 4) * imgData.width + j * 4const r = imgData.data[x]const g = imgData.data[x + 1]const b = imgData.data[x + 2]const avg = (r + g + b) / 3// 注意这⾥：avg 是灰度值，如果只需要灰度那就直接赋值，需要倒置（invert）的，⽤ 255 减去灰度值imgData.data[x] = imgData.data[x + 1] = imgData.data[x + 2] = 255 - avg}}context.putImageData(imgData, 0, 0)imageTitle.getImage().src = canvas.toDataURL('image/png')}img.src = src}}),title: '⽮量底图'})这样处理的好处：只针对需要的图层做处理，其他图层、⾃⼰添加的点、线、⾯等要素不受影响。
基于Web地图瓦片服务(WMTS)的林区三维场景构建
基于Web地图瓦片服务(WMTS)的林区三维场景构建
杨志高;易衡
【期刊名称】《中南林业科技大学学报》
【年(卷),期】2013(033)006
【摘要】在轻量级林业信息系统开发中,必须降低获取林区的遥感地图及相关空间数据的成本,提高开发效率.通过分析Intemet网络上国内外地理信息服务商提供的Web地图瓦片服务(以下简称WMTS)理论及架构,低成本高效率获取遥感图像及空间数据,并应于林区三维场景构建中.通过Google公司提供WMTS,获取到长沙市天马山林区遥感图像及高程数据,利用DirectX计算绘图技术,构建长沙市天马山林区三维场景.利用WMTS服务能有效解决林业信息系统中,数据昂贵,开发成本高,信息不够全面等问题,为轻量级林业信息系统高效开发提供便利.
【总页数】5页(P33-36,42)
【作者】杨志高;易衡
【作者单位】中南林业科技大学,湖南长沙410004;中南林业科技大学,湖南长沙410004
【正文语种】中文
【中图分类】S771.3
【相关文献】
1.基于WMTS服务的电子地图快速更新体系的研究与实践 [J], 万宝林;雷丽珍
2.基于 WMTS 标准的2．5维电子地图的构建 [J], 李玲;秦志伟;王崇;刘正纲
3.OpenGIS网络地图分块服务实现标准(WMTS)分析 [J], 周旭
4.基于热点区域簇群的林区地图瓦片缓存策略 [J], 柴龙成;高文灵;尹俊飞;陈星涵;陈飞翔
5.区域瓦片地图服务构建方法研究 [J], 曾李阳;严林;张尧
因版权原因，仅展示原文概要，查看原文内容请购买。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
制作自己的Web服务瓦片地理底图
最近的Web服务开发过程中遇到的问题是：如何制作自己的瓦片地理底图。
因为：1）在单位内网中使用，不能通过外网直接调用高德、百度、或者谷歌的在线地图；2）主要涉及海域的中、小比例尺应用，即使有高德离线地图，也不实用；3）只涉及轻量级、简单的Web服务，不想用ArcGIS Server 等高端系统作为后端支撑。
最后拟定的实施方案：1）采用ETOPO1、GEBCO_2014网格地形数据作为基础数据，绘制地理底图；2）通过Global Mapper软件将地理底图切割成OpenStreetMap（OSM）方式组织的瓦片地图；3）利用免费开源的Leaflet JS库实现地图交互。
下面一一道来，供作参考。
1.绘制地图
1.1 下载ETOPO1数据
首先从美国国家海洋和大气管理局（NOAA）的环境信息中心下载ETOPO1全球地形数据，网址https:///mgg/global/global.html。
ETOPO1的分辨率为1个弧分（约1.8公里），下载数据地理范围为：经度 60°E～ 180°E，纬度 20°S～60°N，图1为Sufer绘制的地形晕渲图。
（注：如果机器内存及软件处理能力足够，可全部采用GEBCO_2014数据绘图，不一定需要ETOPO1数据。
）
图1：ETOPO1地形晕渲图
1.2 下载GEBCO_2014数据
从英国海洋数据中心（BODC）下载最新的通用大洋水深图数据GEBCO_2014，网址/data_and_products/gridded_bathymetry_data。
GEBCO制图项目由国际水道测量组织（IHO）和联合国教科文组织下属的政府间海洋学委员会（IOC）联合指导，并由英国海洋数据中心（BODC）负责更新与维护。
GEBCO_2014网格数据的分辨率为30弧秒（约0.9公里），下载数据地理范围为：经度 102°E～ 140°E，纬度 0°～42°N，图2为Sufer绘制的地形晕渲图。
图2：GEBCO_2014地形晕渲图
1.3 配色方案
为了让出来的图美观实用，地图的配色方案很重要，可以根据Web服务目的制定不同的配色方案，图1、图2的RGB配色方案如下（参考NOAA/NGDC的配色方案），仅供参考。
1.4 绘制基础地图
将图1、图2的Sufer配色方案保存为*.clr文件，然后在Global Mapper中加载数据、调用Sufer 的clr配色方案（Custom Shader）、添加山体阴影（Enable Hill Shading），得到基础地图，见图3与图4。
图3：ETOPO1基础地图
图3：GEBCO_2014基础地图
1.5 拟定地理底图内容
OpenStreetMap（OSM）方式的Web服务瓦片地图可分为0～19个放大级别（Zoom Level），用于构建瓦片金字塔。
根据实际的Web服务需求，选取放大级别3～8，不同放大级别采用的基础地图及其上叠加的图层见下表，其中的城市与海域注记随着比例尺加大逐渐增多。
1.6 绘制地理底图
根据拟定的地理底图内容，利用Global Mapper将需要叠加的矢量图层添加到ETOPO1或GECBO_2014基础地图上，绘制出不同比例尺的地理底图。
此时的地理底图采用WGS84地理坐标成图，不涉及投影。
2.地图切片
2.1 Global Mapper输出瓦片
在Global Mapper中选择：File → Export → Export Web Format… ，在弹出窗口中选择输出格式“OSM (Open Street Map) Tiles”,然后在“OSM Tiles Export Options”窗口中选择输出瓦片的放大级别，点击OK后系统即执行地图瓦片切割操作。
2.2 瓦片目录结构
OpenStreetMap（OSM）的地图瓦片（tile）以地图左上角为起点切割，从西到东、从北到南将地图切割为256×256像素（pixel）的PNG格式文件，然后每一个放大级别的地图瓦片保存为一个目录，每一
列地图瓦片保存为一个子目录，每一地图瓦片是子目录中的文件。
2.3 瓦片地图投影
Global Mapper会自动将原地图转换为Web Mecator投影的瓦片地图，Web Mecator投影是一种在WGS84椭球上采用圆球体墨卡托投影公式计算的近似墨卡托投影，Web Mecator投影的代号为EPSG 3857，ArcGIS中的投影名为：WGS_1984_Web_Mercator_Auxiliary_Sphere。
3.瓦片地图调用
3.1 下载LeafletJS
下载最新的LeafletJS（目前是1.0.3），网址
将其中的leaflet.css放到服务根目录的css目录下（实际服务时可将leaflet.css压缩一下，采用压缩文件leaflet.min.css提供服务）；将其中的leaflet.js放到服务根目录的js目录下。
如果不想让浏览图的右下角出现“Leaflet”标志，可以在leaflet.js中搜索“Leaflet”（区分大小写），将<a href="" title="A JS library for interactive maps">Leaflet</a>代码中的“Leaflet”删除即可。
3.2 编写HTML、CSS及JS代码
假设瓦片地图服务的HTML文件名maptiles.html（表达网页内容），目录结构按下图设置,其中mosic目录放置瓦片地图， css代码设置网页静态样式，js代码让网页具有交互能力：
则HTML5示例代码如下：
HTML代码中link的 css/style.css 设置地理底图的窗口大小，CSS3示例代码如下：
HTML代码中link的 js/maptiles.js 调用瓦片地图，假设瓦片地图放在服务根目录的mosic目录下，放大倍数最小3、最大8，起始放大倍数3，起始窗口中心点坐标为纬度25°、经度120°，则基于Leaflet API的JS示例代码如下：
3.3 浏览地理底图
在浏览器中打开maptiles.html文件即可浏览地图，下面分别是放大级别为4，6，8的显示结果。
戴勤奋 2017-3-30。