OpenLayer 3 ：地图的交互

最新推荐文章于 2023-07-19 13:44:10 发布

大树下躲雨

最新推荐文章于 2023-07-19 13:44:10 发布

阅读量996

点赞数

分类专栏： OpenLayers 3 文章标签： OpenLayer 3 OpenLayer 地图交互

本文链接：https://blog.csdn.net/weixin_43521890/article/details/121818930

版权

OpenLayers 3 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

OpenLayer 3 ：地图的交互

一、demo介绍

通过下方按钮，可对地图进行操作（上下左右移动,移动到指定坐标，地图层级放大缩小）

在这里插入图片描述

二、地图的交互

1、地图项目结构

在这里插入图片描述

2、map.html

<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <title>OpenLayers 3:地图交互</title>
    <link href="ol.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="ol.js" charset="utf-8"></script>
</head>

<body>


<div id="map" style="width: 800px;height: 800px;margin: auto;top: 20px"></div>

<div style="width: 800px;height: 800px;margin: auto;margin-top: 50px">
    <input type="button" onClick="moveToLeft();" value="左移"/>
    <input type="button" onClick="moveToRight();" value="右移"/>
    <input type="button" onClick="moveToUp();" value="上移"/>
    <input type="button" onClick="moveToDown();" value="下移"/>
    <input type="button" onClick="moveToChengDu();" value="移到成都"/>
    <input type="button" onClick="zoomIn();" value="放大"/>
    <input type="button" onClick="zoomOut();" value="缩小"/>
</div>

<script>

    /**
     * 创建地图
     */
    var map = new ol.Map({

        // 设置地图图层
        layers: [
            // 创建一个使用Open Street Map地图源的图层
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],

        // 设置显示地图的视图
        view: new ol.View({
            // 设置成都为地图中心，此处进行坐标转换， 把 EPSG:4326 的坐标，转换为 EPSG:3857 坐标，因为>OpenLayers 3默认使用的是 EPSG:3857 坐标
            center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),
            zoom: 10            //设置地图显示层级为10
        }),

        // 让id为map的div作为地图的容器
        target: 'map'

    });


    //向上移动地图
    function moveToUp() {

        //获取地图视图
        var view = map.getView();

        //获取视图中心带你
        var center = view.getCenter();


        /**
         *  center是一个数组，有两个值。
         *  center[0]代表x轴，向左移就需要加，向右移就需要减
         *  center[1]代表Y轴，向上移就需要减，向下移就需要加
         */
        center[1] -= 50000;


        //地图视图赋值新的中心点
        view.setCenter(center);

        //渲染
        map.render();
    }


    //向下移动地图
    function moveToDown() {

        //获取地图视图
        var view = map.getView();

        //获取视图中心带你
        var center = view.getCenter();

        /**
         *  center是一个数组，有两个值。
         *  center[0]代表x轴，向左移就需要加，向右移就需要减
         *  center[1]代表Y轴，向上移就需要减，向下移就需要加
         */
        center[1] += 50000;


        //地图视图赋值新的中心点
        view.setCenter(center);

        //渲染
        map.render();
    }


    /**
     * 向左移动地图
     */
    function moveToLeft() {
        //获取地图视图
        var view = map.getView();

        //获取视图中心带你
        var center = view.getCenter();

        /**
         *  center是一个数组，有两个值。
         *  center[0]代表x轴，向左移就需要加，向右移就需要减
         *  center[1]代表Y轴，向上移就需要减，向下移就需要加
         */
        center[0] += 50000;

        //地图视图赋值新的中心点
        view.setCenter(center);

        //渲染
        map.render();
    }

    /**
     * 向右移动地图
     */
    function moveToRight() {

        //获取地图视图
        var view = map.getView();

        //获取视图中心带你
        var center = view.getCenter();


        /**
         *  center是一个数组，有两个值。
         *  center[0]代表x轴，向左移就需要加，向右移就需要减
         *  center[1]代表Y轴，向上移就需要减，向下移就需要加
         */
        center[0] -= 50000;


        //地图视图赋值新的中心点
        view.setCenter(center);

        //渲染
        map.render();
    }


    //移动到成都
    function moveToChengDu() {

        //获取地图视图
        var view = map.getView();


        //成都中心点
        var center = ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857')

        //地图视图赋值新的中心点
        view.setCenter(center);

        //渲染
        map.render();

    }


    //放大地图
    function zoomIn() {
        //获取地图视图
        var view = map.getView();

        //获取视图缩放值
        var zoom = view.getZoom();

        //放大：缩放值就加
        var mapZoom = zoom + 1;

        //地图视图赋值缩放层级
        view.setZoom(mapZoom);

        //渲染
        map.render();
    }


    //缩小地图
    function zoomOut() {
        //获取地图视图
        var view = map.getView();

        //获取视图缩放值
        var zoom = view.getZoom();

        //缩小:缩放值就减
        var mapZoom = zoom - 1;

        //地图视图赋值缩放层级
        view.setZoom(mapZoom);

        //渲染
        map.render();
    }

</script>
</body>

</html>