Leaflet 如何从.geojson文件生成热图？_Leaflet_Geojson_Heatmap

Leaflet 如何从.geojson文件生成热图？

leaflet

Leaflet 如何从.geojson文件生成热图？,leaflet,geojson,heatmap,Leaflet,Geojson,Heatmap,嗨，我想从带有插件的.geojson文件生成一个热图我该怎么办？我对json、传单和web开发非常陌生我拥有的geoJSON文件如下所示（带有更多ofc点）：下面是我的index.html现在的样子 <!DOCTYPE html> <html = style="height: 100%;"> <head> <title>Test Map</title> <meta name="

嗨，我想从带有插件的.geojson文件生成一个热图

我该怎么办？我对json、传单和web开发非常陌生

我拥有的geoJSON文件如下所示（带有更多ofc点）：

下面是我的index.html现在的样子

<!DOCTYPE html>
<html = style="height: 100%;">
  <head>
    <title>Test Map</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="scripts/leaflet.css">
    <script src="scripts/leaflet.js"></script>
    <script src="scripts/leaflet.ajax.min.js"></script>
    <script src="scripts/leaflet-heat.js"></script>
  </head>
  
  <body style="height: 100%;margin: 0;">
    <div id="map" style="width: 100%; height: 100%; background: #000000;"></div>
    
    <!-- Workaround for 1px lines appearing in some browsers due to fractional transforms
    and resulting anti-aliasing.-->
    <style>
    .leaflet-tile-container img {
    width: 256.5px !important;
    height: 256.5px !important;
    }
    </style>
    <script type="text/javascript">

        // Creating the Map
        var map = L.map('map').setView([58.602611, 50.350342], 4);

        L.tileLayer('maps/mymap/{z}/{x}/{y}.png', {
        continuousWorld: false,
        noWrap: true,
        minZoom: 2,
        maxZoom: 6,
        zoomControl: false,
        minNativeZoom: 2,
        maxNativeZoom: 6,
        updateInterval: 200,
        }).addTo(map);

        // Remove old zoomControl and add new one in order to move it to bottomright
        map.zoomControl.remove();
        L.control.zoom({
        position: 'bottomright'
        }).addTo(map);

        // Binds tooltip on all markers and also a popup on click if the markers has a description
        function oef(feature, layer) {
            if (feature.properties && feature.properties.name) {
                layer.bindTooltip(feature.properties.name);
            }
            if (feature.properties && feature.properties.name && feature.properties.description) {
            layer.bindPopup("<center><b> " + feature.properties.name + "</center></b><br>" + feature.properties.description);
            }
        }

        var geojsonMarkers = new L.GeoJSON.AJAX(["https://raw.githubusercontent.com/***/test.geojson"],{onEachFeature:oef});

        var mapOverlays={
        "Test"                      : geojsonMarkers,
        //"Test - Heat Map"         : geojsonMarkersHeat,
        }

        var layerControl = L.control.layers(null, mapOverlays, {position:'topleft'}).addTo(map);

    </script>
  </body>
</html>


测试图
.单张瓷砖容器img{
宽度：256.5px！重要；
高度：256.5px！重要；
}
//创建地图
var map=L.map（'map'）.setView（[58.602611,50.350342]，4）；
L.tileLayer（'maps/mymap/{z}/{x}/{y}.png'{
连续世界：错误，
诺拉普：没错，
minZoom:2，
最大缩放：6，
动物控制：错误，
明尼苏达州：2，
maxNativeZoom:6，
更新间隔：200，
}).addTo（地图）；
//删除旧的zoomControl并添加新的zoomControl，以便将其移动到右下角
map.zoomControl.remove（）；
L.control.zoom({
位置：'右下'
}).addTo（地图）；
//绑定所有标记上的工具提示，如果标记有说明，还可以单击弹出窗口
功能oef（特征、层）{
if（feature.properties&&feature.properties.name）{
layer.bindTooltip（feature.properties.name）；
}
if（feature.properties&&feature.properties.name&&feature.properties.description）{
layer.bindPopup（“+feature.properties.name+”
“+feature.properties.description”）；
}
}
var geojsonMarkers=new L.GeoJSON.AJAX（[“https://raw.githubusercontent.com/***/test.geojson“]，{onEachFeature:oef}）；
var映射覆盖={
“测试”：geojsonMarkers，
//“测试热图”：geojsonMarkersHeat，
}
var layerControl=L.control.layers（null，mapOverlays，{position:'topleft'}）.addTo（map）；

正如您从上面看到的，我希望热图可以通过mapOverlays进行切换，但我真的不知道如何进行。

尝试一下。我现在尝试了，但我得到了“未捕获类型错误：无法读取未定义属性‘特性’”的“现在已成功使其工作！”！也从他的岗位上得到了一些帮助

<!DOCTYPE html>
<html = style="height: 100%;">
  <head>
    <title>Test Map</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="scripts/leaflet.css">
    <script src="scripts/leaflet.js"></script>
    <script src="scripts/leaflet.ajax.min.js"></script>
    <script src="scripts/leaflet-heat.js"></script>
  </head>
  
  <body style="height: 100%;margin: 0;">
    <div id="map" style="width: 100%; height: 100%; background: #000000;"></div>
    
    <!-- Workaround for 1px lines appearing in some browsers due to fractional transforms
    and resulting anti-aliasing.-->
    <style>
    .leaflet-tile-container img {
    width: 256.5px !important;
    height: 256.5px !important;
    }
    </style>
    <script type="text/javascript">

        // Creating the Map
        var map = L.map('map').setView([58.602611, 50.350342], 4);

        L.tileLayer('maps/mymap/{z}/{x}/{y}.png', {
        continuousWorld: false,
        noWrap: true,
        minZoom: 2,
        maxZoom: 6,
        zoomControl: false,
        minNativeZoom: 2,
        maxNativeZoom: 6,
        updateInterval: 200,
        }).addTo(map);

        // Remove old zoomControl and add new one in order to move it to bottomright
        map.zoomControl.remove();
        L.control.zoom({
        position: 'bottomright'
        }).addTo(map);

        // Binds tooltip on all markers and also a popup on click if the markers has a description
        function oef(feature, layer) {
            if (feature.properties && feature.properties.name) {
                layer.bindTooltip(feature.properties.name);
            }
            if (feature.properties && feature.properties.name && feature.properties.description) {
            layer.bindPopup("<center><b> " + feature.properties.name + "</center></b><br>" + feature.properties.description);
            }
        }

        var geojsonMarkers = new L.GeoJSON.AJAX(["https://raw.githubusercontent.com/***/test.geojson"],{onEachFeature:oef});

        var mapOverlays={
        "Test"                      : geojsonMarkers,
        //"Test - Heat Map"         : geojsonMarkersHeat,
        }

        var layerControl = L.control.layers(null, mapOverlays, {position:'topleft'}).addTo(map);

    </script>
  </body>
</html>