时间戳

首页 > 解决方案 > 在 Django 中使用 Openlayers

javascript - 在 Django 中使用 Openlayers

问题描述

几天来，我试图让 Openlayers 与我的 Django 网站一起工作。我完全是网络新手，所以我可能会错过一些我还无法理解的直截了当的东西。

据我了解，我需要加载 Openlayers，所以为此在我的 中index.html，我在<head>this 中添加了：

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

然后在<body>我添加了index.js我想使用 openlayers 的地方：

<script src="{% static 'index.js'%}"></script>

我已经复制粘贴了一个简单的例子，index.js它一直在正常工作。

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([2.333333, 48.866667]),
      zoom: 10

    })
});

所以我有一张以巴黎为中心的地图。现在我想加载一个GeoJson文件，因此我需要添加一个包含 GeoJon 的图层。为此，我在这里遵循了一个示例。

这是我尝试像这样导入的第一个问题：import GeoJSON from 'ol/format/GeoJSON'; 或者像这样import Style from ol.style.Style我得到了这个错误：Uncaught SyntaxError: Cannot use import statement outside a module 我找到的唯一解决方案是new ol.style.Style(...)当我需要使用它时。丑陋，但工作。

所以我删除了所有导入并使用每个类的完整路径来调用构造函数。直到其中一个不起作用。

var vectorLayer = new ol.layer.Vector.VectorLayer({
  source: new ol.source.Vector.VectorSource({
    url: 'data/geojson/countries.geojson',
    format: new ol.format.GeoJSON()
  }),
  style: function(feature) {
    style.getText().setText(feature.get('name'));
    return style;
  }
});

未捕获的 TypeError：ol.source.Vector.VectorSource 不是构造函数

https://openlayers.org/en/latest/apidoc/module-ol_source_Vector-VectorSource.html

所以我问自己为什么它不工作，以及如何使它不那么难看（使用进口）

标签： javascriptdjangoopenlayersgeojson

解决方案

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({

您可以查看 OpenLayers 4 示例https://openlayers.org/en/v4.6.5/examples/以获取完整的构建语法

推荐阅读