0

我正在开发一个基于 postgres 的 django 项目来创建平面图。我有 python3 的经验，但 js 对我来说是新的。我需要它在接下来的 6 天内以非常基本的功能运行。所以是的：我的汗水变酸了。

目标非常简单：带有更新覆盖的平面图（例如蓝色矩形标记免费存储等）。

我需要的：

  • 平面图作为底图
  • 矩形（更新）覆盖
  • 标记

Django-leaflet 工作正常，但 rastercoord 正在杀死我。我只是尝试将演示代码实现到我的模板 html 中，它似乎只是默默地无法执行。Django-leaflet 本身就像一个魅力，显示标记等等。

我修改了原始示例代码以使用来自维基百科的平铺银河图像，效果很好。

/*
 * @copyright 2015 commenthol
 * @license MIT
 */

/* global L */

;(function (window) {
    function init (mapid) {
    var minZoom = 0
    var maxZoom = 5
    var img = [
      6000, // original width of image `karta.jpg`
      3000  // original height of image
    ]

    // create the map
    var map = L.map(mapid, {
      minZoom: minZoom,
      maxZoom: maxZoom
    })

    // assign map and image dimensions
    var rc = new L.RasterCoords(map, img)

    // set the view on a marker ...
    map.setView(rc.unproject([1, 1447]), 4)


    // the tile layer containing the image generated with gdal2tiles --leaflet ...
    L.tileLayer('./tiles/{z}/{x}/{y}.png', {
      noWrap: true,
      attribution: 'VOID'
    }).addTo(map)
  }
  init('map')
}(window))

但是在 django 中实现没有任何反应。地图以默认设置显示。模板 HTML：

<!doctype html>
<html lang="de">
{% load leaflet_tags %}
  <head>
    <meta name=Locator charset="utf-8" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">
    <title>EUT Locator</title>
    {% leaflet_js plugins="ALL" %}
    {% leaflet_css plugins="ALL" %}
  </head>
  <style>
  * {
    font-family: avenir;
    margin: 1%;
  }
  .leaflet-container {  /* all maps */
    width:  600px;
    height: 600px;
}

  </style>
  <body>
    <h1>This is what you get</h1>
    <p>Not much, really</p>
    <script type="text/javascript">
        function map_init_raster (mapid, options) {
            var minZoom = 0
            var maxZoom = 5
            var img = [
              6000, // original width of image `karta.jpg`
              3000  // original height of image
            ]

            // create the map
            var map = L.map(mapid, {
              minZoom: minZoom,
              maxZoom: maxZoom
            })

            // assign map and image dimensions
            var rc = new L.rastercoords(map, img)

            // set the view on a marker ...
            map.setView(rc.unproject([1, 1447]), 4)


            // the tile layer containing the image generated with gdal2tiles --leaflet ...
            L.tileLayer('./milkyway/{z}/{x}/{y}.png', {
              noWrap: true,
              attribution: 'VOID'
            }).addTo(map)
          }
          init('map')
          }
    </script>

    {% leaflet_map "yourmap" callback="window.map_init_raster" %}
  </body>
</html>

settings.py 中有趣的部分：

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/

STATIC_URL = '/static/'

LEAFLET_CONFIG = {
'SRID' : 3857,
'DEFAULT_CENTER': (0, 0),
'DEFAULT_ZOOM': 1,
'MIN_ZOOM': 0,
'MAX_ZOOM': 5,
'RESET_VIEW': False,
'PLUGINS': {
    'rastercoords': {
        'css': '',
        'js': 'leaflet-rastercoords/rastercoords.js',
        'auto-include': True,
        },
    }
}

含泪欢呼霍贝尔

4

2 回答 2

0

似乎这都是关于 settings.py 中错误的 STATIC 配置

我像这样更改了 settings.py（感谢：https ://data-flair.training/blogs/django-static-files-handling/ ）

STATIC_ROOT = os.path.join(BASE_DIR, "static")

STATIC_URL = "/static/"

STATICFILES_DIRS = os.path.join(BASE_DIR, 'static_dump'),

在 HTML 模板中，它与此代码一起使用

        function map_init_raster (map) {
        var img = [6000, 3000];

        // assign map and image dimensions
        var rc = new L.RasterCoords(map, img);


        map.setView(rc.unproject([1000, 1000]), 3)

        // the tile layer containing the image generated with gdal2tiles --leaflet ...
        L.tileLayer('/static/mw/{z}/{x}/{y}.png', {
          noWrap: true,
          attribution: 'VOID'
        }).addTo(map);
        }

以前它失败是因为关于区分大小写的错字（不起作用：'L.rastercoords' 工作：L.RasterCoords）

似乎我不知道 RasterCoords 实际上在做什么。有用。

于 2020-05-15T16:30:08.933 回答
0

您的回调将地图作为参数，而不是地图的 ID。地图已经创建。试试这个：

function map_init_raster (map, options) {
    var img = [
      6000, // original width of image `karta.jpg`
      3000  // original height of image
    ];

    // assign map and image dimensions
    var rc = new L.rastercoords(map, img);

    // set the view on a marker ...
    map.setView(rc.unproject([1, 1447]), 4);


    // the tile layer containing the image generated with gdal2tiles --leaflet ...
    L.tileLayer('./milkyway/{z}/{x}/{y}.png', {
      noWrap: true,
      attribution: 'VOID'
    }).addTo(map);
}

我不知道rastercoords，所以我无法帮助你。

于 2020-05-15T07:57:32.050 回答