openlayers3加载各种底图，补齐中..

最新推荐文章于 2024-10-12 11:14:53 发布

evomap

最新推荐文章于 2024-10-12 11:14:53 发布

阅读量2w

点赞数 18

分类专栏： openlayers3 文章标签： openlayers3 GIS

本文链接：https://blog.csdn.net/u014529917/article/details/52241389

版权

openlayers3 专栏收录该内容

12 篇文章 3 订阅

订阅专栏

不管是加载在线还是离线的底图，无非是按照一定的规则，正确定义图层（layer）,然后将图层添加到map对象中，这里我map对象使用的坐标系为WGS84 4326，openlayers版本为3.17。

1.在线天地图交通图

	var tian_di_tu_road_layer = new ol.layer.Tile({
		title: "天地图路网",
		source: new ol.source.XYZ({
			url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
		})
	});

	var tian_di_tu_annotation = new ol.layer.Tile({
		title: "天地图文字标注",
		source: new ol.source.XYZ({
			url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}'
		})
	});

2.离线天地图

      var tiandituBaseLayer = new ol.layer.Tile({
          title:"天地图基础图层",
          source: new ol.source.XYZ({
              tileUrlFunction:function(tileCoord){  // 参数tileCoord为瓦片坐标
                  var z = tileCoord[0];
                  var x = tileCoord[1];
                  var y = -tileCoord[2]-1;
                  return 'http://localhost:8080/tiantai/TDTVec/L'+z+'/'+y+'/'+x+'.png'
              },
              projection:'EPSG:4326'
          })
      });

      // 添加一个使用离线瓦片地图的层
      var tiandituMarkLayer = new ol.layer.Tile({
          title:"天地图标注图层",
          source: new ol.source.XYZ({
              tileUrlFunction:function(tileCoord){  // 参数tileCoord为瓦片坐标，遍历整个坐标系统
                  var z = tileCoord[0];
                  var x = tileCoord[1];
                  var y = -tileCoord[2]-1;//不是经纬度,是瓦片坐标
                  return 'http://localhost:8080/tiantai/TDTVecAnno/L'+z+'/'+y+'/'+x+'.png';
              },
              projection:'EPSG:4326'
          })
      });

3.在线天地图影像

 var tiandituSatelliteLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url:'http://t3.tianditu.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}'//天地图影像
        }),
        projection: 'EPSG:3857'
    })
    
 var tiandituSatelliteLabel = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url:'http://t3.tianditu.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}'//天地图影像 标注
        }),
        projection: 'EPSG:3857'
    })

4.在线高德地图

var gaodeMapLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url:'http://webrd03.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'//高德地图在线
        }),
        projection: 'EPSG:3857'
    })

5.3857坐标系下的arcgis切片

	var tileLayer = new ol.layer.Tile({
		source: new ol.source.XYZ ({
			tileUrlFunction: function(tileCoord) {
				var x = 'C'+zeroPad(tileCoord[1],8,16);
				var y = 'R'+zeroPad(-tileCoord[2]-1,8,16);
				var z = 'L'+zeroPad(tileCoord[0],2,10);
				return 'tiles/wt/'+z+'/'+y+'/'+x+'.png';
			},
			projection: 'EPSG:3857'
		})
	});

      function zeroPad(num,len,radix){
		var str = num.toString(radix || 10);
		while(str.length<len){
			str = "0"+ str;
		}
		return str;
	}

6.Open Street Map 地图层

默认：

   var openStreetMapLayer = new ol.layer.Tile({
        source: new ol.source.OSM()
    });

地形：

var osmTerrainlayer = new ol.layer.Tile({
        source : new ol.source.OSM(
                url:'http://tile-{a-c}.openstreetmap.fr/hot/{z}/{x}/{y}.png'//osm地形
        )
})

自行车地图：

var osmBicycleLayer = new ol.layer.Tile({
        source: new ol.source.OSM({ 
            url:'http://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png'//osm自行车地图
        }) 
    })

7.在线Bing地图

var bingMapLayer = new ol.layer.Tile({
        source: new ol.source.BingMaps({
            key: 'AkjzA7OhS4MIBjutL21bkAop7dc41HSE0CNTR5c6HJy8JKc7U9U9RveWJrylD3XJ',
      imagerySet: 'Road'
        })
    });

8.在线Stamen地图

var stamenLayer = new ol.layer.Tile({
        source: new ol.source.Stamen({
            layer: 'watercolor'
        })
    });

9.在线MapQuest地图

var mapQuestLayer = new ol.layer.Tile({
        source: new ol.source.MapQuest({
            layer: 'osm'
        })
    });

10.加载geoserver的WMS服务

var TileWMSLayer = new ol.layer.Tile({
		source: new ol.source.TileWMS({
			url: "http://192.168.88.21:8081/geowebcach/service/wms",
			params: {'LAYERS': 'tiantai','FORMAT':'image/png','SRS':'EPSG:0'},
			tileGrid: new ol.tilegrid.TileGrid({
				//resolution和conf.xml中保持一致
				resolutions: [0.00068664344191344954,0.00034332053122622185,0.00017165907588260801,8.5829537941304004e-005,4.2913579240149092e-005,2.1455599889571629e-005,1.07266102142829e-005,5.3633051071414502e-006,2.6816525535707251e-006],
				tileSize: [256, 256],
				origin:[-400,400]
			})
		}),
		projection: 'EPSG:4326'
	})

11.ArcGIS Server发布的服务

var arcgisTileLayer = new ol.layer.Tile({
		source: new ol.source.TileArcGISRest({
			url: 'http://localhost:8399/arcgis/rest/services/test/MapServer'
		})
	})

好像3.17版本才支持，如果服务启用缓存，访问的就是arcgis缓存切片

12.在线谷歌地图

谷歌交通地图：

var googleMapLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url:'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0'
        })
    });

谷歌地形地图：

 var googleTerrainLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url:'http://mt3.google.cn/vt/lyrs=t@131,r@216000000&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Gal'//谷歌地形地图
        }),
        projection: 'EPSG:3857'
    })

谷歌卫星地图（混合）：

var googleSatelliteLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url:'http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G'//谷歌卫星地图 混合
        }),
        projection: 'EPSG:3857'
    })