OpenLayers 3 的地圖基本操做

時間 2019-11-29

標籤 openlayers 地圖基本简体版

原文原文鏈接

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>

相關標籤/搜索