openlayer 拖动,旋转和缩放

拖动,旋转和缩放

<html>

  <head>

    <title>Drag, Rotate, and Zoomtitle>

    <link rel="stylesheet" href="https://openlayers.org/en/v5.1.3/css/ol.css" type="text/css">

    

    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL">script>

  head>

  <body>

    <div id="map" class="map">div>

    <script>

      import Map from 'ol/Map.js';

      import View from 'ol/View.js';

      import {defaults as defaultInteractions, DragRotateAndZoom} from 'ol/interaction.js';

      import TileLayer from 'ol/layer/Tile.js';

      import OSM from 'ol/source/OSM.js';

 

 

      var map = new Map({

        interactions: defaultInteractions().extend([

          new DragRotateAndZoom()

        ]),

        layers: [

          new TileLayer({

            source: new OSM()

          })

        ],

        target: 'map',

        view: new View({

          center: [0, 0],

          zoom: 2

        })

      });

    script>

  body>html>

 

你可能感兴趣的:(openlayer)