开源WebGIS开发——栅格图层

1、GIS的数据类型

（1）矢量数据

矢量数据结构是对矢量数据模型进行数据的组织。通过记录实体坐标及其关系，尽可能精确地表现点、线、多边形等地理实体，坐标空间设为连续，允许任意位置、长度和面积的精确定义。矢量数据结构直接以几何空间坐标为基础，记录取样点坐标。

（2）栅格数据

栅格数据是由按照行和列排列组织的一些像元集合，每一个像元都包含了信息值，可以是航片，卫星影像，数字图片等等。

2、Layer图层对象的架构

切片图层：把图像按照对应层级进行切割，采用预生成的方法存放在服务器端，然后根据用户提交的不同请求，把相应的地图瓦片发送给客户端的过程，它是一种多分辨率层次模型，从瓦片金字塔底层到顶层，分辨率越来越低，但表示的地理范围不变。

瓦片结构 1/4切割一般最大到18层

3、Source对象的架构

常用OGC标准：

序号	服务类型	服务特点
1	网络栅格服务 (WCS)	提供的是包含了地理位置信息或属性的空间栅格图层 1.GetCapabilities（获取服务的元信息） 2.DescribeCoverage（获取Coverage的描述信息） 3.GetCoverage（获取Coverage）
2	网络地图服务 (WMS)	能够根据用户的请求返回相应的地图（包括PNG，GIF，JPEG等栅格形式或者是SVG和WEB CGM等矢量形式） 1.GetCapabilities（获取服务中的要素类及支持的操作） 2.GetMap（获取地图） 3.GetFeatureInfo（根据地图上的像素点获取更详细的要素信息，类似 Identify 功能）
3	网络要素服务 (WFS)	即Web要素服务，支持对地理要素的插入，更新，删除，检索和发现服务 1. GetCapabilities（获取服务中的要素类及支持的操作） 2. DescribeFeatureType（描述要素类的信息） 3. GetFeature（获取要素） 4. GetGmlObject（通过 XLink 获取 GML 对象） 5. Transaction（创建、更新、删除数据的事务操作） 6. LockFeature（在事务过程中锁定要素）
4	网络地图切片服务 (WMTS)	就是切片服务

4、常用栅格图层的加载演示

（1）加载OSM地图

 var osmLayer = new ol.layer.Tile({source:new ol.source.OSM({url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'})})

（2）加载Stamen地图

Stamen地图是一个设计和构建地图和数据可视化的工作室，利用新兴数字媒体创造了引人注目的交互式设计和数据可视化项目，以OSM为基础制作专题图。（官网：maps.stamen.com）

XYZ切片方式使用url加载：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>地图模板</title><link rel="stylesheet" href="ol.css"><style>* {padding: 0;margin: 0;}.map1 {width: 33.33%;height: 100%;position: absolute;}.map2{width: 33.33%;height: 100%;margin-left: 33.33%;position: absolute;}.map3{width: 33.33%;height: 100%;margin-left: 66.66%;position: absolute;}</style>
</head><body><div class="map1" id="map1"></div><div class="map2" id="map2"></div><div class="map3" id="map3"></div><script src="ol.js"></script><script>//stamen官网http://maps.stamen.com/           //layer:'toner'    http://{a-d}.tile.stamen.com/toner/{z}/{x}/{y}.png// http://{a-d}.tile.stamen.com/toner/{z}/{x}/{y}.png// http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg// http://tile.stamen.com/watercolor/{z}/{x}/{y}.jpg//http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z} 高德//'http://mt0.google.cn/maps/vt?lyrs=s@773&gl=cn&x={x}&y={y}&z={z}' 谷歌var Layer1 = new ol.layer.Tile({// source: new ol.source.Stamen({//     layer:'toner'// })source:new ol.source.XYZ({url:'http://{a-d}.tile.stamen.com/toner/{z}/{x}/{y}.png'//url:'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'//url:'http://tile.stamen.com/watercolor/{z}/{x}/{y}.jpg'})})var Layer2 = new ol.layer.Tile({// source: new ol.source.Stamen({//     layer:'toner'// })source:new ol.source.XYZ({//url:'http://{a-d}.tile.stamen.com/toner/{z}/{x}/{y}.png'url:'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'//url:'http://tile.stamen.com/watercolor/{z}/{x}/{y}.jpg'})})var Layer3 = new ol.layer.Tile({// source: new ol.source.Stamen({//     layer:'toner'// })source:new ol.source.XYZ({//url:'http://{a-d}.tile.stamen.com/toner/{z}/{x}/{y}.png'//url:'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'url:'https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg'})})//创建视图var view = new ol.View({// projection: projection,center: ol.proj.transform([116.40, 39.90], "EPSG:4326", "EPSG:3857"),zoom: 12});//创建地图控件var controls = new ol.control.defaults().extend([new ol.control.FullScreen()]);var interactions = new ol.interaction.defaults().extend([new ol.interaction.DragRotateAndZoom()]);var overlay = new ol.Overlay({position: ol.proj.transform([116.40, 39.90], "EPSG:4326", "EPSG:3857"),element: document.getElementById("xx")});//创建地图var map1 = new ol.Map({target: "map1",view: view,controls: controls,layers: [Layer1],interactions: interactions,//moveTolerance: 1,//overlays: [overlay],maxTilesLoading: 16});var map2 = new ol.Map({target: "map2",view: view,controls: new ol.control.defaults().extend([new ol.control.FullScreen()]),layers: [Layer2],interactions: new ol.interaction.defaults().extend([new ol.interaction.DragRotateAndZoom()]),//moveTolerance: 1,//overlays: [overlay],maxTilesLoading: 16});var map3 = new ol.Map({target: "map3",view: view,controls: new ol.control.defaults().extend([new ol.control.FullScreen()]),layers: [Layer3],interactions: new ol.interaction.defaults().extend([new ol.interaction.DragRotateAndZoom()]),//moveTolerance: 1,//overlays: [overlay],maxTilesLoading: 16});</script>
</body></html>

三种视图联动显示效果：

（3）加载bing地图

bing有五种类型的专题图，存储在style数组内。 ol封装了bing地图，BingMaps

var styles = ['Road','Aerial','AerialWithLabels','collinsBart','ordnanceSurvey'];//必应地图var bingLayer = new ol.layer.Tile({source: new ol.source.BingMaps({key: 'AjN8XCSpSLrCjxHNFcyMJATlRciW9O2Oma9t4pW6AALjcxr5VVNYCUuauNpw2rx5',imagerySet: 'ordnanceSurvey'})})// 坐标投影var projection = new ol.proj.Projection({code: "EPSG:4326",units: "degrees"

6、栅格数据和切片的发布和引用

（1）发布方式

①整图片：以WMS服务加载，没有进行切片

②切片形式发布：WMTS地图切片

（2）发布过程

step1 将数据拷贝到geoserver安装路径下的data目录下：

step 2 登录geoserver

step3 创建一个工作区

step4 创建一个数据存储

step5 发布数据

step6发布完成后点击图层查看寻找我们发布的数据，使用openlayers3可打开数据

step7 右键查看源代码可见一些地图加载的详细参数 url 设置等信息

（源代码中的url信息）

（3）WMS服务的加载方法

var wmsLayer = new ol.layer.Tile({

source: new ol.source.TileWMS({

url: "图层的url信息在源码中查找"，

params：{ //图层的相关属性设置

}

})

图层的参数param的属性为官网说明文档中的标红部分，包括：

①LAYERS：图层名字

②VERSION：发布的版本

③FORMAT：请求的数据类型可以在源代码中找到

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>地图模板</title><link rel="stylesheet" href="ol.css"><style>* {padding: 0;margin: 0;}html,body{width: 100%;height: 100%;}.map {width: 100%;height: 100%;position: absolute;}</style>
</head><body><div class="map" id="map"></div><script src="ol.js"></script><script>// // 天地图// var tdLayer = new ol.layer.Tile({//     source: new ol.source.XYZ({//         url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + "7ab767e38fe3d9c04f144a091cff214f"//     })// });// var tdLayerZJ = new ol.layer.Tile({//     source: new ol.source.XYZ({//         url: "http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + "7ab767e38fe3d9c04f144a091cff214f"//     })// });// // 坐标投影// var projection = new ol.proj.Projection({//     code: "EPSG:4326",//     units: "degrees"// });// 加载wms服务地图// var wmsLayer = new ol.layer.Image({//     source:new ol.source.ImageWMS({//         url:'http://119.3.192.111:5431/geoserver/beijingMap/wms',//         params:{//             "LAYERS": 'beijingMap:beijingmap',//             'VERSION': '1.1.1',//             'FORMAT': 'image/png',//         }//     })// })// 加载WMS切片服务var tiled = new ol.layer.Tile({source: new ol.source.TileWMS({url: 'http://localhost:8086/geoserver/flood/wms',params: {'FORMAT': "image/png", 'VERSION': '1.1.0',"LAYERS": 'flood:floodrisk',// "exceptions": 'application/vnd.ogc.se_inimage',//tilesOrigin: -180 + "," + -56}})});var projection = new ol.proj.Projection({code: 'EPSG:4326',units: 'degrees',axisOrientation: 'neu',global: true});//创建视图var view = new ol.View({projection: projection,extent:[-180,-60,180,90],center:[0,0],zoom: 0.5});//创建地图控件var controls = new ol.control.defaults().extend([new ol.control.FullScreen()]);var interactions = new ol.interaction.defaults().extend([new ol.interaction.DragRotateAndZoom()]);//var overlay = new ol.Overlay({//     position: ol.proj.transform([116.40, 39.90], 'EPSG:4326', 'EPSG:3857'),//     element: document.getElementById("xx")// });//创建地图var map = new ol.Map({target: "map",view: view,controls: controls,layers: [tiled],interactions: interactions,//moveTolerance: 1,// overlays: [overlay],//maxTilesLoading: 16});</script>
</body></html>

（4）发布栅格切片服务（发布成WMTS服务）

step 1 按上述步骤发布完成后在Tile Layers中查找发布的数据

step 2 创建切割任务

step3 提交切割任务

step4 切片服务调用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>地图模板</title><link rel="stylesheet" href="ol.css"><style>* {padding: 0;margin: 0;}html, body {width: 100%;height: 100%;}.map {width: 100%;height: 100%;position: absolute;}</style>
</head><body><div class="map" id="map"></div><script src="ol.js"></script><script>//创建切片图层var gridsetName = 'EPSG:900913';var gridNames = ['EPSG:900913:0', 'EPSG:900913:1', 'EPSG:900913:2', 'EPSG:900913:3', 'EPSG:900913:4', 'EPSG:900913:5', 'EPSG:900913:6', 'EPSG:900913:7', 'EPSG:900913:8', 'EPSG:900913:9', 'EPSG:900913:10', 'EPSG:900913:11', 'EPSG:900913:12', 'EPSG:900913:13', 'EPSG:900913:14', 'EPSG:900913:15', 'EPSG:900913:16', 'EPSG:900913:17', 'EPSG:900913:18', 'EPSG:900913:19', 'EPSG:900913:20', 'EPSG:900913:21', 'EPSG:900913:22', 'EPSG:900913:23', 'EPSG:900913:24', 'EPSG:900913:25', 'EPSG:900913:26', 'EPSG:900913:27', 'EPSG:900913:28', 'EPSG:900913:29', 'EPSG:900913:30'];var baseUrl = 'http://localhost:8086/geoserver/gwc/service/wmts';var style = '';var format = 'image/png';var infoFormat = 'text/html';var layerName = 'flood:floodrisk';var projection = new ol.proj.Projection({code: 'EPSG:900913',units: 'm',axisOrientation: 'neu'});var resolutions = [156543.03390625, 78271.516953125, 39135.7584765625, 19567.87923828125, 9783.939619140625, 4891.9698095703125, 2445.9849047851562, 1222.9924523925781, 611.4962261962891, 305.74811309814453, 152.87405654907226, 76.43702827453613, 38.218514137268066, 19.109257068634033, 9.554628534317017, 4.777314267158508, 2.388657133579254, 1.194328566789627, 0.5971642833948135, 0.29858214169740677, 0.14929107084870338, 0.07464553542435169, 0.037322767712175846, 0.018661383856087923, 0.009330691928043961, 0.004665345964021981, 0.0023326729820109904, 0.0011663364910054952, 5.831682455027476E-4, 2.915841227513738E-4, 1.457920613756869E-4];baseParams = ['VERSION', 'LAYER', 'STYLE', 'TILEMATRIX', 'TILEMATRIXSET', 'SERVICE', 'FORMAT'];params = {'VERSION': '1.0.0','LAYER': layerName,'STYLE': style,'TILEMATRIX': gridNames,'TILEMATRIXSET': gridsetName,'SERVICE': 'WMTS','FORMAT': format};function constructSource() {var url = baseUrl + '?'for (var param in params) {if (baseParams.indexOf(param.toUpperCase()) < 0) {url = url + param + '=' + params[param] + '&';}}url = url.slice(0, -1);var source = new ol.source.WMTS({url: url,layer: params['LAYER'],matrixSet: params['TILEMATRIXSET'],format: params['FORMAT'],projection: projection,tileGrid: new ol.tilegrid.WMTS({tileSize: [256, 256],extent: [-2.003750834E7, -2.003750834E7, 2.003750834E7, 2.003750834E7],origin: [-2.003750834E7, 2.003750834E7],resolutions: resolutions,matrixIds: params['TILEMATRIX']}),style: params['STYLE'],wrapX: true});return source;}var wmtsLayer = new ol.layer.Tile({source: constructSource()})// 坐标投影// var projection = new ol.proj.Projection({//     code: "EPSG:4326",//     units: "degrees", axisOrientation: 'neu'// });//创建视图var view = new ol.View({center: [0, 0],zoom: 2,projection: projection,extent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34]});//创建地图控件var controls = new ol.control.defaults().extend([new ol.control.FullScreen()]);var interactions = new ol.interaction.defaults().extend([new ol.interaction.DragRotateAndZoom()]);// var overlay = new ol.Overlay({//     position: [116.399669, 39.921354],//     element: document.getElementById("xx")// });//创建地图var map = new ol.Map({target: "map",view: view,controls: controls,layers: [wmtsLayer],interactions: interactions,//moveTolerance: 1,//overlays: [overlay],maxTilesLoading: 16});</script>
</body></html>

开源WebGIS开发——栅格图层相关推荐

开源WebGIS开发——如何创建一张地图
一.创建一张地图分为五个步骤 1.下载openlayers开发包 2.创建一个HTML网页并引入openlayers(包括css样式和js文件) 3.创建图层对象,引入地图资源 ol.Layer ( ...
开源Webgis开发1——环境配置
一.geoserver安装与配置 1.安装Java,我安装的版本1.8.0 (1)Java安装与环境配置参考:java的安装环境配置详细步骤 - 高软玩家 - 博客园 (2)环境配置完成后输入java ...
开源WebGIS开发2——开发环境（IntelliJ IDEA）
1.下载网址:Other Versions - IntelliJ IDEA 选择对应版本下载,推荐.exe下载 2.安装过程和配置参考博客:IntelliJ IDEA 下载安装配置教程(完整版)_爱思 ...
webgis从基础到开发实践_开源WebGIS教程系列——11.1 GISLite 的开发背景与设计
地理信息门户可以帮助人们更容易地发现.访问和使用地理空间信息, 是地理信息发布.服务和共享的重要环节.许多国家都很重视地理信息门户的建设,把它作为国家空间数据基础设施(spatial data in ...
WebGIS开发四大开源框架对比
目录四个不同的框架的对比: 二维地图框架与GIS的关系前端地图框架: WebGIS二维地图框架: Layer图层分为三大类: 之前给大家介绍了webgis常用的地图框架,点这里回顾一下. 本篇文章 ...
浅谈WEBGIS运用栅格地图实现原理[更新:Google Maps带来的新型WebGIS设计模式]
为什么要取这样的一个题目呢?主要是因为今天去了一家公司和他们谈了谈,本来是指望做兼职的,谈到最后当然是不成了.去谈的是地图制作(可兼职)一职,要求是地图制图经验,最后加了个有WEBGIS开发经验.本来 ...
关于WebGIS开发API选择的问题
个人博客,已转移至http://www.zgeo.work:8022/wordpress WebGIS主要是实现网页端的GIS功能,将传统的单机GIS软件功能移植到web端,并结合传统业务数据库(Or ...
WebGIS开发总结
GIS开发基础知识 GIS概念地理信息系统(Geographic Information System,GIS),是在计算机硬.软件系统支持下,对整个或部分地球表层(包括大气层)空间中的有关地理分布 ...
WebGIS开发入门
目录一 WebGIS: 二 GIS背景三如何入门webgis开发 1 gis数据处理 2 gis数据服务发布 3 gis数据服务调用 4 gis数据渲染四 WebGIS核心价值五 webgi ...
开源地图服务器网站,开源WebGIS：地图发布与地图服务
开源WebGIS:地图发布与地图服务语音编辑锁定讨论上传视频上传视频本词条缺少信息栏.概述图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! <开源WebGIS:地图发布与 ...

开源WebGIS开发——栅格图层

开源WebGIS开发——栅格图层相关推荐

最新文章

热门文章