OpenLayers加载缩放控件使用方法详解

1、一般的地图打开都有放大、缩小和全图的导航条，以便于用户对地图的查看，下面我们将在OpenLayers中实现这一功能；

2、在之前创建的空白站点下面新建一个html的页面，引入ol.js和ol.css文件，然后在body标签中创建一个div，作为地图加载的容器；

3、代码实现

<!DOCTYPE html>

<head>

<title>加载并显示OSM地图</title>

#map .ol-zoomslider

{

background-color : transparent;

top : 2.3em;

}

#map .ol-zoom-extent

{

top: 280px;

}

</style>

window.onload = function () {

//实例化map对象并加载地图

//使用Openlayers初始化一幅地图时，target、layers和view不可少

var map = new ol.Map({

//地图容器div的id

target: 'map',

//在地图容器中加载的图层

layers: [

//加载瓦片数据

new ol.layer.Tile({

//瓦片的数据源

source: new ol.source.OSM()

})

//地图视图设置

view: new ol.View({

//地图中心点

center: [0, 0],

//地图初始显示级别

zoom: 2

})

});

//实例化ZoomSlider控件

var zoomslider = new ol.control.ZoomSlider();

//加载ZoomSlider控件到地图容器中

map.addControl(zoomslider);

//实例化ZoomToExtent

var zoomToExtent = new ol.control.ZoomToExtent({

extent: [

//Todo 这个范围应该怎么确定

13100000, 4290000,

13200000, 5210000

]

});

//加载ZoomToExtent到map中

map.addControl(zoomToExtent);

}

</script>

</head>

<body>

</body>

</html>

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。