ทางเลือกของ OpenLayers ที่สนับสนุนคุณสมบัติฝั่งไคลเอ็นต์มากขึ้น [ปิด]

ฉันกำลังพิจารณาสถาปัตยกรรมที่แตกต่างสำหรับระบบที่จะใช้การเรนเดอร์ฝั่งไคลเอ็นต์สำหรับคุณลักษณะจุดและต้องปราศจากปลั๊กอิน ฉันใช้แอพพลิเคชั่นนี้พัฒนาขึ้นเพื่อตอบคำถามนี้เพื่อทดสอบแล็ปท็อปของฉัน (ซึ่งค่อนข้างมีความสามารถ - quad-core 2.6 ghz cpu, หน่วยความจำ 4 gb, ไม่อยู่ภายใต้ภาระอื่น ๆ , Firefox 8) ด้วยคะแนนที่แตกต่างกัน เห็นได้ชัดว่ามันล่าช้าที่ 500 และเริ่มดิ้นรนกว่า 1,000 ฟีเจอร์ที่สร้างแบบสุ่มดูเหมือนจะไม่มีตัวจัดการเหตุการณ์ใด ๆ และใช้สัญลักษณ์เดียวกันทั้งหมด

ฉันคาดว่าจะแสดงคุณลักษณะได้สูงสุด 1,000 รายการพร้อมด้วยสัญลักษณ์ที่แตกต่างกันสูงสุด 10 รายการทั้งหมดนี้มีตัวจัดการการคลิกและวางเมาส์และบนแพลตฟอร์มที่มีความสามารถน้อยกว่า

ฉันหวังว่าจะได้ประสิทธิภาพฝั่งไคลเอ็นต์ที่ดีขึ้นโดยเฉพาะหลังจากเห็นตัวอย่าง GIS Cloud นี้ - ฉันรู้ว่ามันใช้งานได้แตกต่างกัน (ผ้าใบ HTML5 กับ SVG) แต่ความแตกต่างของประสิทธิภาพนั้นโดดเด่นจริงๆ

คำถามสำคัญของฉัน (ถ้าคุณจะใจดี) คือ:

1. แอปพลิเคชัน OpenLayers อื่น ๆ ที่คุณเขียน / ใช้งานเป็นจุดสุ่มที่สร้างตัวแทนแอปพลิเคชัน
2. มี API การแมปบนเว็บทางเลือกที่ได้รับการพิสูจน์แล้วและฟรีที่สนับสนุนบริการ WMS (ซึ่งฉันต้องใช้) และเร็วกว่าด้วยฟีเจอร์ฝั่งไคลเอ็นต์โดยไม่ต้องใช้ Flash / Silverlight / ปลั๊กอินอื่น ๆ
3. ข้อเสนอแนะอื่น ๆ เกี่ยวกับสิ่งที่ฉันควรตรวจสอบ?

การใช้การเรนเดอร์ฝั่งเซิร์ฟเวอร์เป็นหลักเป็นตัวเลือก แต่ทั้งฉันและไคลเอนต์ต้องการหลีกเลี่ยงปัญหานี้เนื่องจากความกังวลเกี่ยวกับจำนวนผู้ใช้ที่เพิ่มขึ้นและการตอบสนองของ UI

คำตอบของคำถามที่ 1 คือใช่ คุณกำลังใช้ OL พร้อมการกำหนดค่าที่ค่อนข้างธรรมดา มีกลอุบายที่คุณสามารถใช้เพื่อปรับปรุงประสิทธิภาพฉันจะไปที่ภายหลัง

คำตอบสำหรับคำถามที่ 2 อาจจะ (โดยเฉพาะอย่างยิ่งเกี่ยวกับความคงทน) คุณสามารถค้นหารายชื่อของทางเลือกในเว็บไซต์นี้ (อันที่จริงแล้วตอนนี้คือLeaflet )

ตอบคำถาม 3: เริ่มต้นด้วยการวัด:

ฉันแก้ไขสำเนาของแอปในเครื่องเพื่อให้ตัวแสดงภาพระบุไว้อย่างชัดเจนในรายการตัวเลือกสำหรับเลเยอร์เวกเตอร์ ในระหว่างการทดสอบฉันจะละเว้น Canvas renderer จากนั้นโหลดหน้าทดสอบซ้ำอีกครั้ง:

var pts = new OpenLayers.Layer.Vector("Points", {renderers: ["Canvas", "SVG", "VML"]});

ฉันเพิ่มตัวจับเวลาลงในฟังก์ชัน redraw เพื่อให้พิมพ์เวลาที่ใช้ในการวาด :

function redraw() {
var start = (new Date).getTime();
[...]
var diff = (new Date).getTime() - start;
console.log("redraw completed in "+diff+"ms");

หลังจากนั้นฉันลองใช้งานบน Chrome 17 และ Firefox 8.0.1 หลายครั้งบนฟีเจอร์ OSX SL ที่มี 1,000 และ 5,000 ฉันประหลาดใจที่ SVG renderer นั้นเร็วกว่า Canvas renderer เฉลี่ย 20%! (หมายเหตุ: ใน Windows js เวลาไม่แม่นยำเท่ากับใน OSX ดังนั้นผลลัพธ์อาจมีความสอดคล้องน้อยลง)

นี่และคุณบอกว่า

มันคือการโต้ตอบกับแผนที่ซึ่งเป็นปัญหา

, IMHO บอกเราว่าฮอตสปอตอยู่ในการจัดการคุณสมบัติของ Vector ขณะที่ทำงานกับแอพของฉันฉันเพิ่งดูและตัดสินใจที่จะซับคลาสมันแล้วกำจัดโค้ดที่ซับซ้อนทั้งหมดที่ไม่มีประโยชน์สำหรับจุดง่ายๆ เป็นที่ยอมรับว่าฉันค่อนข้างไวและลบการพึ่งพา OpenLayers.Geometry.Point ออกไปและเวอร์ชันของฉันก็สามารถใช้งานได้กับวัตถุ js แบบง่าย ๆ ด้วยแอตทริบิวต์ x, y

ทางเลือกของคุณอยู่ในลำดับจากผลประโยชน์ / ค่าใช้จ่าย:

ตัวเลือกแรกคือการกรองจุดที่มองเห็นฝั่งเซิร์ฟเวอร์โดยการกำหนดค่าตัวเลือกกลยุทธ์ให้กับเลเยอร์เวกเตอร์ดังต่อไปนี้:

 strategies: [new OpenLayers.Strategy.Refresh({force:true}), new OpenLayers.Strategy.BBOX({ratio:2, resFactor: 3})],

วิธีนี้เมื่อคุณซูมเข้าไปในจำนวนฟีเจอร์ที่ฝั่งไคลเอ็นต์ดึงมาจะถูก จำกัด ให้มองเห็นได้ในขอบเขตนั้นแทนที่จะเป็นแบบทั้งหมด

ในฐานะที่เป็นตัวเลือกที่สองคุณอาจพิจารณาการเขียนที่กำหนดเองเวกเตอร์ / Renderer ตัวอย่างของการกำหนดเองปล้นลงการดำเนินงานได้เร็วขึ้นสามารถใช้ได้บนหน้า GitHub ของฉันที่นี่ แม้ว่าจะไม่เหมาะกับการใช้งานทุกอย่าง แต่ก็ควรจะเพียงพอที่จะให้ข้อมูลคร่าวๆเกี่ยวกับสิ่งที่ฉันแนะนำ

ตัวเลือกที่สามเมื่อผู้ใช้ซูมออกอย่างเต็มที่คือการใช้การจัดกลุ่มลักษณะของเซิร์ฟเวอร์เพื่อให้จุดรวมถูกรวมเข้าเป็นหนึ่งเดียวลดจำนวนคุณลักษณะที่ดึงออกมาอีกครั้ง

ใช้UTFGridและTileMillคุณสามารถแสดงคะแนนไม่ จำกัด ด้วยประสิทธิภาพที่ดี การแสดงจุดสุ่ม n เป็นตัวอย่างของการวางแผนที่จะไม่ทำงานในสถานการณ์นั้นหรือกับ GISCloud หรือเวทย์มนตร์ที่คล้ายกันแม้ว่า - เนื่องจากประสิทธิภาพของเวกเตอร์แฮ็กมักจะต้องมีความรู้เกี่ยวกับชุดข้อมูลเต็มรูปแบบและการประมวลผลล่วงหน้า: ทั้ง TileMill และ GISCloud ปูกระเบื้องจำนวนมาก