0
전단지 geojson 그래서 내가 LAT하도록 전환 할 수
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);
\t L.tileLayer('https://api.mapbox.com/styles/v1/adam97x/cjavcj1680vgz2sqshn70q5pg/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYWRhbTk3eCIsImEiOiJjamF2Y2k1NmswYzhuMnZtazlpNXU2NDExIn0.RifBBI5nelL-4d21mkn7Wg', {
\t \t maxZoom: 18,
\t \t attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
\t \t \t '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
\t \t \t 'Imagery © <a href="http://mapbox.com">Mapbox</a>',
\t \t id: 'mapbox.streets'
\t }).addTo(mymap);
\t
\t \t // control that shows state info on hover
\t var info = L.control();
\t info.onAdd = function (mymap) {
\t \t this._div = L.DomUtil.create('div', 'info');
\t \t this.update();
\t \t return this._div;
\t };
\t info.update = function (props) {
\t \t this._div.innerHTML = '<h4>Highlighted Postcode</h4>' + (props ?
\t \t \t '<b> Postcode: ' + props.Name
\t \t \t : 'Hover over a state');
\t };
\t info.addTo(mymap);
\t
function style(feature) {
return {
fillColor: 'grey',
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.5
};
}
L.geoJson(statesdata, {style: style}).addTo(mymap);
\t function highlightFeature(e) {
\t \t var layer = e.target;
\t \t layer.setStyle({
\t \t \t weight: 5,
\t \t \t opacity: 1,
\t \t \t color: '#000',
\t \t \t dashArray: '',
\t \t \t fillOpacity: 0.7
\t \t });
\t \t if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
\t \t \t layer.bringToFront();
\t \t }
\t \t info.update(layer.feature.properties);
\t }
\t var geojson;
\t function resetHighlight(e) {
\t \t geojson.resetStyle(e.target);
\t \t info.update();
\t }
\t function zoomToFeature(e) {
mymap.fitBounds(e.target.getBounds());
var coords = layer.feature.geometry.coordinates;
console.log(coords);
\t }
\t coords = []; //define an array to store coordinates
\t function onEachFeature(feature, layer) {
\t \t layer.on({
\t \t \t mouseover: highlightFeature,
\t \t \t mouseout: resetHighlight,
\t \t \t click: zoomToFeature
\t \t });
\t }
\t \t
\t \t
\t geojson = L.geoJson(statesdata, {
\t \t style: style,
\t \t onEachFeature: onEachFeature
\t }).addTo(mymap);
\t 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/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/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/[email protected]/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 파일의 좌표를 시도하고 배열 좌표, LNG 그러나 lng 대신 lat. 그러나 나는 그렇게하기 위해 고심하고있다.
function zoomToFeature(e) {
mymap.fitBounds(e.target.getBounds());
var coords = layer.feature.geometry.coordinates;
console.log(coords);
}
는 콘솔의 결과로 정의되지 않은 내가 기능을 얻고있다 그러나 이러한 라인을 따라 뭔가가 비록 나는 사람이 어떤 제안이 있으면 알려 주시기 바랍니다있을 것입니다. 미리 감사드립니다!
[jsfiddle] (https://jsfiddle.net/y1748o3r/2/)에서 콘솔 241 번에 기록됩니다. HTML이 "그대로"붙여 넣어지면 경고 메시지가 나타납니다. [해당 버전] (https://jsfiddle.net/y1748o3r/)을 참조하십시오. – andy
죄송합니다. 새로운 문제를 말하지 않고 원래의 게시물을 업데이트했습니다. geojson long lats 만 표시되도록하려면 우편 번호 섹터를 클릭하면 표시됩니다. x가 정의되지 않았다는 사실을 계속해서 알아 채지 못합니다. – Adam
여기에 'x' 속성이 붙어있는 코드가 붙여진 곳이 없으므로 문제가 어디 있는지 잘 모르겠습니다 ... 어쨌든, 원하는 zoomToFeature() 안에 클릭 점이 길어 집니까? – andy