2014-06-18 15 views
11

में स्वतंत्र रूप से geojson परतों के साथ बातचीत करें मैं अपने मानचित्र में दो geojson परतों को लोड करना चाहता हूं और विभिन्न नियमों के साथ उन्हें स्वतंत्र रूप से शैली में सक्षम करने में सक्षम होना चाहता हूं। मैं अपनी geojson फ़ाइलों को नीचे दिए गए कोड के साथ प्रदर्शित कर सकता हूं, लेकिन चूंकि वे एक ही map.data ऑब्जेक्ट का हिस्सा हैं, मैं केवल दोनों के लिए सार्वभौमिक स्टाइल लागू करने में सक्षम हूं। क्या इसके आसपास कोई रास्ता है? अंत में (लंबी अवधि के लक्ष्य) मैं भी रूप में अच्छी तरह चालू और बंद एक चेकबॉक्स के साथ विभिन्न परतों टॉगल करने के लिए सक्षम होने के लिए चाहते हैं (मैं इतनी के रूप में समस्या overcomplicate नहीं स्वतंत्र स्टाइल पर ध्यान केंद्रित कर रहा हूँ पहले)Google मानचित्र api v3

function initialize() { 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
    zoom: 12, 
    center: {lat: 39.218509, lng: -94.563703} 
}); 

map.data.loadGeoJson('https://url1'); 
map.data.loadGeoJson('https://url2'); 

map.data.setStyle(function(feature) { //styling rules here} 

google.maps.event.addDomListener(window, 'load', initialize); 

किसी भी मदद बहुत सराहना की जाएगी। मैंने कुछ थ्रेड देखा जो लागू दिखते थे (जैसे Google maps GeoJSON- toggle marker layers?) लेकिन मुझे यकीन नहीं था कि इसे विशेष रूप से मेरे उद्देश्यों के लिए कैसे लागू किया जाए।

उत्तर

36

तो मुझे बस 2 geojson फ़ाइलों को जोड़ने और उन्हें अलग शैली बनाने के लिए कुछ समान और आवश्यक करना था। आप क्या करना चाहते हैं मानचित्र को प्रारंभ करना और फिर 2 अलग-अलग परतें जोड़ें। मूल रूप से दोनों के लिए स्टाइल सेट करें। नोट्स के साथ मेरा कोड नीचे है। मैंने वास्तव में इस कार्य को एक सेवा में कोणीय का उपयोग किया और एक वादा वापस कर दिया।

अपने नक्शे विकल्पों

var mapOptions = { 
      zoom: 4, 
      scrollwheel: false, 
      center: new google.maps.LatLng(40.00, -98), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

एक चर में अपना नक्शा सेट सेट करें।

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

परतों को लेने वाले 2 चर शुरू करें। मैंने राज्य और काउंटी किया।

var countyLayer = new google.maps.Data(); 
var stateLayer = new google.maps.Data(); 

तो प्रत्येक परत के लिए GeoJSON फ़ाइलें लोड।

countyLayer.loadGeoJson('counties.json'); 
stateLayer.loadGeoJson('states.json'); 

उसके बाद प्रत्येक परत के लिए शैली सेट करें।

stateLayer.setStyle({ 
    strokeColor: 'red', 
    strokeWeight: 5 
}); 

countyLayer.setStyle({ 
    strokeColor: 'black', 
    strokeWeight: 1 
}); 

अंतिम चरण नक्शा को परत सेट करना है।

countyLayer.setMap(map); 
stateLayer.setMap(map); 

इसके बाद मैंने एक वादा वापस कर दिया लेकिन आप मानचित्र वस्तु को वापस कर सकते थे। क्या यह आपके प्रश्न का उत्तर देने में मदद/मदद करता है?

इसके अलावा, प्रत्येक परत सेट स्टाइल() फ़ंक्शन के भीतर आप फ़ंक्शंस के माध्यम से गतिशील स्टाइल जोड़ सकते हैं। भरने के लिए एक फ़ंक्शन जोड़ने की तरह रंग जो GeoJson फ़ाइल में डेटा के आधार पर रंग बदल देगा।

+1

यह अभी तक एक उत्तर के रूप में क्यों नहीं चुना गया है? ओह, प्रेत उपयोगकर्ता 3750486 – Ayyash

संबंधित मुद्दे