android_打造通用svg地图自定义组件
一.地图svg数据准备
这里笔者已经整理了云南省16个地州、129个县的svg path数据,如果你要绘制的是其他省份,甚至是中国地图,那么可以从下面这个网站上去拿,至于怎么转换成android中能够使用的数据格式,后面会做详细说明,先说句不用客气哈😄:
/tools/atlas/index.html#&lat=25.249702292968653&lng=101.86055250000003&zoom=6.5
二.从地图svg文件中提取path数据,拼接json数据
先声明一下,这里在做转换的时候,笔者没有找到更好的方法,并且也试过code了一下,希望能够实现自动根据viewport去重新计算path,但是最后都以失败告终,所以只能先用android studio将其转成矢量图标的xml文件,然后老老实实复制粘贴,最终整理成json文件
打开上一步中介绍的网址,下载你需要的城市的svg文件,这里还是以云南省为例,以下是下载好的svg文件的内容:
<svg xmlns="/2000/svg" pointer-events="none" class="leaflet-zoom-animated" width="1075" height="762" viewBox="-90 -63 1075 762" style="transform: translate3d(-90px, -63px, 0px);"><g><path class="leaflet-interactive" stroke="black" stroke-opacity="1" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="#fff" fill-opacity="0.2" fill-rule="evenodd" d="M528 229L527 226L530 226L528 223L531 223L534 218L538 214L539 215L542 206L545 208L546 207L546 209L553 216L554 214L557 214L556 212L559 210L561 205L568 208L572 213L576 213L579 211L580 213L582 211L585 214L594 208L599 209L602 205L602 199L605 198L603 188L605 187L603 187L601 183L604 180L602 177L600 178L598 174L591 174L590 177L586 180L586 182L572 186L563 180L559 175L565 172L565 169L563 167L565 167L566 165L563 163L563 161L558 161L556 151L560 150L565 145L562 144L559 146L553 144L550 146L548 145L543 147L541 145L540 146L538 143L538 148L535 151L537 152L539 161L532 167L529 164L519 174L522 179L525 180L522 184L522 188L518 193L516 193L512 197L513 200L510 200L505 209L502 208L499 210L497 208L494 214L496 222L494 228L495 234L501 246L502 254L499 255L500 261L498 263L495 263L494 261L494 263L487 267L487 269L482 267L483 264L480 261L465 269L458 277L455 275L452 276L451 274L447 278L445 272L442 269L435 266L436 264L438 264L438 260L432 255L429 255L429 253L427 252L427 250L431 246L429 245L432 241L430 240L429 243L426 243L425 241L427 237L420 233L421 231L415 228L416 220L414 218L411 218L409 213L410 211L408 211L406 205L404 206L405 202L401 197L401 194L399 194L395 188L395 183L392 182L388 188L386 187L386 185L383 185L381 189L378 192L377 191L377 184L375 185L371 182L372 181L367 176L364 170L365 168L370 167L372 165L370 163L371 162L366 159L367 156L363 154L363 151L350 139L350 134L346 136L346 139L343 141L342 145L336 150L336 155L338 157L336 161L337 164L335 167L336 170L328 161L325 156L326 147L324 145L324 140L322 136L324 129L322 117L323 114L316 116L318 122L314 130L316 135L311 136L307 126L304 128L302 127L301 129L303 134L303 140L299 142L301 148L300 151L301 153L303 153L306 159L304 163L305 166L302 167L301 169L299 168L290 172L289 165L285 157L283 159L282 161L284 165L280 167L278 179L279 181L281 181L280 186L282 187L282 192L285 196L286 201L289 203L290 201L292 201L292 195L294 197L297 196L301 200L302 199L304 202L303 207L306 212L305 225L307 226L307 228L305 229L307 235L305 237L307 239L306 244L308 248L306 260L303 264L303 268L305 268L306 271L302 275L302 273L298 274L300 281L302 282L304 287L301 290L296 288L293 295L291 296L291 299L286 303L281 299L281 302L278 305L279 310L270 319L268 320L266 317L260 326L260 335L263 338L258 338L256 341L251 343L251 358L257 358L259 362L257 366L262 367L260 369L260 375L251 383L256 388L275 376L293 374L297 374L299 376L312 373L313 375L305 382L303 382L303 390L308 391L312 400L309 403L310 407L312 406L314 409L314 412L312 414L315 415L313 421L320 422L322 426L329 426L332 425L332 423L341 426L343 434L342 435L338 433L337 434L339 438L337 438L335 442L332 442L335 454L329 460L330 461L328 467L325 471L328 474L334 475L339 473L344 475L347 474L349 477L362 477L362 493L371 496L368 499L371 505L371 503L376 505L379 502L382 502L385 506L392 505L399 500L403 495L409 494L413 490L416 497L415 501L417 501L419 504L415 508L417 512L420 514L419 516L422 519L433 516L436 517L436 520L438 519L443 521L445 518L447 518L447 516L442 512L442 505L444 503L443 500L445 500L446 498L443 492L444 488L442 487L440 482L436 481L436 471L434 468L434 466L438 464L439 456L443 454L448 460L450 460L450 458L456 457L460 458L461 460L462 458L466 459L469 452L473 448L472 446L477 441L480 444L482 443L493 449L495 453L501 458L508 452L507 449L513 446L514 439L520 442L519 445L523 450L526 446L526 443L529 440L537 449L542 453L546 454L547 443L550 439L551 440L557 438L558 443L562 445L571 438L579 439L580 435L584 434L582 426L587 421L588 422L595 417L602 417L605 411L610 416L611 415L615 421L615 418L618 414L623 414L620 410L623 410L629 404L636 406L636 408L642 402L642 390L645 389L645 386L643 386L640 380L641 379L636 374L633 374L632 377L630 377L629 379L627 379L627 377L623 377L620 379L618 373L614 375L614 379L609 378L605 374L603 376L604 377L601 377L599 372L601 372L602 370L600 370L598 366L600 364L593 358L587 360L580 357L577 359L577 364L573 361L573 359L571 359L567 348L572 336L578 330L577 328L573 327L576 327L579 322L578 320L582 322L583 318L575 316L575 312L571 310L571 304L565 307L565 302L559 298L560 293L562 293L565 289L564 285L567 279L566 276L569 275L570 267L576 261L572 251L566 250L564 244L559 249L552 247L548 251L548 254L539 254L534 250L535 243L532 241L533 237L535 236L535 232L532 227L530 226L529 228z"/><path class="leaflet-interactive" stroke="#333" stroke-opacity="1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1,6" fill="#fff" fill-opacity="0.2" fill-rule="evenodd" d="M505 355L510 355L512 353L511 351L514 348L522 353L520 355L524 354L528 351L530 337L527 336L526 338L525 337L523 339L520 336L521 330L518 328L522 325L521 321L519 321L518 323L514 323L511 319L514 315L512 313L517 308L516 307L518 306L519 302L524 302L522 297L525 291L521 289L521 287L513 287L514 284L512 280L514 277L511 274L511 271L507 269L504 263L502 252L502 254L499 255L500 261L498 263L495 263L494 261L494 263L487 267L487 269L482 267L483 264L480 261L465 269L465 272L470 276L470 294L472 295L471 299L475 301L476 308L472 312L470 312L471 317L473 316L473 320L470 323L471 325L465 329L463 327L462 328L463 331L465 330L464 335L466 334L468 338L466 348L468 351L464 355L468 360L471 360L471 356L477 354L479 355L480 353L482 355L485 355L485 357L491 355L490 354L493 345L492 343L496 342L496 338L500 335L500 341L501 343L503 343L501 348L502 352L505 352z"/><path class="leaflet-interactive" stroke="#333" stroke-opacity="1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1,6" fill="#fff" fill-opacity="0.2" fill-rule="evenodd" d="M517 243L518 244L510 243L511 245L508 249L503 249L502 253L505 267L508 270L511 270L510 272L513 277L512 280L514 283L513 287L520 287L525 291L523 292L524 294L522 297L524 301L519 301L519 306L516 306L517 308L512 313L514 315L511 319L514 322L518 323L518 321L521 321L522 325L518 327L521 330L520 336L522 339L525 337L526 338L526 336L529 336L530 344L534 342L532 345L534 346L536 344L540 347L544 347L544 351L547 356L546 358L553 358L556 361L556 363L564 361L564 359L566 358L569 359L571 357L567 348L572 336L578 330L577 328L573 327L576 327L579 322L578 320L582 322L583 318L575 316L575 312L571 310L571 304L565 307L565 302L559 298L560 293L562 293L565 289L564 285L567 279L566 276L569 275L570 267L576 261L572 251L566 250L564 244L559 249L552 247L548 251L548 254L539 254L534 250L535 243L532 241L532 239L535 236L535 232L533 228L530 226L527 230L519 229L520 232L517 237L517 241zM517 242L518 243z"/><path class="leaflet-interactive" stroke="#333" stroke-opacity="1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1,6" fill="#fff" fill-opacity="0.2" fill-rule="evenodd" d="M464 335L460 333L458 336L454 337L455 338L452 342L452 346L450 349L452 351L449 352L452 357L455 357L454 360L456 362L454 363L455 364L453 367L446 368L446 365L445 366L439 362L435 368L432 369L430 368L431 367L429 361L427 360L425 363L421 365L429 381L433 384L431 385L430 388L427 389L427 392L430 394L430 392L433 391L435 393L433 396L434 397L440 397L439 400L445 408L443 410L448 414L450 412L460 414L463 409L469 409L469 407L471 406L469 401L463 395L461 395L461 393L463 392L460 389L461 387L467 384L464 380L468 379L469 376L474 378L477 377L478 379L482 378L484 380L484 385L488 379L492 378L494 381L497 377L500 379L506 372L506 365L504 363L504 360L502 359L505 357L505 352L502 353L501 348L503 343L500 342L500 335L496 338L496 342L492 343L493 345L490 351L491 355L486 357L482 356L480 353L479 355L477 354L471 356L471 360L468 361L463 355L468 351L466 348L468 343L468 338L466 334z"/><path class="leaflet-interactive" stroke="#333" stroke-opacity="1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1,6" fill="#fff" fill-opacity="0.2" fill-rule="evenodd" d="M313 298L312 303L308 303L306 301L307 297L305 288L304 287L301 290L296 288L289 301L286 303L281 299L281 302L278 305L279 310L276 313L277 316L281 318L280 322L284 326L282 332L284 334L287 332L287 335L292 335L292 337L295 335L296 336L297 339L291 342L293 344L293 347L291 348L294 351L294 353L300 351L304 352L303 360L305 361L305 370L303 371L303 374L311 374L313 371L321 368L322 369L330 358L333 359L334 368L337 369L340 367L340 364L343 364L345 360L349 357L347 351L355 344L353 341L356 339L354 338L357 335L356 334L360 330L365 328L365 325L363 325L360 322L360 320L356 322L357 323L355 325L349 328L341 324L331 313L331 309L333 310L334 307L332 305L333 304L329 303L322 307L320 302L318 302L318 299L314 299z"/><path class="leaflet-interactive" stroke="#333" stroke-opacity="1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1,6" fill="#fff" fill-opacity="0.2" fill-rule="evenodd" d="M502 252L503 249L508 249L510 247L510 243L518 243L517 238L520 232L519 229L527 230L527 226L530 226L528 223L531 223L534 218L538 214L539 215L542 206L545 208L546 207L546 209L553 216L554 214L557 214L556 212L559 210L561 205L568 208L572 213L576 213L579 211L580 213L582 211L585 214L594 208L599 209L603 202L602 199L605 198L603 188L605 187L603 187L601 183L604 180L602 177L600 178L598 174L594 173L591 174L590 177L586 180L587 181L584 183L579 183L572 186L569 183L568 184L559 175L565 172L565 169L563 167L565 167L566 165L563 163L563 161L558 161L556 151L560 150L565 145L562 144L559 146L553 144L550 146L548 145L543 147L541 145L540 146L538 143L538 148L535 151L537 152L539 161L532 167L529 164L521 171L519 174L522 179L525 180L522 184L522 188L518 193L516 193L512 197L513 200L510 200L505 209L502 208L499 210L497 208L494 214L496 222L494 226L495 234L501 246L501 252z"/><path class="leaflet-interactive" stroke="#333" stroke-opacity="1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1,6" fill="#fff" fill-opacity="0.2" fill-rule="evenodd" d="M405 271L414 263L429 259L430 255L427 252L427 250L431 246L429 245L432 241L430 240L429 243L426 243L425 241L427 237L420 233L421 231L415 228L416 220L414 218L411 218L409 213L410 211L408 211L406 205L404 206L405 202L401 197L401 194L399 194L395 188L395 183L392 182L388 188L386 187L386 185L383 185L381 189L378 192L377 191L377 195L371 205L374 213L366 221L366 231L362 236L361 229L347 213L348 211L343 205L343 200L340 201L340 203L336 205L338 211L336 215L337 217L335 218L338 223L337 224L340 232L341 234L343 234L345 243L350 248L359 247L363 250L366 250L366 247L370 249L372 245L374 245L374 247L379 248L382 251L382 253L384 253L383 254L385 255L383 255L383 257L386 259L381 265L383 269L382 273L385 274L385 278L389 279L389 281L394 280L393 275L395 272L401 270L404 272z"/><path class="leaflet-interactive" stroke="#333" stroke-opacity="1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1,6" fill="#fff" fill-opacity="0.2" fill-rule="evenodd" d="M421 366L412 358L410 352L406 347L406 344L400 344L392 339L392 343L389 345L382 345L388 357L386 359L386 376L380 378L382 387L379 388L379 393L383 397L380 400L376 398L372 400L368 409L367 418L363 419L358 417L354 420L348 418L346 421L347 423L342 423L341 430L343 434L342 435L338 433L337 434L339 438L337 438L335 442L332 442L335 454L329 460L330 461L328 467L325 471L328 474L334 475L339 473L344 475L347 474L349 477L362 477L367 467L370 468L375 465L379 467L382 458L387 456L391 457L391 455L395 454L398 451L402 451L404 453L410 450L413 452L423 453L429 450L434 463L438 463L439 456L443 454L448 460L450 460L450 458L456 457L460 458L461 460L462 458L466 459L469 452L467 451L467 449L458 447L454 440L449 440L445 436L448 433L447 431L449 429L455 431L457 425L453 421L451 423L446 421L446 418L449 417L447 413L443 410L445 408L441 404L442 402L439 400L441 397L437 399L435 396L434 397L433 394L435 393L433 391L431 391L430 394L427 393L427 389L433 384L427 378L423 368z"/><path class="leaflet-interactive" stroke="#333" stroke-opacity="1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1,6" fill="#fff" fill-opacity="0.2" fill-rule="evenodd" d="M382 345L378 342L372 343L369 345L369 347L367 345L369 344L373 332L368 331L364 333L364 329L360 330L356 333L357 335L354 338L356 339L354 339L353 341L355 344L348 351L348 358L345 360L343 364L340 364L339 368L334 368L333 359L331 358L322 369L321 368L313 371L313 375L305 382L303 382L303 390L308 391L312 400L309 403L310 407L312 406L314 409L314 412L312 414L315 415L313 421L320 422L322 426L329 426L332 425L332 423L341 426L345 422L346 423L348 419L351 418L354 420L358 417L362 419L367 418L368 409L370 407L372 400L374 400L375 398L380 400L383 397L379 393L379 387L382 387L380 378L386 376L386 359L388 357L382 346z"/><path class="leaflet-interactive" stroke="#333" stroke-opacity="1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1,6" fill="#fff" fill-opacity="0.2" fill-rule="evenodd" d="M464 335L465 331L463 331L462 329L463 326L465 328L470 327L470 323L473 318L473 316L471 317L470 312L474 311L476 308L475 301L471 299L472 295L470 294L470 277L465 272L465 270L458 277L455 275L452 276L451 274L447 278L445 272L442 269L435 266L439 262L432 255L429 255L430 259L414 263L408 267L405 271L406 278L404 280L407 283L404 289L407 293L406 297L408 297L409 301L406 304L406 308L410 312L407 314L408 317L404 318L401 316L400 321L399 320L397 323L397 328L399 330L396 332L398 334L398 342L400 344L405 344L412 357L420 366L425 363L427 359L429 361L431 369L435 368L438 362L445 366L446 365L446 368L450 368L454 366L454 363L456 362L454 360L455 357L451 356L449 352L452 351L451 345L455 338L454 337L458 337L460 334L464 335z"/><path class="leaflet-interactive" stroke="#333" stroke-opacity="1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1,6" fill="#fff" fill-opacity="0.2" fill-rule="evenodd" d="M505 355L505 357L502 359L506 365L505 368L507 370L500 379L498 377L494 381L492 379L488 379L484 385L484 380L482 378L478 379L477 377L475 378L469 376L468 379L464 380L466 384L460 389L463 392L461 393L461 395L463 395L469 401L471 406L469 407L469 409L464 409L461 411L460 414L455 414L453 412L448 413L449 416L446 418L446 421L449 423L451 423L452 421L454 422L457 425L457 427L455 431L450 429L447 435L445 436L448 440L451 439L455 441L458 447L467 449L467 451L469 452L473 448L472 446L477 441L480 444L482 443L493 449L495 453L501 458L508 452L507 449L513 446L514 439L520 442L519 445L523 450L526 446L526 443L529 440L537 449L542 453L546 454L547 443L550 439L551 440L558 437L555 436L554 438L551 435L548 439L546 439L547 440L543 445L540 445L540 439L543 430L541 420L542 417L539 413L536 412L536 406L533 405L533 403L529 405L526 401L528 401L530 398L528 393L529 389L532 386L526 378L526 376L531 370L535 370L539 362L546 358L547 354L545 349L544 347L540 347L537 344L534 346L532 345L534 342L531 344L530 343L528 351L524 354L521 355L522 354L514 348L511 350L511 355L506 354zM502 378L501 379z"/><path class="leaflet-interactive" stroke="#333" stroke-opacity="1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1,6" fill="#fff" fill-opacity="0.2" fill-rule="evenodd" d="M571 357L569 359L566 358L564 359L564 361L558 363L555 362L556 361L554 358L544 358L539 362L535 370L531 370L526 376L526 378L532 384L528 393L530 398L528 401L526 401L529 405L532 403L533 405L535 405L537 412L542 417L541 420L543 432L541 434L540 439L540 444L542 445L545 444L547 440L546 439L548 439L551 435L554 438L555 436L557 436L558 443L562 445L571 438L579 439L580 435L584 434L582 426L587 421L588 422L595 417L602 417L605 411L610 416L611 415L615 421L615 418L618 414L623 414L620 410L623 410L629 404L636 406L636 408L642 402L642 390L645 389L645 386L643 386L640 380L641 379L636 374L633 374L632 377L630 377L629 379L627 379L627 377L623 377L620 379L618 373L614 375L614 379L609 378L605 374L603 376L604 377L601 377L599 372L601 372L602 370L600 370L598 366L600 364L593 358L587 360L580 357L577 359L577 364L573 361L573 359L571 359z"/><path class="leaflet-interactive" stroke="#333" stroke-opacity="1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1,6" fill="#fff" fill-opacity="0.2" fill-rule="evenodd" d="M438 463L434 463L429 450L423 453L418 453L410 450L408 450L408 452L403 453L402 450L400 450L395 454L391 455L391 457L387 456L382 458L379 467L375 465L372 465L372 467L370 468L368 467L362 477L362 493L371 496L368 499L371 505L371 503L376 505L379 502L382 502L385 506L389 506L394 504L403 495L409 494L413 490L416 497L415 501L417 501L419 504L415 508L417 512L420 514L419 516L422 519L433 516L436 517L436 520L438 519L443 521L445 518L447 518L447 516L442 512L442 505L444 503L443 500L445 500L446 498L443 492L444 488L442 487L440 482L436 481L436 471L434 466L438 464z"/><path class="leaflet-interactive" stroke="#333" stroke-opacity="1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1,6" fill="#fff" fill-opacity="0.2" fill-rule="evenodd" d="M313 298L318 299L318 302L320 302L322 307L328 303L333 304L332 305L334 307L333 310L331 309L331 313L341 324L349 328L355 326L357 323L356 322L360 320L360 322L363 325L365 325L364 333L366 333L367 331L372 332L369 344L367 345L368 347L372 343L377 342L382 345L389 345L392 343L392 339L397 341L398 334L396 332L399 330L397 328L397 323L399 320L400 321L401 316L404 318L408 318L407 315L410 313L410 310L406 308L406 304L407 302L409 302L408 297L406 297L407 294L404 289L407 283L404 280L406 278L405 272L398 270L393 275L394 280L389 281L389 279L385 279L385 275L384 273L382 273L382 265L384 260L386 260L383 257L383 255L385 255L383 254L384 253L382 253L382 251L374 247L374 245L372 245L370 249L368 249L367 247L366 250L361 249L359 247L350 248L347 245L346 248L340 251L340 260L335 262L331 266L332 267L325 272L327 274L320 272L318 274L318 282L322 284L324 291L319 289L318 291L320 292L318 294L313 291L311 292L313 293L312 295z"/><path class="leaflet-interactive" stroke="#333" stroke-opacity="1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1,6" fill="#fff" fill-opacity="0.2" fill-rule="evenodd" d="M276 313L268 320L266 317L260 326L260 335L263 338L258 338L256 341L251 343L251 358L257 358L259 362L257 366L262 367L260 369L260 375L251 383L256 388L275 376L293 374L297 374L299 376L304 374L304 352L300 351L295 353L293 351L291 348L293 347L293 344L291 342L297 340L296 337L295 335L292 337L292 335L287 335L287 333L284 334L282 332L284 325L280 322L281 318L277 314z"/><path class="leaflet-interactive" stroke="#333" stroke-opacity="1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1,6" fill="#fff" fill-opacity="0.2" fill-rule="evenodd" d="M347 245L343 238L344 236L339 231L335 232L337 233L335 234L331 226L329 225L330 228L328 230L320 230L317 228L319 227L317 227L316 225L318 215L317 212L315 212L313 209L314 197L310 193L312 191L311 186L308 185L308 176L305 173L303 168L304 167L290 172L289 165L285 157L282 161L284 165L280 167L279 170L278 179L279 181L281 181L280 186L282 187L282 192L285 196L286 201L289 203L290 201L292 201L292 195L294 197L297 196L301 200L302 199L304 202L303 207L306 212L305 225L307 226L307 228L305 229L307 235L305 237L307 239L306 244L308 248L306 260L303 264L303 268L305 268L306 271L302 275L302 273L298 274L300 281L304 285L307 296L306 301L308 303L312 303L312 291L318 294L320 292L318 291L319 290L324 291L321 282L319 282L318 280L318 274L320 272L327 274L325 272L332 268L332 264L337 262L341 258L340 251L344 249L346 246z"/><path class="leaflet-interactive" stroke="#333" stroke-opacity="1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1,6" fill="#fff" fill-opacity="0.2" fill-rule="evenodd" d="M377 191L377 184L375 185L371 182L372 181L367 176L364 170L365 168L370 167L372 165L370 163L371 162L366 159L367 156L363 154L363 151L350 139L350 134L346 136L346 139L343 141L342 145L336 150L336 155L338 157L336 161L337 164L335 167L336 170L325 156L326 147L324 145L324 140L322 136L324 129L322 117L323 114L316 116L318 122L314 130L316 135L311 136L308 127L302 127L301 131L303 134L303 140L299 142L301 148L300 151L301 153L303 153L306 159L304 163L305 166L303 168L305 173L308 175L308 184L309 186L311 186L312 190L310 192L314 197L312 200L314 205L313 209L314 212L318 214L316 220L316 225L318 229L327 230L330 228L329 226L331 226L335 234L337 233L335 232L337 230L340 231L335 218L337 217L336 215L338 211L336 205L340 204L340 201L343 200L343 204L348 211L347 213L359 226L362 231L362 235L365 234L367 228L366 221L374 213L371 205L377 195L376 193z"/></g></svg>
通过android studio将svg文件导入成矢量图标,千言万语不如来两张图:
最后会在drawable资源文件目录下生成矢量图标的xml文件:
<vector android:autoMirrored="true" android:height="762dp"android:viewportHeight="762" android:viewportWidth="1075"android:width="1075dp" xmlns:android="/apk/res/android"><path android:fillAlpha="0.2" android:fillColor="#fff"android:fillType="evenOdd"android:pathData="M618,292L617,289L620,289L618,286L621,286L624,281L628,277L629,278L632,269L635,271L636,270L636,272L643,279L644,277L647,277L646,275L649,273L651,268L658,271L662,276L666,276L669,274L670,276L672,274L675,277L684,271L689,272L692,268L692,262L695,261L693,251L695,250L693,250L691,246L694,243L692,240L690,241L688,237L681,237L680,240L676,243L676,245L662,249L653,243L649,238L655,235L655,232L653,230L655,230L656,228L653,226L653,224L648,224L646,214L650,213L655,208L652,207L649,209L643,207L640,209L638,208L633,210L631,208L630,209L628,206L628,211L625,214L627,215L629,224L622,230L619,227L609,237L612,242L615,243L612,247L612,251L608,256L606,256L602,260L603,263L600,263L595,272L592,271L589,273L587,271L584,277L586,285L584,291L585,297L591,309L592,317L589,318L590,324L588,326L585,326L584,324L584,326L577,330L577,332L572,330L573,327L570,324L555,332L548,340L545,338L542,339L541,337L537,341L535,335L532,332L525,329L526,327L528,327L528,323L522,318L519,318L519,316L517,315L517,313L521,309L519,308L522,304L520,303L519,306L516,306L515,304L517,300L510,296L511,294L505,291L506,283L504,281L501,281L499,276L500,274L498,274L496,268L494,269L495,265L491,260L491,257L489,257L485,251L485,246L482,245L478,251L476,250L476,248L473,248L471,252L468,255L467,254L467,247L465,248L461,245L462,244L457,239L454,233L455,231L460,230L462,228L460,226L461,225L456,222L457,219L453,217L453,214L440,202L440,197L436,199L436,202L433,204L432,208L426,213L426,218L428,220L426,224L427,227L425,230L426,233L418,224L415,219L416,210L414,208L414,203L412,199L414,192L412,180L413,177L406,179L408,185L404,193L406,198L401,199L397,189L394,191L392,190L391,192L393,197L393,203L389,205L391,211L390,214L391,216L393,216L396,222L394,226L395,229L392,230L391,232L389,231L380,235L379,228L375,220L373,222L372,224L374,228L370,230L368,242L369,244L371,244L370,249L372,250L372,255L375,259L376,264L379,266L380,264L382,264L382,258L384,260L387,259L391,263L392,262L394,265L393,270L396,275L395,288L397,289L397,291L395,292L397,298L395,300L397,302L396,307L398,311L396,323L393,327L393,331L395,331L396,334L392,338L392,336L388,337L390,344L392,345L394,350L391,353L386,351L383,358L381,359L381,362L376,366L371,362L371,365L368,368L369,373L360,382L358,383L356,380L350,389L350,398L353,401L348,401L346,404L341,406L341,421L347,421L349,425L347,429L352,430L350,432L350,438L341,446L346,451L365,439L383,437L387,437L389,439L402,436L403,438L395,445L393,445L393,453L398,454L402,463L399,466L400,470L402,469L404,472L404,475L402,477L405,478L403,484L410,485L412,489L419,489L422,488L422,486L431,489L433,497L432,498L428,496L427,497L429,501L427,501L425,505L422,505L425,517L419,523L420,524L418,530L415,534L418,537L424,538L429,536L434,538L437,537L439,540L452,540L452,556L461,559L458,562L461,568L461,566L466,568L469,565L472,565L475,569L482,568L489,563L493,558L499,557L503,553L506,560L505,564L507,564L509,567L505,571L507,575L510,577L509,579L512,582L523,579L526,580L526,583L528,582L533,584L535,581L537,581L537,579L532,575L532,568L534,566L533,563L535,563L536,561L533,555L534,551L532,550L530,545L526,544L526,534L524,531L524,529L528,527L529,519L533,517L538,523L540,523L540,521L546,520L550,521L551,523L552,521L556,522L559,515L563,511L562,509L567,504L570,507L572,506L583,512L585,516L591,521L598,515L597,512L603,509L604,502L610,505L609,508L613,513L616,509L616,506L619,503L627,512L632,516L636,517L637,506L640,502L641,503L647,501L648,506L652,508L661,501L669,502L670,498L674,497L672,489L677,484L678,485L685,480L692,480L695,474L700,479L701,478L705,484L705,481L708,477L713,477L710,473L713,473L719,467L726,469L726,471L732,465L732,453L735,452L735,449L733,449L730,443L731,442L726,437L723,437L722,440L720,440L719,442L717,442L717,440L713,440L710,442L708,436L704,438L704,442L699,441L695,437L693,439L694,440L691,440L689,435L691,435L692,433L690,433L688,429L690,427L683,421L677,423L670,420L667,422L667,427L663,424L663,422L661,422L657,411L662,399L668,393L667,391L663,390L666,390L669,385L668,383L672,385L673,381L665,379L665,375L661,373L661,367L655,370L655,365L649,361L650,356L652,356L655,352L654,348L657,342L656,339L659,338L660,330L666,324L662,314L656,313L654,307L649,312L642,310L638,314L638,317L629,317L624,313L625,306L622,304L623,300L625,299L625,295L622,290L620,289L619,291z"android:strokeColor="#000000" android:strokeLineCap="round"android:strokeLineJoin="round" android:strokeWidth="1"/><path android:fillAlpha="0.2" android:fillColor="#fff"android:fillType="evenOdd"android:pathData="M595,418L600,418L602,416L601,414L604,411L612,416L610,418L614,417L618,414L620,400L617,399L616,401L615,400L613,402L610,399L611,393L608,391L612,388L611,384L609,384L608,386L604,386L601,382L604,378L602,376L607,371L606,370L608,369L609,365L614,365L612,360L615,354L611,352L611,350L603,350L604,347L602,343L604,340L601,337L601,334L597,332L594,326L592,315L592,317L589,318L590,324L588,326L585,326L584,324L584,326L577,330L577,332L572,330L573,327L570,324L555,332L555,335L560,339L560,357L562,358L561,362L565,364L566,371L562,375L560,375L561,380L563,379L563,383L560,386L561,388L555,392L553,390L552,391L553,394L555,393L554,398L556,397L558,401L556,411L558,414L554,418L558,423L561,423L561,419L567,417L569,418L570,416L572,418L575,418L575,420L581,418L580,417L583,408L582,406L586,405L586,401L590,398L590,404L591,406L593,406L591,411L592,415L595,415z"android:strokeColor="#333" android:strokeLineCap="round"android:strokeLineJoin="round" android:strokeWidth="0.5"/><path android:fillAlpha="0.2" android:fillColor="#fff"android:fillType="evenOdd"android:pathData="M607,306L608,307L600,306L601,308L598,312L593,312L592,316L595,330L598,333L601,333L600,335L603,340L602,343L604,346L603,350L610,350L615,354L613,355L614,357L612,360L614,364L609,364L609,369L606,369L607,371L602,376L604,378L601,382L604,385L608,386L608,384L611,384L612,388L608,390L611,393L610,399L612,402L615,400L616,401L616,399L619,399L620,407L624,405L622,408L624,409L626,407L630,410L634,410L634,414L637,419L636,421L643,421L646,424L646,426L654,424L654,422L656,421L659,422L661,420L657,411L662,399L668,393L667,391L663,390L666,390L669,385L668,383L672,385L673,381L665,379L665,375L661,373L661,367L655,370L655,365L649,361L650,356L652,356L655,352L654,348L657,342L656,339L659,338L660,330L666,324L662,314L656,313L654,307L649,312L642,310L638,314L638,317L629,317L624,313L625,306L622,304L622,302L625,299L625,295L623,291L620,289L617,293L609,292L610,295L607,300L607,304zM607,305L608,306z"android:strokeColor="#333" android:strokeLineCap="round"android:strokeLineJoin="round" android:strokeWidth="0.5"/><path android:fillAlpha="0.2" android:fillColor="#fff"android:fillType="evenOdd"android:pathData="M554,398L550,396L548,399L544,400L545,401L542,405L542,409L540,412L542,414L539,415L542,420L545,420L544,423L546,425L544,426L545,427L543,430L536,431L536,428L535,429L529,425L525,431L522,432L520,431L521,430L519,424L517,423L515,426L511,428L519,444L523,447L521,448L520,451L517,452L517,455L520,457L520,455L523,454L525,456L523,459L524,460L530,460L529,463L535,471L533,473L538,477L540,475L550,477L553,472L559,472L559,470L561,469L559,464L553,458L551,458L551,456L553,455L550,452L551,450L557,447L554,443L558,442L559,439L564,441L567,440L568,442L572,441L574,443L574,448L578,442L582,441L584,444L587,440L590,442L596,435L596,428L594,426L594,423L592,422L595,420L595,415L592,416L591,411L593,406L590,405L590,398L586,401L586,405L582,406L583,408L580,414L581,418L576,420L572,419L570,416L569,418L567,417L561,419L561,423L558,424L553,418L558,414L556,411L558,406L558,401L556,397z"android:strokeColor="#333" android:strokeLineCap="round"android:strokeLineJoin="round" android:strokeWidth="0.5"/><path android:fillAlpha="0.2" android:fillColor="#fff"android:fillType="evenOdd"android:pathData="M403,361L402,366L398,366L396,364L397,360L395,351L394,350L391,353L386,351L379,364L376,366L371,362L371,365L368,368L369,373L366,376L367,379L371,381L370,385L374,389L372,395L374,397L377,395L377,398L382,398L382,400L385,398L386,399L387,402L381,405L383,407L383,410L381,411L384,414L384,416L390,414L394,415L393,423L395,424L395,433L393,434L393,437L401,437L403,434L411,431L412,432L420,421L423,422L424,431L427,432L430,430L430,427L433,427L435,423L439,420L437,414L445,407L443,404L446,402L444,401L447,398L446,397L450,393L455,391L455,388L453,388L450,385L450,383L446,385L447,386L445,388L439,391L431,387L421,376L421,372L423,373L424,370L422,368L423,367L419,366L412,370L410,365L408,365L408,362L404,362z"android:strokeColor="#333" android:strokeLineCap="round"android:strokeLineJoin="round" android:strokeWidth="0.5"/><path android:fillAlpha="0.2" android:fillColor="#fff"android:fillType="evenOdd"android:pathData="M592,315L593,312L598,312L600,310L600,306L608,306L607,301L610,295L609,292L617,293L617,289L620,289L618,286L621,286L624,281L628,277L629,278L632,269L635,271L636,270L636,272L643,279L644,277L647,277L646,275L649,273L651,268L658,271L662,276L666,276L669,274L670,276L672,274L675,277L684,271L689,272L693,265L692,262L695,261L693,251L695,250L693,250L691,246L694,243L692,240L690,241L688,237L684,236L681,237L680,240L676,243L677,244L674,246L669,246L662,249L659,246L658,247L649,238L655,235L655,232L653,230L655,230L656,228L653,226L653,224L648,224L646,214L650,213L655,208L652,207L649,209L643,207L640,209L638,208L633,210L631,208L630,209L628,206L628,211L625,214L627,215L629,224L622,230L619,227L611,234L609,237L612,242L615,243L612,247L612,251L608,256L606,256L602,260L603,263L600,263L595,272L592,271L589,273L587,271L584,277L586,285L584,289L585,297L591,309L591,315z"android:strokeColor="#333" android:strokeLineCap="round"android:strokeLineJoin="round" android:strokeWidth="0.5"/><path android:fillAlpha="0.2" android:fillColor="#fff"android:fillType="evenOdd"android:pathData="M495,334L504,326L519,322L520,318L517,315L517,313L521,309L519,308L522,304L520,303L519,306L516,306L515,304L517,300L510,296L511,294L505,291L506,283L504,281L501,281L499,276L500,274L498,274L496,268L494,269L495,265L491,260L491,257L489,257L485,251L485,246L482,245L478,251L476,250L476,248L473,248L471,252L468,255L467,254L467,258L461,268L464,276L456,284L456,294L452,299L451,292L437,276L438,274L433,268L433,263L430,264L430,266L426,268L428,274L426,278L427,280L425,281L428,286L427,287L430,295L431,297L433,297L435,306L440,311L449,310L453,313L456,313L456,310L460,312L462,308L464,308L464,310L469,311L472,314L472,316L474,316L473,317L475,318L473,318L473,320L476,322L471,328L473,332L472,336L475,337L475,341L479,342L479,344L484,343L483,338L485,335L491,333L494,335z"android:strokeColor="#333" android:strokeLineCap="round"android:strokeLineJoin="round" android:strokeWidth="0.5"/><path android:fillAlpha="0.2" android:fillColor="#fff"android:fillType="evenOdd"android:pathData="M511,429L502,421L500,415L496,410L496,407L490,407L482,402L482,406L479,408L472,408L478,420L476,422L476,439L470,441L472,450L469,451L469,456L473,460L470,463L466,461L462,463L458,472L457,481L453,482L448,480L444,483L438,481L436,484L437,486L432,486L431,493L433,497L432,498L428,496L427,497L429,501L427,501L425,505L422,505L425,517L419,523L420,524L418,530L415,534L418,537L424,538L429,536L434,538L437,537L439,540L452,540L457,530L460,531L465,528L469,530L472,521L477,519L481,520L481,518L485,517L488,514L492,514L494,516L500,513L503,515L513,516L519,513L524,526L528,526L529,519L533,517L538,523L540,523L540,521L546,520L550,521L551,523L552,521L556,522L559,515L557,514L557,512L548,510L544,503L539,503L535,499L538,496L537,494L539,492L545,494L547,488L543,484L541,486L536,484L536,481L539,480L537,476L533,473L535,471L531,467L532,465L529,463L531,460L527,462L525,459L524,460L523,457L525,456L523,454L521,454L520,457L517,456L517,452L523,447L517,441L513,431z"android:strokeColor="#333" android:strokeLineCap="round"android:strokeLineJoin="round" android:strokeWidth="0.5"/><path android:fillAlpha="0.2" android:fillColor="#fff"android:fillType="evenOdd"android:pathData="M472,408L468,405L462,406L459,408L459,410L457,408L459,407L463,395L458,394L454,396L454,392L450,393L446,396L447,398L444,401L446,402L444,402L443,404L445,407L438,414L438,421L435,423L433,427L430,427L429,431L424,431L423,422L421,421L412,432L411,431L403,434L403,438L395,445L393,445L393,453L398,454L402,463L399,466L400,470L402,469L404,472L404,475L402,477L405,478L403,484L410,485L412,489L419,489L422,488L422,486L431,489L435,485L436,486L438,482L441,481L444,483L448,480L452,482L457,481L458,472L460,470L462,463L464,463L465,461L470,463L473,460L469,456L469,450L472,450L470,441L476,439L476,422L478,420L472,409z"android:strokeColor="#333" android:strokeLineCap="round"android:strokeLineJoin="round" android:strokeWidth="0.5"/><path android:fillAlpha="0.2" android:fillColor="#fff"android:fillType="evenOdd"android:pathData="M554,398L555,394L553,394L552,392L553,389L555,391L560,390L560,386L563,381L563,379L561,380L560,375L564,374L566,371L565,364L561,362L562,358L560,357L560,340L555,335L555,333L548,340L545,338L542,339L541,337L537,341L535,335L532,332L525,329L529,325L522,318L519,318L520,322L504,326L498,330L495,334L496,341L494,343L497,346L494,352L497,356L496,360L498,360L499,364L496,367L496,371L500,375L497,377L498,380L494,381L491,379L490,384L489,383L487,386L487,391L489,393L486,395L488,397L488,405L490,407L495,407L502,420L510,429L515,426L517,422L519,424L521,432L525,431L528,425L535,429L536,428L536,431L540,431L544,429L544,426L546,425L544,423L545,420L541,419L539,415L542,414L541,408L545,401L544,400L548,400L550,397L554,398z"android:strokeColor="#333" android:strokeLineCap="round"android:strokeLineJoin="round" android:strokeWidth="0.5"/><path android:fillAlpha="0.2" android:fillColor="#fff"android:fillType="evenOdd"android:pathData="M595,418L595,420L592,422L596,428L595,431L597,433L590,442L588,440L584,444L582,442L578,442L574,448L574,443L572,441L568,442L567,440L565,441L559,439L558,442L554,443L556,447L550,452L553,455L551,456L551,458L553,458L559,464L561,469L559,470L559,472L554,472L551,474L550,477L545,477L543,475L538,476L539,479L536,481L536,484L539,486L541,486L542,484L544,485L547,488L547,490L545,494L540,492L537,498L535,499L538,503L541,502L545,504L548,510L557,512L557,514L559,515L563,511L562,509L567,504L570,507L572,506L583,512L585,516L591,521L598,515L597,512L603,509L604,502L610,505L609,508L613,513L616,509L616,506L619,503L627,512L632,516L636,517L637,506L640,502L641,503L648,500L645,499L644,501L641,498L638,502L636,502L637,503L633,508L630,508L630,502L633,493L631,483L632,480L629,476L626,475L626,469L623,468L623,466L619,468L616,464L618,464L620,461L618,456L619,452L622,449L616,441L616,439L621,433L625,433L629,425L636,421L637,417L635,412L634,410L630,410L627,407L624,409L622,408L624,405L621,407L620,406L618,414L614,417L611,418L612,417L604,411L601,413L601,418L596,417zM592,441L591,442z"android:strokeColor="#333" android:strokeLineCap="round"android:strokeLineJoin="round" android:strokeWidth="0.5"/><path android:fillAlpha="0.2" android:fillColor="#fff"android:fillType="evenOdd"android:pathData="M661,420L659,422L656,421L654,422L654,424L648,426L645,425L646,424L644,421L634,421L629,425L625,433L621,433L616,439L616,441L622,447L618,456L620,461L618,464L616,464L619,468L622,466L623,468L625,468L627,475L632,480L631,483L633,495L631,497L630,502L630,507L632,508L635,507L637,503L636,502L638,502L641,498L644,501L645,499L647,499L648,506L652,508L661,501L669,502L670,498L674,497L672,489L677,484L678,485L685,480L692,480L695,474L700,479L701,478L705,484L705,481L708,477L713,477L710,473L713,473L719,467L726,469L726,471L732,465L732,453L735,452L735,449L733,449L730,443L731,442L726,437L723,437L722,440L720,440L719,442L717,442L717,440L713,440L710,442L708,436L704,438L704,442L699,441L695,437L693,439L694,440L691,440L689,435L691,435L692,433L690,433L688,429L690,427L683,421L677,423L670,420L667,422L667,427L663,424L663,422L661,422z"android:strokeColor="#333" android:strokeLineCap="round"android:strokeLineJoin="round" android:strokeWidth="0.5"/><path android:fillAlpha="0.2" android:fillColor="#fff"android:fillType="evenOdd"android:pathData="M528,526L524,526L519,513L513,516L508,516L500,513L498,513L498,515L493,516L492,513L490,513L485,517L481,518L481,520L477,519L472,521L469,530L465,528L462,528L462,530L460,531L458,530L452,540L452,556L461,559L458,562L461,568L461,566L466,568L469,565L472,565L475,569L479,569L484,567L493,558L499,557L503,553L506,560L505,564L507,564L509,567L505,571L507,575L510,577L509,579L512,582L523,579L526,580L526,583L528,582L533,584L535,581L537,581L537,579L532,575L532,568L534,566L533,563L535,563L536,561L533,555L534,551L532,550L530,545L526,544L526,534L524,529L528,527z"android:strokeColor="#333" android:strokeLineCap="round"android:strokeLineJoin="round" android:strokeWidth="0.5"/><path android:fillAlpha="0.2" android:fillColor="#fff"android:fillType="evenOdd"android:pathData="M403,361L408,362L408,365L410,365L412,370L418,366L423,367L422,368L424,370L423,373L421,372L421,376L431,387L439,391L445,389L447,386L446,385L450,383L450,385L453,388L455,388L454,396L456,396L457,394L462,395L459,407L457,408L458,410L462,406L467,405L472,408L479,408L482,406L482,402L487,404L488,397L486,395L489,393L487,391L487,386L489,383L490,384L491,379L494,381L498,381L497,378L500,376L500,373L496,371L496,367L497,365L499,365L498,360L496,360L497,357L494,352L497,346L494,343L496,341L495,335L488,333L483,338L484,343L479,344L479,342L475,342L475,338L474,336L472,336L472,328L474,323L476,323L473,320L473,318L475,318L473,317L474,316L472,316L472,314L464,310L464,308L462,308L460,312L458,312L457,310L456,313L451,312L449,310L440,311L437,308L436,311L430,314L430,323L425,325L421,329L422,330L415,335L417,337L410,335L408,337L408,345L412,347L414,354L409,352L408,354L410,355L408,357L403,354L401,355L403,356L402,358z"android:strokeColor="#333" android:strokeLineCap="round"android:strokeLineJoin="round" android:strokeWidth="0.5"/><path android:fillAlpha="0.2" android:fillColor="#fff"android:fillType="evenOdd"android:pathData="M366,376L358,383L356,380L350,389L350,398L353,401L348,401L346,404L341,406L341,421L347,421L349,425L347,429L352,430L350,432L350,438L341,446L346,451L365,439L383,437L387,437L389,439L394,437L394,415L390,414L385,416L383,414L381,411L383,410L383,407L381,405L387,403L386,400L385,398L382,400L382,398L377,398L377,396L374,397L372,395L374,388L370,385L371,381L367,377z"android:strokeColor="#333" android:strokeLineCap="round"android:strokeLineJoin="round" android:strokeWidth="0.5"/><path android:fillAlpha="0.2" android:fillColor="#fff"android:fillType="evenOdd"android:pathData="M437,308L433,301L434,299L429,294L425,295L427,296L425,297L421,289L419,288L420,291L418,293L410,293L407,291L409,290L407,290L406,288L408,278L407,275L405,275L403,272L404,260L400,256L402,254L401,249L398,248L398,239L395,236L393,231L394,230L380,235L379,228L375,220L372,224L374,228L370,230L369,233L368,242L369,244L371,244L370,249L372,250L372,255L375,259L376,264L379,266L380,264L382,264L382,258L384,260L387,259L391,263L392,262L394,265L393,270L396,275L395,288L397,289L397,291L395,292L397,298L395,300L397,302L396,307L398,311L396,323L393,327L393,331L395,331L396,334L392,338L392,336L388,337L390,344L394,348L397,359L396,364L398,366L402,366L402,354L408,357L410,355L408,354L409,353L414,354L411,345L409,345L408,343L408,337L410,335L417,337L415,335L422,331L422,327L427,325L431,321L430,314L434,312L436,309z"android:strokeColor="#333" android:strokeLineCap="round"android:strokeLineJoin="round" android:strokeWidth="0.5"/><path android:fillAlpha="0.2" android:fillColor="#fff"android:fillType="evenOdd"android:pathData="M467,254L467,247L465,248L461,245L462,244L457,239L454,233L455,231L460,230L462,228L460,226L461,225L456,222L457,219L453,217L453,214L440,202L440,197L436,199L436,202L433,204L432,208L426,213L426,218L428,220L426,224L427,227L425,230L426,233L415,219L416,210L414,208L414,203L412,199L414,192L412,180L413,177L406,179L408,185L404,193L406,198L401,199L398,190L392,190L391,194L393,197L393,203L389,205L391,211L390,214L391,216L393,216L396,222L394,226L395,229L393,231L395,236L398,238L398,247L399,249L401,249L402,253L400,255L404,260L402,263L404,268L403,272L404,275L408,277L406,283L406,288L408,292L417,293L420,291L419,289L421,289L425,297L427,296L425,295L427,293L430,294L425,281L427,280L426,278L428,274L426,268L430,267L430,264L433,263L433,267L438,274L437,276L449,289L452,294L452,298L455,297L457,291L456,284L464,276L461,268L467,258L466,256z"android:strokeColor="#333" android:strokeLineCap="round"android:strokeLineJoin="round" android:strokeWidth="0.5"/></vector>
可以看到里面有一个个的path标签,每个标签中的pathData正是我们需要绘制的每一个地图块的数据
接下来把这个xml里面的每一个path转为json,这里完全手输,让大家见笑了😄:
{"code": 200,"message": "成功","data": {"cityList": [{"fillAlpha": 1.0,"fillColor": "#a398bf","strokeColor": "#ffffff","strokeWidth": 1,"name": "昆明","cabinId": "530100","pathData": "M601,602L599,606L600,607L598,609L599,610L589,618L588,617L590,616L590,614L577,607L577,611L575,610L574,616L566,617L566,613L561,613L561,608L564,600L560,600L561,592L559,588L559,590L554,593L552,597L553,599L550,601L548,600L549,603L546,609L546,617L543,620L542,619L539,621L537,618L534,619L532,618L533,617L531,615L529,617L527,616L526,618L523,617L521,620L520,618L517,622L517,625L513,625L514,624L507,617L513,611L513,591L511,590L511,588L509,589L510,585L509,583L507,583L505,579L507,576L507,578L509,579L516,578L518,574L518,569L521,565L518,561L517,556L522,555L524,553L525,548L523,541L522,542L518,537L519,533L517,531L519,524L515,522L517,507L511,502L509,498L511,495L517,494L520,490L529,487L530,485L535,487L533,493L538,497L541,496L542,492L548,489L551,485L552,487L558,486L558,477L561,476L562,472L563,473L562,474L566,490L565,493L568,493L570,497L571,496L575,499L574,500L578,507L577,519L579,523L580,521L584,522L583,523L588,521L589,524L594,524L594,527L592,529L593,531L590,536L590,538L594,541L590,543L587,543L587,541L585,542L586,548L582,548L581,552L578,554L576,558L578,559L578,564L576,564L575,567L578,568L577,569L579,570L580,573L580,571L585,572L585,570L589,570L588,572L590,575L585,578L589,584L587,590L592,595L594,592L596,593L596,590L600,591L602,600L601,601z"},{"fillAlpha": 1.0,"fillColor": "#d58dc9","strokeColor": "#ffffff","strokeWidth": 1,"name": "曲靖","cabinId": "530300","pathData": "M583,458L584,457L582,456L585,448L584,446L585,447L587,443L587,441L585,440L597,440L604,436L609,444L608,449L605,450L604,454L605,458L608,458L607,466L611,473L628,474L627,471L631,465L645,467L649,460L653,465L652,467L654,470L660,470L660,474L663,475L664,479L666,480L667,484L663,488L661,488L658,493L656,502L657,504L655,506L652,506L653,511L650,518L651,524L647,530L644,528L643,536L644,539L650,541L651,549L652,547L659,545L658,554L663,557L664,562L668,561L670,564L676,564L676,570L675,571L671,567L667,577L663,578L667,579L669,583L667,583L661,591L654,608L656,616L659,620L657,621L657,623L650,623L650,626L637,628L636,627L638,625L634,621L627,624L624,622L625,616L622,612L623,609L621,607L620,608L611,602L609,602L608,604L605,603L607,599L601,602L602,600L600,591L596,590L596,593L594,592L592,595L587,590L589,584L585,579L590,575L589,570L585,569L585,572L580,571L580,573L579,570L577,569L578,568L575,567L576,564L578,564L577,562L579,559L576,558L578,554L581,552L582,548L586,548L585,542L587,541L587,543L590,543L594,541L590,538L594,524L589,524L589,521L585,523L581,521L579,523L577,519L578,508L574,500L575,499L572,496L571,497L568,493L565,493L566,490L562,474L563,467L566,467L566,465L570,467L572,466L574,459L578,458L580,460L582,458L583,460L584,458z"},{"fillAlpha": 1.0,"fillColor": "#e17987","strokeColor": "#ffffff","strokeWidth": 1,"name": "玉溪","cabinId": "530400","pathData": "M561,651L556,649L549,654L548,650L542,652L539,659L537,660L535,657L536,653L534,651L527,651L526,649L522,650L518,647L513,648L516,650L509,652L511,660L505,662L503,665L506,670L504,671L504,675L509,675L517,687L515,694L508,695L506,693L503,701L488,698L486,700L483,697L478,696L478,694L481,693L479,688L477,688L476,686L477,684L475,684L473,681L476,678L474,676L470,679L467,675L464,675L466,672L465,669L461,670L458,673L456,670L456,665L460,665L464,659L456,650L455,644L452,642L452,639L448,631L453,629L455,624L459,626L459,630L463,638L467,636L472,627L481,633L481,631L483,632L482,636L488,636L494,632L496,627L494,624L495,620L492,621L490,618L489,619L489,615L487,613L491,612L490,609L488,608L491,605L490,603L491,599L495,594L494,592L498,592L502,588L502,586L505,587L505,589L511,588L511,590L513,591L513,611L512,614L508,617L508,619L514,624L514,626L516,625L520,618L521,620L523,617L526,618L527,616L529,617L531,615L533,616L532,618L534,619L537,618L539,621L542,619L543,620L544,618L547,617L545,614L549,603L548,600L550,601L553,599L553,593L559,590L559,588L561,592L560,599L564,600L562,603L561,613L566,613L566,617L563,623L565,625L564,629L565,631L566,630L568,637L564,647L561,650z"},{"fillAlpha": 1.0,"fillColor": "#7edee0","strokeColor": "#ffffff","strokeWidth": 1,"name": "保山","cabinId": "530500","pathData": "M294,537L302,538L301,543L305,542L305,547L307,549L309,549L315,544L322,546L324,550L323,553L320,552L319,557L334,574L336,573L346,579L349,578L348,577L350,576L354,576L356,570L361,568L364,576L367,575L368,579L355,587L357,589L353,593L355,595L353,595L351,598L354,601L353,604L351,604L348,609L346,609L343,612L345,622L343,621L339,628L333,631L331,636L324,636L324,628L321,622L318,622L315,629L307,637L306,636L298,640L295,640L292,644L282,645L281,640L283,639L283,627L281,622L284,619L281,613L276,612L268,615L265,608L263,608L266,606L266,602L264,599L269,596L272,597L273,595L271,590L265,591L258,589L258,586L253,588L252,587L251,582L254,577L249,573L249,565L243,560L243,555L247,554L245,546L249,543L248,538L253,539L257,544L258,542L263,540L263,536L266,534L266,530L271,523L278,526L282,522L284,523L283,527L285,528L284,530L286,534L286,543L293,543L293,538z"},{"fillAlpha": 1.0,"fillColor": "#f58758","strokeColor": "#ffffff","strokeWidth": 1,"name": "昭通","cabinId": "530600","pathData": "M562,472L560,469L558,456L551,443L552,439L550,438L553,429L551,418L555,410L558,413L562,410L564,411L568,409L571,401L574,398L577,399L577,395L582,388L584,388L590,382L591,373L595,368L591,368L590,365L586,363L588,358L594,353L595,350L599,348L604,352L614,345L614,339L609,328L612,324L613,318L615,319L615,321L619,321L619,323L627,321L629,323L631,320L638,320L638,318L643,322L647,319L650,321L650,323L648,323L646,326L639,328L639,337L643,344L645,342L648,343L648,346L652,347L653,349L649,352L649,354L652,355L652,358L649,362L642,364L646,365L648,369L656,376L657,375L660,378L664,378L667,375L678,374L686,365L686,362L691,360L699,363L699,367L705,367L706,370L702,375L705,380L708,380L705,382L707,395L702,400L704,402L699,413L698,410L692,409L679,418L676,414L674,416L671,414L662,417L658,415L655,410L650,408L649,406L646,406L644,407L644,410L640,413L640,417L634,420L631,417L632,416L625,413L624,408L620,409L619,407L614,419L610,420L603,430L599,431L601,435L597,435L599,437L597,440L585,440L587,441L587,443L585,447L584,446L585,448L582,456L584,457L584,459L574,459L570,467L566,465L566,467L563,467L563,473z"},{"fillAlpha": 1.0,"fillColor": "#a398bf","strokeColor": "#ffffff","strokeWidth": 1,"name": "丽江","cabinId": "530700","pathData": "M424,499L421,500L418,497L407,504L407,508L409,511L402,512L399,509L397,510L397,503L396,501L393,501L392,498L394,497L391,490L395,483L397,483L393,477L396,476L394,475L394,473L392,473L392,471L389,471L389,467L387,468L388,466L385,466L385,464L381,465L381,461L378,462L376,467L374,468L371,465L369,465L369,469L362,467L360,465L359,467L354,467L352,465L348,467L346,466L346,464L341,461L337,451L338,450L333,443L333,440L329,436L328,431L330,431L327,427L328,425L326,424L328,423L327,419L330,414L327,408L328,405L332,404L333,400L337,398L339,409L344,414L342,416L356,430L356,433L359,434L363,442L362,446L364,449L369,444L371,436L369,431L370,428L381,417L377,405L381,399L381,396L383,396L382,394L385,391L383,389L385,386L387,387L390,385L392,378L394,376L401,381L405,377L406,373L409,372L412,377L411,380L416,389L420,391L419,395L421,394L420,396L424,402L423,406L425,405L431,414L434,425L441,425L439,438L444,440L444,442L447,443L447,446L450,446L456,451L453,456L455,457L455,459L459,459L459,456L463,457L459,461L461,463L460,468L455,469L460,477L459,478L461,479L460,481L452,485L442,485L441,487L438,487L433,490L425,497z"},{"fillAlpha": 1.0,"fillColor": "#d78cc9","strokeColor": "#ffffff","strokeWidth": 1,"name": "普洱","cabinId": "530800","pathData": "M448,633L452,639L452,642L455,644L456,650L464,659L460,665L456,665L456,670L458,673L460,670L464,669L466,672L464,675L467,675L470,679L474,676L476,678L473,680L475,684L477,684L476,686L477,688L479,688L481,693L478,696L483,697L483,699L487,703L483,706L483,711L487,713L490,713L491,711L499,717L497,718L498,720L495,724L492,724L492,722L486,722L485,728L481,732L487,738L489,736L494,738L498,743L499,747L504,750L512,751L515,755L511,761L512,764L506,763L504,765L502,764L503,763L497,761L493,763L488,763L488,766L485,766L480,758L473,760L472,770L465,770L466,767L464,767L462,763L459,752L452,754L450,756L436,755L432,752L424,757L422,756L421,752L418,752L414,753L412,757L408,757L408,759L406,759L404,762L400,761L392,763L391,770L388,776L382,773L379,773L375,777L372,776L370,782L366,785L365,788L357,788L357,791L350,788L347,791L346,788L343,786L341,787L339,785L338,787L337,785L334,786L332,784L327,786L320,786L315,785L311,782L313,782L312,781L316,776L317,770L319,769L317,767L326,758L324,757L326,753L321,742L326,740L327,736L330,734L330,728L335,731L337,730L334,723L334,716L339,712L341,713L341,710L344,707L348,707L353,710L358,706L368,708L371,706L371,699L373,697L372,695L376,689L378,681L381,681L382,679L389,681L394,677L388,671L388,664L392,659L389,650L391,648L393,649L398,647L398,623L401,620L391,605L392,603L398,601L402,604L406,601L407,595L415,599L417,602L422,602L424,600L435,622L441,629L443,629L446,632z"},{"fillAlpha": 1.0,"fillColor": "#deb586","strokeColor": "#ffffff","strokeWidth": 1,"name": "临沧","cabinId": "530900","pathData": "M392,603L391,605L393,606L401,620L398,623L398,647L393,649L391,648L389,650L392,659L391,662L388,664L388,671L394,677L389,681L384,679L378,681L376,689L372,694L373,697L371,699L371,706L368,708L358,706L353,710L344,706L341,710L342,713L340,712L336,714L334,718L329,718L324,714L322,714L322,716L319,716L318,718L314,716L309,717L304,715L305,712L295,710L294,711L297,705L297,702L293,700L296,699L294,693L295,691L290,691L288,687L291,683L294,682L294,680L291,679L291,676L289,674L290,672L287,669L280,667L282,665L282,657L280,656L289,652L295,646L293,643L295,640L298,640L306,636L307,637L315,629L318,622L321,622L324,628L324,636L328,637L332,635L333,631L339,628L342,621L345,622L343,612L346,609L348,609L348,606L353,604L354,601L351,598L355,595L353,593L357,589L355,587L365,580L367,586L369,586L372,583L379,585L372,606L374,606L374,603L378,601L388,600L390,602z"},{"fillAlpha": 1.0,"fillColor": "#98c48c","strokeColor": "#ffffff","strokeWidth": 1,"name": "楚雄","cabinId": "532300","pathData": "M509,589L505,589L505,587L502,586L499,592L495,592L494,596L491,599L488,608L491,612L487,613L491,621L495,620L494,624L496,626L492,634L485,636L483,636L483,632L481,631L481,633L474,629L473,627L467,636L463,638L461,637L459,627L455,624L453,629L448,633L446,632L443,629L441,629L435,622L432,614L428,607L426,606L426,602L424,602L424,600L422,602L417,602L413,598L413,596L415,596L413,592L414,587L412,584L416,582L414,579L414,572L416,568L418,569L418,563L429,565L427,561L428,559L432,558L432,554L429,553L426,549L427,543L430,543L429,536L427,536L426,533L428,529L426,530L427,528L425,525L423,525L426,521L424,520L427,518L427,515L424,512L426,509L424,507L424,499L429,493L436,488L441,487L442,485L447,486L458,483L461,479L459,478L459,476L462,475L471,483L472,489L468,489L470,495L477,495L482,500L481,503L484,508L489,503L491,505L496,504L500,507L509,498L514,505L517,506L515,522L519,524L517,531L519,533L518,537L522,542L523,541L525,550L520,556L517,556L518,561L521,565L520,568L518,569L518,574L516,578L509,580L507,576L505,579L507,583L510,584L509,587z"},{"fillAlpha": 1.0,"fillColor": "#f58758","strokeColor": "#ffffff","strokeWidth": 1,"name": "红河","cabinId": "532500","pathData": "M566,617L574,617L575,610L577,611L577,607L586,613L590,614L590,616L588,617L589,618L599,610L598,609L600,607L599,606L601,602L607,599L605,603L608,604L609,602L611,602L623,609L621,612L625,616L624,621L622,623L619,623L614,628L608,639L603,639L596,647L596,650L600,654L599,655L602,658L604,658L604,661L601,663L599,671L601,678L598,683L596,683L597,686L601,688L604,685L606,686L606,688L610,689L609,690L611,693L611,700L612,699L617,702L619,706L617,707L617,710L619,713L620,727L617,729L618,735L616,738L616,743L618,745L623,743L625,738L624,736L627,736L631,731L633,733L634,732L634,734L637,732L641,733L641,735L630,737L626,742L624,755L621,758L614,753L608,745L600,738L596,742L596,747L593,752L588,747L586,742L587,741L579,737L577,746L571,748L569,751L569,756L563,759L564,762L554,759L550,753L551,752L543,748L539,744L537,745L533,742L531,744L527,739L524,740L524,742L520,746L521,749L515,755L512,751L504,750L499,747L498,743L494,738L489,736L487,738L481,732L484,730L486,722L492,722L492,724L495,724L498,721L497,718L499,717L492,711L490,713L483,711L483,706L487,703L486,700L488,698L503,701L506,693L508,695L515,694L517,690L515,683L513,682L509,675L504,675L504,671L506,670L503,665L505,662L511,660L512,658L509,653L516,650L513,648L515,647L518,647L522,650L526,649L527,651L534,650L536,653L535,657L537,660L542,652L548,650L549,654L551,654L555,649L561,652L568,638L567,632L564,629L565,625L563,624L565,620z"},{"fillAlpha": 1.0,"fillColor": "#7ddfdd","strokeColor": "#ffffff","strokeWidth": 1,"name": "文山","cabinId": "532600","pathData": "M659,620L660,624L663,624L662,627L669,631L668,624L669,622L671,623L671,621L683,624L691,622L694,624L695,627L697,627L700,630L698,634L703,639L702,642L699,642L699,644L704,649L706,648L706,645L708,645L714,651L719,652L722,645L728,644L729,651L737,648L739,652L743,649L745,650L746,645L752,645L755,647L755,650L758,652L757,653L764,662L764,666L760,668L762,673L759,681L761,684L759,684L759,686L752,692L748,688L740,688L739,691L736,691L735,693L729,696L732,698L732,700L731,701L730,699L725,702L721,707L722,711L716,703L714,704L710,700L708,696L704,701L703,705L693,705L687,710L685,710L684,713L680,712L679,715L675,716L678,728L673,731L670,734L670,736L663,735L663,737L661,734L647,745L644,742L640,742L640,732L637,732L635,734L632,731L629,732L627,736L624,736L625,738L623,743L618,745L616,744L616,736L618,735L617,729L620,723L619,713L617,710L617,707L619,706L617,702L612,699L611,700L610,690L608,688L606,689L605,685L601,688L597,686L596,683L598,683L601,678L599,671L601,664L604,661L604,658L602,658L599,655L600,654L596,650L596,647L600,641L603,639L608,639L614,628L621,622L627,624L634,621L638,625L636,627L641,628L650,626L650,623L657,623L657,621L659,621z"},{"fillAlpha": 1.0,"fillColor": "#98c28e","strokeColor": "#ffffff","strokeWidth": 1,"name": "西双版纳","cabinId": "532800","pathData": "M472,770L469,774L466,774L465,777L469,784L467,785L470,791L469,795L474,797L477,804L480,805L478,812L479,817L483,820L481,823L478,822L478,825L480,827L478,829L477,839L479,843L484,845L484,848L481,848L478,853L475,852L473,849L469,850L469,846L464,845L449,850L444,846L446,843L439,834L442,834L442,830L444,828L443,824L439,824L439,822L441,822L440,816L437,814L438,809L424,815L417,820L413,826L403,831L397,831L394,825L388,826L386,829L381,830L379,827L377,827L376,829L372,822L376,816L373,814L368,816L368,814L364,813L362,803L365,795L363,792L365,785L370,782L371,776L375,777L379,773L388,776L391,770L390,765L392,763L394,764L400,761L404,762L406,759L408,759L408,757L412,757L414,753L421,752L422,756L424,757L432,752L436,755L443,756L450,756L452,754L459,752L463,765L464,767L466,767L465,770L469,770z"},{"fillAlpha": 1.0,"fillColor": "#f78857","strokeColor": "#ffffff","strokeWidth": 1,"name": "大理","cabinId": "532900","pathData": "M294,537L294,530L292,529L293,527L301,531L304,530L302,527L303,524L306,527L310,527L306,514L303,514L301,511L302,503L304,500L308,500L308,502L310,501L314,504L311,500L322,493L322,488L324,489L326,486L329,487L334,481L334,469L341,466L342,463L346,464L346,466L348,467L352,465L354,467L359,467L359,465L369,469L369,465L371,465L373,468L376,467L378,462L381,461L381,465L385,464L385,466L388,466L387,468L389,467L389,471L392,471L392,473L394,473L394,475L396,476L393,477L394,480L397,482L395,483L391,490L394,497L392,498L393,501L396,501L397,503L397,510L409,511L407,508L407,504L418,497L421,500L425,500L424,507L426,508L424,512L425,514L426,513L427,518L424,520L426,521L423,524L427,528L426,530L428,529L426,533L427,536L429,536L430,541L430,543L427,543L426,549L432,554L432,558L429,559L429,564L424,565L419,563L418,569L417,568L414,572L414,579L416,582L412,584L414,587L414,598L407,595L406,601L402,604L398,601L393,603L388,600L384,600L378,601L374,603L374,606L372,606L379,585L372,583L369,586L367,586L365,580L368,579L368,575L364,576L361,569L356,570L354,575L346,579L336,573L334,574L319,557L320,552L323,554L324,550L322,547L315,544L311,546L309,549L307,549L305,547L305,542L301,543L302,538L296,538z"},{"fillAlpha": 1.0,"fillColor": "#e17987","strokeColor": "#ffffff","strokeWidth": 1,"name": "德宏","cabinId": "533100","pathData": "M243,559L244,562L249,565L248,573L254,577L251,582L253,588L257,586L258,589L260,590L270,590L273,595L272,597L269,596L264,599L266,602L266,606L263,607L268,612L267,614L270,615L276,612L281,613L284,619L281,622L283,626L283,639L281,640L282,645L275,648L272,644L258,646L251,645L240,648L233,652L230,652L230,655L226,655L225,657L222,658L222,660L219,661L218,663L216,662L215,664L214,662L206,658L209,656L209,654L213,653L213,650L219,645L221,642L219,640L219,637L222,635L219,632L215,632L215,629L218,628L216,622L207,623L209,613L208,601L209,599L216,595L222,595L224,593L219,589L219,577L224,571L226,563L233,567L241,559z"},{"fillAlpha": 1.0,"fillColor": "#deb586","strokeColor": "#ffffff","strokeWidth": 1,"name": "迪庆","cabinId": "533400","pathData": "M385,386L383,389L385,391L382,394L383,396L381,396L381,399L377,405L381,416L370,428L369,431L371,436L369,444L364,449L362,446L363,442L359,434L356,433L356,430L342,416L344,414L337,403L337,398L333,400L333,403L329,404L327,408L330,414L327,419L328,423L326,424L328,425L327,427L330,431L328,431L329,436L333,442L328,441L326,443L328,444L325,446L320,434L318,434L319,438L315,441L309,439L301,440L302,436L301,437L299,433L299,425L302,418L301,415L297,415L295,411L295,401L293,398L296,394L290,387L293,386L293,384L291,380L288,378L288,365L285,362L281,353L283,350L282,346L285,343L280,332L277,331L277,321L275,318L281,313L279,309L279,299L277,296L282,296L286,293L289,297L290,307L296,308L299,306L299,304L296,302L296,295L302,290L299,284L300,278L303,280L307,277L309,279L308,288L310,297L308,311L310,313L309,316L313,324L312,336L316,341L316,344L320,346L319,348L327,356L326,351L328,345L326,344L329,338L327,334L329,334L327,331L327,327L331,327L331,324L336,321L335,317L340,314L341,307L345,307L347,305L349,313L348,314L365,328L364,330L370,336L369,339L377,343L375,346L378,348L375,352L369,353L367,356L371,364L378,371L376,373L379,376L385,377L385,385z"},{"fillAlpha": 1.0,"fillColor": "#d58dc6","strokeColor": "#ffffff","strokeWidth": 1,"name": "怒江","cabinId": "533300","pathData": "M343,463L341,466L333,470L333,477L335,479L329,487L326,486L324,489L322,488L322,493L311,500L314,503L310,501L308,502L308,500L303,501L301,511L302,514L305,514L307,517L310,527L306,527L303,524L302,527L304,529L301,531L293,527L293,543L286,543L286,534L284,530L285,528L283,527L284,523L282,522L282,519L279,514L276,513L274,503L275,501L279,501L279,505L283,502L283,495L280,494L281,489L284,486L285,471L287,468L285,461L286,454L284,450L284,439L286,438L286,436L284,434L282,424L284,422L284,415L282,413L281,407L282,399L280,397L275,397L273,393L269,394L265,391L264,400L261,403L258,402L256,399L257,397L251,388L253,386L251,385L251,380L248,379L248,376L250,375L249,371L247,371L245,368L247,359L246,356L248,355L248,352L254,349L250,341L252,341L255,338L256,339L261,349L263,359L273,353L277,355L279,352L282,351L282,357L288,365L288,378L291,379L293,384L293,386L290,387L296,394L293,398L295,401L294,404L296,409L296,415L301,415L302,418L299,427L299,433L301,437L302,436L301,440L311,439L315,441L319,438L318,435L320,434L325,446L328,444L326,443L328,441L333,442L337,447L341,461z"}]}}
三.编写自定义组件,绘制svg地图
定义javabean
public class CityBean {public double fillAlpha;public String fillColor;public String strokeColor;public int strokeWidth;public String name;public String cabinId;public String pathData;}
public class MapPathItem {private Context context;//画笔路径private Path path;private int color;private int strokeColor;private String dataName;private String cabinId;private int fillAlpha;private int strokeWidth;public MapPathItem(Context context) {this.context = context;}public Path getPath() {return path;}public void setPath(Path path) {this.path = path;}public int getColor() {return color;}public void setColor(int color) {this.color = color;}public int getStrokeColor() {return strokeColor;}public void setStrokeColor(int strokeColor) {this.strokeColor = strokeColor;}public String getDataName() {return dataName;}public void setDataName(String dataName) {this.dataName = dataName;}public String getCabinId() {return cabinId;}public void setCabinId(String cabinId) {this.cabinId = cabinId;}public int getFillAlpha() {return fillAlpha;}public void setFillAlpha(int fillAlpha) {this.fillAlpha = fillAlpha;}public int getStrokeWidth() {return strokeWidth;}public void setStrokeWidth(int strokeWidth) {this.strokeWidth = strokeWidth;}}
读取每一个地图块的绘制信息,这里为了方便扩展,在自定义组件中定义一个方法,提供给外部去使用,这里假设我们之前转换的json是请求接口获得的:
public class SVGMapView extends View {private Context mContext;private List<MapPathItem> pathItemList = new ArrayList<>();public SVGMapView(Context context) {this(context, null);}public SVGMapView(Context context, @Nullable AttributeSet attrs) {this(context, attrs, 0);}public SVGMapView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);mContext = context;}public void setData(List<CityBean> datas) {//解析子节点属性for(int i = 0;i <datas.size(); i ++){//拿到路径String pathData = datas.get(i).pathData;String dataName = datas.get(i).name;String cabinId = datas.get(i).cabinId;String color = datas.get(i).fillColor;String strokeColor = datas.get(i).strokeColor;float fillAlpha = datas.get(i).fillAlpha;int strokeWidth = datas.get(i).strokeWidth;Path path = PathParser.createPathFromPathData(pathData);MapPathItem pathItem = new MapPathItem(mContext);pathItem.setPath(path);pathItem.setDataName(dataName);pathItem.setCabinId(cabinId);pathItem.setColor(Color.parseColor(color));pathItem.setStrokeColor(Color.parseColor(strokeColor));pathItem.setFillAlpha((int) (fillAlpha * 255));pathItem.setStrokeWidth(strokeWidth);pathItemList.add(pathItem);}//各个城市的数据可能是请求接口获取到的,//数据获取成功后,界面可能已经绘制完成,//所以这里需要通知控件重绘postInvalidate();}}
重写onDraw方法,通过pathItem绘制地图块,首先改造下MapPathItem这个类,让它自己去绘制
public class MapPathItem {...public void draw(Canvas canvas, Paint paint) {path.setFillType(Path.FillType.EVEN_ODD);//绘制边框paint.setStrokeWidth(strokeWidth);paint.setStyle(Paint.Style.STROKE);paint.setColor(strokeColor);paint.setAlpha(255);paint.setStrokeCap(Paint.Cap.ROUND);paint.setStrokeJoin(Paint.Join.ROUND);canvas.drawPath(path, paint);//绘制填充色paint.setColor(color);paint.setAlpha(fillAlpha);paint.setStyle(Paint.Style.FILL);canvas.drawPath(path, paint);}}
public class SVGMapView extends View {private Context mContext;private List<MapPathItem> pathItemList = new ArrayList<>();private Paint mPaint;...public SVGMapView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);mContext = context;init();}private void init() {mPaint = new Paint();}...@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);for (MapPathItem pathItem : pathItemList) {pathItem.draw(canvas,mPaint);}}}
可以看到通过以上步骤,一个完整的省级svg地图就画出来了,但是地图区域并没有居中
四.地图居中显示
获取实际绘制区域的大小
public void setData(List<CityBean> datas) {//svg的上下左右边界float left = -1,top = -1,right = -1,bottom = -1;//解析子节点属性for(int i = 0;i <datas.size(); i ++){//拿到路径String pathData = datas.get(i).pathData;String dataName = datas.get(i).name;String cabinId = datas.get(i).cabinId;String color = datas.get(i).fillColor;String strokeColor = datas.get(i).strokeColor;float fillAlpha = datas.get(i).fillAlpha;int strokeWidth = datas.get(i).strokeWidth;Path path = PathParser.createPathFromPathData(pathData);MapPathItem pathItem = new MapPathItem(mContext);pathItem.setPath(path);pathItem.setDataName(dataName);pathItem.setCabinId(cabinId);pathItem.setColor(Color.parseColor(color));pathItem.setStrokeColor(Color.parseColor(strokeColor));pathItem.setFillAlpha((int) (fillAlpha * 255));pathItem.setStrokeWidth(strokeWidth);pathItemList.add(pathItem);//获取实际绘制地图区域的大小RectF rectF = new RectF();puteBounds(rectF,true);left = left == -1 ? rectF.left : Math.min(rectF.left, left);top = top == -1 ? rectF.top : Math.min(rectF.top, top);right = right == -1 ? rectF.right : Math.max(rectF.right, right);bottom = bottom == -1 ? rectF.bottom : Math.max(rectF.bottom, bottom);}//mapRectF记录了实际绘制地图区域的大小mapRectF = new RectF(left, top, right, bottom);//各个城市的数据可能是请求接口获取到的,//数据获取成功后,界面可能已经绘制完成,//所以这里需要通知控件重绘postInvalidate();}
这里需要借助Matrix对象获取实际绘制区域的大小,通过实际绘制区域的大小以及控件的大小来计算x,y的偏移量,通过Matrix对象进行平移变化实现居中:
public class SVGMapView extends View {private Context mContext;private List<MapPathItem> pathItemList = new ArrayList<>();private Paint mPaint;private RectF mapRectF;private Matrix mTransformMatrix;private boolean hasInit;private int viewWidth;private int viewHeight;...private void init() {mPaint = new Paint();mTransformMatrix = new Matrix();}...@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);initPosition();canvas.setMatrix(mTransformMatrix);for (MapPathItem pathItem : pathItemList) {pathItem.draw(canvas,mPaint);}}private void initPosition() {if(hasInit) {return;}viewWidth = getWidth();viewHeight = getHeight();if (viewWidth < 0 && viewHeight < 0) {return;}int translateX = (int) (getLeft() - mapRectF.left) + (int) (viewWidth - mapRectF.width())/2;int translateY = (int) (getTop() - mapRectF.top) + (int) (viewHeight - mapRectF.height())/2;mTransformMatrix.postTranslate(translateX, translateY);hasInit = true;}}
五.手势处理 - 地图跟随手指移动
通过实现View的OnTouchListener接口,重写onTouche方法实现
public class SVGMapView extends View implements View.OnTouchListener {...private void init() {mPaint = new Paint();mTransformMatrix = new Matrix();setOnTouchListener(this);}...@Overridepublic boolean onTouch(View v, MotionEvent event) {float x = 0, y = 0;// 拿到触摸点的个数final int pointerCount = event.getPointerCount();// 得到多个触摸点的x与y均值for (int i = 0; i < pointerCount; i++){x += event.getX(i);y += event.getY(i);}x = x / pointerCount;y = y / pointerCount;/*** 每当触摸点发生变化时,重置mLasX , mLastY*/if (pointerCount != lastPointerCount){mLastX = x;mLastY = y;}lastPointerCount = pointerCount;switch (event.getAction()){case MotionEvent.ACTION_MOVE:moveX = x - mLastX;moveY = y - mLastY;mLastX = x;mLastY = y;mTransformMatrix.postTranslate(moveX, moveY);postInvalidate();break;case MotionEvent.ACTION_UP:case MotionEvent.ACTION_CANCEL:lastPointerCount = 0;break;}return true;}}
六.手势处理 - 双指缩放
定义初始缩放比,按照初始缩放比例进行绘制
public class SVGMapView extends View implements View.OnTouchListener {private Context mContext;private List<MapPathItem> pathItemList = new ArrayList<>();private Paint mPaint;private RectF mapRectF;private Matrix mTransformMatrix;private boolean hasInit;private int viewWidth;private int viewHeight;private int lastPointerCount;private float mLastX;private float mLastY;private float moveX;private float moveY;private float initScale = 2.0f;...private void initPosition() {if(hasInit) {return;}viewWidth = getWidth();viewHeight = getHeight();if (viewWidth < 0 && viewHeight < 0) {return;}mTransformMatrix.postScale(initScale, initScale, mapRectF.centerX(), mapRectF.centerY());int translateX = (int) (getLeft() - mapRectF.left) + (int) (viewWidth - mapRectF.width())/2;int translateY = (int) (getTop() - mapRectF.top) + (int) (viewHeight - mapRectF.height())/2;mTransformMatrix.postTranslate(translateX, translateY);hasInit = true;}...}
定义最小缩放比例和最大缩放比例,实现双指缩放:
public class SVGMapView extends View implements View.OnTouchListener {...private float initScale = 2.0f;private ScaleGestureDetector scaleGestureDetector;/*** 用于存放矩阵的9个值*/private final float[] matrixValues = new float[9];private float minScale = 1.5f;private float maxScale = 3.6f;...private void init() {mPaint = new Paint();mTransformMatrix = new Matrix();setOnTouchListener(this);scaleGestureDetector = new ScaleGestureDetector(mContext, new MySimpleScaleOnGestureDetector());}...@Overridepublic boolean onTouch(View v, MotionEvent event) {scaleGestureDetector.onTouchEvent(event);...return true;}//双指缩放class MySimpleScaleOnGestureDetector extends ScaleGestureDetector.SimpleOnScaleGestureListener {@Overridepublic boolean onScale(ScaleGestureDetector detector) {float scale = getScale();float scaleFactor = detector.getScaleFactor();/*** 缩放的范围控制*/if ((scale < maxScale && scaleFactor > 1.0f)|| (scale > minScale && scaleFactor < 1.0f)){/*** 最大值最小值判断*/if (scaleFactor * scale < minScale){scaleFactor = minScale / scale;}if (scaleFactor * scale > maxScale){scaleFactor = maxScale / scale;}/*** 设置缩放比例*/mTransformMatrix.postScale(scaleFactor, scaleFactor, viewWidth/2, viewHeight/2);postInvalidate();}return true;}}/*** 获得当前的缩放比例** @return*/public final float getScale(){mTransformMatrix.getValues(matrixValues);return matrixValues[Matrix.MSCALE_X];}}
七.边界检测
通过上面的步骤,已经实现了svg地图的绘制、单指拖拽、双指缩放,但是svg可以随意拖拽到任意位置,我们需要将拖拽的范围限制为控件的边界,首先我们需要获取地图经平移变换后,实际显示的区域,可以通过mTransformMatrix获取
private RectF getMatrixRectF(){RectF rect = new RectF();if(mapRectF != null) {mTransformMatrix.mapRect(rect, mapRectF);}return rect;}
由于地图可以缩放,所以需要分别对地图显示区域超过控件的范围时,以及地图区域不超过控件范围的情况进行处理
public class SVGMapView extends View implements View.OnTouchListener {...@Overridepublic boolean onTouch(View v, MotionEvent event) {scaleGestureDetector.onTouchEvent(event);float x = 0, y = 0;// 拿到触摸点的个数final int pointerCount = event.getPointerCount();// 得到多个触摸点的x与y均值for (int i = 0; i < pointerCount; i++){x += event.getX(i);y += event.getY(i);}x = x / pointerCount;y = y / pointerCount;/*** 每当触摸点发生变化时,重置mLasX , mLastY*/if (pointerCount != lastPointerCount){mLastX = x;mLastY = y;}lastPointerCount = pointerCount;switch (event.getAction()){case MotionEvent.ACTION_MOVE:moveX = x - mLastX;moveY = y - mLastY;mLastX = x;mLastY = y;mTransformMatrix.postTranslate(moveX, moveY);checkBounds();postInvalidate();break;case MotionEvent.ACTION_UP:case MotionEvent.ACTION_CANCEL:lastPointerCount = 0;break;}return true;}.../*** 移动时,进行边界判断*/private void checkBounds() {RectF rect = getMatrixRectF();float deltaX = 0, deltaY = 0;if(rect.width() > viewWidth) {if(rect.left > 0) {deltaX = -rect.left;}if(rect.right < viewWidth) {deltaX = viewWidth - rect.right;}} else {if(rect.left < 0) {deltaX = -rect.left;}if(rect.right > viewWidth) {deltaX = viewWidth - rect.right;}}if(rect.height() > viewHeight) {if(rect.top > 0) {deltaY = -rect.top;}if(rect.bottom < viewHeight) {deltaY = viewHeight - rect.bottom;}} else {if(rect.top < 0) {deltaY = -rect.top;}if(rect.bottom > viewHeight) {deltaY = viewHeight - rect.bottom;}}mTransformMatrix.postTranslate(deltaX, deltaY);}private RectF getMatrixRectF(){RectF rect = new RectF();if(mapRectF != null) {mTransformMatrix.mapRect(rect, mapRectF);}return rect;}}
八.各色块点击监听
public class MapPathItem {...public boolean isTaped(float x, float y){RectF rectF = new RectF();puteBounds(rectF,true);Region region =new Region();//给定路径region.setPath(this.path, new Region((int) rectF.left, (int) rectF.top, (int) rectF.right, (int) rectF.bottom));return region.contains((int) x, (int)y);}}
public class SVGMapView extends View implements View.OnTouchListener {private Context mContext;private List<MapPathItem> pathItemList = new ArrayList<>();private Paint mPaint;private RectF mapRectF;private Matrix mTransformMatrix;private boolean hasInit;private int viewWidth;private int viewHeight;private int lastPointerCount;private float mLastX;private float mLastY;private float moveX;private float moveY;private float initScale = 2.0f;private ScaleGestureDetector scaleGestureDetector;/*** 用于存放矩阵的9个值*/private final float[] matrixValues = new float[9];private float minScale = 1.5f;private float maxScale = 3.6f;private Rect clipBounds;private GestureDetector gestureDetector;...private void init() {mPaint = new Paint();mTransformMatrix = new Matrix();setOnTouchListener(this);scaleGestureDetector = new ScaleGestureDetector(mContext, new MySimpleScaleOnGestureDetector());gestureDetector = new GestureDetector(mContext, new MySimpleOnGestureDetector());}...@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);initPosition();canvas.setMatrix(mTransformMatrix);for (MapPathItem pathItem : pathItemList) {pathItem.draw(canvas,mPaint);}clipBounds = canvas.getClipBounds();}...@Overridepublic boolean onTouch(View v, MotionEvent event) {if (gestureDetector.onTouchEvent(event)) {return true;}scaleGestureDetector.onTouchEvent(event);...return true;}...class MySimpleOnGestureDetector extends GestureDetector.SimpleOnGestureListener {@Overridepublic boolean onSingleTapConfirmed(MotionEvent e) {float scale = getScale();//点击行政区域触发listenerfloat cX = e.getX() / scale + clipBounds.left;float cY = e.getY() / scale + clipBounds.top;for (int i = 0; i < pathItemList.size(); i++){MapPathItem item = pathItemList.get(i);if(item.isTaped(cX, cY)) {Toast.makeText(mContext, item.getDataName(), Toast.LENGTH_SHORT).show();break;}}return true;}}}