openlayers 天地图 第二十三讲-OpenLayers离线地图快速实战(四)

如何用OpenLayers开源地图引挚发布离线地图这里以吉林省吉林市地图为例，说明如何用OpenLayers开源地图引挚发布离线谷歌卫星地图。

在万能地图下载器中，选择吉林省吉林市显示行政区划，然后点击“下载”按钮，可以新建任务。

在新建任务对话框中选择需要下载的级别，一般是从当前行政区划显示的级别开始选择（这里是第9级），一直接选择到第19级（国内19级清晰度效果最佳，19级以上基于19级放大），由于数据量非常大，这里只为了说明如何用OpenLayers开源地图引挚发布离线卫星地图的方法，因此这里以选择到第13级为例。

在“新建任务”对话框中，点击“导出设置”可以设置相关导出参数，我们可以选择导出大图、导出瓦片和导出离线包等三种方式。

由于这里我们用OpenLayers开源地图引挚发布离线卫星地图需要用的是瓦片格式，因此这里选择“导出瓦片”选项。

新建任务详细参数说明，请参阅：新建地图下载任务参数说明在“导出瓦片”选项的相关参数中，我们选择瓦片格式为“TMS瓦片”、文件格式为PNG，坐标坐标投影为墨认的“WGS84 Web 墨卡托投影”，选择“边界范围裁剪”，背景颜色为“透明”背景。

导出瓦片详细参数说明，请参阅：导出瓦片参数说明分别点击“确定”按钮开始下载任务，下载并自动导出后可以看到导出的瓦片目录为8到12级而不是我们选择的9到13级，这是因为软件中的级别编号是从1开始，而标准的TMS瓦片命名规则都是从0开始，因此该情况属于正常情况，瓦片的行列号编号规则同理。

将下载的地图瓦片目录复制到OpenLayers开源地图引挚发布离线地图的源码示例中。

用专业的WebGIS开发工具Visual Studio Code可以打开源代码进行功能开发。

Visual Studio Code下载安装教程，请参阅：如何安装WebGIS开发工具Visual Studio Code双击OpenLayers开源地图引挚发布离线地图源码中的“map.html”文件，可以在浏览器中打开查看在线地图。

如何用OpenLayers开源地图引挚发布离线地图这里以吉林省吉林市地图为例，说明如何用OpenLayers开源地图引挚发布离线谷歌卫星地图。

在万能地图下载器中，选择吉林省吉林市显示行政区划，然后点击“下载”按钮，可以新建任务。

在新建任务对话框中选择需要下载的级别，一般是从当前行政区划显示的级别开始选择（这里是第9级），一直接选择到第19级（国内19级清晰度效果最佳，19级以上基于19级放大），由于数据量非常大，这里只为了说明如何用OpenLayers开源地图引挚发布离线卫星地图的方法，因此这里以选择到第13级为例。

在“新建任务”对话框中，点击“导出设置”可以设置相关导出参数，我们可以选择导出大图、导出瓦片和导出离线包等三种方式。

由于这里我们用OpenLayers开源地图引挚发布离线卫星地图需要用的是瓦片格式，因此这里选择“导出瓦片”选项。

新建任务详细参数说明，请参阅：新建地图下载任务参数说明在“导出瓦片”选项的相关参数中，我们选择瓦片格式为“TMS瓦片”、文件格式为PNG，坐标坐标投影为墨认的“WGS84 Web 墨卡托投影”，选择“边界范围裁剪”，背景颜色为“透明”背景。

导出瓦片详细参数说明，请参阅：导出瓦片参数说明分别点击“确定”按钮开始下载任务，下载并自动导出后可以看到导出的瓦片目录为8到12级而不是我们选择的9到13级，这是因为软件中的级别编号是从1开始，而标准的TMS瓦片命名规则都是从0开始，因此该情况属于正常情况，瓦片的行列号编号规则同理。

将下载的地图瓦片目录复制到OpenLayers开源地图引挚发布离线地图的源码示例中。

用专业的WebGIS开发工具Visual Studio Code可以打开源代码进行功能开发。

Visual Studio Code下载安装教程，请参阅：如何安装WebGIS开发工具Visual Studio Code双击OpenLayers开源地图引挚发布离线地图源码中的“map.html”文件，可以在浏览器中打开查看在线地图。

OpenLayers1 OpenLayers简介OpenLayers是由MetaCarta公司开发的，用于WebGIS客户端的JavaScript包。

它实现访问地理空间数据的方法都符合行业标准，比如OpenGIS的WMS和WFS规范，OpenLayers 采用纯面向对象的JavaScript方式开发，同时借用了Prototype框架和Rico库的一些组件。

采用OpenLayers作为客户端不存在浏览器依赖性。

由于OpenLayers采用JavaScript语言实现，而应用于Web浏览器中的DOM（文档对象模型）由JavaScript实现，同时，Web浏览器（比如IE，FF等）都支持DOM。

OpenLayersAPIs采用动态类型脚本语言JavaScript编写，实现了类似与Ajax功能的无刷新更新页面，能够带给用户丰富的桌面体验（它本身就有一个Ajax类，用于实现Ajax功能）。

目前，OpenLayers所能够支持的Format有：XML、GML、GeoJSON、GeoRSS、JSON、KML、WFS、WKT(Well-Known Text)。

在OPenlayers.Format名称空间下的各个类里，实现了具体读/写这些Format的解析器。

OpenLayers所能够利用的地图数据资源“丰富多彩”，在这方面提供给拥护较多的选择，比如WMS、WFS、GoogleMap、KaMap、MSVirtualEarth、WorldWind等等。

当然，也可以用简单的图片作为源。

在操作方面，OpenLayers 除了可以在浏览器中帮助开发者实现地图浏览的基本效果，比如放大（Zoom In）、缩小（Zoom Out）、平移（Pan）等常用操作之外，还可以进行选取面、选取线、要素选择、图层叠加等不同的操作，甚至可以对已有的OpenLayers 操作和数据支持类型进行扩充，为其赋予更多的功能。

例如，它可以为OpenLayers 添加网络处理服务WPS 的操作接口，从而利用已有的空间分析处理服务来对加载的地理空间数据进行计算。

OpenLayers教程1开始使用openlayers1.1设置先到它的官方网站下载他的压缩包，解压。

拷贝目录下的OpenLayer.js、根目录下的lib目录、根目录下的img目录到你网站的Scripts目录下（当然，这个只是例子，您网站的目录结构您自己说得算，只要保证OpenLayers.js，/lib，/img在同一目录中即可）。

然后，创建一个****.html作为查看地图的页面。

2试验openlayers环境：geoserver1.7Openlayers2.4Dreamviever82.1第一个地图窗口目标：用openlayers加载geoserver wms。

步骤：（1）空白html文件（2）插入div-map（3）为div付风格以上为未加载地图的静态页面代码为：效果为：（4）插入openlayers代码引用<link rel="stylesheet" type="text/css" href="../theme/default/style.css"/><script src="OpenLayers.js" type="text/javascript"></script>（5）写js代码，主要是init（）第一个地图窗口就完成了注1．js中defer的作用是页面加载完成后，执行脚本。

注2．2222.2控制地图与div的占据区域目标：让地图默认占满展现区方法：设置map的options，由其中两个因素决定：maxExtent－最大地图边界；maxResolution－最大解析度。

当maxExtent设置为地图的最大边界后，maxResolution设置为auto，那地图就占满DIV。

var options = { controls: [],maxExtent: bounds,maxResolution: "auto",projection: "EPSG:4326",numZoomLevels: 7,units: 'degrees'};map = new OpenLayers.Map('map',options);2.3地图控制－尺度缩放目标：填加尺度缩放控件步骤：（1）map初始化赋参数var options = {controls: [],//scales: [50000000, 30000000, 10000000, 5000000],maxExtent: bounds,maxResolution: "auto",projection: "EPSG:4326",numZoomLevels: 7, （表示有几个缩放级别）units: 'degrees'};map = new OpenLayers.Map('map',options);（2）填加控件，代码map.addControl(new OpenLayers.Control.PanZoomBar({position: new OpenLayers.Pixel(2, 15)（右边距，上边距）}));思考：级别的计算，个人推测由(maxResolution- minResolution)/ numZoomLevels，但是默认值是书面日后再细究。

如何将天地图在基于OpenLayers的服务器端进行部署的方法一、准备工作1、到OpenLayers的官方网站下载压缩包，如下图所示。

2、到水经注软件官方网站下载《天地图卫星地图下载器》。

二、下载示例数据这里以《天地图卫星地图下载器》为你说明如何下载天地图卫星地图。

安装天地图卫星地图下载器以后，启动软件，如下图国范围，即点击工具栏上的“框选下载区域”，然后在视图中绘制选择范围，如下图所示。

下载即可，如下图所示。

下载完成后，导出ArcGIS Server瓦片，如下图所示。

点击“输出”按钮，开始导出。

等待导出完毕，会在D盘Test目录看到“中国_ArcgisServerTiles”这个文件夹，如下图所示。

然后将“中国_ArcgisServerTiles”文件夹重命名为“data”，如下图所示。

三、服务器端地图引擎配置第一步：将下载的OpenLayers-2.13.1.zip解压到D盘Test目录。

如下图所示。

第二步：新建网站在IIS中新建网站，如下图所示。

这里我们将网站命名为“TEST”，物理路径设置为“D:\Test”，端口设置为“8080”，如下图所示。

第三步：将以下代码复制并保存为html文件（如“Example_ArcGIS Server.html”），放到“D:\Test\OpenLayers-2.13.1\examples”目录中。

==============================代码开始=============================<!DOCTYPE html><html><head><title>ArcGIS Server Map Cache Example (Direct Access)</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link rel="stylesheet" href="OpenLayers-2.13.1/theme/default/style.css" type="text/css"> <link rel="stylesheet" href="style.css" type="text/css"><script src="../lib/OpenLayers.js"></script><script src="../lib/OpenLayers/Layer/ArcGISCache.js" type="text/javascript"></script> <script type="text/javascript">/* First 4 variables extracted from conf.xml file *//* Tile layers & map MUST have same projection */var proj = 'EPSG:4326';/* Layer can also accept serverResolutions array* to deal with situation in which layer resolution array & map resolution* array are out of sync*/var mapResolutions = [1.40625,0.703125,0.3515625,0.17578125,0.087890625,0.0439453125,0.021********,0.010*********,0.0054931640625,0.00274658203125,0.001373291015625,0.0006866455078125,0.00034332275390625,0.000171661376953125,0.0000858306884765625,0.00004291534423828125,0.000021457672119140625,0.0000107288360595703125,0.00000536441802978515625,0.000002682209014892578125,0.0000013411045074462890625,0.00000067055225372314453125];/* For this example this next line is not really needed, 256x256 is default.* However, you would need to change this if your layer had different tile sizes */var tileSize = new OpenLayers.Size(256, 256);/* Tile Origin is required unless it is the same as the implicit map origin* which can be affected by several variables including maxExtent for map or base layer */var agsTileOrigin = new OpenLayers.LonLat(-180, 90);/* This can really be any valid bounds that the map would reasonably be within *//* var mapExtent = new OpenLayers.Bounds(293449.454286,4307691.661132,314827.830376,4323381.484178); */var mapExtent = new OpenLayers.Bounds(-180, -90, 180, 90);var aerialsUrl = 'http://localhost:8080/data/_alllayers';var map;function init() {map = new OpenLayers.Map('map', {maxExtent: mapExtent,controls: [new OpenLayers.Control.Navigation(),new yerSwitcher(),new OpenLayers.Control.PanZoomBar(),new OpenLayers.Control.MousePosition()]});var baseLayer = new yer.ArcGISCache('Aerials', aerialsUrl, {tileOrigin: agsTileOrigin,resolutions: mapResolutions,sphericalMercator: false,maxExtent: mapExtent,useArcGISServer: false,isBaseLayer: true,type: 'jpg',projection: proj});map.addLayers([baseLayer]);//map.zoomToExtent(new OpenLayers.Bounds(295892.34, 4308521.69, 312825.71, 4316988.37));map.setCenter(new OpenLayers.LonLat(103,31).transform(map.displayProjection, map.getProjectionObject()), 3);}</script></head><body onLoad="init()"><h1 id="title">ArcGIS Server Map Cache Example (Direct Access)</h1><div id="tags"></div><p id="shortdesc">Demonstrates the basic initialization of the ArcGIS Cache layer using a prebuiltconfiguration, and direct tile access from a file store.</p><div id="map" class="smallmap"></div><div id="docs"><p>This example demonstrates using the ArcGISCache layer for accessing ESRI's ArcGISServer (AGS) Map Cache tiles directly via the folder structure and HTTP. Togglethe visibility of the AGS layer to demonstrate how the two maps are lined up correctly.</p><h2>Notes on this Layer</h2><p>It's important that you set the correct values in your layer, and these values willdiffer between tile sets. You can find these values for your layer in conf.xml atthe root of your cache. (ie. <ahref="/arcgiscache/dgaerials/Layers/conf.xml">/arcgiscache/dgaerials/Layers/conf.xml</a>)</p> <p>For fused map caches this is oftenhttp:<i>ServerName</i>/arcgiscache/<i>MapServiceName</i>/Layers<br>For individual layer caches this is oftenhttp:<i>ServerName</i>/arcgiscache/<i>LayerName</i>/Layers</p><h2>Other Examples</h2><p>This is one of three examples for this layer. You can also configure this layerto use <a href="arcgiscache_ags.html">prebuilt tiles from a live server.</a> Itis also possible to let this <a href="arcgiscache_jsonp.html">layer 'auto-configure' itself using the capabilities json object from the server itself when using a liveArcGIS server.</a></p></div></body></html>==============================代码结束============================= 第四步：双击打开刚才保存的文件，如果部署正确，则将会显示离线WGS84卫星地图的浏览结果，如下图所示。

vue利⽤openlayers加载天地图和⾼德地图⽬录⼀、天地图部分1、在vue中安装openlayers⼆、⾼德地图部分⼀、天地图部分1、在vue中安装openlayersnpm i --save ol这⾥说的vue是基于脚⼿架构建的。

新建个页⾯，也就是vue⽂件，配置好路由。

接着就是可以直接放⼊我的代码运⾏显⽰了。

<template><div class="wrapper"><div>天地图</div><div class="map" id="olMap"></div></div></template><script>import "ol/ol.css";import {Tile as TileLayer } from "ol/layer";import XYZ from "ol/source/XYZ";import {defaults as defaultControls } from "ol/control";import Map from "ol/Map.js";import View from "ol/View.js";export default {data() {return {map: null,parser: null,};},mounted() {this.initMap();},methods: {initMap() {const map = new Map({target: "olMap",view: new View({center: [0, 0], //中⼼点经纬度zoom: 4, //图层缩放⼤⼩projection: "EPSG:4326",}),controls: defaultControls({zoom: true,attribution: false,rotate: false,}),});this.map = map;// 添加地图let url = "http://t{0-7}/DataServer?x={x}&y={y}&l={z}"; url = `${url}&T=vec_c&tk=替代你的key`;const source = new XYZ({url: url,projection: "EPSG:4326",});const tdtLayer = new TileLayer({source: source,});this.map.addLayer(tdtLayer);// 添加注记url = "http://t{0-7}/DataServer?x={x}&y={y}&l={z}"; url = `${url}&T=cva_c&tk=替代你的key`;const sourceCVA = new XYZ({url: url,projection: "EPSG:4326",});const tdtcvaLayer = new TileLayer({source: sourceCVA,});this.map.addLayer(tdtcvaLayer);},},};</script><style scoped>.map {width: 100%;height: 100vh;}</style>天地图就可以显⽰出来了。

【转】OpenLayersOpenLayers：OpenLayers是一个开源的js框架，用于在您的浏览器中实现地图浏览的效果和基本的zoom，pan等功能。

OpenLayers支持的地图来源包括了WMS，GoogleMap，KaMap，MSVirtualEarth等等，您也可以用简单的图片作为源，在这一方面OPenLayers提供了非常多的选择。

WMS服务：1 OGC组织及其开放性规范为了实现异构的地理空间信息及GIS处理功能的互操作的集成，OGC(Open GIS Consortium)一直致力于寻求一种方式，将地理信息系统技术、分布处理技术、面向对象技术、数据库设计以及实时信息处理方法有效地结合起来，实现分布式异构平台上GIS互操作［2］。

OGC制定了开放地理信息互操作规范(OGIS)，试图通过共同的开放地理数据模型(OGM)和OGIS参考模型(ORM)来实现互操作。

其目的是希望提出一个可扩展的、基于各种标准的、能无缝集成各种在线空间处理和位置服务的框架，使得分布式空间处理系统能通过XML和HTTP技术进行交互，并为各种在线空间数据资源，来自传感器的信息、空间处理服务和位置服务和基于Web的发现、访问、整合、分析、利用和可视化提供互操作框架［3］。

OGC的中心主题是共享信息和提供服务，在OGC的抽象规范中共有17个主题，其中主题12是开放式Web Services空间信息服务框架［4，5］，它包含一系列的抽象规范和实现规范。

概括地来讲，OGC OpenGIS Web Services(OWS)包括三个主要的地理信息服务即Web Map Service(WMS)、Web Feature Service(WFS)和Web Coverage Service(WCS)。

除此之外，还包括Simple Feature Specillcation(SFS)，Geography Markup Language(GML)等。

Openlayers实现地图的基本操作本⽂实例为⼤家分享了Openlayers实现地图基本操作的具体代码，供⼤家参考，具体内容如下1、新建⼀个html页⾯，引⼊ol.js和ol.css⽂件，然后在body中创建⼀个Div标签和4个Button按钮，⽤来实现地图的放⼤、缩⼩、平移等功能；2、代码实现<!DOCTYPE html><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script src="../lib/ol/ol.js"></script><link href="../css/ol.css" rel="stylesheet" /><style type="text/css">#menu{float : left;position : absolute;bottom : 10px;font-size : 20px;z-index : 2000;}</style><script type="text/javascript">window.onload = function () {//实例化map对象并加载地图var map = new ol.Map({//存放地图⽬标容器target: 'map',//加载图层layers: [//新建⼀个⽡⽚地图图层new yer.Tile({//⽡⽚地图数据源source: new ol.source.OSM()})],//初始化视图view: new ol.View({//视图中⼼点坐标center: [12550000, 3680000],//缩放等级zoom: 8,//最⼩缩放等级minZoom: 6,//最⼤缩放等级maxZoom: 12,//地图旋转30度rotation: Math.PI/6})});//获取地图的初始化信息var view = map.getView();var zoom = view.getZoom();var center = view.getCenter();var rotation = view.getRotation();//地图缩⼩document.getElementById("zoom-out").onclick = function () {//获取地图当前视图var view = map.getView();//获取地图当前缩放等级var zoom = view.getZoom();//每单击⼀次地图的缩放等级减⼀，以实现地图缩⼩view.setZoom(zoom - 1);};//地图放⼤document.getElementById("zoom-in").onclick = function () {//获取地图当前视图var view = map.getView();//获取地图当前缩放等级var zoom = view.getZoom();//每单击⼀次地图的缩放等级加⼀，以实现地图放⼤view.setZoom(zoom + 1);};//地图平移document.getElementById("panto").onclick = function () { //获取地图当前视图var view = map.getView();//指定要平移到的位置的坐标var position = ol.proj.fromLonLat([115.2341, 32.4652]);//重设地图中⼼点，实现平移view.setCenter(position);};//地图重置document.getElementById("restore").onclick = function () { //重置中⼼点位置为初始化位置view.setCenter(center);//重置旋转⾓度为初始化⾓度view.setRotation(rotation);//重置缩放等级为初始化缩放等级view.setZoom(zoom);};}</script></head><body><div id="map"><div id="menu"><button id="zoom-out">缩⼩</button><button id="zoom-in">放⼤</button><button id="panto">平移⾄...</button><button id="restore">重置</button></div></div></body></html>3、运⾏结果初始化界⾯单击缩⼩按钮，实现地图缩⼩单击放⼤按钮，实现地图放⼤单击平移⾄按钮，地图平移到指定的位置（⾩阳附近）单击地图右上⾓的箭头按钮，使地图⽆旋转单击重置按钮，地图回到初始状态以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

天地图卫星地图在OpenLayers中的应用示例源码一、准备工作1、到OpenLayers的官方网站下载压缩包，如下图所示。

2、到水经注软件官方网站下载《水经注万能地图下载器》或《天地图卫星地图下载器》均可。

二、下载示例数据这里以《天地图卫星地图下载器》为你说明如何下载天地图卫星地图。

安装天地图卫星地图下载器以后，启动软件，如下图由于只是为了作演示说明如何在OpenLayers中使用离线卫星地图，这里我们只需要框选中国范围，即点击工具栏上的“框选下载区域”，然后在视图中绘制选择范围，如下图所示。

在范围中双击鼠标左键，显示新建任务对话框，在该对话框中我们只选择3到7级进行下载即可，如下图所示。

下载完成后，询问是否导出时选择“是”，然后在显示的“导出图片数据”对话框中选择导出类型为“瓦片:Google Map”，保存类型为“JPG(*.jpg)”，如下图所示。

在对话框中点击“输出”按钮，当询问是否叠加标签时，请选择“是”，则我们下载的中国范围内的天地图卫星地图数据导将出为Google瓦片模式，导出结果文件夹目录如下图所示。

瓦片的命名方式是以全球左上角开始，从左到右，从上到下从0开始记数的方式命名（即“行号-列号“），因此针对不同级别每个瓦片行列编号名称是全球唯一的，不同区域下载的数据可以合同到对应的级别。

双击下载结果中的目录“L04”，可以看到第4级中的瓦片命名方式如下图所示。

三、地图引擎配置方法第一步：将下载的OpenLayers-2.13.1.zip解压到D盘Test目录。

第二步：将下载结果“中国_GoogleMapTiles”目录复制到D盘Test目录并重命名为“data”，如下图所示。

第三步：将以下代码复制并保存为html文件（如“example_TDMTiles.html”），放到“D:\Test\OpenLayers-2.13.1\examples”目录中。

==============================代码开始============================= <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><meta name="apple-mobile-web-app-capable" content="yes"><title>OpenLayers Tiled Map Service Example</title><link rel="stylesheet" href="../theme/default/style.css" type="text/css"><link rel="stylesheet" href="style.css" type="text/css"><script src="../lib/OpenLayers.js"></script><script type="text/javascript">var lon = 105;var lat = 39;var zoom = 2;var map, layer;function init(){//map = new OpenLayers.Map( 'map', {maxResolution:1.40625/2} );map = new OpenLayers.Map("map", {maxExtent: new OpenLayers.Bounds(-180,-90,180,90),numZoomLevels:18,maxResolution:0.3515625,units:'degree',projection: "EPSG:4326",displayProjection: new OpenLayers.Projection("EPSG:4326")});layer = new yer.TMS("Name", "../../data/",{'type':'jpg', 'getURL':get_my_url });map.addLayer(layer);map.addControl(new yerSwitcher());map.addControl(new OpenLayers.Control.MousePosition());map.setCenter(new OpenLayers.LonLat(lon, lat).transform(map.displayProjection, map.getProjectionObject()), zoom);}function get_my_url (bounds) {var res = this.map.getResolution();var x = Math.round ((bounds.left + 180) / (res * this.tileSize.w));var y = Math.round ((90 - bounds.top) / (res * this.tileSize.h));var z = this.map.getZoom() + 3;z= tlen(1, z);x= tlen(5, x);y = tlen(5, y);var path = "L"+z+"/"+ y + "-" + x + ".jpg";var url = this.url;if (url instanceof Array) {url = this.selectUrl(path, url);}return url + path;}function tlen(len, mystr){mystr = String(mystr);var num = len - mystr.length;for (var i = 0; i <= num; i++){mystr = "0" + mystr;}return mystr;}function addTMS() {l = new yer.TMS(OpenLayers.Util.getElement('layer').value,OpenLayers.Util.getElement('url').value,{'layername': OpenLayers.Util.getElement('layer').value,'type': OpenLayers.Util.getElement('type').value});map.addLayer(l);map.setBaseLayer(l);}</script><style type="text/css"><!--body,td,th {font-size: 14px;}--></style></head><body onLoad="init()"><center><h1 id="title">Tiled Map Service Example</h1><div id="tags">tile, cache, tms</div><p id="shortdesc">Demonstrate the initialization and modification of a Tiled Map Service layer.</p><div id="map" class="smallmap"></div><div id="docs">URL of TMS (Should end in /): <input type="text" id="url" size="60" value="/wms-c/Basic.py/" /> layer_name <input type="text" id="layer"value="basic" /> <select id="type"><option>jpg</option><option>png</option></select> <input type="submit" onClick="addTMS()"/><br><p>Example: /wms-c/Basic.py/, basic, jpg<br>The first input must be an HTTP URL pointing to a TMS instance. The secondinput must be a layer name available from that instance, and the third mustbe the output format used by that layer. (Any other behavior will result inbroken images being displayed.)</p></div></center></body></html>==============================代码结束============================= 第四步：双击打开刚才保存的文件，如果部署正确，则将会显示离线卫星地图的浏览结果，如下图所示。

百度⾕歌离线地图解决⽅案（离线地图下载）离线地图解决⽅案，除了买地图数据，使⽤专业的ArcGIS来做外，也可以使⽤来做。

关于GMap的开发教程，可以看我以前的⽂章：使⽤了GMap⼀年了，也有了⼀些积累，开发了⼀个可以下载ArcGIS、百度、⾕歌、⾼德、腾讯SOSO、天地图、Here等地图的地图下载器。

百度和google地图加载显⽰如下：百度普通地图：百度混合地图：⾕歌普通地图：⾕歌混合地图：从⽬前的情况来看，百度的普通的地图数据是更新最快的，但是有些⼩地⽅没有卫星地图，⽽⾕歌⼏乎所有的地⽅都有卫星地图，但是⾕歌中国的地图更新太慢，⽐如说南京已经有3号线和10号线了，⾕歌地图上就没有。

只要地图能加载显⽰，就可以下载到本地，开发的地图下载器⽀持SQLite、MySQL、MsSQL、PostgreSQL等数据库保存，也可以以固定⽬录组织保存到本地磁盘上，⽀持ArcGIS的WMS切⽚服务的图源使⽤。

下载到本地磁盘的地图：⽀持的地图下载⽅式：（1）选择⼀个矩形区域下载。

（2）选择某个省、市进⾏下载。

下载到MySQL的地图数据：⾃⼰扩展的.Net地图控件主要功能：1）下载百度、⾕歌、⾼德、腾讯、Here、天地图的地图，按区域下载或是省市边界下载。

2）各类画图⼯具：矩形、圆形、多边形、线段、折线段。

可以作为电⼦围栏、地图圈选⼯具、地图画图⼯具使⽤。

3）各种图标：图⽚、图⽚+⽂字说明、gif动态图⽚、带旋转⾓度的箭头、闪动的报警图标4）类似百度地图的“测距”功能：两点之间的距离，或者根据某个距离在地图上展⽰线段或者多边形。

5）发布离线地图服务：这⾥的离线地图只是地图显⽰服务，将下载的离线地图数据作为Http服务发布在局域⽹内使⽤。

这样的离线地图客户端仍然可以使⽤，⽽Web端可以使⽤Openlayers或者是Leaflet等js库做。

更多关于离线web GIS⽅⾯的资料，请参考。

如下是⽤leaflet js做的简单的demo，⽤的是google的地图：6）GPX数据的读取与展⽰。

OpenLayers 3 入门教程Derect By: 黄进摘要OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计。

版本2虽然被广泛使用，但从JavaScript开发的早期发展阶段开始，已日益现实出它的落后。

OL3已运用现代的设计模式从底层重写。

最初的版本旨在支持第2版提供的功能，提供大量商业或免费的瓦片资源以及最流行的开源矢量数据格式。

与版本2一样，数据可以被任意投影。

最初的版本还增加了一些额外的功能，如能够方便地旋转地图以及显示地图动画。

OpenLayers 3同时设计了一些主要的新功能，如显示三维地图，或使用WebGL快速显示大型矢量数据集，这些功能将在以后的版本中加入。

目录基本概念4 Map 4 View 4 Source 5 Layer 5总结6Openlayers 3实践7 1 地图显示71.1创建一副地图71.2 剖析你的地图81.3 Openlayers的资源112 图层与资源122.1 网络地图服务图层122.2 瓦片缓存142.3 专有栅格图层（Bing）182.4 矢量图层202.5 矢量影像233 控件与交互243.1 显示比例尺243.2 选择要素263.3 绘制要素293.4 修改要素314 矢量样式33 4.1矢量图层格式33 4.2矢量图层样式35 4.3 设置矢量图层的样式38基本概念MapOpenLayers 3的核心部件是Map （ol.Map ）。

它被呈现到对象target 容器（例如，包含在地图的网页上的div 元素）。

所有地图的属性可以在构造时进行配置，或者通过使用setter 方法，如setTarget （）。

<div id ="map" style ="width: 100%, height: 400px"></div> <script>var map = new ol.Map({target: 'map'}); </script>Viewol. View 负责地图的中心点，放大，投影之类的设置。

geoserver扫盲openlayers相关WMS: Web Map Service（Web地图服务）●利用具有地理空间位置信息的数据制作地图。

其中将地图定义为地理数据可视的表现。

这个规范定义了三个操作：⏹GetCapabitities 返回服务级元数据，它是对服务信息内容和要求参数的一种描述；⏹GetMap 返回一个地图影像，其地理空间参考和大小参数是明确定义了的；⏹GetFeatureInfo（可选）返回显示在地图上的某些特殊要素的信息WFS: Web Feature Service（Web要素服务）●Web 地图服务返回的是图层级的地图影像，●Web要素服务（WFS）返回的是要素级的GML编码，并提供对要素的增加、修改、删除等事务操作，是对Web地图服务的进一步深入。

OGC Web要素服务允许客户端从多个Web要素服务中取得使用地理标记语言（GML）编码的地理空间数据，定义了五个操作：⏹GetCapabilites 返回Web要素服务性能描述文档（用XML描述）；⏹DescribeFeatureType 返回描述可以提供服务的任何要素结构的XML文档；⏹GetFeature 一个获取要素实例的请求提供服务；⏹Transaction 为事务请求提供服务；⏹LockFeature 处理在一个事务期间对一个或多个要素类型实例上锁的请求。

WFS-T: Web Map Service-Transactional. 允许用户以可传输的块编辑地理数据。

WCS：Web Coverage Service（Web覆盖服务）Web 覆盖服务（WCS）面向空间影像数据，它将包含地理位置值的地理空间数据作为“覆盖（Coverage）”在网上相互交换。

●网络覆盖服务由三种操作组成：GetCapabilities，GetCoverage和DescribeCoverageType：⏹GetCapabilities 操作返回描述服务和数据集的XML文档。

OpenLayers⼊门（⼀）OpenLayers简介有如下特点：1. ⽀持任何XYZ⽡⽚资源，同时也⽀持OGC的WMTS规范的⽡⽚服务以及ArcGIS规范的⽡⽚服务2. ⽀持⽮量切⽚，包括pbf、GeoJSON、TopoJSON格式3. ⽀持⽮量图层，能渲染GeoJSON、TopoJSON、KML、GML和其他格式的⽮量数据4. ⽀持OGC制定的WMS、WFS等GIS⽹络服务规范5. ⽀持在移动设备上运⾏6. 可以通过css来为地图控件设置样式7. ⾯向对象开发⽅式，在OpenLayers中万物皆对象和另⼀个流⾏的地图库leaflet不同，openLayers完全是⽤⾯向对象的⽅式开发的，且⼏乎内置了所有地图开发需要的功能，⽽leaflet核⼼库只提供基本功能，其他功能都是通过第三⽅插件进⾏扩展。

使⽤上来说leaflet更容易上⼿，OpenLayers上⼿难度⽐较⼤，所以业务可预见较为简单的建议采⽤leaflet。

OpenLayers虽然很强⼤，但是因为⼀切皆对象，所以使⽤起来很⿇烦，再加上⽆⽐难看的⽂档，所以对新⼿极其不友好，这也是本系列⽂章的初衷，旨在基于实际业务开发的场景下来沉淀⼀些内容，来帮助新⼿使⽤OpenLayers。

这是本系列的第⼀篇，主要介绍地图的实例化、基本的要素操作，后续不定期更新。

本⽂基于OpenLayers v6+版本，代码基于Vue。

安装npm i ol实例化地图<div class="ol-map" ref="olMap"></div>import Map from 'ol/Map'import View from 'ol/View'import { Tile as TileLayer } from 'ol/layer'import {XYZ, OSM} from 'ol/source'import { fromLonLat } from 'ol/proj'// fromLonLat⽅法能将坐标从经度/纬度转换为其他投影// 使⽤内置的OSM//const tileLayer = new TileLayer({// source: new OSM()//})// 使⽤⾼德const tileLayer = new TileLayer({source: new XYZ({url: 'https:///appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'})})let map = new Map({layers: [tileLayer],view: new View({center: fromLonLat([120.771441, 30.756433]),//地图中⼼点zoom: 15,// 缩放级别minZoom: 0,// 最⼩缩放级别maxZoom: 18,// 最⼤缩放级别constrainResolution: true// 因为存在⾮整数的缩放级别，所以设置该参数为true来让每次缩放结束后⾃动缩放到距离最近的⼀个整数级别，这个必须要设置，当缩放在⾮整数级别时地图会糊 }),target: this.$refs.olMap// DOM容器})这样就可以显⽰⼀个基本的地图：可以拖动和缩放，但是不能旋转，如果需要⽀持旋转，需要加上旋转交互：import {defaults as defaultInteractions,DragRotateAndZoom,} from 'ol/interaction'let map = new Map({// ...interactions: defaultInteractions().extend([new DragRotateAndZoom()])})这样就可以按住shift键时通过⿏标来进⾏旋转地图。

除地名地址数据使用OGC WFS协议发布外，其他数据全部采用基于OGC WMS-C协议的分级瓦片形式发布，工作原理类似于谷歌地图和OSM（OpenStreetMap）。

类似谷歌地图，“天地图”为互联网开发人员提供了二次开发API（武大吉奥开发的GeoGlobe 二维地图API）。

通过分析GeoGlobe API代码，发现它源自Openlayers，大部分代码除了把Openlayers换成GeoSurf外，没有任何变化。

不知道Openlayers项目组就此作何感想。

正因为如此，我们可以参考yer.TileCache和yer.XYZ类，编写一个专用于读取“天地图”的TDTLayer类，使Openlayers能够直接访问“天地图”的在线地图数据。

“天地图”采用256×256像素，png格式的地图瓦片文件，读取单个文件需要四个参数：T、X、Y、LT=瓦片（Tile）名称，X=瓦片横向编码，Y=瓦片纵向编码，L=瓦片级别这个是一个完整的请求示例：/DataServer?T=AB0512_Anno&X=50&Y=12&L=6“天地图”地理信息数据资源列表将地图瓦片分为16级（L=2-18），其中L=2级比例尺最小，对应全球地图。

L=2级只有8个瓦片文件，分别是：X= 0 1 2 3 0 1 2 3Y= 0 0 0 0 1 1 1 1L=3级有32个瓦片文件，分别是：X= 0-7Y= 0-3L=4级有128个瓦片文件，分别是：X= 0-15Y= 0-7其余各级以此类推，每级的瓦片文件数比前一级增加4倍，其中线划地图10级以上，卫星地图8级以上只提供中国境内的数据，没有覆盖全球。

查看GeoGlobe API主代码GeoSurfJSAPI.js文件（相当于Openlayers.js），可以了解X(x_num)、Y(y_num)、L(level)的生成方法，伪代码如下：level=getLevelForResolution(map.getResolution()); //计算瓦片级别coef=TopTileSize.w/Math.pow(2,level); //中间系数x_num=this.pyramid.topTileFromX<this.pyramid.topTileToX?Math.round((bounds .left-this.pyramid.topTileFromX)/coef):Math.round((this.pyramid.topTileFromX-bo unds.right)/coef);y_num=this.pyramid.topTileFromY<this.pyramid.topTileToY?Math.round((bounds. bottom-this.pyramid.topTileFromY)/coef):Math.round((this.pyramid.topTileFromY -bounds.top)/coef);根据当前分辨率计算地图瓦片级别function getLevelForResolution(res){var ratio=map.getMaxResolution()/res;if(ratio<1)return 0;for(var level=0;ratio/2>=1;){level++;ratio/=2;}return level;}经过简单测试，“天地图”和谷歌地图在数据上差别不大，二次开发方面借助于强大的Openlayers地图客户端引擎不会弱于Google Map API，唯独在速度上与谷歌地图存在较大差距，特别是地图放大到13级-18级时，延迟变得非常明显，有时甚至无法显示。

如何在内网(局域网中)发布OpenLayers地图平台一、概述这里以中间件作为谷歌地球(GoogleEarth)卫星地图发布引挚，XX市4到14级谷歌地球卫星地图(WGS84经纬度投影)作为中间件的地图发布数据源，OpenLayers开源平台作为加载中间件发布的卫星影像数据平台，说明如何在内网(局域网)中构建一套基于OpenLayers开发平台的离线WebGIS地理信息系统。

二、如何发布XX市谷歌地球卫星影像以下只对如何发布XX市谷歌地球卫星影像作简要说明，具体教程请参阅：如何在OpenLayers 中调用中间件发布的WGS84卫星影像在万能地图下载器中，选择地图类型数据源为“谷歌地球”。

选择下载任务X围时，可以通过框选、多边形选择或按行政区划的方式下载影像数据，这里选择按“XX市”的行政区划X围下载，点击“下载”可以显示“新建任务”对话框。

在“新建任务”对话框中选择需要下载的级别，由于需要在缩放时每一级都需要显示下载影像，因此在下载数据时建议选择4-19级（如果X围在省以上，建议分成多个块下载），这里以第4到14级为例。

需要说明的是，由于谷歌地球的数据是最低级别是第4级，因此只能从第4级开始下载。

XX市谷歌地球卫星地图影像数据下载完成之后，需要在中间件中配置数据路径为下载任务目录，然后需要重启中间件之后，设置参数才能生效。

通过以上操作，谷歌地球卫星影像地图发布完成，用户可以通过URL地址对中间件发布的瓦片进行访问，如：://127.0.0.1:8080/getImage?z=11&y=344&x=1698URL中的参数说明：服务器IP地址8080 端口号getImage表示请求影像格式瓦片getLabel表示请求地名路网瓦片getDem表示请求数字高程瓦片Z 级别X 列号Y 行号以上为中间件发布谷歌地球卫星影像的简要说明，详细教程请参阅：如何在OpenLayers 中调用中间件发布的WGS84卫星影像三、如何构建WebGIS地理信息系统站点在OpenLayers 源码中，打开map.js文件修改瓦片加载地址为中间件的地图发布地址，即：varImageURL = '://127.0.0.1:8080/getImage?z={z}&y={y}&x={x}';varLabelURL = '://127.0.0.1:8080/getLabel?z={z}&y={y}&x={x}';保存编辑结果后，可以在IIS中对OpenLayers开发平台进行站点配置。

openlayers加载天地图1. 创建WMS对象引⼊天地图⽡⽚图⼯具JS// 引⼊import { getTopLeft, getWidth } from "ol/extent";import TileLayer from "ol/layer/Tile";import WMTS from "ol/source/WMTS";import WMTSTileGrid from "ol/tilegrid/WMTS";import { get } from "ol/proj";// 全局变量let key = ""let projection = get("EPSG:4326");let projectionExtent = projection.getExtent();let size = getWidth(projectionExtent) / 256;/**\* 私有⽅法*/function getResolutions() {let resolutions = [];for (let z = 2; z < 19; ++z) {resolutions[z] = size / Math.pow(2, z);}return resolutions}export function getProjection() {return projection}// WMTS 形式function getWMTSLayer(url,layer) {return new TileLayer({source: new WMTS({name: "中国",url:url,layer: layer,style: "default",matrixSet: "c",format: "tiles",wrapX: true,tileGrid: new WMTSTileGrid({origin: getTopLeft(projectionExtent),resolutions: getResolutions(),matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],}),}),})}/**\* ⽮量底图 + ⽮量注记*/export function vec_c() {return [getWMTSLayer('http://t{0-7}/vec_c/wmts?tk='+ key,'vec'), getWMTSLayer('http://t{0-7}/cva_c/wmts?tk='+ key,'cva') ]}/**\* 影像底图 + 影像注记*/export function img_c() {return [getWMTSLayer('http://t{0-7}/img_c/wmts?tk='+ key,'img'), getWMTSLayer('http://t{0-7}/cia_c/wmts?tk='+ key,'cia') ]}2. 创建map地图// 引⼊import { Map, View } from "ol";import { getProjection, vec_c, img_c } from "上⾯的封装JS";let view = new View({center: [116.75199, 36.55358],projection: getProjection(),zoom: 8,maxZoom: 17,minZoom: 1,enableRotation: false,});var map = new Map({controls: defaults({zoom: false,rotate: false,}),layers: [...vec_c()],target: "map",view: view,});。

如何将天地图在基于OpenLayers的服务器端进行部署的方法一、准备工作1、到OpenLayers的官方网站下载压缩包，如下图所示。

2、到水经注软件官方网站下载《天地图卫星地图下载器》。

二、下载示例数据这里以《天地图卫星地图下载器》为你说明如何下载天地图卫星地图。

安装天地图卫星地图下载器以后，启动软件，如下图国范围，即点击工具栏上的“框选下载区域”，然后在视图中绘制选择范围，如下图所示。

下载即可，如下图所示。

下载完成后，导出ArcGIS Server瓦片，如下图所示。

点击“输出”按钮，开始导出。

等待导出完毕，会在D盘Test目录看到“中国_ArcgisServerTiles”这个文件夹，如下图所示。

然后将“中国_ArcgisServerTiles”文件夹重命名为“data”，如下图所示。

三、服务器端地图引擎配置第一步：将下载的OpenLayers-2.13.1.zip解压到D盘Test目录。

如下图所示。

第二步：新建网站在IIS中新建网站，如下图所示。

这里我们将网站命名为“TEST”，物理路径设置为“D:\Test”，端口设置为“8080”，如下图所示。

第三步：将以下代码复制并保存为html文件（如“Example_ArcGIS Server.html”），放到“D:\Test\OpenLayers-2.13.1\examples”目录中。

==============================代码开始=============================<!DOCTYPE html><html><head><title>ArcGIS Server Map Cache Example (Direct Access)</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link rel="stylesheet" href="OpenLayers-2.13.1/theme/default/style.css" type="text/css"> <link rel="stylesheet" href="style.css" type="text/css"><script src="../lib/OpenLayers.js"></script><script src="../lib/OpenLayers/Layer/ArcGISCache.js" type="text/javascript"></script> <script type="text/javascript">/* First 4 variables extracted from conf.xml file *//* Tile layers & map MUST have same projection */var proj = 'EPSG:4326';/* Layer can also accept serverResolutions array* to deal with situation in which layer resolution array & map resolution* array are out of sync*/var mapResolutions = [1.40625,0.703125,0.3515625,0.17578125,0.087890625,0.0439453125,0.021********,0.010*********,0.0054931640625,0.00274658203125,0.001373291015625,0.0006866455078125,0.00034332275390625,0.000171661376953125,0.0000858306884765625,0.00004291534423828125,0.000021457672119140625,0.0000107288360595703125,0.00000536441802978515625,0.000002682209014892578125,0.0000013411045074462890625,0.00000067055225372314453125];/* For this example this next line is not really needed, 256x256 is default.* However, you would need to change this if your layer had different tile sizes */var tileSize = new OpenLayers.Size(256, 256);/* Tile Origin is required unless it is the same as the implicit map origin* which can be affected by several variables including maxExtent for map or base layer */var agsTileOrigin = new OpenLayers.LonLat(-180, 90);/* This can really be any valid bounds that the map would reasonably be within *//* var mapExtent = new OpenLayers.Bounds(293449.454286,4307691.661132,314827.830376,4323381.484178); */var mapExtent = new OpenLayers.Bounds(-180, -90, 180, 90);var aerialsUrl = 'http://localhost:8080/data/_alllayers';var map;function init() {map = new OpenLayers.Map('map', {maxExtent: mapExtent,controls: [new OpenLayers.Control.Navigation(),new yerSwitcher(),new OpenLayers.Control.PanZoomBar(),new OpenLayers.Control.MousePosition()]});var baseLayer = new yer.ArcGISCache('Aerials', aerialsUrl, {tileOrigin: agsTileOrigin,resolutions: mapResolutions,sphericalMercator: false,maxExtent: mapExtent,useArcGISServer: false,isBaseLayer: true,type: 'jpg',projection: proj});map.addLayers([baseLayer]);//map.zoomToExtent(new OpenLayers.Bounds(295892.34, 4308521.69, 312825.71, 4316988.37));map.setCenter(new OpenLayers.LonLat(103,31).transform(map.displayProjection, map.getProjectionObject()), 3);}</script></head><body onLoad="init()"><h1 id="title">ArcGIS Server Map Cache Example (Direct Access)</h1><div id="tags"></div><p id="shortdesc">Demonstrates the basic initialization of the ArcGIS Cache layer using a prebuiltconfiguration, and direct tile access from a file store.</p><div id="map" class="smallmap"></div><div id="docs"><p>This example demonstrates using the ArcGISCache layer for accessing ESRI's ArcGISServer (AGS) Map Cache tiles directly via the folder structure and HTTP. Togglethe visibility of the AGS layer to demonstrate how the two maps are lined up correctly.</p><h2>Notes on this Layer</h2><p>It's important that you set the correct values in your layer, and these values willdiffer between tile sets. You can find these values for your layer in conf.xml atthe root of your cache. (ie. <ahref="/arcgiscache/dgaerials/Layers/conf.xml">/arcgiscache/dgaerials/Layers/conf.xml</a>)</p> <p>For fused map caches this is oftenhttp:<i>ServerName</i>/arcgiscache/<i>MapServiceName</i>/Layers<br>For individual layer caches this is oftenhttp:<i>ServerName</i>/arcgiscache/<i>LayerName</i>/Layers</p><h2>Other Examples</h2><p>This is one of three examples for this layer. You can also configure this layerto use <a href="arcgiscache_ags.html">prebuilt tiles from a live server.</a> Itis also possible to let this <a href="arcgiscache_jsonp.html">layer 'auto-configure' itself using the capabilities json object from the server itself when using a liveArcGIS server.</a></p></div></body></html>==============================代码结束============================= 第四步：双击打开刚才保存的文件，如果部署正确，则将会显示离线WGS84卫星地图的浏览结果，如下图所示。