openlayers显示比例尺 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="lib/OpenLayers/ol.css" type="text/css">

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="lib/OpenLayers/ol.js"></script>
    <script src="olStyle/Light.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        .map {
            width: 100%;
            height: 100%;
            background: #f6f6f4;
        }

        .ol-scale-line {
            /* 比例尺背景颜色 */
            background: rgba(0, 60, 136, .7);
        }

        .ol-scale-line-inner {
            /* 比例尺边框样式 */
            border: 1px solid #eee;
            border-top: none;
            /* 比例尺文字大小 */
            font-size: 10px;
            /* 比例尺文字颜色 */
            color: #eee;
            /* 比例尺宽高为动态计算，若需要固定宽度，将最大最小宽度设置为相同即可 */
            min-width: 100px;
            max-width: 100px;
        }
    </style>
</head>

<body>
    <div id="map" class="map" data-id="11"></div>
    <script type="text/javascript">  
        var map;

        $(function () {

            InitMap();

            AddScaleLint();
        })

        var layer;

        //地图初始化
        function InitMap() {
            //初始化地图
            layer = new ol.layer.Vector({
                source: new ol.source.Vector(),
                    overlaps: false,
                    wrapX: false
                }),
                style: function (feature, resolution) {
                    switch (feature.get('layer')) {
                        case 'poi':
                            poiStyle.getText().setText(feature.get('name'));
                            return poiStyle;
                        case 'boundary': return boundaryStyle;
                        case 'lawn': return lawnStyle;
                        case 'road':
                            roadStyle.getText().setText(feature.get('name'));
                            return (resolution < 2) ? roadStyle : null;
                        case 'building':
                            return buildingStyle(feature, resolution);
                        case 'other':
                            otherStyle.getText().setText(feature.get('name'));
                            return otherStyle;
                        default: return null;
                    }
                }
            });

            map = new ol.Map({
                layers: [layer],
                target: 'map',
                view: new ol.View({
                    center: ol.proj.fromLonLat([120.277, 36.330]),
                    minZoom: 1,
                    zoom: 16
                })
            });
        }

        /*增加比例尺**********************************************************************************/

        //添加比例尺
        function AddScaleLint() {
            var scaleLineControl = new ol.control.ScaleLine({
                Units: 'metric',//单位有5种：degrees imperial us nautical metric
            });

            map.addControl(scaleLineControl);
        }

    </script>
</body>

</html>

　　

posted @ 2018-08-09 14:56  我要找到我的全世界  阅读(3230)  评论(0)    收藏  举报