在浏览器中运行开放层示例

提供的示例无法在客户端（在浏览器上）运行。让我们看一个例子。

索引.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>OpenStreepMap layer using OpenLayers</title>
    <style>
      #map {
        width: 400px;
        height: 250px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="index.js"></script>
  </body>
</html>

索引.js

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 0
  })
});

要在浏览器上运行这个非常简单的示例，您必须进行手动更改。

修改的文件

这些是相同的文件，具有在客户端上运行所需的更改：

索引.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>OpenStreepMap layer using OpenLayers</title>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    <style>
      #map {
        width: 400px;
        height: 250px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="index.js"></script>
  </body>
</html>

索引.js

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