Создайте свою собственную визуальную карту данных, не полагаясь на какую-либо библиотеку

SVG визуализация данных CSS
Создайте свою собственную визуальную карту данных, не полагаясь на какую-либо библиотеку

предисловие

В сегодняшних растущих данных растет и спрос на визуализацию данных.

Откройте любое программное обеспечение для подбора персонала, и по крайней мере три из десяти лучших вакансий требуют опыта визуализации данных.

Я столкнулся с таким спросом: Bank of Qingdao надеется поставить себя наСмарт БанкДля трансформации в этом направлении было выдвинуто много требований к персональной выставке.

Один из проектов называетсяТаблица культурного опыта, есть отображение карты Циндао, есть несколько координатных точек, переданных из фона на карте, щелкните координатную точку, чтобы отобразить подробную информацию.

Если человек перед экраном из Циндао или находится в районе Циндао, вы можете пойти в Банк Циндао, чтобы посмотреть.

Я сделал таблицу культурного опыта внутри

Технический отбор

Карта Байду

В начале я определенно хотел использовать API, предоставляемый открытой платформой карт Baidu.В конце концов, люди профессионально занимаются созданием карт.Использование этого метода не только экономит время и усилия, но и хорошо работает.

И не только она может отображаться как профессиональная карта, которую мы обычно ищем, но вы также можете использовать персонализированную карту, которую она предоставляет:

Однако о безопасности банков знают все, во избежание хакерских атак всем банкам запрещено подключаться к внешней сети.

Тогда вы, возможно, сказали, что в Интернете нет офлайн-версии тайлов карты, попробуйте сделать оффлайн-карту?

После долгих поисков я обнаружил, что эти тайлы карты очень трудно найти. Я потратил много денег, чтобы их скачать, но это только урезанные версии, с неполными функциями и различными ямами. Это в основном пиратские версии. я должен упомянуть о пиратстве.

Зоркие друзья могли заметить, что в левом нижнем углу карты есть логотип карты Baidu.После запроса Стороны А они четко заявили, что им не нужен никакой логотип, кроме Bank of Qingdao или данных рекламодателя, отправленных из фон.

Тогда подумайте, как его убрать или спрятать?

Это действительно нехорошо.Вообще, цель этого логотипа показать всем: Смотри! Это карта, сделанная Baidu!

В конце концов, если компания создает программное обеспечение для карт, напрямую обращается к API Baidu Map, а затем удаляет логотип, кто увидит, что это Baidu Map? Я думал, что это карта, сделанная этой компанией.

Догадываясь, я внимательно проверил условия использования Baidu Maps:

Тогда вы можете подумать: а разве нет разных карт, таких как AutoNavi Maps, Tencent Maps, Google Maps и т. д.?

На самом деле все почти одинаковые.Никто не хочет,чтобы карту,которую они так усердно сделали,использовали как свою карту после того как логотип будет стерт другими,поэтому нет возможности удалить логотип(Насильно вывезут, только вручат адвокату письмо, потом пойдут в суд и окончательно проиграют дело, потеряют деньги и обанкротятся).

ECharts

После общения со Стороной А я узнал, что: этоТаблица культурного опытаНа самом деле она не предназначена для того, чтобы направлять людей, как профессиональная карта, ее цель в основном состоит в том, чтобы отображать несколько координатных точек на карте, показывая культуру Шаньдун (Координаты рекламодателя), нажмите на координаты, чтобы отобразить соответствующую информацию о рекламодателе, включая конкретное местоположение.

На самом деле, очень разумно хорошенько об этом подумать, ведь даже если использовать профессиональную карту вроде Baidu, люди не будут тщательно проверять, на какой улице и в каком здании находятся координаты. сообщение: Qingdao XX Co., Ltd., расположенная на XX этаже, № XX Street, XX…

Тогда это намного проще! Все, что нужно, это абстрактная карта, чтобы очертить контур Циндао. Итак, первое, что приходит на ум, это ECharts:

Лидер остался очень доволен после прочтения рендеров: это просто и круто, так что давайте!

Так что быстро используйте ECharts, чтобы написать версию и вывести ее на экран сплайсинга для тестирования (Таблица культурного опыта состоит из двух экранов 1920*1080, соединенных вместе по горизонтали.) и обнаружил сбой:

Экран сращивания сенсорный!

Вы можете подумать: в чем дело, только потрогать, как за всем этим суетиться!

Однако на сенсорном экране я обнаружил, что карта EChart использует колесико мыши для управления масштабированием карты, что не влияет на сенсорный экран, и в настоящее время требуется использовать два пальца для увеличения карты, как при работе с картой. на мобильном телефоне:

Вы можете подумать: это требование очень распространено на мобильных устройствах, поэтому должны быть готовые библиотеки, которые можно использовать.

Действительно есть, но в таком случае он станет размытым после увеличения, потому что нижний слой ECharts рисуется Canvas, а не векторной графикой, поэтому при принудительном увеличении он будет искажаться.

А после принудительного увеличения увеличивается и штрих карты.Разумеется, эта грань используется только для разделения границы, которой в действительности не существует, поэтому она должна быть как можно тоньше.В этом случае, вы можете только волшебным образом изменить ECharts, а затем положиться на лежащий в основе Canvas.

Ни в коем случае, перейдите непосредственно к исходному коду ECharts! Давайте посмотрим, сможем ли мы изменить логику, которую он перерисовывает с помощью колесика мыши, чтобы увеличить масштаб...

Долго читая исходники, я обнаружил, что эта логика не в ECharts, а в ZRender, от которого она зависит, для меня это слишком сложно! Перейдите в ZRender и посмотрите исходный код:

После долгих поисков я обнаружил, что он на самом деле определяет мобильные события, так почему карта неудобна в использовании, значит ли это, что ECharts инкапсулировал ее на карту? Когда я снова пошел посмотреть исходный код ECharts, лидер партии А нашел из ниоткуда видео:

Во всяком случае, это, вероятно, похожий эффект.В то время форма видеоштриха была формой, похожей на электрокардиограмму, а затем рисовалось сердце, когда штрих был в середине:

Конкретная память не очень понятна, во всяком случае, это не то, что выше или следующее:

На тот момент видео было ослепительнее вышеперечисленных эффектов, но это "ослепление" было ослеплением на его собственную голову. Не было никакой возможности связаться с ним, если он хотел этого эффекта. Даже сказали: Мы готовы платить больше !

Но лишние деньги мне не добавили, а положили в карман начальника, начальник, конечно, обрадовался и попросил сделать.

Он платит больше, я работаю сверхурочно...

SVG

Но что можно сказать наверняка, так это то, что вы больше не можете смотреть на исходный код ECharts, Такой зрелый проект с открытым исходным кодом не только имеет много кода, но и зависит от множества библиотек.

Если вы пролистываете исходный код один за другим, вы должны обратиться к году обезьяны и месяцу лошади, и чтобы перейти к такому эффекту штриха, вам нужно значительно изменить исходный код, и это может в конце концов не увенчались успехом, поэтому я быстро отказался от этой идеи.

Но, к счастью, мои навыки Canvas и SVG хороши, а SVG идеально подходит для этого эффекта штрихов!

Но передо мной стоит огромная проблема:

  • Где я могу найти координаты SVG карты Циндао?

Вы рисуете координаты одну за другой? Нравятся данные карты Canvas?

Вот и нашла в интернете карту Циндао со штрихами:

Я хочу использовать код, чтобы нарисовать его, но это не четверть, а глаза уже разлетелись. И сравнение с картинкой, все же невооруженным глазом видна некая погрешность.

Нет, это слишком неэффективно! Должен быть какой-то другой способ, спросите дизайнера пользовательского интерфейса компании!

Прочитав его, люди сказали: это не проблема, вы дайте мне изображение Циндао, я использую ИИ (Не ИИ, а Adobe Illustrator) для вас и экспортируйте SVG.

Я потратил целый день на написание кода на своей стороне, но на отрисовку его у других ушло всего полчаса, и невооруженным глазом ошибку увидеть было нельзя:

青岛地图

Но ведь экспортируемое изображение только в формате svg, если вы хотите, чтобы оно управлялось программой, вам все равно нужно его снова обработать:

<svg id="tsing-tao-map" data-name="tsing-tao-map" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 892 994">
  <defs>
    <defs>
      <filter id="filter" x="0" y="0" width="200%" height="200%">
        <feOffset result="offOut" in="SourceGraphic" dx="0" dy="2" />
        <feColorMatrix result="matrixOut" in="offOut" type="matrix"
        values=".15 0 0 0 0 0 .15 0 0 0 0 0 .15 0 0 0 0 0 1 0" />
        <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="1" />
        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
      </filter>
    </defs>
  </defs>
  <polyline class="cls-1" points="428.5 668.5 429.5 668.5 429.5 672.5 430.5 672.5 430.5 676.5 429.5 676.5 429.5 677.5 426.5 677.5 426.5 679.5 427.5 679.5 429.5 682.5 429.5 684.5 431.5 686.5 431.5 690.5"/>
  <g class="cls-2">
    <polyline class="cls-3" points="328.75 65.13 330.5 67.5 334.5 67.5 336.5 66.5 337.5 64.5 339.5 64.5 342.5 66.5 343.5 69.5 343.5 73.5 344.5 74.5 348.5 74.5 351.5 71.5 355.5 71.5 355.5 69.5 363.5 69.5 369.5 73.5 370.5 74.5 371.5 75.5 371.5 76.5 369.5 79.5 366.5 79.5 364.5 80.5 364.5 81.5 360.5 81.5 360.5 83.5 359.5 83.5 359.5 87.5 363.5 91.5 364.5 91.5 364.5 92.5 369.5 92.5 369.5 91.5 370.5 91.5 371.5 88.5 374.5 88.5 374.5 89.5 376.5 91.5 378.5 91.5 378.5 90.5 382.5 90.5 383.5 91.5 383.5 93.5 384.5 93.5 384.5 94.5 383.5 94.5 379.5 96.5 378.5 97.5 376.5 99.5 374.5 100.5 374.5 103.5 381.5 113.5 382.5 114.5 382.5 119.5 381.5 119.5 381.5 121.5 377.5 127.5 376.5 128.5 376.5 130.5 375.5 130.5 375.5 133.5 374.5 135.5 373.5 138.5 370.5 141.5 367.5 141.5 364.5 143.5 363.5 144.5 362.5 145.5 362.5 148.5 363.5 148.5 364.5 151.5 366.5 152.5 368.5 155.5 370.5 159.5 370.5 161.5 368.5 161.5 368.5 164.5 367.5 164.5 366.5 167.5 366.5 171.5 365.5 171.5 365.5 179.5 364.5 180.5 364.5 185.5 363.5 185.5 363.5 190.5 362.5 192.5 362.5 195.5 361.5 195.5 361.5 197.5 360.5 197.5 360.5 201.5 359.5 206.5 359.5 209.5 357.5 212.5 357.5 214.5 356.5 214.5 355.5 218.5 354.5 218.5 354.5 221.5 354.5 232.5 355.5 232.5 355.5 236.5 357.5 238.5 357.5 240.5 356.5 240.5 356.5 243.5 358.5 246.5 359.5 249.5 360.5 253.5 359.5 256.5 360.5 257.5 360.5 261.5 359.5 261.5 359.5 268.5 359.5 282.5 360.5 283.5 360.5 289.5 361.5 290.5 362.5 292.5 362.5 295.5 363.5 296.5 365.5 298.5 368.5 299.5 370.5 301.5 371.5 303.5 371.5 307.5 370.5 308.5 369.5 310.5 369.5 314.5 368.5 314.5 367.5 320.5 365.5 321.5 363.5 322.5 360.5 322.5 360.5 321.5 357.5 321.5 357.5 323.5 356.5 323.5 356.5 325.5 355.5 325.5 355.5 329.5 351.5 329.5 349.5 329.5 349.5 327.5 345.5 327.5 345.5 326.5 342.5 326.5 337.5 330.5 333.5 330.5 333.5 332.5 331.5 332.5 327.5 337.5 326.5 340.5 326.5 342.5 327.5 342.5 327.5 349.5 323.5 352.5 319.5 355.5 318.5 356.5 314.5 356.5 310.5 359.5 308.5 359.5 308.5 358.5 306.5 358.5 304.5 363.5 304.5 368.5 303.5 368.5 303.5 371.5 302.5 371.5 301.5 376.5 298.5 381.5 297.5 383.5 297.5 385.5 298.5 385.5 305.5 393.5 306.5 393.5 306.5 398.5 304.5 398.5 304.5 404.5 308.5 410.5 309.5 410.5 309.5 417.5 310.5 417.5 310.5 418.5 313.5 419.5 314.5 419.5 314.5 425.5 313.5 425.5 313.5 426.5 308.5 426.5 308.5 425.5 304.5 425.5 304.5 427.5 303.5 427.5 303.5 433.5 301.5 435.5 298.5 435.5 298.5 436.5 296.5 436.5 296.5 437.5 294.5 439.5 294.5 445.5 296.5 446.5 305.5 446.5 306.5 447.5 306.5 450.5 308.5 450.5 308.5 455.5 305.5 455.5 302.5 459.5 302.5 467.5 300.5 470.5 300.5 471.5 301.5 471.5 301.5 476.5 302.5 476.5 302.5 479.5 305.5 483.5 309.5 483.5 316.5 487.5 317.5 487.5 317.5 491.5 319.5 492.5 323.5 492.5 323.5 494.5 324.5 494.5 324.5 495.5 326.5 496.5 329.5 496.5 329.5 497.5 330.5 497.5 332.5 498.5 332.5 500.5 331.5 501.5 331.5 503.5 330.5 503.5 330.5 510.5 327.5 510.5 327.5 514.5 326.5 514.5 326.5 515.5 324.5 515.5 324.5 518.5 322.5 518.5 321.5 521.5 320.5 521.5 319.5 524.5 316.5 527.5 314.5 527.5 314.5 532.5 308.5 537.5 308.5 541.5 301.5 541.5 301.5 543.5 294.5 549.5 293.5 550.5 290.5 550.5 286.5 552.5 286.5 555.5 287.5 556.5 288.5 556.5 288.5 557.5 289.5 559.5 289.5 560.5 288.5 560.5 288.5 564.5 286.5 564.5 284.5 561.5 284.5 559.5 283.5 559.5 283.5 562.5 282.5 562.5 281.5 563.5 281.5 568.5 282.5 569.5 282.5 574.5 284.5 575.5 284.5 582.5 281.5 582.5 280.5 582.5 280.5 583.5 281.5 584.5 281.5 585.5 283.5 586.5 283.5 587.5 286.5 587.5 286.5 586.5 288.5 586.5 288.5 587.5 289.5 589.5 289.5 590.5 286.5 590.5 284.5 592.5 284.5 595.5 286.5 596.5 289.5 596.5 289.5 595.5 291.5 595.5 293.5 598.5 293.5 601.5 288.5 601.5 286.5 603.5 286.5 606.5 288.5 607.5 291.5 609.5 294.5 612.5 295.5 614.5 296.66 615.37"/>
    <polyline class="cls-3" ref="line2" points="235.5 419.97 237.5 419.5 237.5 416.5 238.5 415.5 239.5 415.5 243.5 419.5 244.5 420.5 246.5 420.5 247.5 419.5 247.5 416.5 250.5 416.5 255.5 423.5 255.5 424.5 259.5 424.5 259.5 422.5 262.5 419.5 266.5 419.5 266.5 417.5 267.5 416.5 270.5 416.5 270.5 417.5 275.5 417.5 275.5 418.5 278.5 418.5 279.5 419.5 280.5 419.5 281.5 417.5 282.5 417.5 282.5 418.5 283.5 418.5 283.5 419.5 285.5 419.5 285.5 416.5 287.5 416.5 290.5 414.5 291.5 414.5 291.5 416.5 292.5 416.5 292.5 417.5 296.5 417.5 296.5 419.5 303.5 419.5 303.5 420.5 306.5 420.5 307.5 422.5 310.5 422.5 310.5 426.5"/>
    <polyline class="cls-3" ref="line3" points="351.5 329.5 351.5 331.5 355.5 335.5 358.5 335.5 358.5 333.5 359.5 332.5 360.5 332.5 360.5 333.5 361.5 333.5 362.5 335.5 364.5 335.5 365.5 333.5 366.5 333.5 367.5 334.5 367.5 335.5 374.5 335.5 374.5 332.5 379.5 332.5 379.5 330.5 384.5 330.5 384.5 332.5 386.5 332.5 389.5 329.5 392.5 329.5 392.5 332.5 398.5 332.5 398.5 333.5 402.5 333.5 402.5 331.5 403.5 331.5 403.5 327.5 406.5 327.5 406.5 332.5 405.5 333.5 405.5 335.5 410.5 335.5 413.5 330.5 417.5 330.5 417.5 329.5 420.5 329.5 424.5 334.5 426.5 334.5 429.5 337.5 431.5 337.5 431.5 336.5 436.5 336.5 436.5 335.5 441.5 335.5 441.5 336.5 443.5 336.5 443.5 337.5 444.5 337.5 444.5 335.5 447.5 335.5 447.5 339.5 448.5 341.5 450.5 341.5 450.5 340.5 453.5 340.5 453.5 341.5 456.5 341.5 456.5 339.5 459.5 339.5 459.5 336.5 460.5 335.5 463.5 335.5 463.5 334.5 467.5 328.5 468.5 327.5 472.5 327.5 477.5 332.5 477.5 334.5 479.5 334.5 479.5 333.5 483.5 333.5 483.5 338.5 486.5 341.5 486.5 344.5 487.5 345.5 487.5 346.5 486.5 346.5 486.5 349.5 484.5 350.5 484.5 354.5 486.5 354.5 487.5 356.5 487.5 363.5 488.5 363.5 489.5 364.5 494.5 364.5 494.5 363.5 497.5 359.5 502.5 359.5 503.5 358.5 503.5 355.5 501.5 355.5 501.5 352.5 504.5 352.5 506.5 350.5 506.5 348.5 505.5 347.5 505.5 345.5 508.5 345.5 508.5 344.5 510.5 344.5 510.5 349.5 511.5 351.5 512.5 351.5 512.5 353.5 518.5 353.5 520.5 355.5 520.5 356.5 522.5 356.5 522.5 355.5 523.5 355.5 523.5 352.5 528.5 352.5 528.5 353.5 530.5 353.53"/>
    <polyline class="cls-3" points="331.93 498.21 334.5 496.5 334.5 492.5 333.5 492.5 333.5 478.5 331.5 478.5 332.5 475.5 336.5 472.5 337.5 472.5 336.5 477.5 339.5 478.5 343.5 479.5 344.5 481.5 345.5 480.5 346.5 479.5 349.5 479.5 349.5 482.5 350.5 484.5 350.5 491.5 346.5 492.5 346.5 493.5 350.5 493.5 350.5 494.5 352.5 494.5 352.5 497.5 353.5 498.5 357.5 498.5 357.5 500.5 362.5 500.5 362.5 504.5 367.5 510.5 371.5 513.5 372.5 514.5 374.5 514.5 374.5 508.5 378.5 508.5 378.5 507.5 384.5 507.5 385.5 509.5 391.5 509.5 391.5 517.5 395.5 522.5 399.5 522.5 399.5 527.5 400.5 528.5 400.5 529.5 403.5 529.5 403.5 523.5 404.5 523.5 405.5 525.5 407.5 525.5 411.5 518.5 413.5 518.5 413.5 519.5 415.5 519.5 422.5 509.5 422.5 505.5 416.5 502.5 416.5 498.5 417.5 494.5 421.5 494.5 422.5 497.5 422.5 501.5 427.5 502.5 427.5 508.5 433.5 508.5 437.5 511.5 443.5 511.5 448.5 508.5 452.5 508.5 452.5 512.5 452.5 519.5 456.5 519.5 456.5 520.5 459.5 520.5 461.5 517.5 466.5 517.5 466.5 519.5 468.5 519.5 468.5 517.5 471.5 517.5 471.5 515.5 470.5 515.5 470.5 513.5 475.5 513.5 476.5 511.5 479.5 511.5 482.5 519.5 485.5 520.5 489.5 520.5 489.5 514.5 487.5 513.5 488.5 510.5 490.5 510.5 497.5 518.5 502.5 518.5 503.5 520.5 505.5 520.5 505.5 518.5 510.5 518.5 510.5 519.5 519.5 519.5 520.5 521.5 523.5 521.5 523.5 513.5 526.5 510.5 527.5 510.5 528.5 511.5 530.5 511.5 530.5 522.5 542.5 522.5"/>
    <polyline class="cls-3" points="391.77 592.77 393.5 592.5 393.5 588.5 394.5 588.5 394.5 585.5 395.5 585.5 395.5 583.5 398.5 583.5 398.5 584.5 401.5 584.5 401.5 583.5 403.5 583.5 403.5 581.5 405.5 580.5 405.5 576.5 406.5 576.5 406.5 575.5 410.5 575.5 410.5 574.5 412.5 574.5 415.5 578.5 415.5 579.5 424.5 579.5 424.5 580.5 426.5 580.5 426.5 583.5 428.5 583.5 431.5 587.5 432.5 588.5 432.5 590.5 431.5 590.5 430.5 591.5 430.5 593.5 431.5 593.5 431.5 596.5 435.5 596.5 435.5 595.5 437.5 595.5 437.5 594.5 438.5 593.5 440.5 593.5 443.5 596.5 444.5 597.5 444.5 599.5 446.5 599.5 447.5 598.5 447.5 597.5 451.5 597.5 453.5 596.5 458.5 590.5 459.5 589.5 459.5 585.5 460.5 585.5 464.5 580.5 465.5 577.5 470.5 570.5 470.5 565.5 471.5 565.5 472.5 564.5 476.5 564.5 476.5 563.5 477.5 562.5 496.5 562.5 499.5 560.5 500.5 556.5 500.5 552.5 501.5 552.5 501.5 550.5 504.5 543.5 504.5 541.5 503.5 541.5 503.5 533.5 499.5 526.5 499.5 523.5 498.5 523.5 498.52 518.5"/>
    <polyline class="cls-3" points="459.35 589.65 462.5 589.5 462.5 590.5 464.5 592.5 470.5 592.5 472.5 594.5 472.5 596.5 471.5 596.5 471.5 598.5 470.5 599.5 470.5 605.5 468.5 607.5 468.5 612.5 463.5 615.5 463.5 618.5 462.5 618.5 462.5 621.5 457.5 625.5 455.5 625.5 451.5 627.5 444.5 634.5 433.5 634.5 433.5 636.5 425.5 643.5 425.5 645.5 428.5 648.5 431.5 654.5 434.5 661.5 435.5 663.5 435.5 664.5 431.5 664.5 428.5 666.5 428.5 668.5 424.5 668.5 423.5 668.5 423.5 669.5 420.5 669.5 420.5 668.5 412.5 668.5 412.5 670.5 407.5 670.5 406.5 671.5 406.5 674.5 405.5 674.5 405.5 679.5 404.5 679.5 404.5 680.5 402.5 681.5 402.5 682.5 400.5 682.5 400.5 681.5 399.5 680.5 390.5 680.5 389.5 680.5 388.5 678.5 386.5 678.5 386.5 679.5 384.5 679.5 384.5 680.5 381.5 680.5 381.5 678.5 379.5 678.5 379.5 679.5 378.5 679.5 374.44 675.56"/>
    <polyline class="cls-3" points="428.81 640.6 427.5 640.5 425.5 640.5 424.5 639.5 422.5 639.5 421.5 636.5 421.5 631.5 420.5 631.5 420.5 629.5 418.5 627.5 411.5 627.5 411.5 629.5 406.5 629.5 396.98 624.15"/>
    <polyline class="cls-3" points="96.5 699.15 98.5 699.5 98.5 701.5 102.5 701.5 102.5 703.5 104.5 703.5 104.5 708.5 105.5 708.5 105.5 709.5 108.5 709.5 108.5 713.5 110.5 713.5 112.5 711.5 114.5 711.5 115.5 713.5 117.5 714.5 117.5 717.5 122.5 717.5 122.5 718.5 126.5 718.5 126.5 715.5 127.5 714.5 127.5 709.5 131.5 705.5 133.5 705.5 133.5 707.5 138.5 707.5 138.5 708.5 142.5 708.5 142.5 706.5 145.5 702.5 145.5 700.5 146.5 699.5 146.5 697.5 144.5 697.5 144.5 694.5 146.5 692.5 150.5 692.5 151.5 691.5 153.5 691.5 153.5 692.5 155.5 692.5 160.5 687.5 165.5 687.5 167.5 691.5 170.5 693.5 170.5 696.5 173.5 696.5 173.5 694.5 175.5 693.5 179.5 693.5 179.5 692.5 184.5 689.5 186.5 689.5 186.5 690.5 188.5 690.5 188.5 688.5 189.5 687.5 192.5 687.5 192.5 686.5 201.5 686.5 206.5 681.5 211.5 681.5 214.5 679.5 216.5 679.5 216.5 681.5 217.5 684.5 219.5 684.5 222.5 681.5 222.5 678.5 223.5 676.5 223.5 674.5 222.5 673.5 222.5 670.5 220.5 669.5 220.5 667.5 222.5 667.5 224.5 671.5 229.5 671.5 229.5 673.5 230.5 673.5 230.5 668.5 233.5 668.5 235.5 667.5 235.5 663.5 234.5 663.5 234.5 657.5 233.5 656.5 232.5 655.5 228.5 655.5 228.5 654.5 232.5 654.5 232.5 653.5 235.5 653.5 235.5 650.5 234.5 650.5 234.5 648.5 235.5 646.5 237.5 646.5 237.5 642.5 234.5 642.5 234.5 637.5 235.5 635.5 235.5 633.5 240.5 633.5 243.5 637.5 248.5 637.5 249.5 636.5 250.5 635.5 254.5 635.5 256.5 637.5 256.5 638.5 261.5 638.5 262.5 636.5 264.5 636.5 275.5 643.5 279.5 643.5 279.5 644.5 282.98 644.5"/>
  </g>
  <polygon class="cls-4" points="655.5 477.5 655.5 478.5 656.5 478.5 656.5 479.5 657.5 479.5 657.5 478.5 657.5 477.5 656.5 477.5 655.5 477.5"/>
  <polygon class="cls-4" points="48.5 82.5 44.5 87.5 44.5 93.5 40.5 100.5 38.5 104.5 33.5 123.5 33.5 125.5 40.5 141.5 40.5 184.5 24.5 217.5 21.5 217.5 16.5 214.5 14.5 214.5 11.5 216.5 11.5 217.5 16.5 217.5 16.5 219.5 12.5 219.5 12.5 222.5 11.5 222.5 11.5 228.5 8.5 233.5 8.5 238.5 7.5 238.5 7.5 243.5 8.5 243.5 10.5 256.5 18.5 269.5 22.5 269.5 25.5 274.5 29.5 274.5 34.5 283.5 39.5 289.5 39.5 293.5 45.5 304.5 47.5 304.5 47.5 310.5 48.5 310.5 48.5 313.5 52.5 320.5 64.5 331.5 64.5 333.5 66.5 333.5 66.5 331.5 80.5 342.5 86.5 342.5 101.5 356.5 101.5 358.5 101.5 364.5 101.5 370.5 103.5 370.5 108.5 364.5 110.5 364.5 118.5 369.5 124.5 373.5 133.5 376.5 142.5 381.5 150.5 384.5 159.5 386.5 176.5 389.5 192.5 394.5 192.5 404.5 193.5 404.5 193.5 411.5 194.5 412.5 200.5 412.5 200.5 402.5 209.5 395.5 217.5 395.5 218.5 399.5 228.5 406.5 230.5 406.5 230.5 403.5 235.5 403.5 235.5 406.5 233.5 406.5 233.5 413.5 232.5 413.5 232.5 419.5 235.5 419.5 235.5 420.5 232.5 422.5 232.5 426.5 233.5 427.5 233.5 429.5 236.5 429.5 236.5 433.5 235.5 433.5 235.5 438.5 232.5 438.5 232.5 442.5 227.5 442.5 227.5 440.5 220.5 440.5 220.5 441.5 214.5 441.5 209.5 443.5 208.5 445.5 207.5 445.5 207.5 444.5 205.5 444.5 198.5 460.5 194.5 460.5 194.5 468.5 203.5 477.5 203.5 479.5 204.5 479.5 204.5 482.5 200.5 484.5 197.5 482.5 186.5 482.5 185.5 484.5 185.5 487.5 184.5 489.5 184.5 492.5 182.5 493.5 182.5 502.5 181.5 503.5 181.5 515.5 178.5 519.5 178.5 524.5 166.5 530.5 166.5 533.5 165.5 534.5 161.5 534.5 160.5 538.5 151.5 548.5 151.5 556.5 150.5 556.5 150.5 560.5 149.5 560.5 149.5 562.5 144.5 562.5 144.5 567.5 145.5 567.5 145.5 571.5 139.5 577.5 139.5 580.5 141.5 580.5 141.5 585.5 142.5 585.5 144.5 590.5 145.5 591.5 148.5 591.5 148.5 595.5 146.5 597.5 146.5 601.5 147.5 601.5 148.5 607.5 149.5 608.5 150.5 608.5 150.5 611.5 145.5 613.5 145.5 616.5 144.5 616.5 141.5 614.5 141.5 619.5 138.5 618.5 134.5 618.5 134.5 617.5 131.5 617.5 131.5 619.5 129.5 619.5 129.5 620.5 123.5 620.5 123.5 619.5 119.5 619.5 119.5 620.5 114.5 625.5 110.5 625.5 109.5 623.5 105.5 623.5 103.5 620.5 103.5 615.5 99.5 615.5 99.5 614.5 91.5 614.5 90.5 614.5 88.5 612.5 87.5 612.5 84.5 614.5 80.5 611.5 80.5 610.5 79.5 610.5 77.5 612.5 74.5 612.5 74.5 613.5 73.5 613.5 73.5 619.5 69.5 623.5 69.5 628.5 68.5 628.5 68.5 632.5 64.5 637.5 64.5 642.5 62.5 642.5 62.5 646.5 65.5 651.5 65.5 654.5 68.5 657.5 68.5 658.5 67.5 658.5 67.5 661.5 56.5 666.5 56.5 676.5 56.5 682.5 62.5 682.5 63.5 683.5 68.5 683.5 72.5 688.5 75.5 688.5 75.5 685.5 77.5 685.5 82.5 690.5 86.5 690.5 86.5 693.5 87.5 693.5 87.5 691.5 88.5 691.5 88.5 690.5 92.5 690.5 93.5 694.5 95.5 696.5 96.5 697.5 96.5 698.5 96.5 699.5 94.5 699.5 92.5 701.5 92.5 705.5 88.5 708.5 86.5 708.5 86.5 711.5 79.5 716.5 79.5 718.5 82.5 722.5 82.5 725.5 81.5 725.5 81.5 732.5 81.5 741.5 82.5 742.5 82.5 747.5 88.5 757.5 88.5 761.5 87.5 761.5 87.5 764.5 89.5 765.5 89.5 773.5 92.5 773.5 92.5 770.5 95.5 770.5 97.5 775.5 97.5 778.5 96.5 778.5 96.5 781.5 101.5 787.5 103.5 791.5 103.5 795.5 104.5 796.5 104.5 801.5 105.5 802.5 105.5 808.5 103.5 811.5 101.5 811.5 98.5 811.5 97.5 812.5 99.5 813.5 100.5 814.5 97.5 817.5 95.5 817.5 89.5 810.5 85.5 810.5 76.5 821.5 76.5 824.5 75.5 825.5 70.5 825.5 67.5 822.5 65.5 822.5 54.5 830.5 54.5 832.5 55.5 832.5 55.5 834.5 46.5 844.5 45.5 846.5 45.5 853.5 49.5 857.5 49.5 859.5 46.5 863.5 46.5 866.5 40.5 866.5 38.5 869.5 38.5 873.5 36.5 874.5 36.5 880.5 39.5 882.5 42.5 883.5 45.5 887.5 46.5 890.5 53.5 898.5 53.5 902.5 52.5 903.5 51.5 907.5 48.5 904.5 47.5 904.5 42.5 908.5 41.5 908.5 39.5 905.5 35.5 905.5 34.5 906.5 32.5 906.5 29.5 906.5 28.5 905.5 26.5 905.5 25.5 905.5 24.5 903.5 20.5 900.5 18.5 899.5 15.5 899.5 15.5 898.5 14.5 897.5 13.5 897.5 13.5 898.5 12.5 899.5 10.5 900.5 7.5 900.5 6.5 900.5 6.5 898.5 5.5 898.5 5.5 895.5 5.5 894.5 3.5 894.5 3.5 898.5 1.5 899.5 1.5 900.5 3.5 903.5 3.5 906.5 2.5 907.5 3.5 908.5 3.5 911.5 2.5 911.5 2.5 914.5 1.5 914.5 0.5 915.5 0.5 919.5 2.5 919.5 2.5 924.5 6.5 928.5 6.5 944.5 5.5 946.5 5.5 950.5 4.5 950.5 4.5 954.5 2.5 954.5 2.5 955.5 4.5 957.5 1.5 961.5 1.5 968.5 7.5 973.5 10.5 973.5 11.5 974.5 11.5 981.5 10.5 981.5 10.5 983.5 12.5 984.5 14.5 984.5 15.5 983.5 18.5 983.5 18.5 982.5 22.5 982.5 22.5 983.5 26.5 983.5 26.5 986.5 29.5 986.5 29.5 982.5 32.5 982.5 37.5 977.5 39.5 977.5 40.5 980.5 40.5 983.5 42.5 983.5 44.5 983.5 44.5 982.5 46.5 980.5 46.5 977.5 47.5 977.5 47.5 973.5 50.5 973.5 50.5 974.5 52.5 976.5 57.5 976.5 57.5 979.5 65.5 984.5 78.5 984.5 99.5 965.5 112.5 965.5 112.5 984.5 116.5 988.5 118.5 992.5 120.5 992.5 124.5 987.5 126.5 987.5 126.5 990.5 129.5 993.5 131.5 993.5 135.5 989.5 135.5 987.5 132.5 982.5 132.5 980.5 134.5 980.5 134.5 979.5 135.5 979.5 135.5 976.5 132.5 971.5 132.5 967.5 135.5 964.5 135.5 961.5 147.5 949.5 149.5 949.5 149.5 955.5 150.5 955.5 150.5 966.5 152.5 966.5 156.5 962.5 159.5 963.5 167.5 971.5 171.5 971.5 183.5 956.5 192.5 956.5 192.5 955.5 195.5 951.5 195.5 944.5 187.5 938.5 187.5 930.5 190.5 926.5 191.5 925.5 191.5 920.5 193.5 917.5 196.5 914.5 202.5 911.5 206.5 908.5 207.5 906.5 208.5 905.5 208.5 897.5 207.5 897.5 206.5 895.5 204.5 895.5 204.5 896.5 196.5 896.5 192.5 890.5 192.5 882.5 195.5 876.5 198.5 874.5 203.5 874.5 203.5 875.5 208.5 875.5 209.5 876.5 215.5 882.5 216.5 885.5 215.5 886.5 215.5 890.5 217.5 890.5 218.5 889.5 220.5 889.5 223.5 894.5 223.5 897.5 222.5 898.5 222.5 901.5 221.5 901.5 221.5 905.5 224.5 905.5 230.5 902.5 233.5 902.5 233.5 903.5 234.5 905.5 236.5 905.5 239.5 900.5 239.5 896.5 242.5 892.5 242.5 888.5 246.5 880.5 248.5 880.5 248.5 873.5 250.5 873.5 250.5 865.5 253.5 863.5 253.5 858.5 246.5 847.5 246.5 839.5 251.5 826.5 257.5 812.5 260.5 804.5 265.5 798.5 268.5 796.5 270.5 797.5 273.5 799.5 278.5 799.5 281.5 798.5 284.5 797.5 286.5 795.5 287.5 793.5 288.5 791.5 288.5 787.5 289.5 783.5 291.5 783.5 293.5 785.5 294.5 785.5 297.5 782.5 297.5 781.5 295.5 778.5 295.5 776.5 295.5 775.5 297.5 775.5 297.5 778.5 298.5 780.5 299.5 783.5 302.5 783.5 304.5 783.5 305.5 784.5 307.5 782.5 306.5 779.5 308.5 776.5 310.5 773.5 312.5 770.5 314.5 765.5 316.5 766.5 317.5 767.5 318.5 765.5 317.5 764.5 319.5 762.5 325.5 759.5 329.5 758.5 330.5 758.5 331.5 761.5 330.5 762.5 328.5 765.5 325.5 766.5 322.5 765.5 322.5 771.5 320.5 771.5 318.5 774.5 317.5 775.5 317.5 779.5 311.5 785.5 311.5 790.5 309.5 792.5 309.5 795.5 310.5 796.5 318.5 796.5 326.5 792.5 327.5 792.5 327.5 787.5 326.5 787.5 326.5 781.5 332.5 774.5 334.5 773.5 338.5 765.5 343.5 758.5 347.5 758.5 347.5 752.5 354.5 747.5 355.5 746.5 370.5 746.5 371.5 745.5 373.5 745.5 375.5 740.5 376.5 736.5 377.5 732.5 377.5 729.5 378.5 725.5 379.5 724.5 379.5 721.5 378.5 721.5 378.5 717.5 374.5 716.5 371.5 715.5 368.5 713.5 367.5 713.5 365.5 716.5 362.5 719.5 360.5 720.5 360.5 723.5 361.5 726.5 361.5 728.5 357.5 728.5 354.5 724.5 353.5 725.5 353.5 730.5 352.5 731.5 351.5 731.5 351.5 738.5 347.5 738.5 347.5 729.5 350.5 725.5 351.5 721.5 353.5 719.5 355.5 716.5 355.5 714.5 352.5 709.5 350.5 709.5 329.5 727.5 324.5 727.5 324.5 725.5 326.5 725.5 336.5 714.5 336.5 711.5 340.5 707.5 340.5 703.5 341.5 703.5 341.5 701.5 338.5 699.5 338.5 696.5 343.5 696.5 344.5 694.5 344.5 687.5 340.5 684.5 321.5 684.5 317.5 684.5 312.5 679.5 312.5 676.5 309.5 673.5 306.5 673.5 304.5 667.5 299.5 663.5 296.5 663.5 294.5 662.5 287.5 662.5 285.5 661.5 285.5 653.5 284.5 653.5 282.5 645.5 282.5 644.5 290.5 644.5 295.5 639.5 296.5 637.5 297.5 635.5 297.5 624.5 296.5 615.5 308.5 605.5 311.5 601.5 314.5 598.5 321.5 594.5 329.5 591.5 333.5 591.5 335.5 595.5 335.5 603.5 337.5 606.5 341.5 606.5 346.5 598.5 354.5 599.5 355.5 601.5 354.5 603.5 352.5 606.5 352.5 607.5 355.5 611.5 358.5 611.5 360.5 608.5 362.5 608.5 362.5 612.5 365.5 612.5 368.5 607.5 378.5 607.5 378.5 600.5 373.5 596.5 370.5 596.5 370.5 593.5 369.5 592.5 369.5 584.5 371.5 582.5 375.5 580.5 382.5 579.5 383.5 579.5 383.5 581.5 390.5 591.5 395.5 596.5 400.5 599.5 402.5 602.5 405.5 611.5 405.5 612.5 401.5 613.5 399.5 616.5 398.5 621.5 397.5 623.5 393.5 628.5 387.5 642.5 386.5 643.5 386.5 651.5 385.5 651.5 385.5 654.5 382.5 654.5 381.5 655.5 381.5 657.5 380.5 657.5 380.5 658.5 381.5 658.5 381.5 660.5 378.5 662.5 377.5 666.5 376.5 667.5 375.5 667.5 375.5 669.5 377.5 669.5 377.5 671.5 376.5 671.5 375.5 674.5 372.5 677.5 372.5 680.5 371.5 681.5 371.5 685.5 368.5 685.5 367.5 687.5 367.5 693.5 366.5 693.5 365.5 695.5 365.5 698.5 371.5 698.5 371.5 695.5 370.5 695.5 370.5 692.5 374.5 692.5 374.5 693.5 378.5 693.5 378.5 689.5 380.5 687.5 384.5 687.5 384.5 692.5 388.5 692.5 389.5 690.5 391.5 690.5 391.5 691.5 392.5 691.5 392.5 694.5 390.5 697.5 390.5 698.5 393.5 698.5 396.5 694.5 400.5 694.5 402.5 699.5 403.5 699.5 406.5 696.5 406.5 693.5 405.5 693.5 405.5 690.5 413.5 687.5 414.5 687.5 414.5 690.5 413.5 690.5 413.5 693.5 422.5 693.5 425.5 689.5 428.5 689.5 429.5 690.5 432.5 690.5 432.5 692.5 435.5 692.5 435.5 689.5 434.5 688.5 434.5 685.5 437.5 683.5 438.5 683.5 438.5 684.5 439.5 685.5 440.5 685.5 440.5 682.5 455.5 667.5 461.5 667.5 463.5 670.5 467.5 670.5 471.5 668.5 477.5 668.5 477.5 666.5 483.5 666.5 483.5 667.5 484.5 668.5 485.5 668.5 487.5 666.5 489.5 666.5 490.5 666.5 490.5 664.5 491.5 664.5 491.5 660.5 488.5 657.5 488.5 656.5 489.5 656.5 489.5 655.5 492.5 655.5 492.5 656.5 493.5 657.5 497.5 657.5 497.5 658.5 500.5 658.5 500.5 656.5 501.5 656.5 501.5 653.5 504.5 652.5 505.5 654.5 504.5 657.5 504.5 659.5 506.5 661.5 513.5 661.5 518.5 656.5 519.5 653.5 519.5 651.5 522.5 649.5 525.5 649.5 525.5 650.5 529.5 653.5 534.5 653.5 534.5 652.5 541.5 649.5 548.5 643.5 551.5 643.5 555.5 646.5 565.5 646.5 570.5 641.5 571.5 638.5 570.5 636.5 569.5 635.5 567.5 635.5 566.5 636.5 563.5 636.5 563.5 628.5 560.5 627.5 560.5 625.5 564.5 625.5 564.5 624.5 565.5 624.5 565.5 620.5 560.5 618.5 560.5 616.5 559.5 616.5 559.5 606.5 558.5 606.5 558.5 601.5 559.5 601.5 559.5 590.5 558.5 590.5 558.5 586.5 557.5 586.5 557.5 582.5 556.5 578.5 552.5 574.5 552.5 571.5 553.5 571.5 556.5 565.5 556.5 562.5 555.5 562.5 555.5 559.5 554.5 558.5 554.5 556.5 555.5 556.5 555.5 549.5 552.5 547.5 550.5 547.5 545.5 551.5 542.5 551.5 539.5 548.5 539.5 544.5 545.5 536.5 546.5 535.5 546.5 531.5 542.5 525.5 542.5 522.5 541.5 521.5 541.5 519.5 542.5 519.5 544.5 515.5 546.5 515.5 547.5 516.5 547.5 518.5 555.5 518.5 555.5 519.5 561.5 519.5 564.5 518.5 571.5 518.5 577.5 521.5 579.5 521.5 579.5 519.5 583.5 518.5 583.5 516.5 580.5 513.5 580.5 510.5 575.5 504.5 575.5 500.5 574.5 500.5 574.5 497.5 569.5 497.5 564.5 491.5 560.5 489.5 560.5 487.5 559.5 487.5 559.5 477.5 566.5 470.5 566.5 467.5 567.5 467.5 567.5 466.5 569.5 466.5 572.5 463.5 574.5 463.5 574.5 456.5 575.5 456.5 575.5 454.5 579.5 452.5 589.5 452.5 590.5 449.5 591.5 448.5 591.5 445.5 589.5 444.5 589.5 439.5 588.5 438.5 588.5 434.5 589.5 432.5 612.5 432.5 613.5 431.5 626.5 431.5 629.5 435.5 629.5 441.5 629.5 446.5 627.5 448.5 627.5 451.5 631.5 451.5 638.5 458.5 638.5 464.5 632.5 469.5 632.5 473.5 634.5 477.5 634.5 482.5 636.5 486.5 642.5 488.5 644.5 490.5 643.5 492.5 643.5 493.5 644.5 493.5 645.5 492.5 651.5 489.5 653.5 489.5 655.5 485.5 655.5 483.5 652.5 480.5 652.5 477.5 655.5 473.5 658.5 468.5 663.5 462.5 666.5 461.5 667.5 462.5 667.5 466.5 669.5 466.5 672.5 464.5 673.5 462.5 673.5 459.5 670.5 459.5 670.5 460.5 667.5 460.5 664.5 456.5 664.5 449.5 660.5 444.5 660.5 441.5 666.5 437.5 672.5 437.5 674.5 442.5 678.5 442.5 680.5 439.5 680.5 435.5 684.5 433.5 688.5 428.5 688.5 423.5 682.02 415.17 681.5 414.5 683.5 412.5 683.5 409.5 681.5 406.5 685.5 399.5 688.5 393.5 693.5 388.5 696.5 383.5 696.5 381.5 689.5 372.5 686.5 370.5 683.5 369.5 675.5 369.5 671.5 367.5 667.5 363.5 665.5 364.5 663.5 366.5 660.5 366.5 652.5 359.5 652.5 351.5 648.5 344.5 642.5 343.5 635.5 339.5 632.5 339.5 602.5 353.5 600.5 352.5 599.5 348.5 593.5 341.5 589.5 342.5 588.5 342.5 583.5 335.5 578.5 335.5 577.5 336.5 576.5 335.5 576.5 331.5 570.5 331.5 565.5 336.5 565.5 338.5 562.5 340.5 561.5 343.5 563.5 346.5 563.5 347.5 557.5 347.5 551.5 353.5 547.5 353.5 540.5 359.5 537.5 359.5 534.5 361.5 533.5 363.5 531.5 361.5 531.5 356.5 530.5 354.5 530.5 349.5 533.5 346.5 533.5 337.5 535.5 335.5 535.5 330.5 538.5 328.5 542.5 328.5 542.5 323.5 541.5 319.5 542.5 314.5 540.5 313.5 537.5 313.5 537.5 311.5 537.5 310.5 538.5 310.5 538.5 306.5 536.5 306.5 534.5 304.5 533.5 305.5 528.5 308.5 526.5 308.5 526.5 301.5 528.5 301.5 529.5 300.5 529.5 299.5 523.5 293.5 523.5 290.5 521.5 289.5 519.5 289.5 519.5 288.5 513.5 288.5 509.5 287.5 508.5 286.5 508.5 283.5 512.5 278.5 512.5 274.5 510.5 274.5 510.5 271.5 509.5 270.5 509.5 267.5 507.5 265.5 506.5 263.5 506.5 260.5 505.5 259.5 503.5 259.5 502.5 261.5 500.5 261.5 500.5 260.5 496.5 260.5 494.5 256.5 492.5 256.5 490.5 254.5 488.5 254.5 488.5 248.5 490.5 248.5 490.5 247.5 488.5 246.5 488.5 243.5 487.5 243.5 487.5 239.5 489.5 239.5 490.5 236.5 493.5 232.5 496.5 224.5 497.5 218.5 511.5 218.5 513.5 218.5 514.5 216.5 516.5 215.5 516.5 211.5 517.5 208.5 515.5 207.5 518.5 205.5 519.5 204.5 519.5 200.5 518.5 198.5 516.5 198.5 514.5 197.5 512.5 196.5 508.5 195.5 508.5 194.5 508.5 192.5 509.5 191.5 509.5 189.5 511.5 189.5 511.5 186.5 510.5 185.5 509.5 183.5 504.5 183.5 503.5 181.5 503.5 169.5 506.5 169.5 506.5 168.5 513.5 168.5 518.5 167.5 518.5 165.5 522.5 165.5 524.5 162.5 525.5 160.5 525.5 150.5 514.5 150.5 513.5 149.5 511.5 149.5 502.5 139.5 501.5 139.5 501.5 128.5 500.5 126.5 498.5 126.5 496.5 123.5 496.5 117.5 498.5 115.5 499.5 105.5 500.5 100.5 502.5 100.5 502.5 93.5 505.5 92.5 509.5 95.5 509.5 98.5 512.5 98.5 512.5 99.5 514.5 99.5 514.5 96.5 516.5 96.5 516.5 93.5 517.5 93.5 517.5 86.5 515.5 86.5 515.5 85.5 516.5 83.5 520.5 81.5 520.5 75.5 519.5 75.5 519.5 71.5 516.5 71.5 516.5 68.5 518.5 68.5 518.5 65.5 516.5 63.5 507.5 63.5 507.5 58.5 506.5 56.5 504.5 56.5 504.5 62.5 500.5 64.5 494.5 64.5 491.5 67.5 489.5 67.5 482.5 59.5 482.5 57.5 484.5 57.5 486.5 55.5 486.5 50.5 485.5 49.5 486.5 48.5 486.5 44.5 484.5 44.5 484.5 36.5 485.5 36.5 485.5 28.5 488.5 28.5 488.5 24.5 489.5 24.5 489.5 18.5 488.5 15.5 487.5 15.5 487.5 11.5 487.5 10.5 483.5 10.5 480.5 7.5 480.5 4.5 479.5 4.5 479.5 3.5 476.5 3.5 476.5 0.5 470.5 0.5 464.5 9.5 464.5 12.5 462.5 15.5 456.5 15.5 450.5 20.5 449.5 21.5 446.5 19.5 441.5 19.5 441.5 17.5 439.5 16.5 439.5 18.5 437.5 18.5 437.5 20.5 434.5 20.5 432.5 21.5 431.5 23.5 430.5 23.5 428.5 21.5 427.5 22.5 426.5 24.5 423.5 23.5 424.5 26.5 425.5 27.5 425.5 31.5 423.5 33.5 419.5 33.5 414.5 28.5 411.5 28.5 411.5 27.5 405.5 27.5 401.5 30.5 401.5 34.5 400.5 34.5 399.5 37.5 399.5 40.5 397.5 40.5 397.5 43.5 394.5 45.5 394.5 42.5 393.5 42.5 393.5 38.5 389.5 34.5 389.5 28.5 388.5 25.5 386.5 23.5 384.5 23.5 382.5 26.5 381.5 26.5 378.5 22.5 375.5 22.5 374.5 21.5 372.5 19.5 372.5 15.5 373.5 15.5 373.5 10.5 371.5 10.5 370.5 11.5 366.5 11.5 365.5 13.5 363.5 13.5 363.5 11.5 361.5 11.5 358.5 17.5 356.5 19.5 355.5 21.5 352.5 21.5 350.5 18.5 348.5 18.5 347.5 19.5 346.5 18.5 344.5 15.5 342.5 14.5 341.5 14.5 341.5 18.5 340.5 18.5 340.5 21.5 340.5 25.5 339.5 26.5 339.5 27.5 340.5 29.5 340.5 33.5 338.5 33.5 338.5 35.5 340.5 35.5 339.5 37.5 336.5 37.5 334.5 40.5 333.5 41.5 333.5 46.5 331.5 47.5 331.5 50.5 333.5 53.5 333.5 56.5 330.5 58.5 330.5 62.5 328.5 65.5 327.5 68.5 325.5 70.5 322.5 72.5 320.5 71.5 319.5 70.5 317.5 70.5 316.5 72.5 316.5 73.5 314.5 73.5 313.5 72.5 311.5 72.5 311.5 76.5 310.5 77.5 309.5 77.5 308.5 77.5 308.5 82.5 305.5 85.5 304.5 86.5 301.5 85.5 297.5 84.5 297.5 79.5 293.5 79.5 289.5 83.5 283.5 83.5 283.5 85.5 275.5 85.5 274.5 82.5 263.5 82.5 260.5 81.5 252.5 81.5 251.5 85.5 251.5 89.5 248.5 91.5 246.5 94.5 244.5 94.5 244.5 93.5 241.5 93.5 239.5 90.5 235.5 90.5 230.5 85.5 229.5 85.5 228.5 86.5 226.5 86.5 223.5 83.5 220.5 83.5 218.5 86.5 216.5 86.5 216.5 85.5 211.5 85.5 194.5 96.5 194.5 97.5 184.5 97.5 181.5 94.5 175.5 94.5 175.5 93.5 151.5 93.5 150.5 92.5 147.5 92.5 147.5 94.5 145.5 94.5 139.5 85.5 133.5 84.5 133.5 87.5 127.5 89.5 122.5 89.5 122.5 93.5 120.5 93.5 120.5 96.5 117.5 98.5 107.5 98.5 104.5 101.5 102.5 101.5 98.5 97.5 98.5 94.5 97.5 93.5 96.5 89.5 94.5 89.5 90.5 92.5 86.5 93.5 82.5 95.5 79.5 95.5 79.5 91.5 64.5 86.5 60.5 86.5 57.5 83.5 54.5 83.5 53.5 85.5 49.5 85.5 49.5 82.5 48.5 82.5"/>
  <polygon class="cls-4" points="311.5 859.5 310.5 865.5 306.5 871.5 303.5 877.5 303.5 883.5 308.5 888.5 312.5 888.5 320.5 881.5 321.5 877.5 317.5 872.5 317.5 868.5 316.5 867.5 316.5 859.5 311.5 859.5"/>
  <polygon class="cls-4" points="377.5 758.5 377.5 763.5 380.5 763.5 382.5 762.5 384.5 763.5 387.5 761.5 387.5 760.5 385.5 760.5 381.5 761.5 381.5 759.5 380.5 759.5 380.5 757.5 377.5 757.5 377.5 758.5"/>
  <polygon class="cls-4" points="465.5 748.5 463.5 748.5 463.5 749.5 464.5 751.5 467.5 751.5 467.5 748.5 465.5 748.5 465.5 748.5"/>
  <polygon class="cls-4" points="450.5 681.5 450.5 683.5 452.5 686.5 454.5 685.5 452.5 681.5 450.5 681.5"/>
  <polygon class="cls-4" points="505.5 664.5 505.5 667.5 506.5 668.5 509.5 668.5 509.5 669.5 510.5 669.5 512.5 667.5 509.5 664.5 509.5 662.5 507.5 662.5 507.5 664.5 505.5 664.5"/>
  <polygon class="cls-4" points="523.5 660.5 523.5 663.5 525.5 663.5 525.5 661.5 523.5 660.5"/>
  <line class="cls-4" x1="508.5" y1="727.5" x2="509.5" y2="728.5"/>
  <polygon class="cls-4" points="644.5 795.5 644.5 794.5 648.5 789.5 650.5 789.5 651.5 790.5 651.5 791.5 650.5 791.5 647.5 794.5 646.5 794.5 645.5 795.5 644.5 795.5"/>
  <polygon class="cls-4" points="679.5 610.5 679.5 612.5 680.5 613.5 682.5 613.5 682.5 611.5 681.5 610.5 679.5 610.5"/>
  <polygon class="cls-4" points="678.5 614.5 678.5 615.5 679.5 616.5 681.5 616.5 681.5 615.5 679.5 614.5 678.5 614.5"/>
  <polygon class="cls-4" points="594.5 574.5 594.5 578.5 593.5 578.5 593.5 581.5 596.5 584.5 598.5 584.5 599.5 583.5 599.5 581.5 598.5 580.5 598.5 579.5 597.5 579.5 597.5 574.5 594.5 574.5"/>
  <polygon class="cls-4" points="617.5 576.5 617.5 580.5 618.5 580.5 618.5 582.5 619.5 581.5 619.5 579.5 620.5 579.5 620.5 575.5 618.5 575.5 617.5 576.5 617.5 576.5"/>
  <polygon class="cls-4" points="576.5 582.5 576.5 580.5 579.5 579.5 580.5 579.5 580.5 581.5 578.5 581.5 577.5 581.5 576.5 582.5"/>
  <polygon class="cls-4" points="582.5 590.5 583.5 590.5 583.5 591.5 584.5 591.5 584.5 592.5 583.5 592.5 582.5 592.5 582.5 590.5 582.5 590.5"/>
  <polygon class="cls-4" points="571.5 543.5 571.5 547.5 570.5 547.5 570.5 548.5 572.5 549.5 573.5 549.5 574.5 548.5 574.5 543.5 571.5 543.5"/>
  <polygon class="cls-4" points="570.5 551.5 570.5 553.5 571.5 553.5 571.5 550.5 570.5 550.5 570.5 551.5"/>
  <polygon class="cls-4" points="635.5 488.5 634.5 490.5 634.5 491.5 637.5 493.5 639.5 493.5 639.5 490.5 637.5 488.5 635.5 488.5"/>
  <polygon class="cls-4" points="623.5 484.5 624.5 485.5 625.5 486.5 625.5 488.5 626.5 488.5 627.5 485.5 626.5 485.5 624.5 483.5 623.5 484.5"/>
  <polygon class="cls-4" points="670.5 471.5 671.5 471.5 671.5 468.5 672.5 468.5 672.5 467.5 673.5 467.5 673.5 465.5 675.5 465.5 676.5 467.5 676.5 468.5 674.5 468.5 673.5 469.5 673.5 471.5 672.5 472.5 670.5 472.5 670.5 471.5"/>
  <polygon class="cls-4" points="678.5 460.5 678.5 461.5 679.5 461.5 679.5 462.5 680.5 463.5 684.5 463.5 684.5 465.5 686.5 465.5 686.5 463.5 687.5 463.5 688.5 462.5 692.5 462.5 692.5 461.5 695.5 461.5 697.5 463.5 698.5 463.5 698.5 464.5 699.5 464.5 699.5 463.5 700.5 463.5 700.5 459.5 696.5 459.5 691.5 453.5 687.5 453.5 687.5 457.5 685.5 457.5 685.5 456.5 682.5 456.5 679.5 459.5 678.5 460.5"/>
  <polygon class="cls-4" points="709.5 448.5 709.5 449.5 708.5 449.5 708.5 450.5 709.5 451.5 709.5 453.5 711.5 453.5 712.5 452.5 712.5 450.5 711.5 450.5 711.5 448.5 711.5 447.5 709.5 447.5 709.5 448.5"/>
  <line class="cls-4" x1="709.5" y1="457.5" x2="710.5" y2="458.5"/>
  <polygon class="cls-4" points="697.5 415.5 697.5 418.5 698.5 418.5 698.5 419.5 699.5 419.5 700.5 418.5 701.5 418.5 701.5 417.5 705.5 417.5 705.5 416.5 704.5 415.5 703.5 414.5 702.5 414.5 701.5 415.5 700.5 415.5 699.5 414.5 698.5 414.5 697.5 415.5"/>
  <polygon class="cls-4" points="731.5 382.5 731.5 384.5 732.5 384.5 732.5 385.5 733.5 385.5 734.5 384.5 735.5 384.5 735.5 382.5 734.5 382.5 734.5 381.5 734.5 380.5 732.5 380.5 732.5 381.5 731.5 381.5 731.5 382.5"/>
  <polygon class="cls-4" points="887.5 553.5 887.5 557.5 888.5 557.5 888.5 558.5 889.5 559.5 890.5 559.5 891.5 558.5 891.5 557.5 890.5 557.5 890.5 555.5 889.5 554.5 889.5 553.5 887.5 553.5"/>
  <polygon class="cls-4" points="194.5 962.5 194.5 959.5 195.5 959.5 195.5 957.5 197.5 954.5 199.5 954.5 199.5 957.5 198.5 959.5 197.5 959.5 197.5 962.5 197.5 963.5 194.5 963.5 194.5 962.5"/>
  <polygon class="cls-4" points="154.5 967.5 154.5 970.5 155.5 970.5 155.5 971.5 157.5 971.5 157.5 970.5 157.5 969.5 155.5 969.5 155.5 967.5 154.5 967.5"/>
  <polygon class="cls-4" points="104.5 979.5 104.5 982.5 107.5 986.5 107.5 988.5 108.5 988.5 108.5 980.5 107.5 980.5 107.5 977.5 105.5 977.5 105.5 979.5 104.5 979.5"/>
</svg>

Головокружение? Видно, насколько абсурдным было то, что я думал, что буду использовать код для набора этой карты. Но не беда, если вы этого не понимаете, просто скопируйте этот код в редактор и сохраните его как xxx.svg, а затем откройте его браузером, вы увидите такую ​​картинку:

Кода для бесплатного выпуска карты Циндао нет.Если у вас есть подобные потребности перед экраном, я надеюсь, что этот код может вам помочь.

добавить анимацию

Векторной карты Циндао недостаточно, после того, как закончите код SVG, нужно использовать программу для управления анимацией:

<template>
  <svg id="tsing-tao-map" ref="map" data-name="tsing-tao-map" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 892 994" @touchend="checkScale">
    <defs>
      <defs>
        <filter id="filter" x="0" y="0" width="200%" height="200%">
          <feOffset result="offOut" in="SourceGraphic" dx="0" dy="2" />
          <feColorMatrix result="matrixOut" in="offOut" type="matrix"
          values=".15 0 0 0 0 0 .15 0 0 0 0 0 .15 0 0 0 0 0 1 0" />
          <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="1" />
          <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
      </defs>
    </defs>
    <polyline class="cls-1" ref="line0" points=" "/>
    <g class="cls-2">
      <polyline class="cls-3" ref="line1" points=" "/>
      <polyline class="cls-3" ref="line2" points=" "/>
      <polyline class="cls-3" ref="line3" points=" "/>
      <polyline class="cls-3" ref="line4" points=" "/>
      <polyline class="cls-3" ref="line5" points=" "/>
      <polyline class="cls-3" ref="line6" points=" "/>
      <polyline class="cls-3" ref="line7" points=" "/>
      <polyline class="cls-3" ref="line8" points=" "/>
    </g>
    <polygon class="cls-4" ref="line9" points=" "/>
    <polygon class="cls-4" ref="line10" points=" "/>
    <polygon class="cls-4" ref="line11" points=" "/>
    <polygon class="cls-4" ref="line12" points=" "/>
    <polygon class="cls-4" ref="line13" points=" "/>
    <polygon class="cls-4" ref="line14" points=" "/>
    <polygon class="cls-4" ref="line15" points=" "/>
    <polygon class="cls-4" ref="line16" points=" "/>
    <line class="cls-4" ref="line38" x1=" " y1=" " x2=" " y2=" "/>
    <polygon class="cls-4" ref="line17" points=" "/>
    <polygon class="cls-4" ref="line18" points=" "/>
    <polygon class="cls-4" ref="line19" points=" "/>
    <polygon class="cls-4" ref="line20" points=" "/>
    <polygon class="cls-4" ref="line21" points=" "/>
    <polygon class="cls-4" ref="line22" points=" "/>
    <polygon class="cls-4" ref="line23" points=" "/>
    <polygon class="cls-4" ref="line24" points=" "/>
    <polygon class="cls-4" ref="line25" points=" "/>
    <polygon class="cls-4" ref="line26" points=" "/>
    <polygon class="cls-4" ref="line27" points=" "/>
    <polygon class="cls-4" ref="line28" points=" "/>
    <polygon class="cls-4" ref="line29" points=" "/>
    <polygon class="cls-4" ref="line30" points=" "/>
    <line class="cls-4" ref="line39" x1=" " y1=" " x2=" " y2=" "/>
    <polygon class="cls-4" ref="line31" points=" "/>
    <polygon class="cls-4" ref="line32" points=" "/>
    <polygon class="cls-4" ref="line33" points=" "/>
    <polygon class="cls-4" ref="line34" points=" "/>
    <polygon class="cls-4" ref="line35" points=" "/>
    <polygon class="cls-4" ref="line36" points=" "/>
  </svg>
</template>

<script>
export default {
  data () {
    return {
      list: []
    }
  },
  mounted () {
    Object.entries(this.$refs).forEach(([k, v]) => k.includes('line') && this.list.push(v))
    this.clearOffset(this.list)
  },
  methods: {
    clearOffset (list) {
      list.forEach(i => {
        i.setAttribute('stroke-dasharray', i.getTotalLength())
        i.setAttribute('stroke-dashoffset', i.getTotalLength())
        setTimeout(() => i.classList.contains('cls-4') && i.getTotalLength() > 100 && i.classList.add('no-offset'), 0)
        setTimeout(() => i.classList.add('no-offset'), 6000)
      })
    }
  }
}
</script>

<style lang="scss">
:root {
  background: black;
}
#tsing-tao-map {
  --stroke: white;
  --opacity: .8;
  --width: 1.2;
  height: 100vh;
  padding-left: 6vw;
  overflow: visible;
}
.cls- {
  &1, &3, &4 {
    fill: none;
    stroke: var(--stroke) { miterlimit: 10; width: var(--width) }
  }
  &1, &2 { opacity: var(--opacity) }
  &1, &2, &3 { stroke-width: calc(var(--width) * .8) }
}
.no-offset {
  transition: stroke-dashoffset 6s ease-in-out;
  stroke-dashoffset: 0
}
</style>

Подождите, разве это не означает, что он не зависит ни от какого фреймворка или библиотеки? Как это выглядит в коде Vue?

Эта карта и последующие серии действительно сделаны из нативного SVG, но если она написана на чистом JS для взаимодействия с SVG, она выглядит недостаточно интуитивно понятной. Чтобы сделать его более интуитивно понятным для всех, я удалил все точки координат в SVG.Если вам нужно его использовать, вы можете напрямую скопировать точки координат из предыдущего кода SVG.

На самом деле в этом примере Vue делает что-то очень обычное.

Вы всегда можете преобразовать его в код React, Angular или даже jQuery.
Просто Vue выглядит более интуитивно понятным при выполнении простой логики.

результат операции:

Из-за ограничения размера динамического изображения оно выглядит как одна карта, но эффект очень плавный при реальном запуске на компьютере (То же самое верно для всех динамических изображений, следующих за).

Хоть анимация штриха и написана, но есть еще одна каверзная проблема: пропала система координат!

Преобразование системы координат

Что значит отсутствие системы координат? Поскольку ECharts также производится Baidu, система координат карты ECharts — это система координат Baidu, поиск Baidu.Координаты Байду", первой появится система координат Baidu Pickup:

Там, где находится мышь, появятся координаты, соответствующие этой позиции, например:

Но у SVG нет системы координат Baidu! Тем не менее, мы все еще можем имитировать его сами, чтобы проанализировать идею:
Если представить SVG как картинку, то у этой картинки есть ширина и высота, верно (Разве это не ерунда!)
Тогда левый верхний угол - это начало координат (Происхождение в глазах компьютера находится в верхнем левом углу), ширина - это абсцисса, а высота - это ордината
В соответствии с картой Baidu нужно найти позицию в верхнем левом углу SVG:

Однако текущее изображение SVG немного велико, немного уменьшите его, а затем снова выровняйте:

Вот примерно так, хотя и не совсем правильно(В художественном изображении есть небольшая ошибка, и ее нельзя полностью перекрыть), но вы можете понять смысл.
Затем дайте границу, чтобы увидеть, где находится верхний левый угол:

На этот раз я знаю, как написать алгоритм.Фон — точка, пройденная по системе координат Baidu.
Координатная точка, переданная в Baidu, вы вычитаете из нее координатную точку верхнего левого угла, и результатом является положение относительно верхнего левого угла. Затем умножьте это изображение на масштаб карты Baidu, алгоритм следующий:

location ([x, y]) {
      return [(x - 119.87) * 773, (37.13 - y) * 637.445]
}

Почему абсцисса равна x минус верхняя левая абсцисса, а когда ордината становится верхней левой ординатой минус y? (* x и y - координаты, переданные в * )

Это связано с тем, что источником карты Baidu является не верхний левый угол карты мира, а центр карты мира:

Это отличается от верхнего левого угла компьютера в качестве начала координат Это плоская прямоугольная система координат, которую мы изучили в средней школе. Вы еще помните, что однажды сказал известный китайский мыслитель и писатель Лу Синь:

  • Нечетные и четные неизмененные символы см. квадранты

Присмотревшись, наша страна находится в первом квадранте:

Абсцисса больше справа, поэтому это значение, переданное минус верхний левый угол.
Ордината прямо противоположна компьютерной системе координат.Первый квадрант состоит в том, что чем дальше вниз по ординате, тем меньше ордината, и чем ниже компьютерная координата, тем больше ордината.
Значит нужно вычесть входящую ординату из значения в левом верхнем углу.

Конечно, этот алгоритм заточен под карту Циндао, которую я сделал.Если вы делаете карту других регионов, то вам нужно только рассчитать координаты левого верхнего угла и масштаб изображения, а затем изменить значение незначительно.Принцип остается неизменным.

Граница расширена и истончена

Хотя SVG является векторной диаграммой, она не будет искажаться при увеличении и уменьшении масштаба, но граница карты также увеличивается после увеличения:

Этот эффект выглядит не очень хорошо, давайте добавим событие touchend:

<template>
  <svg ref="map" @touchend="checkScale"></svg>
</template>

<script>
import Panzoom from '@panzoom/panzoom'
  
export default {
  data () {
  	panzoom: null,
  	list: []
  },
  mounted () {
  	Object.entries(this.$refs).forEach(([k, v]) => k.includes('line') && this.list.push(v))
    this.clearOffset(this.list)
  	this.panzoom = Panzoom(this.$refs.map, { minScale: 1, maxScale: 100 })
  },
  methods: {
    clearOffset (list) {
        list.forEach(i => {
          i.setAttribute('stroke-dasharray', i.getTotalLength())
          i.setAttribute('stroke-dashoffset', i.getTotalLength())
          setTimeout(() => i.classList.contains('cls-4') && i.getTotalLength() > 100 && i.classList.add('no-offset'), 0)
          setTimeout(() => i.classList.add('no-offset'), 6000)
        })
      }
    },
  	checkScale () {
      const scale = this.panzoom.getScale()
  	  const map = this.$refs.map
  
      if (scale > 36) {
        map.setAttribute('style', map.getAttribute('style') + '--width: .02;')
      } else if (scale > 25) {
        map.setAttribute('style', map.getAttribute('style') + '--width: .05;')
      } else if (scale > 16) {
        map.setAttribute('style', map.getAttribute('style') + '--width: .1;')
      } else if (scale > 6) {
        map.setAttribute('style', map.getAttribute('style') + '--width: .2;')
      } else if (scale > 2) {
        map.setAttribute('style', map.getAttribute('style') + '--width: .5;')
      } else if (scale > 1.2) {
        map.setAttribute('style', map.getAttribute('style') + '--width: 1;')
      } else {
        map.setAttribute('style', map.getAttribute('style') + '--width: 1.2;')
      }
    }
  }
}
</script>

Эффект следующий:

здесь--widthдаCSS-переменные, если вы не знаете, что такоеCSS-переменныеучащихся могут нажатьCSS-переменныеэта ссылка.

добавить координаты

мы где угодноВыберите систему координатНайдите несколько точек в Циндао и поместите их в данные, чтобы имитировать данные, отправленные из фона:

<template>
  <svg ref="map" @touchend="checkScale">
  	<!-- 这里省略之前前面那些一大堆xml 把新代码放在svg标签里的末尾即可 -->
    <template v-for="(i, j) of points">
      <circle class="point" :cx="i[0]" :cy="i[1]" :r="pointStyle.size" :key="`point${j}`"
        :fill="pointStyle.color" :stroke="pointStyle.border.color" :stroke-width="pointStyle.border.width"
      />
      <text :key="`txt${j}`" :x="i[0]" :y="i[1] - 18" class="txt">{{i[2]}}</text>
    </template>
  </svg>
</template>

<script>
import Panzoom from '@panzoom/panzoom'
  
export default {
  data () {
  	panzoom: null,
  	list: [],
  	pointStyle: {
      size: 10,
      color: 'rgb(255, 66, 88)',
      border: { width: 2, color: 'rgb(255, 255, 255)' }
    },
    pointsData: [{
      id: 0,
      title: '中国xx公司',
      point: [120.111, 36.8003]
    }, {
      id: 1,
      title: '山东xx公司',
      point: [120.094693, 35.928573]
    }, {
      id: 2,
      title: '青岛xx公司',
      point: [120.459023, 36.399622]
    }]
  },
  mounted () {
  	Object.entries(this.$refs).forEach(([k, v]) => k.includes('line') && this.list.push(v))
    this.clearOffset(this.list)
  	this.panzoom = Panzoom(this.$refs.map, { minScale: 1, maxScale: 100 })
  },
  methods: {
    clearOffset (list) {
        list.forEach(i => {
          i.setAttribute('stroke-dasharray', i.getTotalLength())
          i.setAttribute('stroke-dashoffset', i.getTotalLength())
          setTimeout(() => i.classList.contains('cls-4') && i.getTotalLength() > 100 && i.classList.add('no-offset'), 0)
          setTimeout(() => i.classList.add('no-offset'), 6000)
        })
      }
    },
  	checkScale () {
      const scale = this.panzoom.getScale()
  	const map = this.$refs.map
  
      if (scale > 36) {
        map.setAttribute('style', map.getAttribute('style') + '--width: .02;')
      } else if (scale > 25) {
        map.setAttribute('style', map.getAttribute('style') + '--width: .05;')
      } else if (scale > 16) {
        map.setAttribute('style', map.getAttribute('style') + '--width: .1;')
      } else if (scale > 6) {
        map.setAttribute('style', map.getAttribute('style') + '--width: .2;')
      } else if (scale > 2) {
        map.setAttribute('style', map.getAttribute('style') + '--width: .5;')
      } else if (scale > 1.2) {
        map.setAttribute('style', map.getAttribute('style') + '--width: 1;')
      } else {
        map.setAttribute('style', map.getAttribute('style') + '--width: 1.2;')
      }
    }
  },
  computed: {
    points () {
      return this.pointsData.map(({ point: [x, y], title }) => [(x - 119.87) * 773, (37.13 - y) * 637.445, title])
    }
  }
}
</script>

<style lang="scss">
:root {
  background: black;
}
#tsing-tao-map {
  --stroke: white;
  --opacity: .8;
  --width: 1.2;
  height: 100vh;
  padding-left: 6vw;
  overflow: visible;
}
.cls- {
  &1, &3, &4 {
    fill: none;
    stroke: var(--stroke) { miterlimit: 10; width: var(--width) }
  }
  &1, &2 { opacity: var(--opacity) }
  &1, &2, &3 { stroke-width: calc(var(--width) * .8) }
}
.no-offset {
  transition: stroke-dashoffset 6s ease-in-out;
  stroke-dashoffset: 0
}
.txt {
  stroke: white { width: .6 }
  fill: none;
  filter: url(#filter);
  text: { anchor: middle }
  font: { size: 18px; weight: bold }
}
.point, .txt {
  animation: show-points 1s 12s both;
}
@keyframes show-points {
  from {
  	transform: translateY(-10%);
    opacity: 0;
    pointer-events: none
  }
  to {
    opacity: 1;
    pointer-events: auto;
  }
}
</style>

результат операции:

Конечно, если здесь не указана карта масштабирования, координатные точки также будут увеличены и удалены.Поскольку эта логика аналогична логике масштабирования штрихов, мы не будем тратить здесь место.

Тогда вам просто нужно<circle>Добавьте событие щелчка к этой метке, а затем выполните нужную логику и покажите эффект щелчка Bank of Qingdao:

Здесь нет данных, поэтому это пустая страница.

Эпилог

Как это не круто? Хотя этот блог о карте Циндао, идеи те же.
Если вам нужно сделать что-то еще, просто следуйте инструкциям, которые я сказал:

  • Сначала найдите в интернете карту со штрихом
  • Пусть художник проследит это с помощью ИИ
  • Экспорт векторной графики в формате SVG
  • Откройте его в редакторе, чтобы увидеть код
  • Управление SVG с помощью JS и CSS
  • Напишите алгоритм преобразования системы координат
  • При масштабировании карты точки обводки и координаты должны динамически уменьшаться.

Анимация проекта Bank of Qingdao не только здесь очень ослепительна, но и очень ослепительна практически везде.Вот вам несколько динамичных картинок:

Какой эффект вам нравится, можете оставить сообщение прямо в области комментариев.Если вас особенно интересует определенный эффект, я опубликую другой блог, чтобы объяснить это.

Замечательные статьи в прошлом:

Категории