master

分支 (2)

管理

管理

master

main

mapbox-gl-js-offline-examples
/
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>mapbox offline examples</title>
    <link rel="stylesheet" href="./lib/layui/css/layui.css" />
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #outer {
        margin: 15px;
      }
      #header {
        height: 35px;
        background-color: #9e9ec9;
      }
      .mapSelect {
        height: 35px;
        background-color: #299696de;
      }
      .site-doc-icon li .layui-anim {
        width: 150px;
        height: 150px;
        line-height: 150px;
        margin: 0 auto 10px;
        text-align: center;
        cursor: pointer;
        color: #fff;
        border-radius: 50%;
      }
      .site-doc-icon {
        margin-bottom: 50px;
        font-size: 0;
      }
      .site-doc-icon li {
        display: inline-block;
        vertical-align: middle;
        width: 250px;
        height: 250px;
        line-height: 65px;
        padding: 20px 0;
        margin-right: -1px;
        margin-bottom: -1px;
        border: 1px solid #e2e2e2;
        font-size: 14px;
        text-align: center;
        color: #666;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
      }
      .site-doc-anim li {
        height: 240px;
      }
      .site-doc-icon li .layui-icon {
        display: inline-block;
        font-size: 36px;
      }
      .site-doc-icon li .doc-icon-name,
      .site-doc-icon li .doc-icon-code {
        color: #c2c2c2;
      }
      .site-doc-icon li .doc-icon-fontclass {
        height: 40px;
        line-height: 20px;
        padding: 0 5px;
        font-size: 13px;
        color: #333;
      }
      .site-doc-icon li:hover {
        background-color: #f2f2f2;
        color: #000;
      }
      .gray:hover {
        filter: contrast(0.6);
        transition-property: filter;
        transition-duration: 0.4s;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      }
      .Header-link {
        position: absolute;
        right: 5%;
        top: 3.1%;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="header">
        <button class="layui-btn mapSelect">
          select map source
          <i class="layui-icon layui-icon-down layui-font-10"></i>
        </button>
        <a
          class="Header-link"
          href="https://github.com/undefinedGIS/mapbox-gl-js-offline-examples.git"
          data-hotkey="g d"
          aria-label="Homepage "
          data-ga-click="Header, go to dashboard, icon:logo"
        >
          <svg
            class="octicon octicon-mark-github v-align-middle"
            height="20"
            viewBox="0 0 16 16"
            version="1.1"
            width="32"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
            ></path>
          </svg>
        </a>
      </div>
    </div>
  </body>
  <script src="./lib/layui/layui.js" charset="utf-8"></script>
  <script src="./lib/axios.min.js"></script>
  <script>
    layui.use(["dropdown", "util", "layer"], function () {
      var dropdown = layui.dropdown,
        util = layui.util,
        layer = layui.layer,
        $ = layui.jquery;

      // header select map source btn
      dropdown.render({
        elem: ".mapSelect",
        data: [
          {
            title: "styles-beijing0-14-basic",
            id: 100,
          },
          {
            title: "styles-china4-10-satelite",
            id: 101,
          },
          {
            title: "styles-natural_earth_2.raster",
            id: 102,
          },
        ],
        click: function (obj) {
          layer.msg("数据源已切换至：" + obj.title);
          localStorage.setItem("mbtilesStylesName", obj.title);
        },
      });
    });
  </script>
  <script>
    document.onselectstart = () => false;

    // 全局配置项
    localStorage.setItem("host", location.host);
    localStorage.setItem("mbtilesStylesName", "styles-beijing0-14-basic");

    axios
      .get("./conf/examples.json")
      .then((res) => {
        let data = res.data;
        let bodyEle = document.getElementById("outer");
        for (let topic in data) {
          let topicEle = document.createElement("fieldset");
          topicEle.setAttribute("class", "layui-elem-field layui-field-title");
          topicEle.setAttribute("style", "margin-top: 30px");
          topicEle.innerHTML = `
            <legend>${topic}</legend>`;
          bodyEle.append(topicEle);

          let cardEle = document.createElement("div");
          cardEle.innerHTML = `
            <ul class="layui-border-box site-doc-icon site-doc-anim" id=${topic}>
            </ul>`;
          bodyEle.append(cardEle);

          let examples = data[topic];
          for (let example of examples) {
            let title = example.title;
            let describe = example.describe;
            let fileName = example.fileName;

            let exampleEle = document.createElement("li");
            exampleEle.setAttribute(
              "style",
              `margin-right:12px;margin-bottom:12px;background-size: cover;background-image: url(./data/images/examples/${fileName}.png);`
            );
            exampleEle.setAttribute("class", "gray");
            exampleEle.innerHTML = `
              <div class="layui-anim" data-anim="layui-anim-down"></div>
              <div class="code" style="font-size:20px;"></div>
            `;
            exampleEle.addEventListener("click", () => {
              window.open(
                `http://${location.host}/mapbox-gl-js-offline-examples/examples/${topic}/${fileName}.html`
              );
            });
            let topiculEle = document.getElementById(`${topic}`);
            topiculEle.append(exampleEle);
          }
        }
      })
      .catch((err) => {
        console.error(err);
      });
  </script>
</html>