meface/43comcontrol.md at c4e8f7c0dc16c780817fed46f623502cfbf3709b

6.5 KiB

Raw Blame History

title

date

author

常用控件

1. 初始化地图

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/ol.css" type="text/css">
    <style>
        .map {
            height: 400px;
            width: 100%;
        }
    </style>
    <script src="lib/ol.js"></script>
    <title>常用控件示例</title>
</head>
<body>
<h2>常用控件示例</h2>
<div id="mouse_position"></div>
<div id="map" class="map"></div>
<div id="scaleline" style="position: relative;height: 50px;"></div>
<script> 
	var shenzhen = [113.958334, 22.535640];
    var map = new ol.Map({
        view: new ol.View({
            center: ol.proj.fromLonLat(shenzhen),
            zoom: 10,
            // rotation: Math.PI/6
        }),
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        target: "map"
    });
</script>
</body>
</html>

2. 缩放控件

ol.control.ZoomSlider用于控制地图的缩放级别。

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

3. 复位（定位）控件

ol.control.ZoomToExtent用于将地图视图定位到指定区域，可以实现像书签、收藏等类似的功能。

//复位（定位）控件
var initExtent = map.getView().calculateExtent();
var zoomToExtent = new ol.control.ZoomToExtent({
    extent: initExtent
});
map.addControl(zoomToExtent);//可以作为复位按钮

4. 鼠标位置控件

ol.control.MousePosition用于显示鼠标所在地图上的位置信息。

var mouseControl = new ol.control.MousePosition({
    coordinateFormat: ol.coordinate.createStringXY(4)   //坐标格式
    , projection: 'EPSG:3857'                           //投影坐标系
    , className: 'custom-mouse'                         //自定义的坐标信息显示样式
    , target: document.getElementById("mouse_position") //需要dom对象
    , undefinedHTML: '&nbsp'                            //定义未定义坐标的标记
});
map.addControl(mouseControl);

5. 比例尺控件

//比例尺控件
var scaleLineControl = new ol.control.ScaleLine({
    units: "metric",//设置比例尺单位,支持degrees/imperial/us/nautical/metric，默认:metric
    target: "scaleline",//设置target，将控件渲染到地图视图外部,不指定默认在地图左下角
});
map.addControl(scaleLineControl);

当ScaleLine控件不指定target属性时默认在地图视图内部的左下角。

6.鹰眼控件

//鹰眼控件
var overviewControl = new ol.control.OverviewMap({
    layers: [                   // 在鹰眼中加载相同坐标系下不同数据源的图层
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ]
    ,collapseLabel: "\u00BB"    //展开时功能按钮上的标识
    ,label: "\u00AB"            //折叠时功能按钮上的标识
    ,collapsed: false           //初始状态是否展开
});
map.addControl(overviewControl);

7. 全屏显示控件

//全屏显示控件
var fullSreen = new ol.control.FullScreen();
map.addControl(fullSreen);

控件的构造器中都提供了自定义样式的className属性，控件的位置由CSS样式决定。

完整代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/ol.css" type="text/css">
    <style>
        .map {
            height: 400px;
            width: 100%;
        }
    </style>
    <script src="lib/ol.js"></script>
    <title>常用控件示例</title>
</head>
<body>
	<h2>常用控件示例</h2>
	<div id="mouse_position"></div>
	<div id="map" class="map"></div>
	<div id="scaleline" style="position: relative;height: 50px;"></div>
	<script> 
    	var shenzhen = [113.958334, 22.535640];
        var map = new ol.Map({
            view: new ol.View({
                center: ol.proj.fromLonLat(shenzhen),
                zoom: 10,
                // rotation: Math.PI/6
            }),
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            target: "map"
        });
        map.on("click",function (e) {
            var point = e.coordinate;
            console.log("x:"+point[0]+",y:"+point[1]);
        });
        //导航控件
        var zoomslider = new ol.control.ZoomSlider();
        map.addControl(zoomslider);

        //复位（定位）控件
        var initExtent = map.getView().calculateExtent();
        var zoomToExtent = new ol.control.ZoomToExtent({
            extent: initExtent
        });
        map.addControl(zoomToExtent);//可以作为复位按钮

        //鼠标位置控件
        var mouseControl = new ol.control.MousePosition({
            coordinateFormat: ol.coordinate.createStringXY(4)   //坐标格式
            , projection: 'EPSG:3857'                           //投影坐标系
            , className: 'custom-mouse'                         //自定义的坐标信息显示样式
            , target: document.getElementById("mouse_position") //需要dom对象
            , undefinedHTML: '&nbsp'                            //定义未定义坐标的标记
        });
        map.addControl(mouseControl);

        //比例尺控件
        var scaleLineControl = new ol.control.ScaleLine({
            units: "metric",//设置比例尺单位,支持degrees/imperial/us/nautical/metric，默认:metric
            target: "scaleline",//设置target，将控件渲染到地图视图外部,不指定默认在地图左下角
        });
        map.addControl(scaleLineControl);

        //鹰眼控件
        var overviewControl = new ol.control.OverviewMap({
            layers: [                   // 在鹰眼中加载相同坐标系下不同数据源的图层
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ]
            ,collapseLabel: "\u00BB"    //展开时功能按钮上的标识
            ,label: "\u00AB"            //折叠时功能按钮上的标识
            ,collapsed: false           //初始状态是否展开
        });
        map.addControl(overviewControl);

        //全屏显示控件
        var fullSreen = new ol.control.FullScreen();
        map.addControl(fullSreen);
    </script>
</body>
</html>

6.5 KiB Raw Blame History Unescape Escape