openlayers 天地图 第二十三讲-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开源地图引挚发布离线地图这里以吉林省吉林市地图为例，说明如何用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二维地图使用教程
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教程
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的服务器端进行部署方法
如何将天地图在基于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加载天地图和高德地图
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>天地图就可以显⽰出来了。
【转】OpenLayers
【转】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实现地图的基本操作本⽂实例为⼤家分享了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中的应用示例源码
天地图卫星地图在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>==============================代码结束============================= 第四步：双击打开刚才保存的文件，如果部署正确，则将会显示离线卫星地图的浏览结果，如下图所示。
openlayers实例 第二十讲-OpenLayers离线地图快速实战(一)
功能）。
目前，OpenLayers所能够支持的Format有：XML、GML 、GeoJSON、GeoRSS、JSON、KML、WFS、WKT(Well-
Known Text)。在OPenlayers.Format名称空间下的各个类里
，实现了具体读／写这些Format的解析器。
OpenLayers所能够利用的地图数据资源“丰富多彩”，在这 方面提供给拥护较多的选择，比如WMS、WFS、 GoogleMap、KaMap、MSVirtualEarth、WorldWind等等。
和WFS规范， OpenLayers采用纯面向对象的JavaScript方
式开发，同时借用了Prototype框架和Rico库的一些组件。
采用OpenLayers作为客户端不存在浏览器依赖性。由于 OpenLayers采用JavaScript语言实现，而应用于Web浏览器
中的DOM（文档对象模型）由JavaScript实现，同时，
代码实战：pptwms.htm
ቤተ መጻሕፍቲ ባይዱ
欢迎访问我们的官方网站
北风网项目培训
第二十讲 OpenLayers离线地图快速实战（一）
讲师：tom5（北风网版权所有)
内网无法访问外网 如何将地图底图提前下载到服务器端？ OpenLayers
/
OpenLayers 是由MetaCarta公司开发的，用于WebGIS客户 端的JavaScript包，通过BSD License 发行。它实现访问地 理空间数据的方法都符合行业标准，比如OpenGIS的WMS