OpenLayers 3 的地图基本操作

OpenLayers 3 的地图基本操作
<body>
    <div id="map">
        <div id="menu">
            <button id="zoom_in">放大</button>
            <button id="zoom_out">缩小</button>
            <button id="panto">移动到“武汉”</button>
            <button id="restore">复位</button>
        </div>
    </div>
    <script>
        var map=new ol.Map({
            target:'map',
            layer:[],
            view:new ol.View({
                center:[12950000,4860000],
                zoom:8,
                minZoom:6,
                maxZoom:12,
                rotation:Math.PI/6//设置旋转角度
            })
        })
        var tileLayer=new ol.layer.Tile({
            source:new ol.source.OSM()
        });
        map.addLayer(tileLayer);
        var view=map.getView();
        var zoom=view.getZoom();
        var center=view.getCenter();
        var rotation=view.getRotation();
        document.getElementById("zoom_out").onclick=function(){
            var view=map.getView();
            var zoom=view.getZoom();
            view.setZoom(zoom-1);
        }
        document.getElementById("zoom_in").onclick=function(){
            var view=map.getView();
            var zoom=view.getZoom();
            view.setZoom(zoom+1);
        }
　　　　　//移动地图中心位置，可设置地图编码:EPSG:4326
　　　　　//例如：ol.proj.fromLonLat([114.31667,30.51667],"EPSG:4326");
        document.getElementById("panto").onclick=function(){
            var view=map.getView();
            var wh=ol.proj.fromLonLat([114.31667,30.51667]);
            view.setCenter(wh);
        }
        document.getElementById("restore").onclick=function(){
            view.setZoom(zoom);
            view.setCenter(center);
            view.setRotation(rotation);
        }
    </script>
</body>
OpenLayers 3 的地图基本操作

猜你喜欢
