Question

var mymap = L.map('map').setView([53.7983587, -1.6191674], 11);
    mymap.createPane('labels');
    mymap.getPane('labels').style.zIndex = 650;
    mymap.getPane('labels').style.pointerEvents = 'none';
    
    var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
        attribution: '©OpenStreetMap, ©CartoDB'
}).addTo(mymap);

var positronLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
        attribution: '©OpenStreetMap, ©CartoDB',
        pane: 'labels'
}).addTo(mymap);

	L.tileLayer('https://api.mapbox.com/styles/v1/adam97x/cjavcj1680vgz2sqshn70q5pg/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYWRhbTk3eCIsImEiOiJjamF2Y2k1NmswYzhuMnZtazlpNXU2NDExIn0.RifBBI5nelL-4d21mkn7Wg', {
		maxZoom: 18,
		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>',
		id: 'mapbox.streets'
	}).addTo(mymap);
	
		// control that shows state info on hover
	var info = L.control();

	info.onAdd = function (mymap) {
		this._div = L.DomUtil.create('div', 'info');
		this.update();
		return this._div;
	};

	info.update = function (props) {
		this._div.innerHTML = '<h4>Highlighted Postcode</h4>' +  (props ?
			'<b> Postcode: ' + props.Name
			: 'Hover over a state');
	};

	info.addTo(mymap);
	

function style(feature) {
    return {
        fillColor: 'grey',
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.5
    };
}

L.geoJson(statesdata, {style: style}).addTo(mymap);

	function highlightFeature(e) {
		var layer = e.target;

		layer.setStyle({
			weight: 5,
			opacity: 1,
			color: '#000',
			dashArray: '',
			fillOpacity: 0.7
		});

		if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
			layer.bringToFront();
		}

		info.update(layer.feature.properties);
	}

	var geojson;

	function resetHighlight(e) {
		geojson.resetStyle(e.target);
		info.update();
	}
	    function zoomToFeature(e) {
    mymap.fitBounds(e.target.getBounds());
                var coords = layer.feature.geometry.coordinates;
                console.log(coords);
	}
	coords = []; //define an array to store coordinates
	function onEachFeature(feature, layer) {
		layer.on({
			mouseover: highlightFeature,
			mouseout: resetHighlight,
			click: zoomToFeature
		});
	}
		
		
	geojson = L.geoJson(statesdata, {
		style: style,
		onEachFeature: onEachFeature
	}).addTo(mymap);
	test = [];
geojson.eachLayer(function (layer) {
    layer.bindPopup(layer.feature.properties.Name);

});

  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
  .info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } .info h4 { margin: 0 0 5px; color: #777; }

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>KML Data</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
<script type="text/javascript" src="https://project-adam97.c9users.io/asset/bd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>

</head>
<body>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>

<div id='map'></div>


</body>
</html>

我正在尝试在点击地图的扇区（后置代码）时将geojson文件的坐标输出到数组中，这样我就可以将它们翻转到lat，而不是lng，但是我很难这样做。< / p>

function zoomToFeature(e) {
    mymap.fitBounds(e.target.getBounds());
                var coords = layer.feature.geometry.coordinates;
                console.log(coords);
}

我会尽管它是沿着这些线条但我得到的功能未在控制台中定义为结果，如果有人有任何建议请告诉我。先谢谢你了！

Answer 1

要获取与click相关的不同详细信息，只需检查传递给Click侦听器的事件对象。例如：

function zoomToFeature(e) {
    mymap.fitBounds(e.target.getBounds());
    console.log(e.latlng); // {lat: 53.80551690917758, lng: -1.68365478515625}
    console.log(e.target.feature); // {type: "Feature", properties: {…}, geometry: {…}}
}

要查看从该事件中可以获得的内容，只需将其打印为console.log(e)并展开其子对象，以查看可以从中获取的内容。

leaflet geojson坐标到数组

1 个答案: