MapConductorGroundImage — วางภาพลงบนแผนที่
กําหนดช่วงด้วยสองจุด (ตะวันตกเฉียงใต้และตะวันออกเฉียงเหนือ) แล้ววางภาพไว้ที่นั่น แผนผังชั้นของสิ่งอํานวยความสะดวก แผนที่เก่า ภาพถ่ายทางอากาศ แผนที่เชดเดดที่สร้างขึ้นเอง ฯลฯ สามารถวางซ้อนภาพที่ไม่ได้แบ่งเป็นไทล์ลงบนแผนที่ได้โดยตรง สามารถแก้ไขช่วงและความโปร่งแสงได้ในภายหลัง และภาพจะยังคงแสดงผลติดอยู่กับพื้นดินตามการจัดการกล้อง
01 · สถานะของ GroundImage
GroundImageState แสดงถึงภาพเพียงภาพเดียว มีช่วง ภาพ ความโปร่งแสง และตัวจัดการการแตะ คุณสามารถส่งภาพได้ในรูปแบบที่เป็นธรรมชาติสําหรับแต่ละแพลตฟอร์ม (Android ใช้ Drawable, iOS ใช้ UIImage, Web ใช้ URL)
val groundImageState =
GroundImageState(
id = "groundImage",
bounds =
GeoRectBounds(
southWest = southWestPosition,
northEast = northEastPosition,
),
image = drawable, // ส่ง Drawable ไปตรง ๆ
opacity = 0.5f,
onClick = this::onGroundImageClick,
)
GroundImage(groundImageState)let groundImageState = GroundImageState(
bounds: GeoRectBounds(southWest: southWest, northEast: northEast),
image: resources.image, // ส่ง UIImage ไปตรง ๆ
opacity: 0.5,
id: "groundImage"
)
content.groundImages = [GroundImage(state: groundImageState)]const image = createGroundImageState({
id: 'ground-image',
bounds: createGeoRectBounds({ southWest, northEast }),
imageUrl: GROUND_IMAGE_URL, // ส่งเป็น URL
opacity,
onClick: () => showToast('Ground image clicked.'),
});
<GroundImage state={image} />02 · ช่วงและความโปร่งแสง
ช่วงเป็นสี่เหลี่ยมผืนผ้า หากอัตราส่วนภาพของภาพและของช่วงต่างกัน ภาพจะถูกยืดเพื่อให้พอดีกับช่วง ดังนั้นโปรดระบุช่วงที่ตรงกับอัตราส่วนภาพของแผนภาพที่คุณต้องการวาง ช่วง ความโปร่งแสง และภาพสามารถแก้ไขได้ทั้งหมดในภายหลัง และการเปลี่ยนแปลงจะถูกสะท้อนในการเรนเดอร์ทันที
สร้างช่วงใหม่ด้วยการลาก
หากสลับ bounds ระหว่างการลากเครื่องหมายสองจุด ภาพจะตามไปด้วย อย่างไรก็ตาม ความสามารถในการอัปเดตแบบต่อเนื่องแตกต่างกันไปในแต่ละผู้ให้บริการ
วางซ้อนกับแผนที่พื้นฐาน
หากลดความทึบ ถนนและชื่อสถานที่บนแผนที่ด้านล่างจะมองเห็นทะลุได้ ขึ้นอยู่กับเอ็นจิ้น อาจมีข้อจำกัดในการเปลี่ยนแปลงเวลาหรือผลลัพธ์
// ลากมาร์กเกอร์ที่มุมเพื่อสร้างขอบเขตใหม่
override fun onMarkerDrag(dragged: MarkerState) {
when (dragged.id) {
"south_west" -> southWestPosition = GeoPoint.from(dragged.position)
"north_east" -> northEastPosition = GeoPoint.from(dragged.position)
}
bounds = GeoRectBounds(southWest = southWestPosition, northEast = northEastPosition)
}
// ความทึบเพียงกำหนดค่าลงไปตรง ๆ
groundImageState.opacity = sliderOpacityfunc setOpacity(_ value: Double) {
opacity = value
groundImageState.opacity = value
}
// สร้างขอบเขตใหม่ตามการลากมาร์กเกอร์
groundImageState.bounds = GeoRectBounds(southWest: sw, northEast: ne)// ระหว่างลาก ให้เขียนลงอ็อบเจกต์สถานะโดยตรง ไม่ต้องรอเรนเดอร์ใหม่
const applyGeometry = (sw: GeoPoint, ne: GeoPoint) => {
image.bounds = createGeoRectBounds({ southWest: sw, northEast: ne });
polylineState.points = framePoints(sw, ne);
};
image.opacity = opacity;03 · ดูเหมือนกันในทุกผู้ให้บริการ
GroundImage เป็นฟีเจอร์ที่มีความแตกต่างในการนําไปใช้งานมากที่สุดในบรรดาไดรเวอร์ SDK แผนที่ต่างๆ กลไกการวางซ้อนภาพแตกต่างกันไปมากในแต่ละเอ็นจิ้น และบางตัวไม่มีฟีเจอร์ที่เทียบเคียงได้เลย MapConductor จะพยายามดูดซับความแตกต่างนี้ให้มากที่สุด แต่ผู้ให้บริการบางรายอาจยังมีข้อจํากัดในการเปลี่ยนแปลงแบบไดนามิก
ช่วงเดียวกัน การยืดเดียวกัน
รูปภาพจะถูกจัดวางตามช่วงที่ระบุ โดยจะแสดงในตำแหน่งและขนาดเดียวกันโดยไม่คำนึงถึงความแตกต่างของระบบพิกัดภาพซ้อนทับของเอ็นจิ้น
วาดด้วยฟังก์ชันดั้งเดิมก่อน
ไดรเวอร์แต่ละตัวจะวาดให้เหมาะสมที่สุดโดยใช้ฟังก์ชันการวางภาพซ้อนทับเฉพาะของ SDK แผนที่นั้นๆ ให้มากที่สุด (เช่น ArcGIS ใช้ MediaLayer + ImageElement, Cesium ใช้วัสดุภาพสำหรับ Rectangle เป็นต้น) สำหรับเอ็นจิ้นที่ไม่มีฟังก์ชันที่เทียบเท่าเท่านั้น จะตัดภาพและจัดหาเป็นไทล์ แล้ววางซ้อนเป็นเลเยอร์แรสเตอร์ โค้ดฝั่งแอปพลิเคชันจะไม่เปลี่ยนแปลงไม่ว่าจะใช้เส้นทางใด
ข้อจำกัดตามผู้ให้บริการ
การสร้างช่วงใหม่ (การอัปเดตแบบต่อเนื่องระหว่างการลาก) หรือการเปลี่ยนความทึบ อาจมีข้อจำกัดเนื่องจากข้อจำกัดของเอ็นจิ้น การจัดวางแบบคงที่จะเหมือนกันในทุกผู้ให้บริการ แต่สำหรับการใช้งานที่เปลี่ยนแบบไดนามิก แนะนำให้ตรวจสอบกับผู้ให้บริการเป้าหมาย
การตรวจจับแตะก็เป็นส่วนร่วมเช่นกัน
เนื่องจากการตรวจจับแตะทำด้วยตรรกะร่วมกัน onClick จะถูกเรียกโดยไม่คำนึงว่าเอ็นจิ้นรองรับการแตะบนภาพซ้อนทับหรือไม่
04 · การแตะ
onClick รับสถานะของภาพและพิกัดที่แตะ ในตัวอย่าง ภาพจะถูกเปลี่ยนเมื่อแตะเพื่อสลับการแสดงผล
// แตะเพื่อสลับภาพ
override fun onGroundImageClick(clicked: GroundImageEvent) {
val isBase = clicked.state.image == imageResources.image
image = if (isBase) imageResources.clickedImage else imageResources.image
}private func onGroundImageClick(_ event: GroundImageEvent) {
let isBase = groundImageState.image === resources.image
groundImageState.image = isBase ? resources.clickedImage : resources.image
}createGroundImageState({
bounds,
imageUrl,
onClick: event => showToast(event.clicked),
});สถานะของรูปภาพที่แตะ สามารถอ้างอิงรูปภาพปัจจุบันและ extra ได้
พิกัดภูมิศาสตร์ที่แตะ สามารถทราบได้ว่ากดตรงไหนภายในช่วง
ส่วนโปร่งใสของรูปภาพจะรวมอยู่ในพื้นที่แตะเช่นกัน หากต้องการให้ส่วนโปร่งใสไม่มีปฏิกิริยา ให้ปรับพื้นที่ให้ตรงกับส่วนที่เป็นรูปธรรมของรูปภาพ หรือใช้โพลิกอนร่วมด้วย