Не удается отобразить карту на странице, Openlayers ASP. NET core - PullRequest
Новая
       87

Не удается отобразить карту на странице, Openlayers ASP. NET core

0 голосов
/ 04 августа 2020

Я попытался отобразить его, но он просто показывает форматирование html, а не карту. В части сценария, когда вводится простой код отображения карты, он отображает карту, но при добавлении любой другой функции он перестает работать. Мне не удалось воссоздать то, что доступно на этой странице: https://openlayers.org/en/latest/examples/draw-and-modify-features.html

Пожалуйста, помогите

Пример кода карты, который отображается правильно: 

var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 4
        })
      });

Не работает код 

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css">
    <title>Draw and Modify Features</title>
    <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
    <script src="https://unpkg.com/elm-pep"></script>
    <style>
        .map {
            width: 100%;
            height: 400px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
</head>
<body>
    <div id="map" class="map"></div>
    <form class="form-inline">
        <label>Geometry type &nbsp;</label>
        <select id="type">
            <option value="Point">Point</option>
            <option value="LineString">LineString</option>
            <option value="Polygon">Polygon</option>
            <option value="Circle">Circle</option>
        </select>
    </form>
    <script type="text/javascript">
        var raster = new TileLayer({
            source: new OSM(),
        });

        var source = new VectorSource();
        var vector = new VectorLayer({
            source: source,
            style: new Style({
                fill: new Fill({
                    color: 'rgba(255, 255, 255, 0.2)',
                }),
                stroke: new Stroke({
                    color: '#ffcc33',
                    width: 2,
                }),
                image: new CircleStyle({
                    radius: 7,
                    fill: new Fill({
                        color: '#ffcc33',
                    }),
                }),
            }),
        });

        var map = new Map({
            layers: [raster, vector],
            target: 'map',
            view: new View({
                center: [-11000000, 4600000],
                zoom: 4,
            }),
        });

        var modify = new Modify({ source: source });
        map.addInteraction(modify);

        var draw, snap; // global so we can remove them later
        var typeSelect = document.getElementById('type');

        function addInteractions() {
            draw = new Draw({
                source: source,
                type: typeSelect.value,
            });
            map.addInteraction(draw);
            snap = new Snap({ source: source });
            map.addInteraction(snap);
        }

        /**
         * Handle change event.
         */
        typeSelect.onchange = function () {
            map.removeInteraction(draw);
            map.removeInteraction(snap);
            addInteractions();
        };

        addInteractions();
    </script>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 05 августа 2020

В вашем случае вам нужно использовать синтаксис, как указал Майк.

Пример: вместо этого 

var raster = new TileLayer({
            source: new OSM(),
        });

вы должны использовать полный синтаксис сборки 

var raster = new ol.layer.Tile({
                source: new ol.source.OSM(),
            });

Или просто скопируйте предыдущее решение Майка выше

эту строку: 

var raster = new TileLayer({
            source: new OSM(),
        });

, и это должно помочь

0 голосов
/ 04 августа 2020

Быстрый способ заставить код синтаксиса модуля работать с полной сборкой для определения эквивалентных имен переменных в начале вашего кода 

var TileLayer    = ol.layer.Tile;
var OSM          = ol.source.OSM;
var VectorSource = ol.source.Vector;
var VectorLayer  = ol.layer.Vector;
var Style        = ol.style.Style;
var Fill         = ol.style.Fill;
var Stroke       = ol.style.Stroke;
var CircleStyle  = ol.style.Circle;
var Map          = ol.Map;
var View         = ol.View;
var Modify       = ol.interaction.Modify;
var Draw         = ol.interaction.Draw;
var Snap         = ol.interaction.Snap;
...