WebGIS二次开发-9-地图事件

最新推荐文章于 2024-07-26 11:41:15 发布

团子WebGIS

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量92

点赞数

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

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

版权

WebGIS 同时被 3 个专栏收录

22 篇文章 4 订阅

订阅专栏

GIS

21 篇文章 0 订阅

订阅专栏

javascript

12 篇文章 1 订阅

订阅专栏

通过事件获取坐标值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../lib/include-openlayers-local.js"></script>
    <script src="../../js/Tian.js"></script>
</head>
<body>
    <div id="map_container"></div>
    <script>
        const map = new ol.Map({
            target:"map_container",
            layers:[TianDiMap_vec,TianDiMap_cva],
            view:new ol.View({
                center:[114,30],
                projection:'EPSG:4326',
                zoom:4
            })
        })
        map.on("singleclick",function(e){
            console.log(e.coordinate)
        })
    </script>
</body>
</html>

地图事件的激活和移除

<body>
    <button onclick="active()">激活地图事件</button>
    <button onclick="remove()">移除地图事件</button>
    <div id="map_container">
    </div>
<script>
    var map = new ol.Map({
        target:"map_container",
        layers:[gaode],
        view:new ol.View({
            projection:'EPSG:4326',
            center:[114.30,30.50],
            zoom:4
        })
    })
    function active(){
        map.on("click",handleMap)
    }
    function remove(){
        map.un("click",handleMap)
    }
    function handleMap(e){
        console.log(e.coordinate)
    }
</script>