标题
 服务概述

OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包,用于实现标准格式发布的地图数据访问。从OpenLayers2.2版本以后,OpenLayers已经将所用到的Prototype.js组件整合到了自身当中,并不断在Prototype.js的基础上完善面向对象的开发,Rico用到地方不多,只是在OpenLayers.Popup.AnchoredBubble类中圆角化DIV。

中文名 访问地址 图层名
一带一路经济走廊及其途径城市分布地势图 简图 http://218.244.250.70/geoserver/gwc/service/wms YDYL_JJZL_TJCS_FBDST_JT
一带一路经济走廊及其途径城市分布地势图 http://218.244.250.70/geoserver/gwc/service/wms YDYL_JJZL_TJCS_FBDST
一带一路经济走廊及其途径城市分布示意图 分国设色 http://218.244.250.70/geoserver/gwc/service/wms YDYL_JJZL_TJCS_FBSYT_FGSS
一带一路经济走廊及其途径城市分布示意图 http://218.244.250.70/geoserver/gwc/service/wms YDYL_JJZL_TJCS_FBSYT
一带一路经济走廊及其途径城市分布影像图 http://218.244.250.70/geoserver/gwc/service/wms YDYL_JJZL_TJCS_FBYXT
一带一路示意图 http://218.244.250.70/geoserver/gwc/service/wms YDYL_SYT
全球百万地图(深色) http://180.76.184.34:8085/title/dark_dark_anno1 国外灰色注记
http://180.76.184.34:8085/title/dark_dark_anno2 国内灰色注记
http://180.76.184.34:8085/title/dark_dark_basemap 全球灰色图层
http://180.76.184.34:8085/title/ocean_dark 海洋灰色图层
全球百万地图(浅色) http://180.76.184.34:8085/title/light_light_anno1 国外高亮注记
http://180.76.184.34:8085/title/light_light_anno2 国内高亮注记
http://180.76.184.34:8085/title/light_light_basemap 全球高亮图层
http://180.76.184.34:8085/title/ocean_light 海洋高亮图层
全球地表覆盖 http://218.244.250.80:8080/erdas-apollo/coverage/CGLC 全球地表覆盖图层
中国百万版图
http://180.76.184.34:8085/title/cn_base_cn_base 中国基础图层
http://180.76.184.34:8085/title/cn_anno2_cn 中国省注记图层
http://180.76.184.34:8085/title/cn_anno1_cn 中国市注记图层
 面向用户

OpenLayers API面向的读者是有一定JavaScript编程经验的读者,此外,读者还应该对地图产品有一定的了解。初级程序员通过1-2天的学习,即可掌握API的使用。

 获取API

OpenLayers API是由JavaScript语言编写的,您在使用之前需要先将API下载并放项目中,通过<script>标签将API引用到页面中:<script type="text/javascript" src="../public/lib/openlayers3/ol.js"></script>

 服务调用示例

“一带一路”(英文:The Belt and Road,缩写B&R)是“丝绸之路经济带”和“21世纪海上丝绸之路”的简称。

1. 一带一路示意图

下图大体上描述或表示一带一路的交通走向、经过地理位置等:

下图为调用一带一路示意图代码实例,注意保证服务请求地址和图层名称一致。


var layer = new ol.layer.Tile({ source: new ol.source.TileWMS({ url: 'http://218.244.250.70:8881/geoserver/gwc/service/wms', //服务请求地址 params: { 'FORMAT' : 'image/png', 'VERSION': '1.1.1', 'SRS' : 'EPSG:4326', 'tiled' : true, 'LAYERS' : 'YDYL_SYT', //图层名称 STYLES : '' }, tileGrid : tilegrid, extent: extent, serverType: 'geoserver' }) });

2. 一带一路经济走廊及其途径城市分布地势图简图


下图为调用一带一路经济走廊城市位置相对分布图代码实例,注意保证服务请求地址和图层名称一致。


var layer = new ol.layer.Tile({ source: new ol.source.TileWMS({ url: 'http://218.244.250.70:8881/geoserver/gwc/service/wms', //服务请求地址 params: { 'FORMAT' : 'image/png', 'VERSION': '1.1.1', 'SRS' : 'EPSG:4326', 'tiled' : true, 'LAYERS' : 'YDYL_JJZL_TJCS_FBDST_JT', //图层名称 STYLES : '' }, tileGrid : tilegrid, extent: extent, serverType: 'geoserver' }) });

3. 一带一路经济走廊及其途径城市分布地势图


下图为调用一带一路经济走廊及其途径城市分布图代码实例,注意保证服务请求地址和图层名称一致。


var layer = new ol.layer.Tile({ source: new ol.source.TileWMS({ url: 'http://218.244.250.70:8881/geoserver/gwc/service/wms', //服务请求地址 params: { 'FORMAT' : 'image/png', 'VERSION': '1.1.1', 'SRS' : 'EPSG:4326', 'tiled' : true, 'LAYERS' : 'YDYL_JJZL_TJCS_FBDST', //图层名称 STYLES : '' }, tileGrid : tilegrid, extent: extent, serverType: 'geoserver' }) });

4. 一带一路经济走廊及其途径城市分布示意图 分国设色


下图为调用一带一路经济走廊及其途径城市分布图(分国设色)代码实例,注意保证服务请求地址和图层名称一致。


var layer = new ol.layer.Tile({ source: new ol.source.TileWMS({ url: 'http://218.244.250.70:8881/geoserver/gwc/service/wms', //服务请求地址 params: { 'FORMAT' : 'image/png', 'VERSION': '1.1.1', 'SRS' : 'EPSG:4326', 'tiled' : true, 'LAYERS' : 'YDYL_JJZL_TJCS_FBSYT_FGSS', //图层名称 STYLES : '' }, tileGrid : tilegrid, extent: extent, serverType: 'geoserver' }) });

5. 一带一路经济走廊及其途径城市分布示意图


下图为调用一带一路经济走廊及其途径城市分布示意图代码实例,注意保证服务请求地址和图层名称一致。


var layer = new ol.layer.Tile({ source: new ol.source.TileWMS({ url: 'http://218.244.250.70:8881/geoserver/gwc/service/wms', //服务请求地址 params: { 'FORMAT' : 'image/png', 'VERSION': '1.1.1', 'SRS' : 'EPSG:4326', 'tiled' : true, 'LAYERS' : 'YDYL_JJZL_TJCS_FBSYT', //图层名称 STYLES : '' }, tileGrid : tilegrid, extent: extent, serverType: 'geoserver' }) });

6. 一带一路经济走廊及其途径城市分布影像图


下图为调用一带一路经济走廊及其途径城市分影像图代码实例,注意保证服务请求地址和图层名称一致。


var layer = new ol.layer.Tile({ source: new ol.source.TileWMS({ url: 'http://218.244.250.70:8881/geoserver/gwc/service/wms', //服务请求地址 params: { 'FORMAT' : 'image/png', 'VERSION': '1.1.1', 'SRS' : 'EPSG:4326', 'tiled' : true, 'LAYERS' : 'YDYL_JJZL_TJCS_FBYXT', //图层名称 STYLES : '' }, tileGrid : tilegrid, extent: extent, serverType: 'geoserver' }) });

7. 全球百万地图(深色)


下图为调用全球百万地图(深色)图层代码实例


var newGlobalLayer=function(projection,tileGrid,url){ var globalLayer = new ol.layer.Tile({ source: new ol.source.TileImage({ projection: projection, tileGrid: tileGrid, url: url, tileUrlFunction: function(tileCoord, pixelRatio, proj,url){ var this$=this; url =this$.tc; var x = 'C' + padLeft(tileCoord[1], 8, 16); var y = 'R' + padLeft(-tileCoord[2] - 1, 8, 16); var z = 'L' + padLeft(tileCoord[0], 2, 10); var url = url+'/Layers/_alllayers/' + z + '/' + y + '/' + x + '.png'; return url; } }) }) return globalLayer ; } //国外灰色注记 var darkLabelGWLayer=newGlobalLayer(proj,tileGrid,"http://180.76.184.34:8085/title/dark_dark_anno1"); //国内灰色注记 var darkLabelGNLayer=newGlobalLayer(proj,tileGrid,"http://180.76.184.34:8085/title/dark_dark_anno2"); //全球灰色图层 var darkBaseMapLayer=newGlobalLayer(proj,tileGrid,"http://180.76.184.34:8085/title/dark_dark_basemap"); //海洋灰色图层 var darkOceanLayer =newGlobalLayer(proj,tileGrid,"http://180.76.184.34:8085/title/ocean_dark"); //灰色 var layers = [darkOceanLayer,darkBaseMapLayer,darkLabelGNLayer,darkLabelGWLayer];

8. 全球百万地图(浅色)


下图为调用全球百万地图(浅色)图层代码实例


var newGlobalLayer=function(projection,tileGrid,url){ var globalLayer = new ol.layer.Tile({ source: new ol.source.TileImage({ projection: projection, tileGrid: tileGrid, url: url, tileUrlFunction: function(tileCoord, pixelRatio, proj,url){ var this$=this; url =this$.tc; var x = 'C' + padLeft(tileCoord[1], 8, 16); var y = 'R' + padLeft(-tileCoord[2] - 1, 8, 16); var z = 'L' + padLeft(tileCoord[0], 2, 10); var url = url+'/Layers/_alllayers/' + z + '/' + y + '/' + x + '.png'; return url; } }) }) return globalLayer ; } //国外高亮注记 var lightLabelGWLayer=newGlobalLayer(proj,tileGrid,"http://180.76.184.34:8085/title/light_light_anno1"); //国内高亮注记 var lightLabelGNLayer=newGlobalLayer(proj,tileGrid,"http://180.76.184.34:8085/title/light_light_anno2"); //全球高亮图层 var lightBaseMapLayer=newGlobalLayer(proj,tileGrid,"http://180.76.184.34:8085/title/light_light_basemap"); //海洋高亮图层 var lightOceanLayer =newGlobalLayer(proj,tileGrid,"http://180.76.184.34:8085/title/ocean_light"); //亮色 var layers = [lightOceanLayer,lightBaseMapLayer,lightLabelGWLayer,lightLabelGNLayer];

9. 全球地表覆盖


下图为调用全球地表覆盖图层代码实例


//GLC30-2010覆盖类型 var glc_c2010 = thi$.glc_c2010 =new OpenLayers.Layer.WMS("WMSGird", "http://218.244.250.80:8080/erdas-apollo/coverage/CGLC", { layers: "cglc30_2010_0", transparent: "true" }); glc_c2010.events.register("tileerror", thi$, function (evt) { evt.tile.setVisible('hidden'); return false; }); glc_c2010.setVisibility(false); layers.push(glc_c2010); //水体 var lcr_c = thi$.lcr_c =new OpenLayers.Layer.WMS("水体", "http://218.244.250.80:8080/erdas-apollo/coverage/CGLC",{ layers: 'cglc30_2010_0', format: "image/png", styles: "water", transparent: true, isBaseLayer: false }, { visibility: false, ischengguo: true }); lcr_c.events.register("tileerror", thi$, function (evt) { evt.tile.setVisible('hidden'); return false; }); lcr_c.setVisibility(false); layers.push(lcr_c); //湿地 var lcw_c = thi$.lcw_c =new OpenLayers.Layer.WMS("湿地", "http://218.244.250.80:8080/erdas-apollo/coverage/CGLC", { layers: 'cglc30_2010_0', format: "image/png", styles: "wetland", transparent: true, isBaseLayer: false }, { visibility: false, ischengguo: true }); lcw_c.events.register("tileerror", thi$, function (evt) { evt.tile.setVisible('hidden'); return false; }); lcw_c.setVisibility(false); layers.push(lcw_c); //人造地表 var lci_c = thi$.lci_c =new OpenLayers.Layer.WMS("人造地表", "http://218.244.250.80:8080/erdas-apollo/coverage/CGLC", { layers: 'cglc30_2010_0', format: "image/png", styles: "artificial", transparent: true, isBaseLayer: false }, { visibility: false, ischengguo: true }); lci_c.events.register("tileerror", thi$, function (evt) { evt.tile.setVisible('hidden'); return false; }); lci_c.setVisibility(false); layers.push(lci_c); //耕地 var lcc_c = thi$.lcc_c =new OpenLayers.Layer.WMS("耕地", "http://218.244.250.80:8080/erdas-apollo/coverage/CGLC", { layers: 'cglc30_2010_0', format: "image/png", styles: "cropland", transparent: true, isBaseLayer: false }, { visibility: false, ischengguo: true }); lcc_c.events.register("tileerror", thi$, function (evt) { evt.tile.setVisible('hidden'); return false; }); lcc_c.setVisibility(false); layers.push(lcc_c); //冰川和永久积雪 var lcp_c = thi$.lcp_c =new OpenLayers.Layer.WMS("冰川和永久积雪", "http://218.244.250.80:8080/erdas-apollo/coverage/CGLC", { layers: 'cglc30_2010_0', format: "image/png", styles: "ice", transparent: true, isBaseLayer: false }, { visibility: false, ischengguo: true }); lcp_c.events.register("tileerror", thi$, function (evt) { evt.tile.setVisible('hidden'); return false; }); lcp_c.setVisibility(false); layers.push(lcp_c); //森林 var lcf_c = thi$.lcf_c =new OpenLayers.Layer.WMS("森林", "http://218.244.250.80:8080/erdas-apollo/coverage/CGLC", { layers: 'cglc30_2010_0', format: "image/png", styles: "forest", transparent: true, isBaseLayer: false }, { visibility: false, ischengguo: true }); lcf_c.events.register("tileerror", thi$, function (evt) { evt.tile.setVisible('hidden'); return false; }); lcr_c.setVisibility(false); layers.push(lcf_c); //草地 var lcg_c = thi$.lcg_c =new OpenLayers.Layer.WMS("草地", "http://218.244.250.80:8080/erdas-apollo/coverage/CGLC", { layers: 'cglc30_2010_0', format: "image/png", styles: "grass", transparent: true, isBaseLayer: false }, { visibility: false, ischengguo: true }); lcg_c.events.register("tileerror", thi$, function (evt) { evt.tile.setVisible('hidden'); return false; }); lcg_c.setVisibility(false); layers.push(lcg_c); //灌木地 var lcs_c = thi$.lcs_c =new OpenLayers.Layer.WMS("灌木地", "http://218.244.250.80:8080/erdas-apollo/coverage/CGLC", { layers: 'cglc30_2010_0', format: "image/png", styles: "shrub", transparent: true, isBaseLayer: false }, { visibility: false, ischengguo: true }); lcs_c.events.register("tileerror", thi$, function (evt) { evt.tile.setVisible('hidden'); return false; }); lcs_c.setVisibility(false); layers.push(lcs_c); //裸地 var lcb_c = thi$.lcb_c =new OpenLayers.Layer.WMS("裸地", "http://218.244.250.80:8080/erdas-apollo/coverage/CGLC", { layers: 'cglc30_2010_0', format: "image/png", styles: "bareland", transparent: true, isBaseLayer: false }, { visibility: false, ischengguo: true }); lcb_c.events.register("tileerror", thi$, function (evt) { evt.tile.setVisible('hidden'); return false; }); lcb_c.setVisibility(false); layers.push(lcb_c); //苔原 var lct_c = thi$.lct_c =new OpenLayers.Layer.WMS("苔原", "http://218.244.250.80:8080/erdas-apollo/coverage/CGLC", { layers: 'cglc30_2010_0', format: "image/png", styles: "tundra", transparent: true, isBaseLayer: false }, { visibility: false, ischengguo: true }); lct_c.events.register("tileerror", thi$, function (evt) { evt.tile.setVisible('hidden'); return false; }); lct_c.setVisibility(false); layers.push(lct_c);

9. 中国百万版图


下图为调用中国百万版图图层代码实例


//创建切片图层 var newGlobalLayer=function(projection,tileGrid,url){ var globalLayer = new ol.layer.Tile({ source: new ol.source.TileImage({ projection: projection, tileGrid: tileGrid, url: url, tileUrlFunction: function(tileCoord, pixelRatio, proj,url){ var this$=this; url =this$.tc; var x = 'C' + padLeft(tileCoord[1], 8, 16); var y = 'R' + padLeft(-tileCoord[2] - 1, 8, 16); var z = 'L' + padLeft(tileCoord[0], 2, 10); var url = url+'/Layers/_alllayers/' + z + '/' + y + '/' + x + '.png'; return url; } }) }) return globalLayer ; } //中国基础图层 var baseLayer=newGlobalLayer(proj,tileGrid,"http://180.76.184.34:8085/title/cn_base_cn_base"); //中国省注记图层 var nameLayer1=newGlobalLayer(proj,tileGrid,"http://180.76.184.34:8085/title/cn_anno2_cn"); //中国市注记图层 var nameLayer2=newGlobalLayer(proj,tileGrid,"http://180.76.184.34:8085/title/cn_anno1_cn");