openlayer 拖动,旋转和缩放

拖动,旋转和缩放

<!DOCTYPE html><html>

  <head>

    <title>Drag, Rotate, and Zoom</title>

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

    <!– The line below is only needed for old environments like Internet Explorer and Android 4.x –>

    <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>

 

转载自:https://blog.csdn.net/qq_36178899/article/details/81195601

You may also like...