OpenLayers 3 的地图基本操作

最新推荐文章于 2025-03-19 11:22:26 发布

转载最新推荐文章于 2025-03-19 11:22:26 发布 · 166 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/s313139232/p/9290870.html

本文介绍如何使用 OpenLayers3 进行地图的基本操作，包括缩放、平移及复位等，并提供了具体的 JavaScript 实现代码示例。

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>

转载于:https://www.cnblogs.com/s313139232/p/9290870.html