时间戳

首页 > 解决方案 > 传单地图的属性评估/分析

javascript - 传单地图的属性评估/分析

问题描述

目前，我正在努力在传单地图上组合我的标记和多边形的属性。在我的地图中，我有巴伐利亚政府区，以区名称作为属性。我有 70 个标记来显示这些地区一些山脉的位置，这些点来自我制作的 csv 表。
我现在想做的是，每个点都应该被分配到它所在的相应区域的属性。这样标记弹出窗口也显示了该地区的名称。我不知道最简单的方法是什么？所以我考虑过在多边形函数中使用草皮点，但我不知道如何开始。
带有标记和多边形的地图。

我想做的第二件事是突出最高的山峰。第二列中数字最多的山。山高。

我的桌子是这样的：（山名；山高；面积；风景；纬度；经度）

Bergname;Berghoehe;Landkreis;Gebirge_Landschaft;纬度;经度
Hesselberg;689;Ansbach;Wörnitztal_Fränkische Alb;49.06861780;10.52610990
Dürrenberg;656; 魏森堡-贡岑豪森；哈嫩卡姆；49.01647480；10.76511290
...
我希望有人可以在这里帮助我，将不胜感激:)

<!DOCTYPE html>
<html lang="de">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
      <title>Leaflet Map"</title>
      <!-- leaflet.css, leaflet.js, turf.js von externer Quelle einbinden -->
      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />   
      <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script> <!-- Load Leaflet code library-->
      <script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet-omnivore/0.3.4/leaflet-omnivore.min.js'></script>  <!-- Load Omnivore to convert CSV to GeoJSON format -->
      <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script><!-- Load jQuery and PapaParse to read data from a CSV file -->
      <script src="https://cdn.jsdelivr.net/npm/papaparse@5.3.0/papaparse.min.js"></script>
      <script src='https://unpkg.com/@turf/turf/turf.min.js'></script>
      <script src='https://unpkg.com/shpjs@latest/dist/shp.js'></script>
      
     
   </head>
   <body>
      <div id='Karte' style='height: 800px; width: 100%;'></div> 
     
     
    <script type='text/javascript'>
         
        var Karte = L.map('Karte').setView([48.896465, 10.996526], 7);  
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         'attribution':  'Kartendaten &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> Mitwirkende',
         'useCache': true
         }).addTo(Karte); 
         
         
    //Leaflet Erweiterung für shp file https://github.com/calvinmetcalf/shapefile-js
    
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-40454900-1', 'calvinmetcalf.github.io');
        ga('send', 'pageview');
    
    
      var geo = L.geoJson({features:[]},{onEachFeature:function popUp(f,l){
            var out = [];
            if (f.properties){
                for(var key in f.properties){
                out.push(key+": "+f.properties[key]);
        }
        l.bindPopup(out.join("<br />"));
        }
        }}).addTo(Karte);
        var base = './Regierungsbezirke_by.zip';
        shp(base).then(function(data){
        geo.addData(data);
        })


        //Papaparse Erweiterung für CSV Tabelle
        $.get('./turf.csv', function(csvString) {

        // Use PapaParse to convert string to array of objects
        var data = Papa.parse(csvString, {header: true, dynamicTyping: true}).data;
        
        // For each row in data, create a marker and add it to the map
        // For each row, columns `Latitude`, `Longitude`, and `Title` are required  
        for (var i in data) {
        var row = data[i]

        var marker = L.marker([row.Latitude, row.Longitude], {
        opacity: 1
        }).bindPopup(row.Bergname + '; ' + row.Berghoehe + '; ' + row.Landkreis + '; ' + row.Gebirge_Landschaft + '; ' + row.Latitude + '; ' + row.Longitude)
      
        marker.addTo(Karte)
        }
    });
   
        
        var searchWithin = turf.polygon([[

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

标签： javascriptleaflet

解决方案

您可以使用turf.booleanContains(district.toGeoJSON(16), marker.toGeoJSON(16))检查标记是否在该区域中，然后添加弹出窗口。

将您的标记添加到 FeatureGroup 以便稍后在循环中获取它

var fg = L.featureGroup().addTo(Karte);

//Papaparse Erweiterung für CSV Tabelle
$.get('./turf.csv', function(csvString) {

            // Use PapaParse to convert string to array of objects
            var data = Papa.parse(csvString, {
                header: true,
                dynamicTyping: true
            }).data;

            // For each row in data, create a marker and add it to the map
            // For each row, columns `Latitude`, `Longitude`, and `Title` are required  
            for (var i in data) {
                var row = data[i]
                var marker = L.marker([row.Latitude, row.Longitude], {
                    opacity: 1
                });
                marker._mountainData = row;
                marker.addTo(fg)
            });

然后遍历所有区：

fg.eachLayer((layer) => {
        var districts = geo.getLayers();
        districts.forEach((district) => {
          if (turf.booleanContains(district.toGeoJSON(16), layer.toGeoJSON(16))) {
            var row = layer._mountainData;
            layer.bindPopup(district.feature.properties.YOUR_DISTRICT_NAME_PROPERTY + ";" + row.Bergname + '; ' + row.Berghoehe + '; ' + row.Landkreis + '; ' + row.Gebirge_Landschaft + '; ' + row.Latitude + '; ' + row.Longitude)
            return;
          }
        })

演示：https ://jsfiddle.net/falkedesign/kgwcrLpq/

推荐阅读