拖拽和旋转

原创已于 2023-01-19 18:53:41 修改 · 194 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

于 2019-12-25 17:58:16 首次发布

openlayers相关操作专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用OpenLayers库实现地图拖拽和旋转的方法。通过整合DragRotateAndZoom交互功能，用户可以直观地操作地图视角，提升地理信息系统应用的用户体验。文章详细展示了HTML、CSS和JavaScript代码配置过程。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>拖拽和旋转</title>
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css"
          type="text/css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <style>
        .map {
            width: 100%;
            height: 400px;
        }
    </style>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
    var map = new ol.Map({
       interactions:ol.interaction.defaults().extend([
           new ol.interaction.DragRotateAndZoom()
       ]) ,
        layers:[
            new ol.layer.Tile({
                source:new ol.source.OSM()
            })
        ],
        target:'map',
        view:new ol.View({
            center:[0,0],
            zoom: 2
        })
    });
</script>
</body>
</html>