Openlayers3加载国家天地图WMTS服务示例
OpenLayers-3-入门教程
OpenLayers 库在文档的<head>部分加载（<script src="ol3/ol.js"></script>）。同样的，在文档中作为显示 容器的元素（该实例中为<div id="map"></div>）准备好之前，自定义地图初始化代码是不能执行的，将初 始化代码添加到文档中<body>的后面，我们能在地图生成前，确保库已加载，显示容器已准备好。
<link rel="stylesheet" href="ol3/ol.css" type="text/css"> <style> #map {
height: 256px; width: 512px; } </style> <title>OpenLayers 3 example</title> <script src="ol3/ol.js" type="text/javascript"></script> </head> <body> <h1>My Map</h1> <div id="map"></div> <script type="text/javascript"> var map = new ol.Map({ target: 'map', layers: [ new yer.Tile({
Openlayers加载wms
OpenLayers的资料，网上已经有很多例子了。
我这里想说的是如何高效的使用OpenLayers。
我们在访问WMS的时候，一般不会只请求一个图层，有可能会是很多图层。
我刚开始使用OpenLayers的时候，是这样使用的：view plaincopy to clipboardprint?<script type="text/javascript">var map, layer;function init(){map = new OpenLayers.Map( 'map' );map.addControl(new yerSwitcher());var bounds = new OpenLayers.Bounds(103.94971885,30.5749127,104.18353815,30.7504793);layerblock = new yer.WMS( "topp:Block_region","http://localhost:8989/geoserver/wms" ,{layers: 'topp:Block_region',srs: 'EPSG:4326',style: '',format: 'image/png',tiled: 'true'//transparent: false},{maxExtent: bounds,//maxResolution: 0.0041261434555042165,projection: 'EPSG:4326',buffer: 0 ,reproject: true,//opacity: 0.8,isBaseLayer: true});layerpublic = new yer.WMS( "topp:PUBLIC_region", "http://localhost:8989/geoserver/wms" ,{layers: 'topp:PUBLIC_region',srs: 'EPSG:4326',style: '',//format: 'image/png',tiled: 'true',transparent: true},{maxExtent: bounds,//maxResolution: 0.0041261434555042165,projection: 'EPSG:4326',buffer: 0 ,reproject: true,//opacity: 0.8,isBaseLayer: true});layerroad = new yer.WMS( "topp:Road_Regular_polyline", "http://localhost:8989/geoserver/wms" ,{layers: 'topp:Road_Regular_polyline',srs: 'EPSG:4326',style: '',//format: 'image/png',tiled: 'true',transparent: true},{maxExtent: bounds,//maxResolution: 0.0041261434555042165,projection: 'EPSG:4326',buffer: 0 ,reproject: true,//opacity: 0.8,isBaseLayer: true});map.addLayers([layerblock,layerpublic,layerroad]);map.zoomToExtent(bounds);}</script><script type="text/javascript">var map, layer;function init(){map = new OpenLayers.Map( 'map' );map.addControl(new yerSwitcher());var bounds = new OpenLayers.Bounds(103.94971885,30.5749127,104.18353815,30.7504793); layerblock = new yer.WMS( "topp:Block_region","http://localhost:8989/geoserver/wms" ,{layers: 'topp:Block_region',srs: 'EPSG:4326',style: '',format: 'image/png',tiled: 'true'//transparent: false},{maxExtent: bounds,//maxResolution: 0.0041261434555042165,projection: 'EPSG:4326',buffer: 0 ,reproject: true,//opacity: 0.8,isBaseLayer: true});layerpublic = new yer.WMS( "topp:PUBLIC_region", "http://localhost:8989/geoserver/wms" ,{layers: 'topp:PUBLIC_region',srs: 'EPSG:4326',style: '',//format: 'image/png',tiled: 'true',transparent: true},{maxExtent: bounds,//maxResolution: 0.0041261434555042165,projection: 'EPSG:4326',buffer: 0 ,reproject: true,//opacity: 0.8,isBaseLayer: true});layerroad = new yer.WMS( "topp:Road_Regular_polyline", "http://localhost:8989/geoserver/wms" ,{layers: 'topp:Road_Regular_polyline',srs: 'EPSG:4326',style: '',//format: 'image/png',tiled: 'true',transparent: true},{maxExtent: bounds,//maxResolution: 0.0041261434555042165,projection: 'EPSG:4326',buffer: 0 ,reproject: true,//opacity: 0.8,isBaseLayer: true});map.addLayers([layerblock,layerpublic,layerroad]);map.zoomToExtent(bounds);}</script>view plaincopy to clipboardprint?<FONT face=Arial>但是，我发现这样访问的速度极其的慢。
天地图卫星地图在OpenLayers中的应用示例源码
天地图卫星地图在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”目录中。
结合GeoExt3,Openlayers3和ExtJs实现地图功能
1引言在互联网普及化，网络设备小型便携化以及大数据的现代社会环境下，人们的需求刺激了信息传递的速度和信息更新的速度。
纸质地图的便携性和携带的信息量已经远远无法满足人们的需求。
随着大量交通设备的完善以及科技技术的发展，人们出行的便捷性大幅上升，出行的范围也在大幅增加。
当人们处于陌生环境中，不知如何前往目的地[1]，因此，移动端和PC端的电子地图便顺应潮流而生，并飞速发展。
同时电子地图的不断发展，渐渐满足了人们对地图信息即时性、精准性的要求[2]。
2技术背景以及系统设计实现2.1技术概述2.1.1GeoExt3概述GeoExt3是一个把Openlayers3和ExtJS组合在一起形成的用来开发客户端地图应用程序的javascript类库。
2.1.2Openlayers3概述Openlayers3是一个专为WebGIS客户端开发提供的JavaScript类库包，用于实现标准格式发布的地图数据访问。
2.1.3ExtJs概述ExtJS主要用来开发RIA富客户端的AJAX应用，主要用于创建前端用户界面，与后台技术无关的前端ajax框架。
2.2程序构想和程序结构图2.2.1程序构想结合GeoExt3，Openlayers3和ExtJs构建简单WebGis，将整个页面分为地图区和图层区。
地图区实现显示图层以及对地图的一些基础操作，如拖拽和缩放。
图层区实现对图层的管理，其中包括显示当前已加载图层和勾选图层以决定是否显示图层，以及可以缩放图层区和拖拽图层区以改变其宽度。
2.2.2程序结构图程序中库所处在的地位分别是GeoExt3，ExtJS，Openlayers3。
Openlayers3承载和显示图层数据，ExtJs承载Openlayers3所定义的地图，并为其创建地图区，同时获取Openlayers3的图层数据，创建图层区。
最后GeoExt3承载ExtJs和Openlayers3，提供框架服务。
结合GeoExt3，Openlayers3和ExtJs实现地图功能Realizing the Map Function of Combining the GeoExt3袁Openlayers3and ExtJs张致远，王金峰，候琳叶，张雪玉，赵雪辉（防灾科技学院信息工程学院，河北三河065201）ZHANG Zhi-yuan,WANG Jin-feng,HOU Lin-ye,ZHANG Xue-yu,ZHAO Xue-hui(SchoolofInformationEngineering,InstituteofDisasterPrevention,Sanhe065201,China)【摘要】古往今来，地图一直是人们出行的重要工具。
ArcGIS_使用天地图WMTS服务
ArcGIS_使用天地图WMTS服务ArcGIS_使用天地图WMTS服务收藏HonglingHe•发表于 2年前•阅读 169•收藏 0•点赞 1•评论 0腾讯云上实验室1小时搭建人工智能应用让技术更容易入门>>>摘要: 天地图WMTS服务是基于 OGC WMTS的一种地图切片服务，本文主要描述如何通过ArcGIS自定义tileLayer来加载天地图的切片数据由于公司项目需要使用ArcGIS来加载天地图服务，所以收集和整理了一些ArcGIS方面的资料。
自从高二后就几乎没接触过地理知识了，对GIS的了解也是近期学习才了解了一些基本概念，所以理解有偏差的地方希望大家不吝指教。
•WMTS服务介绍WMTS (Web Map Tile Service) 是OGC 提出的缓存技术标准，即在服务器端缓存被切割成一定大小瓦片的地图，对客户端只提供这些预先定义好的单个瓦片的服务，将更多的数据处理操作如图层叠加等放在客户端，从而缓解GIS 服务器端数据处理的压力，改善用户体验。
WMTS 使用瓦片矩阵集（Tile matrix set）来表示切割后的地图，如图1所示。
瓦片就是包含地理数据的矩形影像，一幅地图按一定的瓦片大小被切割成多个瓦片，形成瓦片矩阵，一个或多个瓦片矩阵即组成瓦片矩阵集。
不同的瓦片矩阵具有不同的分辨率，每个瓦片矩阵由瓦片矩阵标识符（一般为瓦片矩阵的序号，分辨率最低的一层为第0层，依次向上排）进行标识。
图 1 瓦片矩阵集TiledWMTSLayer是用于访问WMTS服务的分块缓存图层，位于命名空间com.supermap.web.mapping下。
TiledWMTSLayer具有通用性，支持任何符合ogc标准的WMTS服务。
TiledWMTSLayer可通过HTTP KVP（Key-Value Pair）和 REST两种方式访问WMTS服务。
•天地图WMTS功能参数要想成功访问WMTS服务，需要为TiledWMTSLayer设置的参数有：WMTS服务地址（url）、要访问的图层名称(layerName)、访问方式（requestEncoding）和当前图层(layerName)的具体信息参数。
如何将天地图在基于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>天地图就可以显⽰出来了。
OpenLayer2 Openlayer3经典案例总结
varurl='/geoserver/wfs?service=WFS&'+
'version=1.1.0&request=GetFeature&typename=osm:water_areas&'+
<style>
.map{
height:400px;
width:100%;
}
</style>
<scriptsrc="/en/v3.7.0/build/ol.js"type="text/javascript"></script>
<title>OpenLayers 3 example</title>
map.addControl(newOpenLayers.Control.OverviewMap());
map.addControl(newOpenLayers.Control.PanZoomBar());
varvlayer=yer.Vector("Editable");
'outputFormat=text/javascript&format_options=callback:loadFeatures'+
'&srsname=EPSG:3857&bbox='+extent.join(',')+',EPSG:3857';
// use jsonp: false to prevent jQuery from adding the "callback" //阻止JQuery自己增加callback函数