0

我正在使用 Django 模板和其他传单插件。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
<!-- MarkerCluster CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />
<!-- AwesomeMarkers CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
    
<link href="{% static 'css/main.css' %}" rel="stylesheet">
   
<!-- Sidebar - Treview CSS -->
<link src="{% static 'bootstrap-treeview/css/bootstrap-treeview.css' %}">
<link href="{% static 'leaflet-sidebar-v2/css/leaflet-sidebar.css' %}" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/spinner.css' %}">
<!--Leaflet-measure CSS-->
<link rel="stylesheet" href="{% static 'leaflet-measure/css/measure.css' %}">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- Leaflet -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<!-- MarkerCluster JS -->
<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
<!-- Sidebar - Treview JS -->
<script src="{% static '.../leaflet-sidebar.js' %}"></script>
<script src="{% static '.../bootstrap-treeview.js' %}"></script>
<script src="{% static '.../jquery.zoom.js' %}"></script>
<!-- MomentJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>
<!-- Measure -->
<script src="https://cdn.jsdelivr.net/npm/leaflet-measure@3.1.0/dist/leaflet-measure.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

const openStreetMap = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', 
    {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
        maxZoom: 18,
        boxZoom: true,
        trackResize: true
    }
);

var map = L.map('mapDiv', { center: centerCity, zoom: 15, layers: [openStreetMap] });

var baseMaps = {
    "Map": openStreetMap
};

L.control.measure({position: 'bottomright', primaryLengthUnit: 'meters', primaryAreaUnit: 'sqmeters', captureZIndex: 10000}).addTo(map);

该措施工作正常，我可以完美地看到所有措施，但折线没有出现。

示例

由于这个问题，我做了其他测试并观察到我的应用程序也没有显示折线、圆形、矩形。

  • 测试
var oneLayer = new L.geoJson();
map.addLayer(oneLayer);

var redCircleMarker = L.circle([34, -112], 200000, {
    color: 'red',
});
oneLayer.addLayer(redCircleMarker);

我可以测试什么来找到解决方案？Tks

插件使用 Leaflet-Measure

4

0 回答 0