Динамическая подсветка данных геойсона между двумя картами в Leaflet - PullRequest
Новая
       3

Динамическая подсветка данных геойсона между двумя картами в Leaflet

0 голосов
/ 19 июня 2019

Я пытаюсь связать два набора данных геойсона. Два набора данных объединены в разные "div" и, следовательно, разные карты. Как видно из приведенного ниже кода, динамическое выделение работает на обеих картах при наведении на IDS. Однако я хочу выделить объект геоджон на первой карте при наведении соответствующего объекта геоджон на второй. (Объекты связаны одним и тем же идентификатором). 

var dat1 =({
	"type" : "FeatureCollection",
	"name" : "NewFeatureType",
	"features" : [
		{
			"type" : "Feature",
			"geometry" : {
				"type" : "Polygon",
				"coordinates" : [
					[
						[ 7.2518485112, 47.1390738345 ],
						[ 7.2540323762, 47.1390773819 ],
						[ 7.2540289251, 47.1400723508 ],
						[ 7.2518450195, 47.1400688032 ],
						[ 7.2518485112, 47.1390738345 ]
					]
				]
			},
			"properties" : {
				"start_fid" : "504748"
			}
		},
		{
			"type" : "Feature",
			"geometry" : {
				"type" : "Polygon",
				"coordinates" : [
					[
						[ 7.2565390484, 47.130837227 ],
						[ 7.2633719322, 47.1308479108 ],
						[ 7.2633626773, 47.1336579369 ],
						[ 7.2565294346, 47.1336472526 ],
						[ 7.2565390484, 47.130837227 ]
					]
				]
			},
			"properties" : {
				"start_fid" : "862126"
			}
		}
	]
});

var dat2 =({
	"type" : "FeatureCollection",
	"name" : "NewFeatureType",
	"features" : [
		{
			"type" : "Feature",
			"geometry" : {
				"type" : "Point",
				"coordinates" : [ -19.9169596449, 32.1396903724 ]
			},
			"properties" : {
				"start_fid" : "504748"
			}
		},
		{
			"type" : "Feature",
			"geometry" : {
				"type" : "Point",
				"coordinates" : [ -19.924214327, 32.1530002773 ]
			},
			"properties" : {
				"start_fid" : "862126"
			}
		}
	]
});

var mymap = L.map('mapid').setView([47.132,7.260], 15);
L.tileLayer('https://api.mapbox.com/styles/v1/mtheisen/citei76iz005f2jpac8g7ilcl/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibXRoZWlzZW4iLCJhIjoiY2l0ZWk0NTBoMDVmMDJ0bXlyNmxzZ3RnMyJ9.fErHtcHVcTsHCLMPN1ZcQg', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18,
    id: 'mtheisen',
    accessToken: 'pk.eyJ1IjoibXRoZWlzZW4iLCJhIjoiY2l0ZWk0NTBoMDVmMDJ0bXlyNmxzZ3RnMyJ9.fErHtcHVcTsHCLMPN1ZcQg'
}).addTo(mymap);

geojson1=L.geoJson(dat1, {style: style,
 onEachFeature: onEachFeature
 }).addTo(mymap);

var mymapid2 = L.map('mapid2',{ zoomControl:false }).setView([32.1378527851,-19.9229088608], 14);

geojson2=L.geoJson(dat2, {
	pointToLayer: function (feature, latlng) {
		return L.circleMarker(latlng)
		},
  style: style,
  onEachFeature: onEachFeature
}).addTo(mymapid2);

function style(feature) {
    return {
		    fillColor: "red",
	      weight: 1,
	      opacity: 1,
	      color: 'red',
	      dashArray: '3',
	      fillOpacity: 0.7
    };
}
	var highlightStyle = {
    fillColor: "yellow",
    weight: 2,
    opacity: 1,
    color: 'yellow',
    dashArray: '3',
    fillOpacity: 0.7
	};


function highlightFeature(e) {
    var layer = e.target;
    layer.setStyle(highlightStyle);
}

function resetHighlight(e) {
    geojson1.resetStyle(e.target);
}

function zoomTo(e) {
    var layer = e.target;
    mymap.fitBounds(layer.getBounds());
}

function onEachFeature(feature, layer) {
	name = feature.properties.start_fid;
 	$('#mapid2').append('<li data-value="' + name + '">'+name+'</li>');
	layer._leaflet_id = name;
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: zoomTo
    });
}

var hovered_id, layer;

$('#mapid2 li').on('mouseenter', function(e){
		hovered_id = $(e.target).data('value');
        //console.log(hovered_id);
		layer = geojson1.getLayer(hovered_id);
    layer2 = geojson2.getLayer(hovered_id);
		layer.setStyle(highlightStyle);
    layer2.setStyle(highlightStyle);
	}).on('mouseout', function(e){
    geojson1.resetStyle(layer);
		geojson2.resetStyle(layer2);
	});
#mapid {
  height: 100%;
  width: 50%;
  left: 0;
  position: fixed;
  z-index: 0;
  /*top: 0;*/
}

#mapid2 {
  height: 100%;
  width: 50%;
  right: 0;
  position: fixed;
  z-index: 0;
  /*top: 0;*/
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" rel="stylesheet"/>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
  <div id="mapid"></div>
  <div id="mapid2"></div>
  <script src="script.js"></script>
</body>

1 Ответ

0 голосов
/ 22 июня 2019

Спасибо моему брату за решение! 

    var dat1 =({
       "type" : "FeatureCollection",
       "name" : "NewFeatureType",
       "features" : [
          {
             "type" : "Feature",
             "geometry" : {
                "type" : "Polygon",
                "coordinates" : [
                   [
                      [ 7.2518485112, 47.1390738345 ],
                      [ 7.2540323762, 47.1390773819 ],
                      [ 7.2540289251, 47.1400723508 ],
                      [ 7.2518450195, 47.1400688032 ],
                      [ 7.2518485112, 47.1390738345 ]
                   ]
                ]
             },
             "properties" : {
                "start_fid" : "504748",
                "group_fid" : "1"
             }
          },
          {
             "type" : "Feature",
             "geometry" : {
                "type" : "Polygon",
                "coordinates" : [
                   [
                      [ 7.2565390484, 47.130837227 ],
                      [ 7.2633719322, 47.1308479108 ],
                      [ 7.2633626773, 47.1336579369 ],
                      [ 7.2565294346, 47.1336472526 ],
                      [ 7.2565390484, 47.130837227 ]
                   ]
                ]
             },
             "properties" : {
                "start_fid" : "862126",
                "group_fid" : "2"
             }
          },
          {
             "type" : "Feature",
             "geometry" : {
                "type" : "Polygon",
                "coordinates" : [
                   [
                     [ 7.2585, 47.1345 ],
                     [ 7.2633, 47.1345 ],
                     [ 7.2633, 47.1366 ],
                     [ 7.2585, 47.1366 ],
                     [ 7.2585, 47.1345 ]
                   ]
                ]
             },
             "properties" : {
                "start_fid" : "99999",
                "group_fid" : "2"
             }
          }
       ]
    });

    var dat2 =({
       "type" : "FeatureCollection",
       "name" : "NewFeatureType",
       "features" : [
          {
             "type" : "Feature",
             "geometry" : {
                "type" : "Point",
                "coordinates" : [ -19.9169596449, 32.1396903724 ]
             },
             "properties" : {
                "start_fid" : "504748",
                "group_fid" : "1"
             }
          },
          {
             "type" : "Feature",
             "geometry" : {
                "type" : "Point",
                "coordinates" : [ -19.924214327, 32.1530002773 ]
             },
             "properties" : {
                "start_fid" : "862126",
                "group_fid" : "2"
             }
          }
       ]
    });

    var defaultStyle = {
       fillColor: "red",
       weight: 1,
       opacity: 1,
       color: 'red',
       dashArray: '3',
       fillOpacity: 0.7
    };

    var highlightStyle = {
       fillColor: "yellow",
       weight: 2,
       opacity: 1,
       color: 'yellow',
       dashArray: '3',
       fillOpacity: 0.7
    };

    var mymap = L.map('mapid').setView([47.132,7.260], 15);
    L.tileLayer('https://api.mapbox.com/styles/v1/mtheisen/citei76iz005f2jpac8g7ilcl/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibXRoZWlzZW4iLCJhIjoiY2l0ZWk0NTBoMDVmMDJ0bXlyNmxzZ3RnMyJ9.fErHtcHVcTsHCLMPN1ZcQg', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
        maxZoom: 18,
        id: 'mtheisen',
        accessToken: 'pk.eyJ1IjoibXRoZWlzZW4iLCJhIjoiY2l0ZWk0NTBoMDVmMDJ0bXlyNmxzZ3RnMyJ9.fErHtcHVcTsHCLMPN1ZcQg'
    }).addTo(mymap);

    geojson1=L.geoJson(dat1, {style: defaultStyle,
    onEachFeature: onEachFeature
    }).addTo(mymap);

    var mymap2 = L.map('mapid2').setView([32.1378527851,-19.9229088608], 14);

    geojson2=L.geoJson(dat2, {
       pointToLayer: function (feature, latlng) {
          return L.circleMarker(latlng)
          },
      style: defaultStyle,
      onEachFeature: onEachFeature
    }).addTo(mymap2);


    function highlightFeature(e) {
       manageHighlight(e, dat1, geojson1, highlightStyle);
       manageHighlight(e, dat2, geojson2, highlightStyle);
    }

    function resetHighlight(e) {
       manageHighlight(e, dat1, geojson1, defaultStyle);
       manageHighlight(e, dat2, geojson2, defaultStyle);
    }

    function manageHighlight(e, dataBloc, geojson, style){
       for (var i = 0; i < dataBloc.features.length; i++) {
          if(dataBloc.features[i].properties.group_fid == e.target.feature.properties.group_fid){
             var layer = geojson.getLayer(dataBloc.features[i].properties.start_fid);
             layer.setStyle(style);
          }
       }
    }

    function onEachFeature(feature, layer) {
       name = feature.properties.start_fid;
       layer._leaflet_id = name;
        layer.on({
            mouseover: highlightFeature,
            mouseout: resetHighlight,
        });
    }
#mapid {
  height: 100%;
  width: 50%;
  left: 0;
  position: fixed;
  z-index: 0;
  /*top: 0;*/
}

#mapid2 {
  height: 100%;
  width: 50%;
  right: 0;
  position: fixed;
  z-index: 0;
  /*top: 0;*/
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" rel="stylesheet"/>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
  <div id="mapid"></div>
  <div id="mapid2"></div>
  <script src="script.js"></script>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...