คำถามติดแท็ก leaflet

ไลบรารี JavaScript แบบโอเพ่นซอร์สสำหรับแผนที่เชิงโต้ตอบที่เหมาะกับอุปกรณ์พกพา

7
การสร้าง Vector Polygons ด้วยประสิทธิภาพการแสดงผลเช่น GISCloud?
ฉันกำลังมองหาวิธีแก้ปัญหาที่มั่นคงซึ่งจะทำให้ฉันสามารถสร้างแผนที่เว็บและรูปหลายเหลี่ยมเวกเตอร์ซ้อนทับโดยไม่ต้องโหลดข้อมูลดังกล่าวตลอดไปโดยมีเป้าหมายที่จะทำให้ฉันสามารถสร้างรูปหลายเหลี่ยมแต่ละสีในเหตุการณ์โฮเวอร์ เท่าที่ฉันทราบมี 3 ตัวเลือกเฉพาะเพื่อให้บรรลุสิ่งนี้ผ่านทั้งผ้าใบ SVG และแฟลช ดูเหมือนว่า Flash จะเป็นทางออกที่ดีที่สุดหากใช้กับ apple iphones / ipads เนื่องจากดูเหมือนว่าจะให้การเรนเดอร์ที่เร็วที่สุดและการแสดงผลที่สะอาดที่สุด Canvas ดูเหมือนจะเป็นตัวเลือกที่ดีที่สุดอันดับสอง แต่ใช้เวลานานมากถ้าคุณมีรูปหลายเหลี่ยมหลายร้อยรูปที่แสดงบนแผนที่ในขณะที่ SVG ใช้เวลาในการเรนเดอร์นานกว่า ฉันเกือบหมดหวังในการหาวิธีแก้ไขปัญหานี้แต่วันนี้ฉันเจอ บริษัท ที่ชื่อว่า GISCloud http://www.giscloud.com (ปัจจุบันอยู่ในรุ่นเบต้าพร้อมสมัครฟรี) บริษัท นี้มี SOMEHOW สามารถหาวิธีที่น่าทึ่งในการแสดงเวกเตอร์นับร้อยบนแผนที่ในเวลาจริง ฉันรู้สึกประหลาดใจกับวิธีการของพวกเขาและคำถามของฉันเกี่ยวกับชุมชนเกี่ยวข้องกับวิธีที่เราสามารถทำซ้ำวิธีการของพวกเขาสำหรับใช้กับเทคโนโลยีที่มีอยู่เช่นแผ่นพับ openlayers ขี้ผึ้ง ... ลองดูด้วยตัวคุณเองโดยดูการสาธิตที่น่าทึ่งนี้: http://www.giscloud.com/map/284/africa ตรวจสอบให้แน่ใจว่าคุณวางเมาส์เหนือรูปหลายเหลี่ยมบนหน้าและทดสอบการควบคุมการซูมเพื่อดูว่ารูปหลายเหลี่ยมเหล่านี้เป็นเวกเตอร์แน่นอน สิ่งที่ฉันสังเกตเห็นจากการดูคำขอด้วย firebug คือแผนที่กำลังร้องขอไฟล์ json เฉพาะ ดูเหมือนว่าขึ้นอยู่กับระดับการซูม / พื้นที่ที่มีไฟล์ json จำนวนมากที่ถูกร้องขอ ฉันควรพูดถึงที่นี่ว่าเมื่อ giscloud โหลดข้อมูลบนหน้าเว็บที่โฮเวอร์เหนือเวกเตอร์จะเปลี่ยนสีทันทีโดยไม่ต้องสร้างคำขอใหม่ ตัวอย่าง: …
5
กำลังโหลดไฟล์ GeoJSON ภายนอกลงในแผนที่ Leaflet หรือไม่
ฉันต้องการโหลดไฟล์ geoJSON (polygon) ลงในแผนที่แผ่นพับของฉัน ฉันเคยเห็นตัวอย่างที่ geoJSON ถูกฝังลงในรหัส javascript แต่ฉันไม่พบตัวอย่างใด ๆ ที่แสดงให้เห็นว่ามันทำงานอย่างไรกับไฟล์ภายนอก <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" /> <script src="usStates.geojson" type="text/javascript"></script> <style> html, body, #map { height: 100%; } body { padding: 0; margin: 0; } </style> </head> <body> <div id="map" style="height: 100%"</div> <script src="http://d3js.org/d3.v2.min.js?2.9.3"></script> <script …
53 leaflet  geojson 
13
แปลง ArcGIS Server JSON เป็น GeoJSON หรือไม่
ฉันกำลังสร้างแผนที่เว็บโดยใช้Leafletและฉันต้องการที่จะสามารถดึงเลเยอร์คุณลักษณะจาก ArcServer ของเรา ฉันสามารถดึงคลาสคุณลักษณะเป็น JSON ได้สำเร็จ แต่วัตถุ JSON ของ Esri ไม่เป็นไปตามมาตรฐาน GeoJSON ดังนั้นจึงไม่สามารถแสดงได้ ไม่มีใครรู้สคริปต์แปลงหรือเครื่องมือที่จัดการสิ่งนี้หรือไม่ ถ้าไม่ใช่ฉันวางแผนที่จะสร้างสคริปต์เพื่อแปลงวัตถุ ArcServer JSON เป็น GeoJSON
5
แสดงป๊อปอัพเมื่อวางเมาส์ไม่ใช่คลิกโดยใช้ Leaflet ใช่ไหม
เป็นไปได้ใน Leaflet ที่ป๊อปอัปเปิดขึ้นเมื่อวางเมาส์ไม่ใช่คลิก? สิ่งนี้ใช้ได้กับเครื่องหมายเพียงครั้งเดียว แต่ฉันต้องการเครื่องหมายจำนวนมากขึ้น: marker.on('mouseover', function(e){ marker.openPopup(); });
37 leaflet  popup 
6
การแสดงชุดข้อมูลขนาดใหญ่ด้วย Leaflet
เมื่อใช้ Leaflet ในการมองเห็นชุดข้อมูลขนาดใหญ่ (GeoJSON ที่มีคุณสมบัติ 10,000 จุด) ไม่น่าแปลกใจที่เบราว์เซอร์ล่มหรือหยุดทำงาน ตัวอย่างย่อย 1,000 ฟีเจอร์จากชุดข้อมูลเดียวกันนั้นทำงานได้อย่างไร้ที่ติ น่าเสียดายที่ฉันไม่สามารถแชร์ชุดข้อมูลให้ผู้อื่นลองได้ ไม่มีใครมีวิธีแก้ปัญหาที่ดีกว่าสำหรับการแสดงชุดข้อมูลขนาดใหญ่เช่นนี้หรือไม่? (เป้าหมายสูงสุดคือการปรับขนาดให้ถึง 2 ล้านฟีเจอร์) ฉันยินดีที่จะพิจารณากรอบการสร้างภาพออฟไลน์ในกรณีที่เบราว์เซอร์ที่ใช้แทนเช่นPolymapsหรือd3.jsเป็นต้นถือว่าไม่สามารถใช้งานได้ แก้ไข:ลืมพูดถึงผู้ใช้จะต้องสามารถกรองชุดข้อมูลตามคุณลักษณะ ดังนั้นเมื่อไม่ใช้คุณลักษณะNคุณสมบัติเฉพาะการจับคู่n <= Nอาจต้องแสดงผลแบบไดนามิก
3
การเพิ่ม / ลบเลเยอร์แผ่นพับ GeoJSON
ฉันกำลังพยายามแสดงเลเยอร์ GeoJSON ที่เลเยอร์การซูมที่แตกต่างกันโดยใช้ API ของ Leaflet ฉันสามารถโหลดและแสดงทั้งสามเลเยอร์ได้พร้อมกัน (แม้ว่าฉันไม่ต้องการให้พวกเขาทั้งหมดแสดงพร้อมกัน) ฉันสามารถโหลดและแสดงผลที่ระดับการซูมที่แตกต่างกัน ฉันได้ตั้งรหัสไว้ที่ระดับการซูม 1-6 แผนที่จะแสดงเลเยอร์ GeoJSON หนึ่งชั้น ที่ระดับ 7-10 ระบบจะแสดงรายการอื่นและที่ระดับ 11+ จะแสดงรายการที่สาม แสดงพวกเขาทำงาน สิ่งที่ฉันพยายามจะทำงานตอนนี้คือการปิดคนอื่นถ้ามีคนแสดง ทำงานจาก 1-6 ถึง 7-10 งาน (หมายความว่ามันจะปิดเลเยอร์ 1-6 อย่างถูกต้อง) แต่ไม่ใช่จาก 7-10 ถึง 11+ (หมายถึงเลเยอร์ 7-10 ติดรอบ) และฉันไม่สามารถคิดได้ ทำไม (ใช้รหัสเดียวกัน) นี่คืออาแจ็กซ์สำหรับเลเยอร์ GeoJSON: function getJson(defaultStyle, map, simp, geojsonLayer){ var url = 'file' …
1
การฉายภาพเริ่มต้นใน Leaflet คืออะไร
ฉันได้อ่านเอกสาร API สำหรับ Leaflet บนเว็บไซต์แล้ว แต่ฉันก็ไม่เข้าใจ: เส้นโครงเริ่มต้นสำหรับดูแผนที่คืออะไร? มันเขียนเกี่ยวกับ Mercator ทรงกลมและวงรีและ Equirectangular - แล้วอันไหนของสามอันนี้? หรือไม่ก็ขึ้นอยู่กับเซิร์ฟเวอร์ไทล์ที่ฉันใช้หรือไม่ขึ้นอยู่กับใบปลิวที่เรียงต่อกันทันทีก่อนที่จะเพิ่มบนหน้าจอ ที่จริงฉันไม่เข้าใจว่าการฉายภาพใดที่ฉันต้องการบันทึกไฟล์ geoJSON ใน QGIS หากต้องการแสดงอย่างถูกต้องบนแผนที่แผ่นพับ json coords ควรเป็น lat-long ไม่ใช่ xy แต่ถ้าฉันพยายามบันทึกใน Equirectangular - coords จะเป็น xy .. ?
2
ปิดใช้งานการแพน / การลากบนแผนที่แผ่นพับสำหรับ div ภายในแผนที่
ไม่มีใครรู้วิธีระงับการแพนกล้องเมื่อคุณคลิกและลากไปด้านบนของกล่อง div ที่ฝังอยู่ภายในแผนที่หรือไม่ ตัวอย่างเช่นที่นี่เมื่อคุณคลิกและลากไปด้านบนสุดของตำนานแผนที่จะลากไปกับคุณ ฉันต้องการที่จะระงับฟังก์ชั่นนั้น ฉันรู้ว่าเทคนิคนี้ แต่ฉันต้องการทราบว่านี่เป็นวิธีเดียว: map.dragging.disable();
25 leaflet 
5
ฐานข้อมูลสำหรับแผ่นแผนที่ลื่นแบบออฟไลน์
ขณะนี้ฉันมีแอปพลิเคชั่นแผนที่ HTML5 ออฟไลน์ (สร้างขึ้นบน Leaflet & KendoUI พร้อมส่วนเพิ่มเติมที่กำหนดเอง) ที่มีรายการแอปและทำงานได้ดีบนหลายแพลตฟอร์ม อย่างไรก็ตามฉันลังเลที่จะใช้ไฟล์ Manifest เพื่อจัดเก็บไทล์แผนที่จริงด้วยวิธีนี้ (ไฟล์ PNG ที่จัดเก็บเป็นแคชสไตล์ไทม์ TMS) ปัญหาที่พบ: อาจมีไทล์มาก (10MB - 50MB) ในไฟล์ PNG ประมาณ 1,000 ไฟล์ การดาวน์โหลดเริ่มต้นอาจช้ามาก (และยากที่จะแสดงความคืบหน้าต่อผู้ใช้) แอปพลิเคชันทำงานหรือไม่หากไม่ใช้การแคชออฟไลน์ทั้งหมดจะล้มเหลว (สอดคล้องกับ [whatwg.org] [1]) ผู้ใช้ออฟไลน์จะเชื่อมต่อใหม่และต้องการรับการรีเฟรชของกระเบื้องเป็นครั้งคราวซึ่งเป็นเดลต้าเล็ก ๆ แต่กลไกรายการแอปจะโหลดไฟล์ js, css และ PNG ทั้งหมดใหม่ทันทีที่อัปเดตรายการ แนวคิดทางเลือก:แยกเว็บแอปพลิเคชันออกจากที่เก็บข้อมูลของแผ่นแผนที่แบบลื่น จัดเก็บไทล์ในฐานข้อมูลที่เป็นมิตรกับเว็บแอปพลิเคชัน ปรับปรุง: [PouchDB เพิ่งเพิ่มการสนับสนุนสำหรับ blobs ไบนารี ฉันได้รับผลลัพธ์เบื้องต้นที่ดี ดู: /programming/16721312/using-pouchdb-as-an-offline-raster-map-cache …
4
วาดรูปหลายเหลี่ยมในแผ่นพับ?
นี่คือการเข้ารหัสของฉันฉันใช้ในแผ่นพับ: var pointA = new L.LatLng(28.635308, 77.22496); var pointB = new L.LatLng(28.984461, 77.70641); var pointList = [pointA, pointB]; var firstpolyline = new L.Polyline(pointList { color: 'red', weight: 3, opacity: 0.5 smoothFactor: 1 }); map.addLayer(firstpolyline); แผนที่ไม่แสดงผลลัพธ์ใด ๆ ฉันแค่ต้องการเส้นตรงจากจุดหนึ่งไปยังอีกจุดหนึ่งเพียงแค่เห็นภาพไม่ใช่พิกัดจีโอเดติก จุด (ในแผ่นพับ "วงกลม") แสดงอย่างสมบูรณ์แบบบนแผนที่
24 leaflet 
2
ฟังก์ชัน setStyle () สำหรับคุณสมบัติ GeoJSON - แผ่นพับ
ตกลงเนื่องจากฉันได้ถามคำถามที่ยาวมากเกี่ยวกับเรื่องนี้ แต่เนื่องจากมันไม่ได้รับคำตอบใหม่ใด ๆ ชั่วขณะหนึ่งและเพื่อไม่ให้สับสนในรายละเอียดฉันจะเก็บเรื่องนี้ไว้เป็นวิธีที่ดีที่สุดที่ฉันสามารถทำได้ ถ้าฉันไม่เข้าใจผิดsetStyleฟังก์ชั่นสำหรับชื่อคุณสมบัติเฉพาะนั้นจะเป็นดังนี้: var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]]; var rect = L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map); rect.setStyle({color: "#4B1BDE"}); ... ซึ่งจะเปลี่ยนสีจากสีส้มเป็นสีน้ำเงิน ฉันยังรับรู้ถึงresetStyle()ฟังก์ชั่นที่จะเปลี่ยนสไตล์ให้เป็นแบบดั้งเดิม นี่คือวิธีที่ฉันใช้ GeoJSON ของฉัน: var everything = L.geoJson(myfile, { onEachFeature: function(feature){ array_of_layers.addLayer(feature); }, style: function(feature){ switch(feature.properties.name){ case "belgium": return belgium_style; break; case "bosnia": return bosnia_style; break; …
4
วิธีเพิ่มป้ายกำกับข้อความอย่างเดียวบนแผนที่แผ่นพับที่ไม่มีไอคอน
ฉันกำลังมองหาวิธีแสดงข้อความบนแผนที่แผ่นพับโดยใช้เครื่องหมายหรืออย่างอื่นโดยไม่แสดงไอคอนใด ๆ ฉันต้องการแสดงข้อความเท่านั้นและสามารถจัดรูปแบบและหมุนได้ ... ข้อเสนอแนะใด ๆ
22 leaflet 
1
เปลี่ยนไอคอนเครื่องหมายเมื่อคลิกโดยใช้แผ่นพับ
ฉันมีแผนที่ที่มีเครื่องหมาย (> 100) อยู่มากมาย ฉันต้องการจะทำเช่นนั้นเพื่อให้การคลิกที่ไอคอนเหล่านี้เปลี่ยนเป็นเวอร์ชันที่เน้นสี ฉันได้สร้างไอคอนที่กำหนดเองสองไอคอนไอคอนปกติหนึ่งรายการและไอคอนหนึ่งที่เน้นไว้ ฉันได้รับการทำงานกับเครื่องหมายเดียว แต่ไม่สามารถหาวิธีการตั้งค่าเพื่อให้แต่ละไอคอนสามารถเปลี่ยนแปลงได้โดยคลิกที่มัน นี่คือรหัสการทำงานสำหรับหนึ่งไอคอน: var testmarker = L.marker([44.0, -73.0], {icon: unselectedIcon}); testmarker.on('click', function(e) { testmarker.setIcon(selectedIcon); }); อย่างไรก็ตามฉันมีเครื่องหมายจำนวนมากและใช้สำหรับวงเพื่อวางพวกเขา: //points is a 2 dim array with lat/long pairs for (i = 0; i <= points.length-1; i++) { var marker = L.marker([points[i][0], points[i][1]], {icon: unselectedIcon}); } marker.on('click', function(e) …
20 leaflet  markers 
3
ปิดใช้งานการโต้ตอบแผ่นพับชั่วคราว
ฉันจะปิดการใช้งาน zoming / draging Mapview ใน Leaflet.js ชั่วคราวได้หลายวิธี แต่ก็ไม่มีโชค เป็นสิ่งสำคัญที่จะทำให้เป็นการชั่วคราวและฉันยังต้องการตัวเลือกเพื่อเปิดใช้งานอีกครั้ง
20 leaflet 
5
GeoJSON ใหญ่เกินไป - จะทำอย่างไรดี?
ฉันใช้leaflet.jsเพื่ออนุญาตให้ผู้ใช้เว็บเลือกภูมิภาค ภูมิภาคที่ถูกต้องคือสหรัฐฯ, แคนาดา, แคนาดาและประเทศโลก (ยกเว้นสหรัฐอเมริกาและแคนาดา) ฉันสร้าง shapefile ด้วยตัวเองโดยใช้ Qgis และบันทึกเป็น geojson ฉันทำให้รูปเรขาคณิตง่ายขึ้นเท่าที่จะทำได้ shapefile ที่ได้คือ 400kb แต่ geojson มีขนาดเกินเมกะไบต์ มันใหญ่กว่าที่ฉันต้องการ ฉันต้องลดค่าใช้จ่ายของเครือข่ายที่เกี่ยวข้องในการถ่ายโอนข้อมูลนี้ วิธีที่ถูกต้องในการทำเช่นนี้คืออะไร? ตัวเลือกที่ฉันสามารถจินตนาการได้คือ: ให้บริการไฟล์ geojson gzipped, แกะออกจากไคลเอนต์ แยก Shapefile บนไคลเอนต์เพื่อ geojson สร้างไทล์ของฉันเองจาก shapefile และให้บริการเหล่านั้น หากใครสามารถบอกฉันได้ว่าตัวเลือกใดดีที่สุด (หรือไม่มีข้อใดข้างต้น) ฉันจะขอบคุณมัน
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.