Unduh InteractiveMap - Unduh kode sumber InteractiveMap

InteractiveMap

Kode sumber lainnya

1.0.0

Unduh

Peta Interaktif

Perpustakaan untuk menggunakan Peta Berbasis SVG secara interaktif di SwiftUI.

Hanya berfungsi dengan peta berbasis .svg
Memungkinkan Anda memodifikasi semua provinsi di peta dengan atribut yang disediakan oleh Shape SwiftUI
Seret, lepas, dan animasikan provinsi, serta peta itu sendiri.

Catatan! Parsing SVG belum dalam bentuk finalnya, sehingga beberapa SVG mungkin tidak diurai dengan benar. Namun sejauh yang saya bisa lihat, hampir semua peta digambar dengan benar. Anda dapat melihat peta yang saya coba di bagian Maps.

Peta diambil dari Repositori FSInteractiveMap

Instalasi

Membutuhkan iOS 13+

InteractiveMap saat ini hanya dapat diinstal melalui Swift Package Manager.

Manajer Paket Swift
Tambahkan URL Paket:

 https://github.com/GrandSir/InteractiveMap

Contoh & Etalase

Efek Penskalaan 3D

peta 3d

Peta Menyeramkan

menakutkan)

Layar Seleksi Provinsi Mihmandar

mihmandar

Penggunaan

SwiftUI

Untuk menggambar peta svg Anda di SwiftUI, gunakan InteractiveMap dengan penutupan yang menggunakan PathData sebagai parameternya.

InteractiveMap menggunakan InteractiveShape untuk menggambar semua jalur yang ditentukan dalam SVG. Namun ia perlu mengetahui Path mana yang akan digambar, yaitu InteractiveMap { pathData in } berfungsi seperti ForEach { index in } dan mengembalikan penutupan berulang yang mengembalikan PathData sebagai parameter, yang berisi semua informasi tentang Path yang didefinisikan di dalam svg.

import SwiftUI
import InteractiveMap

struct ContentView : View {
    var body : some View {
        InteractiveMap ( svgName : " tr " ) { pathData in // or just use $0
            InteractiveShape ( pathData )
                . initWithAttributes ( )
        }
    }
}

InteractiveMap mengubah ukurannya sendiri ke frame yang ditetapkan, mengambil semua ruang yang tersedia secara default, dan mengubah ukurannya sendiri secara responsif pada rotasi perangkat.

Peta Bawaan

Kustomisasi

Daripada menggunakan atribut default, Anda juga dapat menentukan atribut Anda sendiri.

 InteractiveMap ( svgName : " tr " ) {
    InteractiveShape ( $0 )
        . initWithAttributes ( . init ( strokeWidth : 2 , strokeColor : . red , background : Color ( white : 0.2 ) ) )
}

Peta Atribut Khusus

Kustomisasi Tingkat Lanjut

Meskipun .initWithAttributes menghemat waktu untuk penyesuaian sederhana, .initWithAttributes tidak dapat disesuaikan atau diedit.

Karena InteractiveShape adalah sebuah Shape , Anda dapat menggunakan metode apa pun dengan InteractiveShape yang dapat Anda gunakan dengan Shape .

 InteractiveMap ( svgName : " tr " ) {
    InteractiveShape ( $0 )
        . stroke ( Color . cyan )
        . shadow ( color : . cyan , radius : 3 , x : 0 , y : 0 )
        . background ( InteractiveShape ( $0 ) . fill ( Color ( white : 0.15 ) ) )
}

Peta Bayangan

Menangani Klik

PathData adalah Struct yang berisi semua informasi tentang semua jalur, dalam contoh peta kita adalah kabupaten dan provinsi.

Ini memiliki 5 variabel di dalamnya. id , path dan name , boundingBox dan svgBounds

id adalah Pengenal Unik yang diurai langsung dari SVG

Sebagian besar Map SVG (TIDAK SEMUA!) memiliki atribut id di semua elemen <path> seperti ini:

<path ... id="<id>", name="<name>">

MapParser , yang didefinisikan dalam MapParser.swift mem-parsing elemen tersebut dan menyimpannya dalam struct PathData .

Jika tidak ada atribut id di jalur, MapParser secara otomatis membuat String UUID.

Namun jika Anda ingin menyimpan id tersebut di suatu tempat, ketahuilah bahwa UUID String dibuat ulang secara otomatis setiap kali InteractiveMap digambar.

import SwiftUI
import InteractiveMap

struct ContentView : View {
    @ State private var clickedPath = PathData ( )
    var body : some View {
        VStack {
            Text ( clickedPath . name . isEmpty ? " " : " ( clickedPath . name ) is clicked! " )
                . font ( . largeTitle )
                . padding ( . bottom , 15 )

            InteractiveMap ( svgName : " tr " ) { pathData in // is a PathData
                InteractiveShape ( pathData )
                    . stroke ( clickedPath == pathData ? . cyan : . red , lineWidth : 1 )
                    . shadow ( color : clickedPath == pathData ? . cyan : . red ,  radius : 3 )
                    . shadow ( color : clickedPath == pathData ? . cyan : . clear , radius : 3 ) // to increase the glow amount
                    . background ( InteractiveShape ( pathData ) . fill ( Color ( white : 0.15 ) ) ) // filling the shapes
                    . shadow ( color : clickedPath == pathData ? . black : . clear , radius : 5 , y : 1 ) // for depth

                    . onTapGesture {
                        clickedPath = pathData
                    }
                    . zIndex ( clickedPath == pathData ? 2 : 1 ) // this is REQUIRED because InteractiveShapes overlap, resulting in an ugly appearance
                    . animation ( . easeInOut ( duration : 0.3 ) , value : clickedPath )
            }
        }
    }
}