实现:最初显示”中国地图(省界)“,放大到一定程度显示”中国地图(地市分界)“,继续放大切换到Google街道地图。
<!DOCTYPE html>
<html>
<head>
<title>中国地图</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/style.css" type="text/css" />
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
height:100%;
}
.bigmap {
position:absolute;
left:0;
top:0px;
padding:0;
width:100%;
height:100%;
border:1px solid #333;
}
</style>
<script type="text/javascript" src="js/OpenLayers/lib/OpenLayers.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3.6&sensor=false"></script>
<script type="text/javascript">
var map, layer_province, layer_city, layer_street, vlayer;
// 第一次打开地图的中心位置(经度、纬度)
var firstLon = 109.33981;
var firstLat = 33.72419;
/*
* 切换地图比例尺设置
* scale1:
* scale2: 省地图和地市地图切换点
* scale3: 地市地图和谷歌街道地图切换点
*/
var scale1 = 20000000;
var scale2 = 10000000;
var scale3 = 2000000;
var level1 = 1;
var level2 = 2;
var level3 = 3;
var level = level1;
function init() {
// 创建MAP DIV框架
map = new OpenLayers.Map("map",
{
maxResolution: 'auto',
maxExtent: new OpenLayers.Bounds(
73.44696044921875, 6.318641185760498,
135.08583068847656, 53.557926177978516),
displayProjection: new OpenLayers.Projection("EPSG:4326")
});
// 增加中国地图(省界) Layer
addProvinceLayer()
// 增加中国地图(地市分界) Layer
addCityLayer();
// 增加Google Street Layer
addStreetLayer();
// 增加地图Layer切换Register
addMapRegister();
map.zoomToMaxExtent();
map.setCenter(new OpenLayers.LonLat(firstLon, firstLat), 0);
map.addControl(new OpenLayers.Control.Scale());
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.LayerSwitcher());
}
function addProvinceLayer() {
layer_province = new OpenLayers.Layer.WMS(
"China:province", "http://10.0.0.239:8081/geoserver/wms",
{
layers: "China:province",
},
{
singleTile: true, //set single label
isBaseLayer: true,
projection: "EPSG:4326",
maxExtent: new OpenLayers.Bounds(
73.44696044921875, 6.318641185760498,
135.08583068847656, 53.557926177978516)
}
);
map.addLayer(layer_province);
}
function addCityLayer() {
layer_city = new OpenLayers.Layer.WMS(
"China:city", "http://10.0.0.239:8081/geoserver/wms",
{
layers: "China:city"
},
{
singleTile: true, //set single label
visibility: false,
projection: "EPSG:4326",
displayInLayerSwitcher: false,
maxExtent: new OpenLayers.Bounds(
73.44696044921875, 6.318641185760498,
135.08583068847656, 53.557926177978516)
}
);
map.addLayer(layer_city);
}
function addStreetLayer() {
layer_street = new OpenLayers.Layer.Google(
"Google Streets", // the default
{
numZoomLevels: 18 ,
projection: "EPSG:900913",
visibility: false,
displayInLayerSwitcher: false,
maxExtent: new OpenLayers.Bounds(
-128 * 156543.03390625,
-128 * 156543.03390625,
128 * 156543.03390625,
128 * 156543.03390625)
}
);
map.addLayer(layer_street);
}
function addMapRegister(){
map.events.register("zoomend", map, function(){
var cur_scale = map.getScale();
if(cur_scale >= scale2) {
if(level != level1) {
if(level == level2) {
map.setCenter(map.center.transform(
new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:4326")
), map.getZoom());
} else {
map.setCenter(map.center.transform(
new OpenLayers.Projection("EPSG:900913"),
new OpenLayers.Projection("EPSG:4326")
), map.getZoom());
}
level = level1;
layer_province.displayInLayerSwitcher = true;
layer_city.displayInLayerSwitcher = false;
layer_street.displayInLayerSwitcher = false;
map.setBaseLayer(layer_province);
layer_city.setVisibility(false);
layer_street.setVisibility(false);
}
} else if(cur_scale < scale2 && cur_scale >= scale3){
if(level != level2){
if(level == level1) {
map.setCenter(map.center.transform(
new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:4326")
), map.getZoom());
} else {
map.setCenter(map.center.transform(
new OpenLayers.Projection("EPSG:900913"),
new OpenLayers.Projection("EPSG:4326")
), map.getZoom());
}
level = level2;
layer_province.displayInLayerSwitcher = false;
layer_city.displayInLayerSwitcher = true;
layer_street.displayInLayerSwitcher = false;
map.setBaseLayer(layer_city);
layer_province.setVisibility(false);
layer_street.setVisibility(false);
}
} else if(cur_scale < scale3){
if(level != level3) {
map.setCenter(map.center.transform(
new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913")
), map.getZoom());
level = level3;
layer_province.displayInLayerSwitcher = false;
layer_city.displayInLayerSwitcher = false;
layer_street.displayInLayerSwitcher = true;
map.setBaseLayer(layer_street);
layer_city.setVisibility(false);
layer_province.setVisibility(false);
}
}
});
}
</script>
</head>
<body onload="init()" >
<div id="map" class="bigmap"></div>
</body>
</html>
参考:
add, remove base layers depending on zoom, change baselayer
Zoom Control Example
分享到:
相关推荐
Gis工程师训练营:supermap object组件式开发pdf文件! Gis工程师训练营:supermap object组件式开发pdf文件! Gis工程师训练营:supermap object组件式开发pdf文件! Gis工程师训练营:supermap object组件式开发...
GIS二次开发:第六讲 地图的显示.ppt
GIS二次开发:第五讲 地图是如何组成的 Map.ppt
2011版清华大学出版的gis工程师训练营的配套代码,希望能够对于正在学习supermap组件开发的你起到帮助
坐标系为WGS 1984, 数据内容包括主要河流(5级和5级以上)、主要公路、所有铁路、居民地(县和县级以上)、...1:400万的中国地图,就是地图上1厘米,实际距离是400公里,比如说上海到北京1200公里,在地图上就是3厘米。
GIS4CAD插件是一款基于AutoCAD的功能套件,它提供了一系列 GIS 功能。通过该插件,您可以轻松地在AutoCAD中导入和导出SHP、MDB、Kml、Kmz、Gpx、GeoJson、EXCEL、TXT、CSV等多种格式的矢量文件,并支持SQL Server、...
分析了移动GIS开发的关键技术,重点讨论了面向对象方式下移动 GIS空间数据管理、空间数据可视化和空间数据查询的设计方法。 在 Android平台上研发了一套移动 GIS基础软件平台。
GIS二次开发:复习与总结.ppt
GIS二次开发:第七讲 GeoDatabase.ppt
GIS二次开发:第三部分 用户界面定制——VBA开发.ppt
GIS二次开发:第一部分 GIS软件开发基础.ppt
ArcObjects+GIS应用开发——基于C#.NET.pdf
GIS二次开发:第七讲 GeoDatabase-2.ppt
GIS二次开发:第七讲 GeoDatabase-1.ppt
GIS二次开发:第二部分 ArcEngine的基本原理—— 对象组件模型(COM).ppt
Web GIS从基础到开发实践(基于ArcGIS API FOR JavaScript)
GIS二次开发:第四讲 ArcEngine的控件.ppt
插件式GIS应用框架的设计与实现:基于C#和AE 9.2.part2
插件式GIS应用框架的设计与实现:基于C#和AE+9.2这本书的代码,纯手工敲上去的,对于ArcEngine插件式开发框架学习很好的一本书。
开源 WebGIS:地图发布与地图服务——基于 MapServer 与 Leaflet 的实践