Веб-разработка с использованием локальных серверов (MAMP) вместо Node.js - PullRequest
Новая
       54

Веб-разработка с использованием локальных серверов (MAMP) вместо Node.js

0 голосов
/ 16 января 2020

Я пробую несколько примеров из API веб-карт Open Layers. Однако все их примеры предполагают, что разработчик использует Node.js, в то время как я хотел бы разработать, просто загрузив API и собрав его из папки, обслуживаемой MAMP.

Вот пример использования Node.js (https://openlayers.org/en/latest/examples/epsg-4326.html):

Индекс. html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>EPSG:4326</title>
    <style>
      .map {
        width: 100%;
        height:400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script src="index.js"></script>
  </body>
</html>

индекс. js

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import {defaults as defaultControls, ScaleLine} from 'ol/control';
import TileLayer from 'ol/layer/Tile';
import TileWMS from 'ol/source/TileWMS';

var layers = [
    new TileLayer({
        source: new TileWMS({
            url: 'https://ahocevar.com/geoserver/wms',
            params: {
                'LAYERS': 'ne:NE1_HR_LC_SR_W_DR',
                'TILED': true
            }
        })
    })
];

var map = new Map({
    controls: defaultControls().extend([
        new ScaleLine({
            units: 'degrees'
        })
    ]),
    layers: layers,
    target: 'map',
    view: new View({
        projection: 'EPSG:4326',
        center: [0, 0],
        zoom: 2
    })
});

Я добавил: 

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>

... в заголовок для загрузки API и удалил импорт в индекс. js, как таковой:

index. html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EPSG:4326</title>
        <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
        <style>
            .map {
                width: 100%;
                height:400px;
            }
        </style>
    </head>
    <body>
        <div id="map" class="map"></div>
        <script src="index.js"></script>
    </body>
</html>

index. js

var layers = [
    new TileLayer({
        source: new TileWMS({
            url: 'https://ahocevar.com/geoserver/wms',
            params: {
                'LAYERS': 'ne:NE1_HR_LC_SR_W_DR',
                'TILED': true
            }
        })
    })
];

var map = new Map({
    controls: defaultControls().extend([
        new ScaleLine({
            units: 'degrees'
        })
    ]),
    layers: layers,
    target: 'map',
    view: new View({
        projection: 'EPSG:4326',
        center: [0, 0],
        zoom: 2
    })
});

Однако загрузка индекса. html из MAMP с «localhost: 8888 / index. html» вызывает ошибку: 

Line 2: cannot find variable TileLayer.

Как правильно преобразовать примеры из Node.js?

...