使用 javascript 导入 openlayers

Question

我试图在我的浏览器中运行 this 示例代码，所以我将代码保存在 index.html 在我的计算机上，在我的浏览器中打开它时我得到了屏幕上没有任何内容，在 console:

处出现以下错误

Uncaught SyntaxError: Unexpected identifier . line 13

第 13 行是：

import Map from 'ol/Map.js';

我该如何解决？

Answer 1

感谢@Mike，我将其重写如下，并且成功了：

<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.0/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.0/build/ol.js"></script>
    <title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">

      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });

      var imageStyle = new ol.style.Style({
        image: new ol.style.Circle({
          radius: 5,
          fill: new ol.style.Fill({color: 'yellow'}),
          stroke: new ol.style.Stroke({color: 'red', width: 1})
        })
      });

      var headInnerImageStyle = new ol.style.Style({
        image: new ol.style.Circle({
          radius: 2,
          fill: new ol.style.Fill({color: 'blue'})
        })
      });

      var headOuterImageStyle = new ol.style.Style({
        image: new ol.style.Circle({
          radius: 5,
          fill: new ol.style.Fill({color: 'black'})
        })
      });


      var n = 200;
      var omegaTheta = 30000; // Rotation period in ms
      var R = 7e6;
      var r = 2e6;
      var p = 2e6;
      map.on('postcompose', function(event) {
        var vectorContext = event.vectorContext;
        var frameState = event.frameState;
        var theta = 2 * Math.PI * frameState.time / omegaTheta;
        var coordinates = [];
        var i;
        for (i = 0; i < n; ++i) {
          var t = theta + 2 * Math.PI * i / n;
          var x = (R + r) * Math.cos(t) + p * Math.cos((R + r) * t / r);
          var y = (R + r) * Math.sin(t) + p * Math.sin((R + r) * t / r);
          coordinates.push([x, y]);
        }
        vectorContext.setStyle(imageStyle);
        vectorContext.drawGeometry(new ol.geom.MultiPoint(coordinates));

        var headPoint = new ol.geom.Point(coordinates[coordinates.length - 1]);

        vectorContext.setStyle(headOuterImageStyle);
        vectorContext.drawGeometry(headPoint);

        vectorContext.setStyle(headInnerImageStyle);
        vectorContext.drawGeometry(headPoint);

        map.render();
      });
      map.render();

    </script>
</body>
</html>

Answer 2

使用这个：

<html lang="en">
<head>
    <title>Map</title>

    <!--  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/ol-geocoder@latest/dist/ol-geocoder.min.css" rel="stylesheet">
    <!--  -->
<!-- jQuery library -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
   <!-- Latest compiled JavaScript -->
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol-geocoder"></script>



    <script type="text/javascript">
          var layersGroup= new ol.layer.Tile({
                                title : 'OSM',
                                type : 'base',
                                visible : false,
                                source : new ol.source.OSM()
                            });

           mapView = new ol.View({
                     center: [8415526,1301999],
                     zoom: 17
                     });
         Printmap = new ol.Map({
                    layers: layersGroup ,
                    target: 'printmap',
                    view: mapView
                    });
    </script>
</head>
  <body>
        <div class="page-container">
                <div id="printmap" class="printmap"></div>              
            </div> 
  </body>

</html>

使用 javascript 导入 o​​penlayers

using javascript import with openlayers

javascript

openlayers

使用 javascript 导入 openlayers