{"id":16919322,"url":"https://github.com/lvisei/leaflet-demo","last_synced_at":"2025-03-17T07:31:34.083Z","repository":{"id":55613566,"uuid":"131496841","full_name":"lvisei/leaflet-demo","owner":"lvisei","description":"Getting started with Leaflet's small demo","archived":false,"fork":false,"pushed_at":"2022-03-24T15:04:09.000Z","size":64558,"stargazers_count":123,"open_issues_count":0,"forks_count":72,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-16T09:32:38.986Z","etag":null,"topics":["demo-map","esri-leaflet","javascript","leaflet","leaflet-api","leaflet-arcgis","leaflet-demo","web-map"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lvisei.png","metadata":{"files":{"readme":"README.html","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-29T13:30:06.000Z","updated_at":"2025-03-13T19:05:02.000Z","dependencies_parsed_at":"2022-08-15T04:30:55.138Z","dependency_job_id":null,"html_url":"https://github.com/lvisei/leaflet-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lvisei%2Fleaflet-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lvisei%2Fleaflet-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lvisei%2Fleaflet-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lvisei%2Fleaflet-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lvisei","download_url":"https://codeload.github.com/lvisei/leaflet-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243992235,"owners_count":20380174,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["demo-map","esri-leaflet","javascript","leaflet","leaflet-api","leaflet-arcgis","leaflet-demo","web-map"],"created_at":"2024-10-13T19:43:58.468Z","updated_at":"2025-03-17T07:31:30.021Z","avatar_url":"https://github.com/lvisei.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e\n    \u003cstyle\u003e\n      body {\n        max-width: 980px;\n        border: 1px solid #ddd;\n        outline: 1300px solid #fff;\n        margin: 16px auto;\n      }\n\n      body .markdown-body {\n        padding: 45px;\n      }\n\n      @font-face {\n        font-family: fontawesome-mini;\n        src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAABE0AA8AAAAAHWwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABWAAAADsAAABUIIslek9TLzIAAAGUAAAAQwAAAFY3d1HZY21hcAAAAdgAAACqAAACOvWLi0FjdnQgAAAChAAAABMAAAAgBtX/BGZwZ20AAAKYAAAFkAAAC3CKkZBZZ2FzcAAACCgAAAAIAAAACAAAABBnbHlmAAAIMAAABdQAAAjkYT9TNWhlYWQAAA4EAAAAMwAAADYQ6WvNaGhlYQAADjgAAAAfAAAAJAc6A1pobXR4AAAOWAAAACAAAAA0Kmz/7mxvY2EAAA54AAAAHAAAABwQPBJubWF4cAAADpQAAAAgAAAAIAEHC/NuYW1lAAAOtAAAAYQAAALxhQT4h3Bvc3QAABA4AAAAfgAAAMS3SYh9cHJlcAAAELgAAAB6AAAAhuVBK7x4nGNgZGBg4GIwYLBjYHJx8wlh4MtJLMljkGJgYYAAkDwymzEnMz2RgQPGA8qxgGkOIGaDiAIAJjsFSAB4nGNgZHZmnMDAysDAVMW0h4GBoQdCMz5gMGRkAooysDIzYAUBaa4pDA4Pwz+yMwf9z2KIYg5imAYUZgTJAQDcoQvQAHic7ZHNDYJAFIRnBXf94cDRIiyCKkCpwFCPJ092RcKNDoYKcN4+EmMPvpdvk539zQyAPYBCXEUJhBcCrJ5SQ9YLnLJe4qF5rdb+uWPDngNHTkta101pNyWa8lMhn6xx2dqUnW4q9YOIhAOOeueMSgsR/6ry+P7O5s6xVNg4chBsHUuFnWNJ8uZYwrw7chrsHXkODo7cB0dHOYCTY8kv0VE2WJKD6gOlWjsxAAB4nGNgQAMSEMgc9D8LhAESbAPdAHicrVZpd9NGFB15SZyELCULLWphxMRpsEYmbMGACUGyYyBdnK2VoIsUO+m+8Ynf4F/zZNpz6Dd+Wu8bLySQtOdwmpOjd+fN1czbZRJaktgL65GUmy/F1NYmjew8CemGTctRfCg7eyFlisnfBVEQrZbatx2HREQiULWusEQQ+x5ZmmR86FFGy7akV03KLT3pLlvjQb1V334aOsqxO6GkZjN0aD2yJVUYVaJIpj1S0qZlqPorSSu8v8LMV81QwohOImm8GcbQSN4bZ7TKaDW24yiKbLLcKFIkmuFBFHmU1RLn5IoJDMoHzZDyyqcR5cP8iKzYo5xWsEu20/y+L3mndzk/sV9vUbbkQB/Ijuzg7HQlX4RbW2HctJPtKFQRdtd3QmzZ7FT/Zo/ymkYDtysyvdCMYKl8hRArP6HM/iFZLZxP+ZJHo1qykRNB62VO7Es+gdbjiClxzRhZ0N3RCRHU/ZIzDPaYPh788d4plgsTAngcy3pHJZwIEylhczRJ2jByYCVliyqp9a6YOOV1WsRbwn7t2tGXzmjjUHdiPFsPHVs5UcnxaFKnmUyd2knNoykNopR0JnjMrwMoP6JJXm1jNYmVR9M4ZsaERCICLdxLU0EsO7GkKQTNoxm9uRumuXYtWqTJA/Xco/f05la4udNT2g70s0Z/VqdiOtgL0+lp5C/xadrlIkXp+ukZfkziQdYCMpEtNsOUgwdv/Q7Sy9eWHIXXBtju7fMrqH3WRPCkAfsb0B5P1SkJTIWYVYhWQGKta1mWydWsFqnI1HdDmla+rNMEinIcF8e+jHH9XzMzlpgSvt+J07MjLj1z7UsI0xx8m3U9mtepxXIBcWZ5TqdZlu/rNMfyA53mWZ7X6QhLW6ejLD/UaYHlRzodY3lBC5p038GQizDkAg6QMISlA0NYXoIhLBUMYbkIQ1gWYQjLJRjC8mMYwnIZhrC8rGXV1FNJ49qZWAZsQmBijh65zEXlaiq5VEK7aFRqQ54SbpVUFM+qf2WgXjzyhjmwFkiXyJpfMc6Vj0bl+NYVLW8aO1fAsepvH472OfFS1ouFPwX/1dZUJb1izcOTq/Abhp5sJ6o2qXh0TZfPVT26/l9UVFgL9BtIhVgoyrJscGcihI86nYZqoJVDzGzMPLTrdcuan8P9NzFCFlD9+DcUGgvcg05ZSVnt4KzV19uy3DuDcjgTLEkxN/P6VvgiI7PSfpFZyp6PfB5wBYxKZdhqA60VvNknMQ+Z3iTPBHFbUTZI2tjOBIkNHPOAefOdBCZh6qoN5E7hhg34BWFuwXknXKJ6oyyH7kXs8yik/Fun4kT2qGiMwLPZG2Gv70LKb3EMJDT5pX4MVBWhqRg1FdA0Um6oBl/G2bptQsYO9CMqdsOyrOLDxxb3lZJtGYR8pIjVo6Of1l6iTqrcfmYUl++dvgXBIDUxf3vfdHGQyrtayTJHbQNTtxqVU9eaQ+NVh+rmUfW94+wTOWuabronHnpf06rbwcVcLLD2bQ7SUiYX1PVhhQ2iy8WlUOplNEnvuAcYFhjQ71CKjf+r+th8nitVhdFxJN9O1LfR52AM/A/Yf0f1A9D3Y+hyDS7P95oTn2704WyZrqIX66foNzBrrblZugbc0HQD4iFHrY64yg18pwZxeqS5HOkh4GPdFeIBwCaAxeAT3bWM5lMAo/mMOT7A58xh0GQOgy3mMNhmzhrADnMY7DKHwR5zGHzBnHWAL5nDIGQOg4g5DJ4wJwB4yhwGXzGHwdfMYfANc+4DfMscBjFzGCTMYbCv6dYwzC1e0F2gtkFVoANTT1jcw+JQU2XI/o4Xhv29Qcz+wSCm/qjp9pD6Ey8M9WeDmPqLQUz9VdOdIfU3Xhjq7wYx9Q+DmPpMvxjLZQa/jHyXCgeUXWw+5++J9w/bxUC5AAEAAf//AA94nIVVX2hbZRQ/5/t7893s5ja9f7ouzdZ0TTqz3bRJmogbWya6bG6Cq0VbSV2ddIJjFtfIQHEig80Hda8yUN/0YQz8AyriiyD+xQd92R4HCnaCb3samnpumrpsCsLlfPf7zvedc37nL3CAtc/5W/wQZGA3tOBSY/g+TMjHmwzEoM1Q8+ZjRZY4oJhmBw5/YB6Za0yC5AkhlwA1A1yCBIBOwCII0Cj0U8BAMdUCzq05sKwkP7SlUY6fcJk4Fb/RyE79/6P5hjM/F4aZiXBoeMgzcqQ4Xi1hPqfDLG5FT+lchCVU3lYMyvuwhl1mqndQL0RsuloLywHtthLXI06OblTrhfWVnpSJ5+mwu/JdbtuN3IAnkW0LLMcRwaC7ktrlzridM6kVdyf9uO1UNBByI7JhwtG2sEwab07ORBeilWhqavJCqV0qzZTOl/7ZXQ5TbTcdcFelyGhhRDAQpdqp1FEX3w3cFTc1k9pJQkmm4ySCbSikxRP2QOfN+0tHS5MrpQuTU1Mk5nw0E5Xa0WvrOwDyGax9yB9ma6DAg82wHc43SAGTI4GjBWebOePAERFE8/AHaQpZASSTy8A4WwZiLQMQ82mFKATO0ILicRAoDm9p5P99E5b/fXG+kQYY3TYUuqmERWYoT0u/GNYL2q/4WB3LaVS+VynXsVYIcWw6DkCh3nX1D+VzlYN4LClF5yexSQos8exqZ3KVP+wtrC54u4Nznq6cq+xpMpUUnZ8FUYzE86ud0g28NOIv3Gj5/rmA3ABs7S/ywzFuQ4qyd6QxfNtiQIaEgp3w/entQg4Vcbqa16M5FfpeUB8t1+qeg7mI7cUyOe79wOk86gSxkVec4KPTX69++5x68Yubn5/F+w52z7u08sJX7fZXv8ekT/d2mILJxq6sn+SC6qEJknzLJCxyZEKwWVqYmAPBxBE/9DLeZiWHu7lcr/VytrCRuHojncNuTt9h46tmacmYisnSamdN2bZptcsmSysdVsy1PrOvOzF3xN64Rb937t/og9KHxYdcjIUqFAmIAHGHNzlns+RTPgeUYAQm9DwpNxfxbhhBHPaw3/gfTcXO2L+eJVIx5nsyGkvm9X4/f+bGkH45G0PaSjcMXTjcZyTvi3UdHoCDjQd3IDUVsgwYmUoJK/gp4JJxeRI0MKHZIkgynyIBqBTOUs6rOVCojvjZ4mCQz49ZMlMcp8QoYk6NoBfsxnJtsBohpa8iGJS+ZH7gU7NxME6cmF+t7cO9vB8d3jTWSct0ycW9ranXmolNDwmVkNnxe+8JtoztwS5rKJ0xWS95tQ/1zMYzg69MzUZnNtl1ofNbsml/OJm6f9wjRjpnu2o4MzHzn77IQkRd+1DjwMQ2pqSjGMMhyjrgTbBAKksuUm0iU7hI0aN2wOKOq7WYBSH0HGihj/jkiPxAfmwsEbfYrjMG+j3ij932Db/LV7I/xruNrhnroxjR9HRMb2nTvO0ZXOoHPk8H2ZhDPx93qcE/53sH5np/dkIP7zzhTVKdR/BAY/9ElkkR+A6lJGsqpJ4oQcTxpvBT3Kn58VkaJjgHyPEIws57xkaHh9KuVpDEpJZeMbZ5w/zBHi5NMQ4r5VphsFqID7TyB9eR4pX216c3AHxpdAwoqU9qg0ZJ6yVLKmMSz1iG2z27ifx18NkY0LPx1W/wCc2l5LrznrIsiKsqbmB78A9wIGx4tI8rjihVHJyY9pgMirenVq0yWg7Iw7eogG7ZgYM3qR9959A/fZkg6MnD/exlkmc+jWV4SB15XUR+eqC6l6ZmgPtN9z5JMfik05OV8ljylunJ4J+wA/FUaQSSKotsYsCWqaPBidBLcxkWx7XKFRIb45TGaEhjlF9uUVPqXOtcIwsXbBvfoZXIyRYFdkfnqjExH98xpnPczqzjX/uNdO1Y17Wpi5+6Ts8BXtjVFasp9KZ1mOiNbH65c5w6HgmyF2jFCZywM8mWjRc7T5Pmt0lRy7Y71+jYbpGyvwG4sH0XeJxjYGRgYADiwBB/53h+m68M3MwvgCIM1z5N/g6j///9v5H5BbMnkMvBwAQSBQCIcA9gAHicY2BkYGAO+p8FJF/8//v/F/MLBqAICuAFALYQB5kAeJxjfsHAwLwAiCNB+P9fbJjJmoGBMRUo/wKCAfO2EnQAAAAAANoBXgGcAgICVALaA1IDvAPkBAYEPARyAAEAAAANAF0ABAAAAAAAAgAUACQAcwAAAG4LcAAAAAB4nHWRzWrCQBSFT+pPqUIXLXTTzayKUohGKIibCoLuhbrrYtTRxCYZmYyKyz5Fd32HvlDfoO/QkziIFJtw9bvnnpl7ZwLgBt/wcHieGAf2UGd24Atcou+4RH3kuEweO66QXx1XyaHjGh6ROa7jFp/cwStfMVvhy7GHO+/e8QWuvcBxifqz4zL5xXGF/Oa4Sn53XMPE+3Bcx4P3M9DrvYmWoRWNQVN02kFXTPdCU4pSGQu5saE2meiLhU6timPtz3SSs9ypTCdqrJabWJoT5QQnymSRTkXgt0/UkUqVkVbN807ZdtmxdiEWRidi6HqItdErNbN+aO2612qd9sYAGmvsYRBhyUu0EGhQbfK/gzYCdElTOgSdB1eEFBIxFYkNV4RFJWPeZyyYpVQVHTHZx4y/yVGX2LGWFZri51TccUOn5B7nPefVCSPvGhVVwUl9znveO2KkhV8Wk82PZ8qwZf8OVcu1+fSmWCMw/HMOwXvKaysqM+p+cVuWag8tvv+c+xdd+4+teJxtjUEOwiAURJla24KliQfhUA2g/Sl+CKXx+loNrpzVezOLEY34Ron/0WhwQoszOvQYIKFwwQiNSbSBeO2SZ0tBP4j3zVjKNng32ZmtD1VVXCuOiw/pJ8S3WOU6l+K5UOTaDC4+2TjKMtN9KQf1ezLx/Sg/00FCvABHhjDjAAB4nGPw3sFwIihiIyNjX+QGxp0cDBwMyQUbGVidNjEwMmiBGJu5mBg5ICw+BjCLzWkX0wGgNCeQze60i8EBwmZmcNmowtgRGLHBoSNiI3OKy0Y1EG8XRwMDI4tDR3JIBEhJJBBs5mFi5NHawfi/dQNL70YmBhcADHYj9AAA)\n          format('woff');\n      }\n\n      .markdown-body {\n        font-family: sans-serif;\n        -ms-text-size-adjust: 100%;\n        -webkit-text-size-adjust: 100%;\n        color: #333333;\n        overflow: hidden;\n        font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;\n        font-size: 16px;\n        line-height: 1.6;\n        word-wrap: break-word;\n      }\n\n      .markdown-body a {\n        background: transparent;\n      }\n\n      .markdown-body a:active,\n      .markdown-body a:hover {\n        outline: 0;\n      }\n\n      .markdown-body b,\n      .markdown-body strong {\n        font-weight: bold;\n      }\n\n      .markdown-body mark {\n        background: #ff0;\n        color: #000;\n        font-style: italic;\n        font-weight: bold;\n      }\n\n      .markdown-body sub,\n      .markdown-body sup {\n        font-size: 75%;\n        line-height: 0;\n        position: relative;\n        vertical-align: baseline;\n      }\n      .markdown-body sup {\n        top: -0.5em;\n      }\n      .markdown-body sub {\n        bottom: -0.25em;\n      }\n\n      .markdown-body h1 {\n        font-size: 2em;\n        margin: 0.67em 0;\n      }\n\n      .markdown-body img {\n        border: 0;\n      }\n\n      .markdown-body hr {\n        -moz-box-sizing: content-box;\n        box-sizing: content-box;\n        height: 0;\n      }\n\n      .markdown-body pre {\n        overflow: auto;\n      }\n\n      .markdown-body code,\n      .markdown-body kbd,\n      .markdown-body pre,\n      .markdown-body samp {\n        font-family: monospace, monospace;\n        font-size: 1em;\n      }\n\n      .markdown-body input {\n        color: inherit;\n        font: inherit;\n        margin: 0;\n      }\n\n      .markdown-body html input[disabled] {\n        cursor: default;\n      }\n\n      .markdown-body input {\n        line-height: normal;\n      }\n\n      .markdown-body input[type='checkbox'] {\n        box-sizing: border-box;\n        padding: 0;\n      }\n\n      .markdown-body table {\n        border-collapse: collapse;\n        border-spacing: 0;\n      }\n\n      .markdown-body td,\n      .markdown-body th {\n        padding: 0;\n      }\n\n      .markdown-body .codehilitetable {\n        border: 0;\n        border-spacing: 0;\n      }\n\n      .markdown-body .codehilitetable tr {\n        border: 0;\n      }\n\n      .markdown-body .codehilitetable pre,\n      .markdown-body .codehilitetable div.codehilite {\n        margin: 0;\n      }\n\n      .markdown-body .linenos,\n      .markdown-body .code,\n      .markdown-body .codehilitetable td {\n        border: 0;\n        padding: 0;\n      }\n\n      .markdown-body td:not(.linenos) .linenodiv {\n        padding: 0 !important;\n      }\n\n      .markdown-body .code {\n        width: 100%;\n      }\n\n      .markdown-body .linenos div pre,\n      .markdown-body .linenodiv pre,\n      .markdown-body .linenodiv {\n        border: 0;\n        -webkit-border-radius: 0;\n        -moz-border-radius: 0;\n        border-radius: 0;\n        -webkit-border-top-left-radius: 3px;\n        -webkit-border-bottom-left-radius: 3px;\n        -moz-border-radius-topleft: 3px;\n        -moz-border-radius-bottomleft: 3px;\n        border-top-left-radius: 3px;\n        border-bottom-left-radius: 3px;\n      }\n\n      .markdown-body .code div pre,\n      .markdown-body .code div {\n        border: 0;\n        -webkit-border-radius: 0;\n        -moz-border-radius: 0;\n        border-radius: 0;\n        -webkit-border-top-right-radius: 3px;\n        -webkit-border-bottom-right-radius: 3px;\n        -moz-border-radius-topright: 3px;\n        -moz-border-radius-bottomright: 3px;\n        border-top-right-radius: 3px;\n        border-bottom-right-radius: 3px;\n      }\n\n      .markdown-body * {\n        -moz-box-sizing: border-box;\n        box-sizing: border-box;\n      }\n\n      .markdown-body input {\n        font: 13px Helvetica, arial, freesans, clean, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';\n        line-height: 1.4;\n      }\n\n      .markdown-body a {\n        color: #4183c4;\n        text-decoration: none;\n      }\n\n      .markdown-body a:hover,\n      .markdown-body a:focus,\n      .markdown-body a:active {\n        text-decoration: underline;\n      }\n\n      .markdown-body hr {\n        height: 0;\n        margin: 15px 0;\n        overflow: hidden;\n        background: transparent;\n        border: 0;\n        border-bottom: 1px solid #ddd;\n      }\n\n      .markdown-body hr:before,\n      .markdown-body hr:after {\n        display: table;\n        content: ' ';\n      }\n\n      .markdown-body hr:after {\n        clear: both;\n      }\n\n      .markdown-body h1,\n      .markdown-body h2,\n      .markdown-body h3,\n      .markdown-body h4,\n      .markdown-body h5,\n      .markdown-body h6 {\n        margin-top: 15px;\n        margin-bottom: 15px;\n        line-height: 1.1;\n      }\n\n      .markdown-body h1 {\n        font-size: 30px;\n      }\n\n      .markdown-body h2 {\n        font-size: 21px;\n      }\n\n      .markdown-body h3 {\n        font-size: 16px;\n      }\n\n      .markdown-body h4 {\n        font-size: 14px;\n      }\n\n      .markdown-body h5 {\n        font-size: 12px;\n      }\n\n      .markdown-body h6 {\n        font-size: 11px;\n      }\n\n      .markdown-body blockquote {\n        margin: 0;\n      }\n\n      .markdown-body ul,\n      .markdown-body ol {\n        padding: 0;\n        margin-top: 0;\n        margin-bottom: 0;\n      }\n\n      .markdown-body ol ol,\n      .markdown-body ul ol {\n        list-style-type: lower-roman;\n      }\n\n      .markdown-body ul ul ol,\n      .markdown-body ul ol ol,\n      .markdown-body ol ul ol,\n      .markdown-body ol ol ol {\n        list-style-type: lower-alpha;\n      }\n\n      .markdown-body dd {\n        margin-left: 0;\n      }\n\n      .markdown-body code,\n      .markdown-body pre,\n      .markdown-body samp {\n        font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;\n        font-size: 12px;\n      }\n\n      .markdown-body pre {\n        margin-top: 0;\n        margin-bottom: 0;\n      }\n\n      .markdown-body kbd {\n        background-color: #e7e7e7;\n        background-image: -moz-linear-gradient(#fefefe, #e7e7e7);\n        background-image: -webkit-linear-gradient(#fefefe, #e7e7e7);\n        background-image: linear-gradient(#fefefe, #e7e7e7);\n        background-repeat: repeat-x;\n        border-radius: 2px;\n        border: 1px solid #cfcfcf;\n        color: #000;\n        padding: 3px 5px;\n        line-height: 10px;\n        font: 11px Consolas, 'Liberation Mono', Menlo, Courier, monospace;\n        display: inline-block;\n      }\n\n      .markdown-body \u003e *:first-child {\n        margin-top: 0 !important;\n      }\n\n      .markdown-body \u003e *:last-child {\n        margin-bottom: 0 !important;\n      }\n\n      .markdown-body .headerlink {\n        font: normal 400 16px fontawesome-mini;\n        vertical-align: middle;\n        margin-left: -16px;\n        float: left;\n        display: inline-block;\n        text-decoration: none;\n        opacity: 0;\n        color: #333;\n      }\n\n      .markdown-body .headerlink:focus {\n        outline: none;\n      }\n\n      .markdown-body h1 .headerlink {\n        margin-top: 0.8rem;\n      }\n\n      .markdown-body h2 .headerlink,\n      .markdown-body h3 .headerlink {\n        margin-top: 0.6rem;\n      }\n\n      .markdown-body h4 .headerlink {\n        margin-top: 0.2rem;\n      }\n\n      .markdown-body h5 .headerlink,\n      .markdown-body h6 .headerlink {\n        margin-top: 0;\n      }\n\n      .markdown-body .headerlink:hover,\n      .markdown-body h1:hover .headerlink,\n      .markdown-body h2:hover .headerlink,\n      .markdown-body h3:hover .headerlink,\n      .markdown-body h4:hover .headerlink,\n      .markdown-body h5:hover .headerlink,\n      .markdown-body h6:hover .headerlink {\n        opacity: 1;\n        text-decoration: none;\n      }\n\n      .markdown-body h1 {\n        padding-bottom: 0.3em;\n        font-size: 2.25em;\n        line-height: 1.2;\n        border-bottom: 1px solid #eee;\n      }\n\n      .markdown-body h2 {\n        padding-bottom: 0.3em;\n        font-size: 1.75em;\n        line-height: 1.225;\n        border-bottom: 1px solid #eee;\n      }\n\n      .markdown-body h3 {\n        font-size: 1.5em;\n        line-height: 1.43;\n      }\n\n      .markdown-body h4 {\n        font-size: 1.25em;\n      }\n\n      .markdown-body h5 {\n        font-size: 1em;\n      }\n\n      .markdown-body h6 {\n        font-size: 1em;\n        color: #777;\n      }\n\n      .markdown-body p,\n      .markdown-body blockquote,\n      .markdown-body ul,\n      .markdown-body ol,\n      .markdown-body dl,\n      .markdown-body table,\n      .markdown-body pre,\n      .markdown-body .admonition {\n        margin-top: 0;\n        margin-bottom: 16px;\n      }\n\n      .markdown-body hr {\n        height: 4px;\n        padding: 0;\n        margin: 16px 0;\n        background-color: #e7e7e7;\n        border: 0 none;\n      }\n\n      .markdown-body ul,\n      .markdown-body ol {\n        padding-left: 2em;\n      }\n\n      .markdown-body ul ul,\n      .markdown-body ul ol,\n      .markdown-body ol ol,\n      .markdown-body ol ul {\n        margin-top: 0;\n        margin-bottom: 0;\n      }\n\n      .markdown-body li \u003e p {\n        margin-top: 16px;\n      }\n\n      .markdown-body dl {\n        padding: 0;\n      }\n\n      .markdown-body dl dt {\n        padding: 0;\n        margin-top: 16px;\n        font-size: 1em;\n        font-style: italic;\n        font-weight: bold;\n      }\n\n      .markdown-body dl dd {\n        padding: 0 16px;\n        margin-bottom: 16px;\n      }\n\n      .markdown-body blockquote {\n        padding: 0 15px;\n        color: #777;\n        border-left: 4px solid #ddd;\n      }\n\n      .markdown-body blockquote \u003e :first-child {\n        margin-top: 0;\n      }\n\n      .markdown-body blockquote \u003e :last-child {\n        margin-bottom: 0;\n      }\n\n      .markdown-body table {\n        display: block;\n        width: 100%;\n        overflow: auto;\n        word-break: normal;\n        word-break: keep-all;\n      }\n\n      .markdown-body table th {\n        font-weight: bold;\n      }\n\n      .markdown-body table th,\n      .markdown-body table td {\n        padding: 6px 13px;\n        border: 1px solid #ddd;\n      }\n\n      .markdown-body table tr {\n        background-color: #fff;\n        border-top: 1px solid #ccc;\n      }\n\n      .markdown-body table tr:nth-child(2n) {\n        background-color: #f8f8f8;\n      }\n\n      .markdown-body img {\n        max-width: 100%;\n        -moz-box-sizing: border-box;\n        box-sizing: border-box;\n      }\n\n      .markdown-body code,\n      .markdown-body samp {\n        padding: 0;\n        padding-top: 0.2em;\n        padding-bottom: 0.2em;\n        margin: 0;\n        font-size: 85%;\n        background-color: rgba(0, 0, 0, 0.04);\n        border-radius: 3px;\n      }\n\n      .markdown-body code:before,\n      .markdown-body code:after {\n        letter-spacing: -0.2em;\n        content: '\\00a0';\n      }\n\n      .markdown-body pre \u003e code {\n        padding: 0;\n        margin: 0;\n        font-size: 100%;\n        word-break: normal;\n        white-space: pre;\n        background: transparent;\n        border: 0;\n      }\n\n      .markdown-body .codehilite {\n        margin-bottom: 16px;\n      }\n\n      .markdown-body .codehilite pre,\n      .markdown-body pre {\n        padding: 16px;\n        overflow: auto;\n        font-size: 85%;\n        line-height: 1.45;\n        background-color: #f7f7f7;\n        border-radius: 3px;\n      }\n\n      .markdown-body .codehilite pre {\n        margin-bottom: 0;\n        word-break: normal;\n      }\n\n      .markdown-body pre {\n        word-wrap: normal;\n      }\n\n      .markdown-body pre code {\n        display: inline;\n        max-width: initial;\n        padding: 0;\n        margin: 0;\n        overflow: initial;\n        line-height: inherit;\n        word-wrap: normal;\n        background-color: transparent;\n        border: 0;\n      }\n\n      .markdown-body pre code:before,\n      .markdown-body pre code:after {\n        content: normal;\n      }\n\n      /* Admonition */\n      .markdown-body .admonition {\n        -webkit-border-radius: 3px;\n        -moz-border-radius: 3px;\n        position: relative;\n        border-radius: 3px;\n        border: 1px solid #e0e0e0;\n        border-left: 6px solid #333;\n        padding: 10px 10px 10px 30px;\n      }\n\n      .markdown-body .admonition table {\n        color: #333;\n      }\n\n      .markdown-body .admonition p {\n        padding: 0;\n      }\n\n      .markdown-body .admonition-title {\n        font-weight: bold;\n        margin: 0;\n      }\n\n      .markdown-body .admonition \u003e .admonition-title {\n        color: #333;\n      }\n\n      .markdown-body .attention \u003e .admonition-title {\n        color: #a6d796;\n      }\n\n      .markdown-body .caution \u003e .admonition-title {\n        color: #d7a796;\n      }\n\n      .markdown-body .hint \u003e .admonition-title {\n        color: #96c6d7;\n      }\n\n      .markdown-body .danger \u003e .admonition-title {\n        color: #c25f77;\n      }\n\n      .markdown-body .question \u003e .admonition-title {\n        color: #96a6d7;\n      }\n\n      .markdown-body .note \u003e .admonition-title {\n        color: #d7c896;\n      }\n\n      .markdown-body .admonition:before,\n      .markdown-body .attention:before,\n      .markdown-body .caution:before,\n      .markdown-body .hint:before,\n      .markdown-body .danger:before,\n      .markdown-body .question:before,\n      .markdown-body .note:before {\n        font: normal normal 16px fontawesome-mini;\n        -moz-osx-font-smoothing: grayscale;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n        line-height: 1.5;\n        color: #333;\n        position: absolute;\n        left: 0;\n        top: 0;\n        padding-top: 10px;\n        padding-left: 10px;\n      }\n\n      .markdown-body .admonition:before {\n        content: '\\f056\\00a0';\n        color: 333;\n      }\n\n      .markdown-body .attention:before {\n        content: '\\f058\\00a0';\n        color: #a6d796;\n      }\n\n      .markdown-body .caution:before {\n        content: '\\f06a\\00a0';\n        color: #d7a796;\n      }\n\n      .markdown-body .hint:before {\n        content: '\\f05a\\00a0';\n        color: #96c6d7;\n      }\n\n      .markdown-body .danger:before {\n        content: '\\f057\\00a0';\n        color: #c25f77;\n      }\n\n      .markdown-body .question:before {\n        content: '\\f059\\00a0';\n        color: #96a6d7;\n      }\n\n      .markdown-body .note:before {\n        content: '\\f040\\00a0';\n        color: #d7c896;\n      }\n\n      .markdown-body .admonition::after {\n        content: normal;\n      }\n\n      .markdown-body .attention {\n        border-left: 6px solid #a6d796;\n      }\n\n      .markdown-body .caution {\n        border-left: 6px solid #d7a796;\n      }\n\n      .markdown-body .hint {\n        border-left: 6px solid #96c6d7;\n      }\n\n      .markdown-body .danger {\n        border-left: 6px solid #c25f77;\n      }\n\n      .markdown-body .question {\n        border-left: 6px solid #96a6d7;\n      }\n\n      .markdown-body .note {\n        border-left: 6px solid #d7c896;\n      }\n\n      .markdown-body .admonition \u003e *:first-child {\n        margin-top: 0 !important;\n      }\n\n      .markdown-body .admonition \u003e *:last-child {\n        margin-bottom: 0 !important;\n      }\n\n      /* progress bar*/\n      .markdown-body .progress {\n        display: block;\n        width: 300px;\n        margin: 10px 0;\n        height: 24px;\n        -webkit-border-radius: 3px;\n        -moz-border-radius: 3px;\n        border-radius: 3px;\n        background-color: #ededed;\n        position: relative;\n        box-shadow: inset -1px 1px 3px rgba(0, 0, 0, 0.1);\n      }\n\n      .markdown-body .progress-label {\n        position: absolute;\n        text-align: center;\n        font-weight: bold;\n        width: 100%;\n        margin: 0;\n        line-height: 24px;\n        color: #333;\n        text-shadow: 1px 1px 0 #fefefe, -1px -1px 0 #fefefe, -1px 1px 0 #fefefe, 1px -1px 0 #fefefe, 0 1px 0 #fefefe,\n          0 -1px 0 #fefefe, 1px 0 0 #fefefe, -1px 0 0 #fefefe, 1px 1px 2px #000;\n        -webkit-font-smoothing: antialiased !important;\n        white-space: nowrap;\n        overflow: hidden;\n      }\n\n      .markdown-body .progress-bar {\n        height: 24px;\n        float: left;\n        -webkit-border-radius: 3px;\n        -moz-border-radius: 3px;\n        border-radius: 3px;\n        background-color: #96c6d7;\n        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.1);\n        background-size: 30px 30px;\n        background-image: -webkit-linear-gradient(\n          135deg,\n          rgba(255, 255, 255, 0.4) 27%,\n          transparent 27%,\n          transparent 52%,\n          rgba(255, 255, 255, 0.4) 52%,\n          rgba(255, 255, 255, 0.4) 77%,\n          transparent 77%,\n          transparent\n        );\n        background-image: -moz-linear-gradient(\n          135deg,\n          rgba(255, 255, 255, 0.4) 27%,\n          transparent 27%,\n          transparent 52%,\n          rgba(255, 255, 255, 0.4) 52%,\n          rgba(255, 255, 255, 0.4) 77%,\n          transparent 77%,\n          transparent\n        );\n        background-image: -ms-linear-gradient(\n          135deg,\n          rgba(255, 255, 255, 0.4) 27%,\n          transparent 27%,\n          transparent 52%,\n          rgba(255, 255, 255, 0.4) 52%,\n          rgba(255, 255, 255, 0.4) 77%,\n          transparent 77%,\n          transparent\n        );\n        background-image: -o-linear-gradient(\n          135deg,\n          rgba(255, 255, 255, 0.4) 27%,\n          transparent 27%,\n          transparent 52%,\n          rgba(255, 255, 255, 0.4) 52%,\n          rgba(255, 255, 255, 0.4) 77%,\n          transparent 77%,\n          transparent\n        );\n        background-image: linear-gradient(\n          135deg,\n          rgba(255, 255, 255, 0.4) 27%,\n          transparent 27%,\n          transparent 52%,\n          rgba(255, 255, 255, 0.4) 52%,\n          rgba(255, 255, 255, 0.4) 77%,\n          transparent 77%,\n          transparent\n        );\n      }\n\n      .markdown-body .progress-100plus .progress-bar {\n        background-color: #a6d796;\n      }\n\n      .markdown-body .progress-80plus .progress-bar {\n        background-color: #c6d796;\n      }\n\n      .markdown-body .progress-60plus .progress-bar {\n        background-color: #d7c896;\n      }\n\n      .markdown-body .progress-40plus .progress-bar {\n        background-color: #d7a796;\n      }\n\n      .markdown-body .progress-20plus .progress-bar {\n        background-color: #d796a6;\n      }\n\n      .markdown-body .progress-0plus .progress-bar {\n        background-color: #c25f77;\n      }\n\n      .markdown-body .candystripe-animate .progress-bar {\n        -webkit-animation: animate-stripes 3s linear infinite;\n        -moz-animation: animate-stripes 3s linear infinite;\n        animation: animate-stripes 3s linear infinite;\n      }\n\n      @-webkit-keyframes animate-stripes {\n        0% {\n          background-position: 0 0;\n        }\n\n        100% {\n          background-position: 60px 0;\n        }\n      }\n\n      @-moz-keyframes animate-stripes {\n        0% {\n          background-position: 0 0;\n        }\n\n        100% {\n          background-position: 60px 0;\n        }\n      }\n\n      @keyframes animate-stripes {\n        0% {\n          background-position: 0 0;\n        }\n\n        100% {\n          background-position: 60px 0;\n        }\n      }\n\n      .markdown-body .gloss .progress-bar {\n        box-shadow: inset 0 4px 12px rgba(255, 255, 255, 0.7), inset 0 -12px 0 rgba(0, 0, 0, 0.05);\n      }\n\n      /* MultiMarkdown Critic Blocks */\n      .markdown-body .critic_mark {\n        background: #ff0;\n      }\n\n      .markdown-body .critic_delete {\n        color: #c82829;\n        text-decoration: line-through;\n      }\n\n      .markdown-body .critic_insert {\n        color: #718c00;\n        text-decoration: underline;\n      }\n\n      .markdown-body .critic_comment {\n        color: #8e908c;\n        font-style: italic;\n      }\n\n      .markdown-body .headeranchor {\n        font: normal normal 16px fontawesome-mini;\n        line-height: 1;\n        display: inline-block;\n        text-decoration: none;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n      }\n\n      .headeranchor:before {\n        content: '\\e157';\n      }\n\n      .markdown-body .task-list-item {\n        list-style-type: none;\n      }\n\n      .markdown-body .task-list-item + .task-list-item {\n        margin-top: 3px;\n      }\n\n      .markdown-body .task-list-item input {\n        margin: 0 4px 0.25em -20px;\n        vertical-align: middle;\n      }\n\n      /* Media */\n      @media only screen and (min-width: 480px) {\n        .markdown-body {\n          font-size: 14px;\n        }\n      }\n\n      @media only screen and (min-width: 768px) {\n        .markdown-body {\n          font-size: 16px;\n        }\n      }\n\n      @media print {\n        .markdown-body * {\n          background: transparent !important;\n          color: black !important;\n          filter: none !important;\n          -ms-filter: none !important;\n        }\n\n        .markdown-body {\n          font-size: 12pt;\n          max-width: 100%;\n          outline: none;\n          border: 0;\n        }\n\n        .markdown-body a,\n        .markdown-body a:visited {\n          text-decoration: underline;\n        }\n\n        .markdown-body .headeranchor-link {\n          display: none;\n        }\n\n        .markdown-body a[href]:after {\n          content: ' (' attr(href) ')';\n        }\n\n        .markdown-body abbr[title]:after {\n          content: ' (' attr(title) ')';\n        }\n\n        .markdown-body .ir a:after,\n        .markdown-body a[href^='javascript:']:after,\n        .markdown-body a[href^='#']:after {\n          content: '';\n        }\n\n        .markdown-body pre {\n          white-space: pre;\n          white-space: pre-wrap;\n          word-wrap: break-word;\n        }\n\n        .markdown-body pre,\n        .markdown-body blockquote {\n          border: 1px solid #999;\n          padding-right: 1em;\n          page-break-inside: avoid;\n        }\n\n        .markdown-body .progress,\n        .markdown-body .progress-bar {\n          -moz-box-shadow: none;\n          -webkit-box-shadow: none;\n          box-shadow: none;\n        }\n\n        .markdown-body .progress {\n          border: 1px solid #ddd;\n        }\n\n        .markdown-body .progress-bar {\n          height: 22px;\n          border-right: 1px solid #ddd;\n        }\n\n        .markdown-body tr,\n        .markdown-body img {\n          page-break-inside: avoid;\n        }\n\n        .markdown-body img {\n          max-width: 100% !important;\n        }\n\n        .markdown-body p,\n        .markdown-body h2,\n        .markdown-body h3 {\n          orphans: 3;\n          widows: 3;\n        }\n\n        .markdown-body h2,\n        .markdown-body h3 {\n          page-break-after: avoid;\n        }\n      }\n    \u003c/style\u003e\n    \u003cstyle\u003e\n      /*GitHub*/\n      .codehilite {\n        background-color: #fff;\n        color: #333333;\n      }\n      .codehilite .hll {\n        background-color: #ffffcc;\n      }\n      .codehilite .c {\n        color: #999988;\n        font-style: italic;\n      }\n      .codehilite .err {\n        color: #a61717;\n        background-color: #e3d2d2;\n      }\n      .codehilite .k {\n        font-weight: bold;\n      }\n      .codehilite .o {\n        font-weight: bold;\n      }\n      .codehilite .cm {\n        color: #999988;\n        font-style: italic;\n      }\n      .codehilite .cp {\n        color: #999999;\n        font-weight: bold;\n      }\n      .codehilite .c1 {\n        color: #999988;\n        font-style: italic;\n      }\n      .codehilite .cs {\n        color: #999999;\n        font-weight: bold;\n        font-style: italic;\n      }\n      .codehilite .gd {\n        color: #000000;\n        background-color: #ffdddd;\n      }\n      .codehilite .ge {\n        font-style: italic;\n      }\n      .codehilite .gr {\n        color: #aa0000;\n      }\n      .codehilite .gh {\n        color: #999999;\n      }\n      .codehilite .gi {\n        color: #000000;\n        background-color: #ddffdd;\n      }\n      .codehilite .go {\n        color: #888888;\n      }\n      .codehilite .gp {\n        color: #555555;\n      }\n      .codehilite .gs {\n        font-weight: bold;\n      }\n      .codehilite .gu {\n        color: #800080;\n        font-weight: bold;\n      }\n      .codehilite .gt {\n        color: #aa0000;\n      }\n      .codehilite .kc {\n        font-weight: bold;\n      }\n      .codehilite .kd {\n        font-weight: bold;\n      }\n      .codehilite .kn {\n        font-weight: bold;\n      }\n      .codehilite .kp {\n        font-weight: bold;\n      }\n      .codehilite .kr {\n        font-weight: bold;\n      }\n      .codehilite .kt {\n        color: #445588;\n        font-weight: bold;\n      }\n      .codehilite .m {\n        color: #009999;\n      }\n      .codehilite .s {\n        color: #dd1144;\n      }\n      .codehilite .n {\n        color: #333333;\n      }\n      .codehilite .na {\n        color: teal;\n      }\n      .codehilite .nb {\n        color: #0086b3;\n      }\n      .codehilite .nc {\n        color: #445588;\n        font-weight: bold;\n      }\n      .codehilite .no {\n        color: teal;\n      }\n      .codehilite .ni {\n        color: purple;\n      }\n      .codehilite .ne {\n        color: #990000;\n        font-weight: bold;\n      }\n      .codehilite .nf {\n        color: #990000;\n        font-weight: bold;\n      }\n      .codehilite .nn {\n        color: #555555;\n      }\n      .codehilite .nt {\n        color: navy;\n      }\n      .codehilite .nv {\n        color: teal;\n      }\n      .codehilite .ow {\n        font-weight: bold;\n      }\n      .codehilite .w {\n        color: #bbbbbb;\n      }\n      .codehilite .mf {\n        color: #009999;\n      }\n      .codehilite .mh {\n        color: #009999;\n      }\n      .codehilite .mi {\n        color: #009999;\n      }\n      .codehilite .mo {\n        color: #009999;\n      }\n      .codehilite .sb {\n        color: #dd1144;\n      }\n      .codehilite .sc {\n        color: #dd1144;\n      }\n      .codehilite .sd {\n        color: #dd1144;\n      }\n      .codehilite .s2 {\n        color: #dd1144;\n      }\n      .codehilite .se {\n        color: #dd1144;\n      }\n      .codehilite .sh {\n        color: #dd1144;\n      }\n      .codehilite .si {\n        color: #dd1144;\n      }\n      .codehilite .sx {\n        color: #dd1144;\n      }\n      .codehilite .sr {\n        color: #009926;\n      }\n      .codehilite .s1 {\n        color: #dd1144;\n      }\n      .codehilite .ss {\n        color: #990073;\n      }\n      .codehilite .bp {\n        color: #999999;\n      }\n      .codehilite .vc {\n        color: teal;\n      }\n      .codehilite .vg {\n        color: teal;\n      }\n      .codehilite .vi {\n        color: teal;\n      }\n      .codehilite .il {\n        color: #009999;\n      }\n      .codehilite .gc {\n        color: #999;\n        background-color: #eaf2f5;\n      }\n    \u003c/style\u003e\n    \u003ctitle\u003eREADME\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003carticle class=\"markdown-body\"\u003e\n      \u003ch3 id=\"leaflet-demo\"\u003e\n        入门 Leaflet 之小 Demo\u003ca class=\"headerlink\" href=\"#leaflet-demo\" title=\"Permanent link\"\u003e\u003c/a\u003e\n      \u003c/h3\u003e\n      \u003chr /\u003e\n      \u003cblockquote\u003e\n        \u003cp\u003e写在前面 ---- WebGIS 开发基础之 Leaflet\u003c/p\u003e\n        \u003col\u003e\n          \u003cli\u003e\n            GIS\n            基本概念：GIS、Map、Layer、Feature、Geometry、Symbol、Data（Point、Polyline、Polygon）、Renderer、Scale、Project、Coordinates；\n          \u003c/li\u003e\n          \u003cli\u003eGIS 开发概述：架构模式、常用平台和 SDK、二维三维\u003c/li\u003e\n          \u003cli\u003e使用 Leaflet 开发常用功能\u003c/li\u003e\n        \u003c/ol\u003e\n        \u003cul\u003e\n          \u003cli\u003e地图加载（底图类型、切换）：\u003c/li\u003e\n          \u003cli\u003e地图操作（缩放、平移、定位/书签、动画）：\u003c/li\u003e\n          \u003cli\u003e图层管理（加载、移除、调整顺序）：\u003c/li\u003e\n          \u003cli\u003e要素标绘（点/聚簇、线、面，符号化/静态动态）：\u003c/li\u003e\n          \u003cli\u003e属性标注（字段可选、样式定制）：\u003c/li\u003e\n          \u003cli\u003e专题地图（点、线、面，渲染）：\u003c/li\u003e\n          \u003cli\u003e查询定位（属性查询、空间查询/周边搜索/缓冲区/面查点线面/点线查面、图属互查、综合查询）：\u003c/li\u003e\n          \u003cli\u003e信息窗口（入口、Popup、定制）：\u003c/li\u003e\n          \u003cli\u003e坐标转换（地理与投影、不同地理坐标系）：\u003c/li\u003e\n          \u003cli\u003e空间运算（长度面积测量、点取坐标、缓冲区、相交包含关系）：\u003c/li\u003e\n          \u003cli\u003e\n            动态监控（固定点状态切换、车辆监控）：\n            \u003cimg\n              alt=\"\"\n              src=\"https://user-gold-cdn.xitu.io/2018/2/25/161cd7239e171384?w=1920\u0026amp;h=959\u0026amp;f=png\u0026amp;s=222128\"\n            /\u003e\n          \u003c/li\u003e\n        \u003c/ul\u003e\n        \u003col\u003e\n          \u003cli\u003e\n            \u003ca href=\"https://github.com/liuvigongzuoshi/Leaflet_Demo/blob/master/tree/Leaflet%20API.png\"\u003eLeaflet API\u003c/a\n            \u003e\u003cimg\n              alt=\"\"\n              src=\"https://user-gold-cdn.xitu.io/2018/3/1/161dd4951441cce1?w=691\u0026amp;h=1217\u0026amp;f=png\u0026amp;s=54115\"\n            /\u003e\n          \u003c/li\u003e\n        \u003c/ol\u003e\n      \u003c/blockquote\u003e\n      \u003chr /\u003e\n      \u003ch4 id=\"demo\"\u003eDemo 用到的库\u003ca class=\"headerlink\" href=\"#demo\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h4\u003e\n      \u003cul\u003e\n        \u003cli\u003e\n          Flat-UI\n          \u003ca href=\"https://github.com/designmodo/Flat-UI/\"\u003e\n            Flat UI is based on Bootstrap, a comfortable, responsive, and functional framework that simplifies the\n            development of websites.\u003c/a\n          \u003eFlat-UI 是基于 Bootstrap 的一个扁平化风格 web 开发框架。\n        \u003c/li\u003e\n        \u003cli\u003e\n          leaflet\n          \u003ca href=\"http://leafletjs.com/reference-1.3.0.html\"\n            \u003ean open-source JavaScript library for mobile-friendly interactive maps.\u003c/a\n          \u003eLeaflet 是一个为建设交互性好适用于移动设备地图，而开发的现代的、开源的 JavaScript 库。\n        \u003c/li\u003e\n        \u003cli\u003e\n          Esri Leaflet\n          \u003ca href=\"http://esri.github.io/esri-leaflet/\"\n            \u003eA lightweight set of tools for using ArcGIS services with Leaflet.\u003c/a\n          \u003e一个轻量级的工具,基于 leaflet 利用 ArcGIS 服务。\n        \u003c/li\u003e\n      \u003c/ul\u003e\n      \u003chr /\u003e\n      \u003ch3 id=\"part-1-demo-1\"\u003e\n        PART 1： 地图加载（底图类型、切换）\n        \u003ca href=\"https://github.com/liuvigongzuoshi/Leaflet_Demo/blob/master/demo1.html\"\u003eDemo 1 \u003c/a\n        \u003e\u003ca class=\"headerlink\" href=\"#part-1-demo-1\" title=\"Permanent link\"\u003e\u003c/a\u003e\n      \u003c/h3\u003e\n      \u003cp\u003e\n        \u003cimg\n          alt=\"\"\n          src=\"https://user-gold-cdn.xitu.io/2018/2/25/161cd7e9bfff52ad?w=1920\u0026amp;h=957\u0026amp;f=jpeg\u0026amp;s=2237468\"\n        /\u003e\n      \u003c/p\u003e\n      \u003cul\u003e\n        \u003cli\u003e库引用\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"codehilite\"\u003e\n        \u003cpre\u003e\u003cspan class=\"p\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"nt\"\u003elink\u003c/span\u003e \u003cspan class=\"na\"\u003erel\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026quot;stylesheet\u0026quot;\u003c/span\u003e \u003cspan class=\"na\"\u003etype\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026quot;text/css\u0026quot;\u003c/span\u003e \u003cspan class=\"na\"\u003ehref\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026quot;./lib/Flat-UI-master/dist/css/vendor/bootstrap/css/bootstrap.min.css\u0026quot;\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e/\u0026gt;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"nt\"\u003elink\u003c/span\u003e \u003cspan class=\"na\"\u003erel\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026quot;stylesheet\u0026quot;\u003c/span\u003e \u003cspan class=\"na\"\u003ehref\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026quot;./lib/Flat-UI-master/dist/css/flat-ui.min.css\u0026quot;\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"nt\"\u003elink\u003c/span\u003e \u003cspan class=\"na\"\u003erel\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026quot;stylesheet\u0026quot;\u003c/span\u003e \u003cspan class=\"na\"\u003ehref\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026quot;./lib/leaflet/leaflet.css\u0026quot;\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u003c/span\u003e\n\u003c/pre\u003e\n      \u003c/div\u003e\n\n      \u003cdiv class=\"codehilite\"\u003e\n        \u003cpre\u003e\u003cspan class=\"p\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"nt\"\u003escript\u003c/span\u003e \u003cspan class=\"na\"\u003esrc\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026quot;./lib/Flat-UI-master/dist/js/vendor/jquery.min.js\u0026quot;\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\"nt\"\u003escript\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"nt\"\u003escript\u003c/span\u003e \u003cspan class=\"na\"\u003esrc\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026quot;./lib/Flat-UI-master/dist/js/flat-ui.js\u0026quot;\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\"nt\"\u003escript\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"nt\"\u003escript\u003c/span\u003e \u003cspan class=\"na\"\u003esrc\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026quot;./lib/leaflet/leaflet.js\u0026quot;\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\"nt\"\u003escript\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"nt\"\u003escript\u003c/span\u003e \u003cspan class=\"na\"\u003esrc\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026quot;./js/urlTemplate.js\u0026quot;\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\"nt\"\u003escript\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u003c/span\u003e\n\u003c/pre\u003e\n      \u003c/div\u003e\n\n      \u003cul\u003e\n        \u003cli\u003e地图加载与切换\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"codehilite\"\u003e\n        \u003cpre\u003e\u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003emap\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eL\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s2\"\u003e\u0026quot;mapDiv\u0026quot;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003ecrs\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003eL\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eCRS\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eEPSG3857\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"c1\"\u003e//要使用的坐标参考系统，默认的坐标参考系,互联网地图主流坐标系\u003c/span\u003e\n        \u003cspan class=\"c1\"\u003e// crs: L.CRS.EPSG4326, //WGS 84坐标系，GPS默认坐标系\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003ezoomControl\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"kc\"\u003etrue\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n        \u003cspan class=\"c1\"\u003e// minZoom: 1,\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003eattributionControl\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"kc\"\u003etrue\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e}).\u003c/span\u003e\u003cspan class=\"nx\"\u003esetView\u003c/span\u003e\u003cspan class=\"p\"\u003e([\u003c/span\u003e\u003cspan class=\"mf\"\u003e30.6268660000\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"mf\"\u003e104.1528940000\u003c/span\u003e\u003cspan class=\"p\"\u003e],\u003c/span\u003e \u003cspan class=\"mi\"\u003e18\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\u003cspan class=\"c1\"\u003e//定位在成都北纬N30°37′45.58″ 东经E104°09′1.44″\u003c/span\u003e\n    \u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"nx\"\u003eBaselayer\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eL\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003etileLayer\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eurlTemplate\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003emapbox_Image\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n       \u003cspan class=\"nx\"\u003emaxZoom\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mi\"\u003e17\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"c1\"\u003e//最大视图\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003eminZoom\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mi\"\u003e2\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"c1\"\u003e//最小视图\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003eattribution\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;liuvigongzuoshi@foxmail.com  \u0026amp;copy; \u0026lt;a href=\u0026quot;https://github.com/liuvigongzuoshi/WebGIS-for-learnning/tree/master/Leaflet_Demo\u0026quot;\u0026gt;WebGIS-for-learnning\u0026lt;/a\u0026gt;\u0026#39;\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e}).\u003c/span\u003e\u003cspan class=\"nx\"\u003eaddTo\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n\n\u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003esetLayer\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eele\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eremoveLayer\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eBaselayer\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n    \u003cspan class=\"k\"\u003eif\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eele\u003c/span\u003e \u003cspan class=\"o\"\u003e==\u003c/span\u003e \u003cspan class=\"s2\"\u003e\u0026quot;mapbox_Image\u0026quot;\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003eBaselayer\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eL\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003etileLayer\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eurlTemplate\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003emapbox_Image\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n            \u003cspan class=\"nx\"\u003emaxZoom\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mi\"\u003e17\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n            \u003cspan class=\"nx\"\u003eminZoom\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mi\"\u003e2\u003c/span\u003e\n        \u003cspan class=\"p\"\u003e}).\u003c/span\u003e\u003cspan class=\"nx\"\u003eaddTo\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e}\u003c/span\u003e \u003cspan class=\"k\"\u003eelse\u003c/span\u003e \u003cspan class=\"k\"\u003eif\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eele\u003c/span\u003e \u003cspan class=\"o\"\u003e==\u003c/span\u003e \u003cspan class=\"s2\"\u003e\u0026quot;mapbox_Vector\u0026quot;\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003eBaselayer\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eL\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003etileLayer\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eurlTemplate\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003emapbox_Vector\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n            \u003cspan class=\"nx\"\u003emaxZoom\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mi\"\u003e17\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n            \u003cspan class=\"c1\"\u003e// minZoom: 2\u003c/span\u003e\n        \u003cspan class=\"p\"\u003e}).\u003c/span\u003e\u003cspan class=\"nx\"\u003eaddTo\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003econsole\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elog\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eBaselayer\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003c/pre\u003e\n      \u003c/div\u003e\n\n      \u003ch3 id=\"demo-1-h5-geolocation-api-demo-11\"\u003e\n        基于 Demo 1 利用 H5 Geolocation API 定位到当前位置\n        \u003ca href=\"https://github.com/liuvigongzuoshi/Leaflet_Demo/blob/master/demo1.1.html\"\u003eDemo 1.1 \u003c/a\n        \u003e\u003ca class=\"headerlink\" href=\"#demo-1-h5-geolocation-api-demo-11\" title=\"Permanent link\"\u003e\u003c/a\u003e\n      \u003c/h3\u003e\n      \u003cp\u003e\n        \u003cimg\n          alt=\"\"\n          src=\"https://user-gold-cdn.xitu.io/2018/2/26/161d283e74f18d76?w=964\u0026amp;h=480\u0026amp;f=gif\u0026amp;s=862550\"\n        /\u003e\n      \u003c/p\u003e\n      \u003cul\u003e\n        \u003cli\u003e库引用 如上 Demo 1\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"codehilite\"\u003e\n        \u003cpre\u003e\u003cspan class=\"c\"\u003e\u0026lt;!-- marker高亮显示库引用 --\u0026gt;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"nt\"\u003elink\u003c/span\u003e \u003cspan class=\"na\"\u003erel\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026quot;stylesheet\u0026quot;\u003c/span\u003e \u003cspan class=\"na\"\u003ehref\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026quot;./lib/leaflet.marker.highlight/leaflet.marker.highlight.css\u0026quot;\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"nt\"\u003escript\u003c/span\u003e \u003cspan class=\"na\"\u003esrc\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026quot;./lib/leaflet.marker.highlight/leaflet.marker.highlight.js\u0026quot;\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\"nt\"\u003escript\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u003c/span\u003e\n\u003c/pre\u003e\n      \u003c/div\u003e\n\n      \u003cul\u003e\n        \u003cli\u003e判断浏览器是否支持\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"codehilite\"\u003e\n        \u003cpre\u003e    \u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n    \u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"nx\"\u003eBaselayer\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n    \u003cspan class=\"c1\"\u003e// 使用H5 API定位 定位在当前位置\u003c/span\u003e\n    \u003cspan class=\"k\"\u003eif\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003enavigator\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003egeolocation\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003econsole\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elog\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s1\"\u003e\u0026#39;/* 地理位置服务可用 */\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003enavigator\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003egeolocation\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003egetCurrentPosition\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eh5ApiSuccess\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003eh5ApiError\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e}\u003c/span\u003e \u003cspan class=\"k\"\u003eelse\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003econsole\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elog\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s1\"\u003e\u0026#39;/* 地理位置服务不可用 */\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003emapInit\u003c/span\u003e\u003cspan class=\"p\"\u003e([\u003c/span\u003e\u003cspan class=\"mf\"\u003e30.374558\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"mf\"\u003e104.09144\u003c/span\u003e\u003cspan class=\"p\"\u003e]);\u003c/span\u003e\u003cspan class=\"c1\"\u003e//指定一个数据 定位在成都北纬N30°37′45.58″ 东经E104°09′1.44″\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003c/pre\u003e\n      \u003c/div\u003e\n\n      \u003cul\u003e\n        \u003cli\u003e定位成功或失败\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"codehilite\"\u003e\n        \u003cpre\u003e    \u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003eh5ApiSuccess\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eposition\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n        \u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"nx\"\u003elatitude\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eposition\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ecoords\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elatitude\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e \u003cspan class=\"c1\"\u003e//纬度\u003c/span\u003e\n        \u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"nx\"\u003elongitude\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eposition\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ecoords\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elongitude\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e \u003cspan class=\"c1\"\u003e//经度\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003econsole\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elog\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s1\"\u003e\u0026#39;你的经度纬度分别为\u0026#39;\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"nx\"\u003elongitude\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;,\u0026#39;\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"nx\"\u003elatitude\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;。\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n        \u003cspan class=\"k\"\u003ereturn\u003c/span\u003e \u003cspan class=\"nx\"\u003emapInit\u003c/span\u003e\u003cspan class=\"p\"\u003e([\u003c/span\u003e\u003cspan class=\"nx\"\u003elatitude\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003elongitude\u003c/span\u003e\u003cspan class=\"p\"\u003e]);\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e};\u003c/span\u003e\n\n    \u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003eh5ApiError\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"p\"\u003e()\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003econsole\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elog\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s1\"\u003e\u0026#39;/* 地理位置请求失败 */\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003emapInit\u003c/span\u003e\u003cspan class=\"p\"\u003e([\u003c/span\u003e\u003cspan class=\"mf\"\u003e30.374558\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"mf\"\u003e104.09144\u003c/span\u003e\u003cspan class=\"p\"\u003e]);\u003c/span\u003e\u003cspan class=\"c1\"\u003e//指定一个数据 定位在成都北纬N30°37′45.58″ 东经E104°09′1.44″\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e};\u003c/span\u003e\n\u003c/pre\u003e\n      \u003c/div\u003e\n\n      \u003cul\u003e\n        \u003cli\u003e成功后初始化底图\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"codehilite\"\u003e\n        \u003cpre\u003e    \u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003emapInit\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eLatLng\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003emap\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eL\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s2\"\u003e\u0026quot;mapDiv\u0026quot;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n            \u003cspan class=\"nx\"\u003ecrs\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003eL\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eCRS\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eEPSG3857\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"c1\"\u003e//要使用的坐标参考系统，默认的坐标参考系\u003c/span\u003e\n            \u003cspan class=\"c1\"\u003e// crs: L.CRS.EPSG4326, //国内的坐标参考系\u003c/span\u003e\n            \u003cspan class=\"nx\"\u003ezoomControl\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"kc\"\u003etrue\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n            \u003cspan class=\"c1\"\u003e// minZoom: 1,\u003c/span\u003e\n            \u003cspan class=\"nx\"\u003eattributionControl\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"kc\"\u003etrue\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n        \u003cspan class=\"p\"\u003e}).\u003c/span\u003e\u003cspan class=\"nx\"\u003esetView\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eLatLng\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"mi\"\u003e18\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\u003cspan class=\"c1\"\u003e//定位在当前位置\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003eBaselayer\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eL\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003etileLayer\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eurlTemplate\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003emapbox_Image\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n            \u003cspan class=\"nx\"\u003emaxZoom\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mi\"\u003e17\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"c1\"\u003e//最大视图\u003c/span\u003e\n            \u003cspan class=\"nx\"\u003eminZoom\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mi\"\u003e2\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"c1\"\u003e//最小视图\u003c/span\u003e\n            \u003cspan class=\"nx\"\u003eattribution\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;liuvigongzuoshi@foxmail.com  \u0026amp;copy; \u0026lt;a href=\u0026quot;https://github.com/liuvigongzuoshi/WebGIS-for-learnning/tree/master/Leaflet_Demo\u0026quot;\u0026gt;WebGIS-for-learnning\u0026lt;/a\u0026gt;\u0026#39;\u003c/span\u003e\n        \u003cspan class=\"p\"\u003e}).\u003c/span\u003e\u003cspan class=\"nx\"\u003eaddTo\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n\n        \u003cspan class=\"nx\"\u003eL\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003emarker\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eLatLng\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n            \u003cspan class=\"nx\"\u003ehighlight\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s2\"\u003e\u0026quot;permanent\u0026quot;\u003c/span\u003e \u003cspan class=\"c1\"\u003e//永久高亮显示\u003c/span\u003e\n        \u003cspan class=\"p\"\u003e}).\u003c/span\u003e\u003cspan class=\"nx\"\u003eaddTo\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003c/pre\u003e\n      \u003c/div\u003e\n\n      \u003cblockquote\u003e\n        \u003cul\u003e\n          \u003cli\u003e\n            更多了解 geolocation 对象，可参考\u003ca\n              href=\"https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation/Using_geolocation\"\n              \u003eMDN Web 文档\u003c/a\n            \u003e\n          \u003c/li\u003e\n          \u003cli\u003e\n            更多了解使用 marker 高亮显示，可参考\u003ca href=\"https://github.com/brandonxiang/leaflet.marker.highlight\"\n              \u003eleaflet.marker.highlight\u003c/a\n            \u003e插件\n          \u003c/li\u003e\n          \u003cli\u003e\n            基于 Demo 1 利用 leaflet 封装好的 H5 定位 API,定位到当前位置\n            \u003ca href=\"https://github.com/liuvigongzuoshi/Leaflet_Demo/blob/master/demo1.2.html\"\u003eDemo\u003c/a\u003e\n          \u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/blockquote\u003e\n      \u003ch3 id=\"part-2-demo-2\"\u003e\n        PART 2： 地图操作（缩放、平移、定位/书签、动画）\n        \u003ca href=\"https://github.com/liuvigongzuoshi/Leaflet_Demo/blob/master/demo2.html\"\u003eDemo 2 \u003c/a\n        \u003e\u003ca class=\"headerlink\" href=\"#part-2-demo-2\" title=\"Permanent link\"\u003e\u003c/a\u003e\n      \u003c/h3\u003e\n      \u003cp\u003e\n        \u003cimg\n          alt=\"\"\n          src=\"https://user-gold-cdn.xitu.io/2018/2/28/161dcd420e164009?w=964\u0026amp;h=480\u0026amp;f=gif\u0026amp;s=2119022\"\n        /\u003e\n      \u003c/p\u003e\n      \u003cul\u003e\n        \u003cli\u003e\n          \u003cp\u003e库引用 如上 Demo 1\u003c/p\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n          \u003cp\u003e设置地图缩放到指定图层\u003c/p\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"codehilite\"\u003e\n        \u003cpre\u003e\u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003esetZoom\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"mi\"\u003e10\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n  \u003cspan class=\"c1\"\u003e// animate: false\u003c/span\u003e\n\u003cspan class=\"p\"\u003e})\u003c/span\u003e  \u003cspan class=\"c1\"\u003e//设置地图缩放到\u003c/span\u003e\n\u003c/pre\u003e\n      \u003c/div\u003e\n\n      \u003cul\u003e\n        \u003cli\u003e图层往里进一个图层，放大\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"codehilite\"\u003e\n        \u003cpre\u003e\u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ezoomIn\u003c/span\u003e\u003cspan class=\"p\"\u003e()\u003c/span\u003e \u003cspan class=\"c1\"\u003e//图层往里进一个图层，放大\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e//map.zoomOut()  //图层往里出一个图层，缩小\u003c/span\u003e\n\u003c/pre\u003e\n      \u003c/div\u003e\n\n      \u003cul\u003e\n        \u003cli\u003e地图平移至中心点\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"codehilite\"\u003e\n        \u003cpre\u003e\u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003epanTo\u003c/span\u003e\u003cspan class=\"p\"\u003e([\u003c/span\u003e\u003cspan class=\"mf\"\u003e37.91082\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"mf\"\u003e128.73583\u003c/span\u003e\u003cspan class=\"p\"\u003e],\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003eanimate\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"kc\"\u003etrue\u003c/span\u003e\n\u003cspan class=\"p\"\u003e})\u003c/span\u003e \u003cspan class=\"c1\"\u003e//地图平移，默认就是true，将地图平移到给定的中心。如果新的中心点在屏幕内与现有的中心点不同则产生平移动作。\u003c/span\u003e\n\u003c/pre\u003e\n      \u003c/div\u003e\n\n      \u003cul\u003e\n        \u003cli\u003e地图飞到中心点\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"codehilite\"\u003e\n        \u003cpre\u003e\u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eflyTo\u003c/span\u003e\u003cspan class=\"p\"\u003e([\u003c/span\u003e\u003cspan class=\"mf\"\u003e36.52\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"mf\"\u003e120.31\u003c/span\u003e\u003cspan class=\"p\"\u003e]);\u003c/span\u003e \u003cspan class=\"c1\"\u003e// 点到点的抛物线动画，平移加缩放动画\u003c/span\u003e\n\u003c/pre\u003e\n      \u003c/div\u003e\n\n      \u003cblockquote\u003e\n        \u003cp\u003e\n          注意：尽量避免 setZoom()等地图缩放方法与 flyTo、flyToBounds\n          一起合用，因为这两类地图操作方法都有各自的缩放值，造成动画不流畅、不能定位到目的点。\n        \u003c/p\u003e\n      \u003c/blockquote\u003e\n      \u003cul\u003e\n        \u003cli\u003e地图飞到边界的合适的位置\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"codehilite\"\u003e\n        \u003cpre\u003e\u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eflyToBounds\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003epolygon\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003egetBounds\u003c/span\u003e\u003cspan class=\"p\"\u003e());\u003c/span\u003e   \u003cspan class=\"c1\"\u003e//getBounds（获取边界）：返回地图视图的经纬度边界。\u003c/span\u003e\n    \u003cspan class=\"c1\"\u003e//飞到这个多变形区域上面，自动判断区域块的大小，合适缩放图层，将地图视图尽可能大地设定在给定的地理边界内。\u003c/span\u003e\n\n\u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"nx\"\u003epolygon\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eL\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003epolygon\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\n          \u003cspan class=\"p\"\u003e[[\u003c/span\u003e\u003cspan class=\"mi\"\u003e37\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"o\"\u003e-\u003c/span\u003e\u003cspan class=\"mf\"\u003e109.05\u003c/span\u003e\u003cspan class=\"p\"\u003e],\u003c/span\u003e\n          \u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"mi\"\u003e41\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"o\"\u003e-\u003c/span\u003e\u003cspan class=\"mf\"\u003e109.03\u003c/span\u003e\u003cspan class=\"p\"\u003e],\u003c/span\u003e\n          \u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"mi\"\u003e41\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"o\"\u003e-\u003c/span\u003e\u003cspan class=\"mf\"\u003e102.05\u003c/span\u003e\u003cspan class=\"p\"\u003e],\u003c/span\u003e\n          \u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"mi\"\u003e37\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"o\"\u003e-\u003c/span\u003e\u003cspan class=\"mf\"\u003e102.04\u003c/span\u003e\u003cspan class=\"p\"\u003e]],\u003c/span\u003e\n     \u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"mf\"\u003e40.774\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"o\"\u003e-\u003c/span\u003e\u003cspan class=\"mf\"\u003e74.125\u003c/span\u003e\u003cspan class=\"p\"\u003e],\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n       \u003cspan class=\"nx\"\u003ecolor\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;green\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n       \u003cspan class=\"nx\"\u003efillColor\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;#f03\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n       \u003cspan class=\"nx\"\u003efillOpacity\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mf\"\u003e0.5\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e}).\u003c/span\u003e\u003cspan class=\"nx\"\u003eaddTo\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e  \u003cspan class=\"c1\"\u003e//地图上绘制一个多形\u003c/span\u003e\n\u003c/pre\u003e\n      \u003c/div\u003e\n\n      \u003cul\u003e\n        \u003cli\u003e地图定位到边界的合适的位置\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"codehilite\"\u003e\n        \u003cpre\u003e\u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003efitBounds\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003epolygon\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003egetBounds\u003c/span\u003e\u003cspan class=\"p\"\u003e());\u003c/span\u003e  \u003cspan class=\"c1\"\u003e//getBounds（获取边界）：返回地图视图的经纬度边界。\u003c/span\u003e\n  \u003cspan class=\"c1\"\u003e//平移到一个区域上面，自动判断区域块的大小，合适缩放图层\u003c/span\u003e\n\n\u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"nx\"\u003epolygon\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eL\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003epolygon\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\n          \u003cspan class=\"p\"\u003e[[\u003c/span\u003e\u003cspan class=\"mi\"\u003e37\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"o\"\u003e-\u003c/span\u003e\u003cspan class=\"mf\"\u003e109.05\u003c/span\u003e\u003cspan class=\"p\"\u003e],\u003c/span\u003e\n          \u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"mi\"\u003e41\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"o\"\u003e-\u003c/span\u003e\u003cspan class=\"mf\"\u003e109.03\u003c/span\u003e\u003cspan class=\"p\"\u003e],\u003c/span\u003e\n          \u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"mi\"\u003e41\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"o\"\u003e-\u003c/span\u003e\u003cspan class=\"mf\"\u003e102.05\u003c/span\u003e\u003cspan class=\"p\"\u003e],\u003c/span\u003e\n          \u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"mi\"\u003e37\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"o\"\u003e-\u003c/span\u003e\u003cspan class=\"mf\"\u003e102.04\u003c/span\u003e\u003cspan class=\"p\"\u003e]],\u003c/span\u003e\n     \u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"mf\"\u003e40.774\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"o\"\u003e-\u003c/span\u003e\u003cspan class=\"mf\"\u003e74.125\u003c/span\u003e\u003cspan class=\"p\"\u003e],\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n       \u003cspan class=\"nx\"\u003ecolor\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;green\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n       \u003cspan class=\"nx\"\u003efillColor\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;#f03\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n       \u003cspan class=\"nx\"\u003efillOpacity\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mf\"\u003e0.5\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e}).\u003c/span\u003e\u003cspan class=\"nx\"\u003eaddTo\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e  \u003cspan class=\"c1\"\u003e//地图上绘制一个多边形\u003c/span\u003e\n\u003c/pre\u003e\n      \u003c/div\u003e\n\n      \u003ch3 id=\"part-3-demo-3\"\u003e\n        PART 3： 图层管理（加载、移除、调整顺序）：\n        \u003ca href=\"https://github.com/liuvigongzuoshi/Leaflet_Demo/blob/master/demo3.html\"\u003eDemo 3 \u003c/a\n        \u003e\u003ca class=\"headerlink\" href=\"#part-3-demo-3\" title=\"Permanent link\"\u003e\u003c/a\u003e\n      \u003c/h3\u003e\n      \u003cp\u003e\n        \u003cimg\n          alt=\"\"\n          src=\"https://user-gold-cdn.xitu.io/2018/2/28/161dce7e881a2362?w=1920\u0026amp;h=959\u0026amp;f=jpeg\u0026amp;s=2962698\"\n        /\u003e\n      \u003c/p\u003e\n      \u003cul\u003e\n        \u003cli\u003e库引用\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"codehilite\"\u003e\n        \u003cpre\u003e\u003cspan class=\"p\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"nt\"\u003elink\u003c/span\u003e \u003cspan class=\"na\"\u003erel\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026quot;stylesheet\u0026quot;\u003c/span\u003e \u003cspan class=\"na\"\u003etype\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026quot;text/css\u0026quot;\u003c/span\u003e  \u003cspan class=\"na\"\u003ehref\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026quot;./lib/Flat-UI-master/dist/css/vendor/bootstrap/css/bootstrap.min.css\u0026quot;\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e/\u0026gt;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"nt\"\u003elink\u003c/span\u003e \u003cspan class=\"na\"\u003erel\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026quot;stylesheet\u0026quot;\u003c/span\u003e \u003cspan class=\"na\"\u003ehref\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026quot;./lib/Flat-UI-master/dist/css/flat-ui.min.css\u0026quot;\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"nt\"\u003elink\u003c/span\u003e \u003cspan class=\"na\"\u003erel\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026quot;stylesheet\u0026quot;\u003c/span\u003e \u003cspan class=\"na\"\u003ehref\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026quot;./lib/leaflet/leaflet.css\u0026quot;\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u003c/span\u003e\n\u003c/pre\u003e\n      \u003c/div\u003e\n\n      \u003cdiv class=\"codehilite\"\u003e\n        \u003cpre\u003e\u003cspan class=\"p\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"nt\"\u003escript\u003c/span\u003e \u003cspan class=\"na\"\u003esrc\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026quot;./lib/Flat-UI-master/dist/js/vendor/jquery.min.js\u0026quot;\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\"nt\"\u003escript\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"nt\"\u003escript\u003c/span\u003e \u003cspan class=\"na\"\u003esrc\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026quot;./lib/Flat-UI-master/dist/js/flat-ui.js\u0026quot;\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\"nt\"\u003escript\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"nt\"\u003escript\u003c/span\u003e \u003cspan class=\"na\"\u003esrc\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026quot;./lib/leaflet/leaflet.js\u0026quot;\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\"nt\"\u003escript\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"nt\"\u003escript\u003c/span\u003e \u003cspan class=\"na\"\u003esrc\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026quot;./lib/esri-leaflet-v2.1.2/dist/esri-leaflet.js\u0026quot;\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\"nt\"\u003escript\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u003c/span\u003e \u003cspan class=\"c\"\u003e\u0026lt;!-- esri-leafleat插件 --\u0026gt;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"nt\"\u003escript\u003c/span\u003e \u003cspan class=\"na\"\u003esrc\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026quot;./js/urlTemplate.js\u0026quot;\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\"nt\"\u003escript\u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026gt;\u003c/span\u003e\n\u003c/pre\u003e\n      \u003c/div\u003e\n\n      \u003cul\u003e\n        \u003cli\u003e使用 esri-leaflet 插件加载 ArcGIS 底图服务\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"codehilite\"\u003e\n        \u003cpre\u003e\u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"nx\"\u003eoMap\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"kc\"\u003enull\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n    \u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"nx\"\u003eoLayer\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"p\"\u003e[];\u003c/span\u003e\n\n    \u003cspan class=\"nx\"\u003eoMap\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eL\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s1\"\u003e\u0026#39;mapDiv\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003ecrs\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003eL\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eCRS\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eEPSG4326\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003ezoomControl\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"kc\"\u003efalse\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003eminZoom\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mi\"\u003e7\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003eattributionControl\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"kc\"\u003efalse\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e}).\u003c/span\u003e\u003cspan class=\"nx\"\u003esetView\u003c/span\u003e\u003cspan class=\"p\"\u003e([\u003c/span\u003e\u003cspan class=\"mf\"\u003e29.59\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"mf\"\u003e106.59\u003c/span\u003e\u003cspan class=\"p\"\u003e],\u003c/span\u003e \u003cspan class=\"mi\"\u003e12\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e \u003cspan class=\"c1\"\u003e//定位在重庆\u003c/span\u003e\n\n    \u003cspan class=\"nx\"\u003eoLayer\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003epush\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eL\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eesri\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003etiledMapLayer\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003eurl\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003eurlTemplate\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eSYS_IMG_MAPSERVER_PATH\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003emaxZoom\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mi\"\u003e17\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003eminZoom\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mi\"\u003e0\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003euseCors\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"kc\"\u003efalse\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"c1\"\u003e//是否浏览器在跨域的情况下使用GET请求。\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e}).\u003c/span\u003e\u003cspan class=\"nx\"\u003eaddTo\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eoMap\u003c/span\u003e\u003cspan class=\"p\"\u003e));\u003c/span\u003e \u003cspan class=\"c1\"\u003e//加载第一个底图\u003c/span\u003e\n\n    \u003cspan class=\"nx\"\u003eoLayer\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003epush\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eL\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eesri\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003etiledMapLayer\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003eurl\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003eurlTemplate\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eSYS_IMG_LABEL_MAPSERVER_PATH\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003emaxZoom\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mi\"\u003e17\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003eminZoom\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mi\"\u003e0\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003euseCors\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"kc\"\u003efalse\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e}).\u003c/span\u003e\u003cspan class=\"nx\"\u003eaddTo\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eoMap\u003c/span\u003e\u003cspan class=\"p\"\u003e));\u003c/span\u003e  \u003cspan class=\"c1\"\u003e//加载第二个底图\u003c/span\u003e\n\u003c/pre\u003e\n      \u003c/div\u003e\n\n      \u003cul\u003e\n        \u003cli\u003e切换底图(移除及加载)\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"codehilite\"\u003e\n        \u003cpre\u003e\u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003esetLayer\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003elayerUrls\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003emaxZoom\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n        \u003cspan class=\"k\"\u003efor\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"nx\"\u003ei\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"mi\"\u003e0\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e \u003cspan class=\"nx\"\u003ei\u003c/span\u003e \u003cspan class=\"o\"\u003e\u0026lt;\u003c/span\u003e \u003cspan class=\"nx\"\u003eoLayer\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elength\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e \u003cspan class=\"nx\"\u003ei\u003c/span\u003e\u003cspan class=\"o\"\u003e++\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n            \u003cspan class=\"nx\"\u003eoMap\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eremoveLayer\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eoLayer\u003c/span\u003e\u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"nx\"\u003ei\u003c/span\u003e\u003cspan class=\"p\"\u003e])\u003c/span\u003e \u003cspan class=\"c1\"\u003e//将图层在地图上移除\u003c/span\u003e\n        \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003eoLayer\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"p\"\u003e[]\u003c/span\u003e \u003cspan class=\"c1\"\u003e//制空数组\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003elayerUrls\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e((\u003c/span\u003e\u003cspan class=\"nx\"\u003eitem\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n            \u003cspan class=\"nx\"\u003eoLayer\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003epush\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eL\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eesri\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003etiledMapLayer\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n                \u003cspan class=\"nx\"\u003eurl\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003eitem\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n                \u003cspan class=\"nx\"\u003euseCors\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"kc\"\u003efalse\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n                \u003cspan class=\"nx\"\u003emaxZoom\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003emaxZoom\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"c1\"\u003e// 设置最大放大图层值\u003c/span\u003e\n            \u003cspan class=\"p\"\u003e}).\u003c/span\u003e\u003cspan class=\"nx\"\u003eaddTo\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eoMap\u003c/span\u003e\u003cspan class=\"p\"\u003e));\u003c/span\u003e\n        \u003cspan class=\"p\"\u003e})\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003c/pre\u003e\n      \u003c/div\u003e\n\n      \u003cblockquote\u003e\n        \u003cp\u003e\n          不同的底图可能图层数不一样，就可能造成浏览器去请求不存在的图层，以及给用户展示出空白区域的不好体验，所以切换图层时候应注意设置最大及最小缩放值。\n        \u003c/p\u003e\n      \u003c/blockquote\u003e\n      \u003ch3 id=\"part-4-demo-4\"\u003e\n        PART 4： 要素标绘（点、线、面，符号化/静态动态）\n        \u003ca href=\"https://github.com/liuvigongzuoshi/Leaflet_Demo/blob/master/demo4.html\"\u003eDemo 4 \u003c/a\n        \u003e\u003ca class=\"headerlink\" href=\"#part-4-demo-4\" title=\"Permanent link\"\u003e\u003c/a\u003e\n      \u003c/h3\u003e\n      \u003cp\u003e\n        \u003cimg\n          alt=\"\"\n          src=\"https://user-gold-cdn.xitu.io/2018/2/28/161dcf0290ac287b?w=964\u0026amp;h=480\u0026amp;f=gif\u0026amp;s=3275194\"\n        /\u003e\n      \u003c/p\u003e\n      \u003cul\u003e\n        \u003cli\u003e库引用 如上 Demo 1\u003c/li\u003e\n        \u003cli\u003e画一个圆\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"codehilite\"\u003e\n        \u003cpre\u003e\u003cspan class=\"c1\"\u003e// 画一个circle\u003c/span\u003e\n\u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003ecircle\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eL\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ecircle\u003c/span\u003e\u003cspan class=\"p\"\u003e([\u003c/span\u003e\u003cspan class=\"mf\"\u003e36.52\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"mf\"\u003e120.31\u003c/span\u003e\u003cspan class=\"p\"\u003e],\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003ecolor\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;green\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"c1\"\u003e//描边色\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003efillColor\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;#f03\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e  \u003cspan class=\"c1\"\u003e//填充色\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003efillOpacity\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mf\"\u003e0.5\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"c1\"\u003e//透明度\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003eradius\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mi\"\u003e10000\u003c/span\u003e \u003cspan class=\"c1\"\u003e//半径，单位米\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}).\u003c/span\u003e\u003cspan class=\"nx\"\u003eaddTo\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e// 绑定一个提示标签\u003c/span\u003e\n\u003cspan class=\"nx\"\u003ecircle\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ebindTooltip\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s1\"\u003e\u0026#39;我是个圆\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n\u003c/pre\u003e\n      \u003c/div\u003e\n\n      \u003cul\u003e\n        \u003cli\u003eMaker 及自定义 Maker\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"codehilite\"\u003e\n        \u003cpre\u003e\u003cspan class=\"c1\"\u003e// 做一个maker\u003c/span\u003e\n\u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003emarker\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eL\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003emarker\u003c/span\u003e\u003cspan class=\"p\"\u003e([\u003c/span\u003e\u003cspan class=\"mf\"\u003e36.52\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"mf\"\u003e120.31\u003c/span\u003e\u003cspan class=\"p\"\u003e]).\u003c/span\u003e\u003cspan class=\"nx\"\u003eaddTo\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e// 绑定一个提示标签\u003c/span\u003e\n\u003cspan class=\"nx\"\u003emarker\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ebindTooltip\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s1\"\u003e\u0026#39;这是个Marker\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e \u003cspan class=\"nx\"\u003edirection\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;left\u0026#39;\u003c/span\u003e \u003cspan class=\"p\"\u003e}).\u003c/span\u003e\u003cspan class=\"nx\"\u003eopenTooltip\u003c/span\u003e\u003cspan class=\"p\"\u003e();\u003c/span\u003e\n\n\n\u003cspan class=\"c1\"\u003e//自定义一个maker\u003c/span\u003e\n\u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003egreenIcon\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eL\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eicon\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003eiconUrl\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;./icon/logo.png\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003eiconSize\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"mi\"\u003e300\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"mi\"\u003e79\u003c/span\u003e\u003cspan class=\"p\"\u003e],\u003c/span\u003e \u003cspan class=\"c1\"\u003e// size of the icon\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003epopupAnchor\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"mi\"\u003e0\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"o\"\u003e-\u003c/span\u003e\u003cspan class=\"mi\"\u003e10\u003c/span\u003e\u003cspan class=\"p\"\u003e]\u003c/span\u003e \u003cspan class=\"c1\"\u003e// point from which the popup should open relative to the iconAnchor\u003c/span\u003e\n\u003cspan class=\"p\"\u003e});\u003c/span\u003e\n\n\u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003eoMarker\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eL\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003emarker\u003c/span\u003e\u003cspan class=\"p\"\u003e([\u003c/span\u003e\u003cspan class=\"mf\"\u003e36.52\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"mf\"\u003e124.31\u003c/span\u003e\u003cspan class=\"p\"\u003e],\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e \u003cspan class=\"nx\"\u003eicon\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003egreenIcon\u003c/span\u003e \u003cspan class=\"p\"\u003e}).\u003c/span\u003e\u003cspan class=\"nx\"\u003eaddTo\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e// 绑定一个提示标签\u003c/span\u003e\n\u003cspan class=\"nx\"\u003eoMarker\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ebindTooltip\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s1\"\u003e\u0026#39;这是个自定义Marker\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e \u003cspan class=\"nx\"\u003edirection\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;left\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003eoffset\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"o\"\u003e-\u003c/span\u003e\u003cspan class=\"mi\"\u003e150\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"mi\"\u003e0\u003c/span\u003e\u003cspan class=\"p\"\u003e]\u003c/span\u003e \u003cspan class=\"p\"\u003e});\u003c/span\u003e\n\u003c/pre\u003e\n      \u003c/div\u003e\n\n      \u003cul\u003e\n        \u003cli\u003e画一根线\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"codehilite\"\u003e\n        \u003cpre\u003e\u003cspan class=\"c1\"\u003e//画一根线\u003c/span\u003e\n\u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003epolyline\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eL\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003epolyline\u003c/span\u003e\u003cspan class=\"p\"\u003e([[\u003c/span\u003e\u003cspan class=\"mf\"\u003e45.51\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"o\"\u003e-\u003c/span\u003e\u003cspan class=\"mf\"\u003e122.68\u003c/span\u003e\u003cspan class=\"p\"\u003e],\u003c/span\u003e \u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"mf\"\u003e37.77\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"o\"\u003e-\u003c/span\u003e\u003cspan class=\"mf\"\u003e122.43\u003c/span\u003e\u003cspan class=\"p\"\u003e],\u003c/span\u003e \u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"mf\"\u003e34.04\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"o\"\u003e-\u003c/span\u003e\u003cspan class=\"mf\"\u003e118.2\u003c/span\u003e\u003cspan class=\"p\"\u003e]],\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e \u003cspan class=\"nx\"\u003ecolor\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;red\u0026#39;\u003c/span\u003e \u003cspan class=\"p\"\u003e}).\u003c/span\u003e\u003cspan class=\"nx\"\u003eaddTo\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e// 飞到这个线的位置\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e// map.fitBounds(polyline.getBounds());\u003c/span\u003e\n\u003c/pre\u003e\n      \u003c/div\u003e\n\n      \u003cul\u003e\n        \u003cli\u003e画一个多边形\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"codehilite\"\u003e\n        \u003cpre\u003e\u003cspan class=\"c1\"\u003e// 画一个polygon\u003c/span\u003e\n\u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003epolygon\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eL\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003epolygon\u003c/span\u003e\u003cspan class=\"p\"\u003e([\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e[[\u003c/span\u003e\u003cspan class=\"mi\"\u003e37\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"o\"\u003e-\u003c/span\u003e\u003cspan class=\"mf\"\u003e109.05\u003c/span\u003e\u003cspan class=\"p\"\u003e],\u003c/span\u003e \u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"mi\"\u003e41\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"o\"\u003e-\u003c/span\u003e\u003cspan class=\"mf\"\u003e109.03\u003c/span\u003e\u003cspan class=\"p\"\u003e],\u003c/span\u003e \u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"mi\"\u003e41\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"o\"\u003e-\u003c/span\u003e\u003cspan class=\"mf\"\u003e102.05\u003c/span\u003e\u003cspan class=\"p\"\u003e],\u003c/span\u003e \u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"mi\"\u003e37\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"o\"\u003e-\u003c/span\u003e\u003cspan class=\"mf\"\u003e102.04\u003c/span\u003e\u003cspan class=\"p\"\u003e]],\u003c/span\u003e \u003cspan class=\"c1\"\u003e// outer ring\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e[[\u003c/span\u003e\u003cspan class=\"mf\"\u003e37.29\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"o\"\u003e-\u003c/span\u003e\u003cspan class=\"mf\"\u003e108.58\u003c/span\u003e\u003cspan class=\"p\"\u003e],\u003c/span\u003e \u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"mf\"\u003e40.71\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"o\"\u003e-\u003c/span\u003e\u003cspan class=\"mf\"\u003e108.58\u003c/span\u003e\u003cspan class=\"p\"\u003e],\u003c/span\u003e \u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"mf\"\u003e40.71\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"o\"\u003e-\u003c/span\u003e\u003cspan class=\"mf\"\u003e102.50\u003c/span\u003e\u003cspan class=\"p\"\u003e],\u003c/span\u003e \u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"mf\"\u003e37.29\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"o\"\u003e-\u003c/span\u003e\u003cspan class=\"mf\"\u003e102.50\u003c/span\u003e\u003cspan class=\"p\"\u003e]]\u003c/span\u003e \u003cspan class=\"c1\"\u003e// hole\u003c/span\u003e\n\u003cspan class=\"p\"\u003e],\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003ecolor\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;green\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003efillColor\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;#f03\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003efillOpacity\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mf\"\u003e0.5\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e}).\u003c/span\u003e\u003cspan class=\"nx\"\u003eaddTo\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e// 绑定一个提示标签\u003c/span\u003e\n\u003cspan class=\"nx\"\u003epolygon\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ebindTooltip\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s1\"\u003e\u0026#39;this is 个多边形\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e// 飞到这个多边形的位置\u003c/span\u003e\n\u003cspan class=\"c1\"\u003e// map.fitBounds(polygon.getBounds());\u003c/span\u003e\n\u003c/pre\u003e\n      \u003c/div\u003e\n\n      \u003ch3 id=\"part-5-popup-demo-5\"\u003e\n        PART 5： 信息窗口（入口、Popup、定制）\n        \u003ca href=\"https://github.com/liuvigongzuoshi/Leaflet_Demo/blob/master/demo5.html\"\u003eDemo 5 \u003c/a\n        \u003e\u003ca class=\"headerlink\" href=\"#part-5-popup-demo-5\" title=\"Permanent link\"\u003e\u003c/a\u003e\n      \u003c/h3\u003e\n      \u003cp\u003e\n        \u003cimg\n          alt=\"\"\n          src=\"https://user-gold-cdn.xitu.io/2018/2/28/161dd0f8edbe36e5?w=964\u0026amp;h=480\u0026amp;f=gif\u0026amp;s=3360015\"\n        /\u003e\n      \u003c/p\u003e\n      \u003cul\u003e\n        \u003cli\u003e库引用 如上 Demo 1\u003c/li\u003e\n        \u003cli\u003e画一个 circle 并绑定一个 Popup\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"codehilite\"\u003e\n        \u003cpre\u003e\u003cspan class=\"c1\"\u003e// 画一个circle\u003c/span\u003e\n\u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003ecircle\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eL\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ecircle\u003c/span\u003e\u003cspan class=\"p\"\u003e([\u003c/span\u003e\u003cspan class=\"mf\"\u003e36.92\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"mf\"\u003e121.31\u003c/span\u003e\u003cspan class=\"p\"\u003e],\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n \u003cspan class=\"nx\"\u003ecolor\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;green\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"c1\"\u003e//描边色\u003c/span\u003e\n \u003cspan class=\"nx\"\u003efillColor\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;#f03\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e  \u003cspan class=\"c1\"\u003e//填充色\u003c/span\u003e\n \u003cspan class=\"nx\"\u003efillOpacity\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mf\"\u003e0.5\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"c1\"\u003e//透明度\u003c/span\u003e\n \u003cspan class=\"nx\"\u003eradius\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mi\"\u003e10000\u003c/span\u003e \u003cspan class=\"c1\"\u003e//半径，单位米\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}).\u003c/span\u003e\u003cspan class=\"nx\"\u003eaddTo\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n\n\u003cspan class=\"c1\"\u003e// 绑定一个弹窗\u003c/span\u003e\n\u003cspan class=\"nx\"\u003ecircle\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ebindPopup\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s1\"\u003e\u0026#39;我是个圆\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n\u003c/pre\u003e\n      \u003c/div\u003e\n\n      \u003cul\u003e\n        \u003cli\u003e定位一个 marker，绑定一个自定义 Popup\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"codehilite\"\u003e\n        \u003cpre\u003e\u003cspan class=\"c1\"\u003e// 定位一个maker\u003c/span\u003e\n\u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003emarker\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eL\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003emarker\u003c/span\u003e\u003cspan class=\"p\"\u003e([\u003c/span\u003e\u003cspan class=\"mf\"\u003e36.52\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"mf\"\u003e120.31\u003c/span\u003e\u003cspan class=\"p\"\u003e]).\u003c/span\u003e\u003cspan class=\"nx\"\u003eaddTo\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n\n\u003cspan class=\"c1\"\u003e//maker上自定义一个popup\u003c/span\u003e\n\u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003ehtml\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;\u0026lt;p\u0026gt;Hello world!\u0026lt;br /\u0026gt;This is a nice popup.\u0026lt;/p\u0026gt;\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003epopup\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003emarker\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ebindPopup\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ehtml\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e \u003cspan class=\"nx\"\u003emaxHeight\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mi\"\u003e250\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003emaxWidth\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mi\"\u003e490\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003eclassName\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;content\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003eoffset\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"mi\"\u003e0\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"mi\"\u003e0\u003c/span\u003e\u003cspan class=\"p\"\u003e]\u003c/span\u003e \u003cspan class=\"p\"\u003e}).\u003c/span\u003e\u003cspan class=\"nx\"\u003eon\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s1\"\u003e\u0026#39;popupopen\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"kd\"\u003efunction\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eparams\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003econsole\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elog\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eparams\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n\u003cspan class=\"p\"\u003e});\u003c/span\u003e\n\u003c/pre\u003e\n      \u003c/div\u003e\n\n      \u003cul\u003e\n        \u003cli\u003e实现动态改变 Popup 的内容\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"codehilite\"\u003e\n        \u003cpre\u003e\u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003emypop\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eL\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003epopup\u003c/span\u003e\u003cspan class=\"p\"\u003e();\u003c/span\u003e\n\n\u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eon\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s1\"\u003e\u0026#39;click\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"kd\"\u003efunction\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ee\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n  \u003cspan class=\"nx\"\u003emypop\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003esetLatLng\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ee\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elatlng\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003esetContent\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s1\"\u003e\u0026#39;你临幸了这个点：\u0026lt;br\u0026gt;\u0026#39;\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"nx\"\u003ee\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elatlng\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003etoString\u003c/span\u003e\u003cspan class=\"p\"\u003e())\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eopenOn\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n\u003cspan class=\"p\"\u003e});\u003c/span\u003e\n\u003c/pre\u003e\n      \u003c/div\u003e\n\n      \u003ch3 id=\"part-6-geojson-demo-6\"\u003e\n        PART 6： geojson 数据绘制边界(坐标转换、渲染)\n        \u003ca href=\"https://github.com/liuvigongzuoshi/Leaflet_Demo/blob/master/demo6.html\"\u003eDemo 6 \u003c/a\n        \u003e\u003ca class=\"headerlink\" href=\"#part-6-geojson-demo-6\" title=\"Permanent link\"\u003e\u003c/a\u003e\n      \u003c/h3\u003e\n      \u003cp\u003e\n        \u003cimg\n          alt=\"\"\n          src=\"https://user-gold-cdn.xitu.io/2018/3/1/161dd3b18402adcc?w=964\u0026amp;h=480\u0026amp;f=gif\u0026amp;s=5224505\"\n        /\u003e\n      \u003c/p\u003e\n      \u003cul\u003e\n        \u003cli\u003e\n          \u003cp\u003e库引用 如上 Demo 1\u003c/p\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n          \u003cp\u003e获得 geojson 并处理数据\u003c/p\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"codehilite\"\u003e\n        \u003cpre\u003e\u003cspan class=\"c1\"\u003e// 请求geojson并处理数据\u003c/span\u003e\n\u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003epopulation\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"p\"\u003e()\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003e$\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eget\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s2\"\u003e\u0026quot;./js/geojson.json\u0026quot;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"kd\"\u003efunction\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eresponse\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n        \u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003epoplData\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eresponse\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003edata\u003c/span\u003e\n        \u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003ePolygonsCenter\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eresponse\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003egeopoint\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003edrawPolygons\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003epoplData\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003ePolygonsCenter\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e});\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003c/pre\u003e\n      \u003c/div\u003e\n\n      \u003cblockquote\u003e\n        \u003cp\u003e\n          模拟后台返回的数据\u003ca href=\"https://github.com/liuvigongzuoshi/Leaflet_Demo/blob/master/js/geojson.json\"\n            \u003egeojson\u003c/a\n          \u003e\n        \u003c/p\u003e\n      \u003c/blockquote\u003e\n      \u003cul\u003e\n        \u003cli\u003e绘制边界并添加图例\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"codehilite\"\u003e\n        \u003cpre\u003e\u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"nx\"\u003eoPolygon_VilPop\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"p\"\u003e[];\u003c/span\u003e\n\n\u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003elegend\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eL\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003econtrol\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003eposition\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;bottomright\u0026#39;\u003c/span\u003e\n \u003cspan class=\"p\"\u003e});\u003c/span\u003e\n\n\u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003edrawPolygons\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003epoplData\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003ePolygonsCenter\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"k\"\u003efor\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003ei\u003c/span\u003e \u003cspan class=\"k\"\u003ein\u003c/span\u003e \u003cspan class=\"nx\"\u003epoplData\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003epoplData\u003c/span\u003e\u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"nx\"\u003ei\u003c/span\u003e\u003cspan class=\"p\"\u003e].\u003c/span\u003e\u003cspan class=\"nx\"\u003egeoJson\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eJSON\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eparse\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003epoplData\u003c/span\u003e\u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"nx\"\u003ei\u003c/span\u003e\u003cspan class=\"p\"\u003e].\u003c/span\u003e\u003cspan class=\"nx\"\u003egeoJson\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003eoPolygon_VilPop\u003c/span\u003e\u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"nx\"\u003ei\u003c/span\u003e\u003cspan class=\"p\"\u003e]\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eL\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003egeoJSON\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003epoplData\u003c/span\u003e\u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"nx\"\u003ei\u003c/span\u003e\u003cspan class=\"p\"\u003e].\u003c/span\u003e\u003cspan class=\"nx\"\u003egeoJson\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n            \u003cspan class=\"nx\"\u003estyle\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"kd\"\u003efunction\u003c/span\u003e \u003cspan class=\"p\"\u003e()\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n                \u003cspan class=\"k\"\u003ereturn\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n                    \u003cspan class=\"nx\"\u003ecolor\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;white\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n                    \u003cspan class=\"nx\"\u003efillColor\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003egetBgColor\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003epoplData\u003c/span\u003e\u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"nx\"\u003ei\u003c/span\u003e\u003cspan class=\"p\"\u003e].\u003c/span\u003e\u003cspan class=\"nx\"\u003epopulation\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e \u003cspan class=\"c1\"\u003e//获取边界的填充色\u003c/span\u003e\n                    \u003cspan class=\"nx\"\u003efillOpacity\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mf\"\u003e0.6\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n                    \u003cspan class=\"nx\"\u003eweight\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mi\"\u003e3\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n                    \u003cspan class=\"nx\"\u003edashArray\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;10\u0026#39;\u003c/span\u003e\n                \u003cspan class=\"p\"\u003e};\u003c/span\u003e\n            \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n        \u003cspan class=\"p\"\u003e}).\u003c/span\u003e\u003cspan class=\"nx\"\u003ebindTooltip\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003epoplData\u003c/span\u003e\u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"nx\"\u003ei\u003c/span\u003e\u003cspan class=\"p\"\u003e].\u003c/span\u003e\u003cspan class=\"nx\"\u003evillageName\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt;人口\u0026#39;\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"nx\"\u003epoplData\u003c/span\u003e\u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"nx\"\u003ei\u003c/span\u003e\u003cspan class=\"p\"\u003e].\u003c/span\u003e\u003cspan class=\"nx\"\u003epopulation\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;人\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n            \u003cspan class=\"nx\"\u003edirection\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;top\u0026#39;\u003c/span\u003e\n        \u003cspan class=\"p\"\u003e}).\u003c/span\u003e\u003cspan class=\"nx\"\u003eon\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n            \u003cspan class=\"nx\"\u003emouseover\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003ehighlight\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"c1\"\u003e//鼠标移动上去高亮\u003c/span\u003e\n            \u003cspan class=\"nx\"\u003emouseout\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003eresetHighlight\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"c1\"\u003e//鼠标移出恢复原样式\u003c/span\u003e\n            \u003cspan class=\"nx\"\u003eclick\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003ezoomTo\u003c/span\u003e \u003cspan class=\"c1\"\u003e//点击最大化\u003c/span\u003e\n        \u003cspan class=\"p\"\u003e}).\u003c/span\u003e\u003cspan class=\"nx\"\u003eaddTo\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eoMap\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\n    \u003cspan class=\"c1\"\u003e// 添加图例\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003elegend\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eonAdd\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003elegendHtml\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003elegend\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eaddTo\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eoMap\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n\n    \u003cspan class=\"c1\"\u003e// 定位到该界限的中心位置\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003eoMap\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eflyToBounds\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ePolygonsCenter\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\n\u003cspan class=\"c1\"\u003e// 添加图例\u003c/span\u003e\n\u003cspan class=\"nx\"\u003elegend\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eonAdd\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003elegendHtml\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\u003cspan class=\"nx\"\u003elegend\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eaddTo\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eoMap\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n\n\u003cspan class=\"c1\"\u003e// 定位到该界限的中心位置\u003c/span\u003e\n\u003cspan class=\"nx\"\u003eoMap\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eflyToBounds\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ePolygonsCenter\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003c/pre\u003e\n      \u003c/div\u003e\n\n      \u003cul\u003e\n        \u003cli\u003e返回边界的填充色及图列的样式\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"codehilite\"\u003e\n        \u003cpre\u003e\u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003egetBgColor\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ed\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"k\"\u003ereturn\u003c/span\u003e \u003cspan class=\"nx\"\u003ed\u003c/span\u003e \u003cspan class=\"o\"\u003e\u0026gt;\u003c/span\u003e \u003cspan class=\"mi\"\u003e400\u003c/span\u003e \u003cspan class=\"o\"\u003e?\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;#800026\u0026#39;\u003c/span\u003e \u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003ed\u003c/span\u003e \u003cspan class=\"o\"\u003e\u0026gt;\u003c/span\u003e \u003cspan class=\"mi\"\u003e300\u003c/span\u003e \u003cspan class=\"o\"\u003e?\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;#BD0026\u0026#39;\u003c/span\u003e \u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003ed\u003c/span\u003e \u003cspan class=\"o\"\u003e\u0026gt;\u003c/span\u003e \u003cspan class=\"mi\"\u003e200\u003c/span\u003e \u003cspan class=\"o\"\u003e?\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;#FC4E2A\u0026#39;\u003c/span\u003e \u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003ed\u003c/span\u003e \u003cspan class=\"o\"\u003e\u0026gt;\u003c/span\u003e \u003cspan class=\"mi\"\u003e100\u003c/span\u003e \u003cspan class=\"o\"\u003e?\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;#FD8D3C\u0026#39;\u003c/span\u003e \u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"nx\"\u003ed\u003c/span\u003e \u003cspan class=\"o\"\u003e\u0026gt;\u003c/span\u003e \u003cspan class=\"mi\"\u003e50\u003c/span\u003e \u003cspan class=\"o\"\u003e?\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;#FED976\u0026#39;\u003c/span\u003e \u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;#FFEDA0\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\n\u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003elegendHtml\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003emap\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"nx\"\u003ediv\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003eL\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eDomUtil\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ecreate\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s1\"\u003e\u0026#39;div\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;legend locateVP_legend\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003egrades\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"mi\"\u003e0\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"mi\"\u003e50\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"mi\"\u003e100\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"mi\"\u003e200\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"mi\"\u003e400\u003c/span\u003e\u003cspan class=\"p\"\u003e],\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003elabels\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"p\"\u003e[],\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003efrom\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003eto\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n    \u003cspan class=\"k\"\u003efor\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"nx\"\u003ei\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"mi\"\u003e0\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e \u003cspan class=\"nx\"\u003ei\u003c/span\u003e \u003cspan class=\"o\"\u003e\u0026lt;\u003c/span\u003e \u003cspan class=\"nx\"\u003egrades\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elength\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e \u003cspan class=\"nx\"\u003ei\u003c/span\u003e\u003cspan class=\"o\"\u003e++\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003efrom\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003egrades\u003c/span\u003e\u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"nx\"\u003ei\u003c/span\u003e\u003cspan class=\"p\"\u003e];\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003eto\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003egrades\u003c/span\u003e\u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"nx\"\u003ei\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"mi\"\u003e1\u003c/span\u003e\u003cspan class=\"p\"\u003e];\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003elabels\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003epush\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\n            \u003cspan class=\"s1\"\u003e\u0026#39;\u0026lt;i style=\u0026quot;background:\u0026#39;\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"nx\"\u003egetBgColor\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003efrom\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"mi\"\u003e1\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;\u0026quot;\u0026gt;\u0026lt;/i\u0026gt; \u0026#39;\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e\n            \u003cspan class=\"nx\"\u003efrom\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003eto\u003c/span\u003e \u003cspan class=\"o\"\u003e?\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39; \u0026amp;sim; \u0026#39;\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"nx\"\u003eto\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;人\u0026#39;\u003c/span\u003e \u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;以上\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e));\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003ediv\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003einnerHTML\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003elabels\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003ejoin\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s1\"\u003e\u0026#39;\u0026lt;br\u0026gt;\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n    \u003cspan class=\"k\"\u003ereturn\u003c/span\u003e \u003cspan class=\"nx\"\u003ediv\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e};\u003c/span\u003e\n\u003c/pre\u003e\n      \u003c/div\u003e\n\n      \u003cul\u003e\n        \u003cli\u003e鼠标移动上去的事件、鼠标移出的事件、发生点击的事件\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"codehilite\"\u003e\n        \u003cpre\u003e\u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003ehighlight\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ee\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"nx\"\u003elayer\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003ee\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003etarget\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003elayer\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003esetStyle\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003eweight\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mi\"\u003e6\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003ecolor\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;#fff\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003efillOpacity\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mf\"\u003e0.9\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003edashArray\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;0\u0026#39;\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e})\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\n\u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003eresetHighlight\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ee\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"nx\"\u003elayer\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003ee\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003etarget\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003elayer\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003esetStyle\u003c/span\u003e\u003cspan class=\"p\"\u003e({\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003ecolor\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;white\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003eweight\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mi\"\u003e3\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003efillOpacity\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"mf\"\u003e0.6\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n        \u003cspan class=\"nx\"\u003edashArray\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s1\"\u003e\u0026#39;10\u0026#39;\u003c/span\u003e\n    \u003cspan class=\"p\"\u003e})\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\n\u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003ezoomTo\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ee\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003eoMap\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003efitBounds\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ee\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003etarget\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003egetBounds\u003c/span\u003e\u003cspan class=\"p\"\u003e());\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003c/pre\u003e\n      \u003c/div\u003e\n\n      \u003ch3 id=\"_1\"\u003e写在后面\u003ca class=\"headerlink\" href=\"#_1\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h3\u003e\n      \u003ch4 id=\"_2\"\u003e国内常用地图服务资源加载插件\u003ca class=\"headerlink\" href=\"#_2\" title=\"Permanent link\"\u003e\u003c/a\u003e\u003c/h4\u003e\n      \u003cblockquote\u003e\n        \u003cp\u003e\n          Leaflet.ChineseTmsProviders\n       ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flvisei%2Fleaflet-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flvisei%2Fleaflet-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flvisei%2Fleaflet-demo/lists"}