WebGIS二次开发-8-地图视图操作

团子WebGIS

于 2023-02-20 15:24:27 发布

阅读量135

点赞数

分类专栏： WebGIS javascript GIS 文章标签： javascript 前端 html ecmascript es6 Powered by 金山文档

本文链接：https://blog.csdn.net/bguihiub/article/details/129125165

版权

WebGIS 同时被 3 个专栏收录

22 篇文章 4 订阅

订阅专栏

GIS

21 篇文章 0 订阅

订阅专栏

javascript

12 篇文章 1 订阅

订阅专栏

const view = map.getView()	获取视图
view.getZoom()
view.setZoom()
view.getCenter();
view.setCenter();

通过接口map.getView获取视图对象，可以进一步对视图进行操作

放大/缩小：getZoom/setZoom

根据中心点显示：getCenter/setCenter

复位

<body>
    <button onclick="zoomReduce()">缩小</button>
    <button onclick="zoomAdd()">放大</button>
    <button onclick="moveTo()">平移到武汉</button>
    <button onclick="resetMap()">复位</button>
    <div id="map_container"></div>
    <script>
        var map = new ol.Map({
            target:"map_container",
            layers:[gaodeMapLayer],
            view:new ol.View({
                projection:'EPSG:4326',
                center:[0,0],
                zoom:4
            })
        })
        var view = map.getView();
        var zoom = view.getZoom();
        var center = view.getCenter();
        function zoomReduce(){
            var zoom = view.getZoom();
            view.setZoom(zoom-1)
        }
        function  zoomAdd(){
            var zoom = view.getZoom();
            view.setZoom(zoom+1)
        }
        function moveTo(){
            var wh =[114.30,30.50]
            view.setCenter(wh);
            view.setZoom(5);
        }
        function resetMap(){
            view.setCenter(center);
            view.setZoom(zoom);
        }
    </script>
</body>