123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <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>交通运输应急监管系统</title>
- <link
- rel="stylesheet"
- href="https://minedata.cn/minemapapi/v2.1.0/minemap.css"
- />
- <script src="https://minedata.cn/minemapapi/v2.1.0/minemap.js"></script>
- <script>
- minemap.domainUrl = "https://minedata.cn";
- minemap.dataDomainUrl = "https://minedata.cn";
- minemap.serverDomainUrl = "https://minedata.cn";
- minemap.spriteUrl = "https://minedata.cn/minemapapi/v2.1.0/sprite/sprite";
- minemap.serviceUrl = "https://minedata.cn/service/";
- /**
- * key、solution设置
- */
- minemap.key = "77ef70465c2d4888b3a5132523494b94";
- minemap.solution = 16857;
- </script>
- <script>
- (function (win, lib) {
- var doc = win.document;
- var docEl = doc.documentElement;
- var metaEl = doc.querySelector('meta[name="viewport"]');
- var flexibleEl = doc.querySelector('meta[name="flexible"]');
- var dpr = 0;
- var scale = 0;
- var tid;
- var flexible = lib.flexible || (lib.flexible = {});
- if (metaEl) {
- console.warn("将根据已有的meta标签来设置缩放比例");
- var match = metaEl
- .getAttribute("content")
- .match(/initial\-scale=([\d\.]+)/);
- if (match) {
- scale = parseFloat(match[1]);
- dpr = parseInt(1 / scale);
- }
- } else if (flexibleEl) {
- var content = flexibleEl.getAttribute("content");
- if (content) {
- var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
- var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
- if (initialDpr) {
- dpr = parseFloat(initialDpr[1]);
- scale = parseFloat((1 / dpr).toFixed(2));
- }
- if (maximumDpr) {
- dpr = parseFloat(maximumDpr[1]);
- scale = parseFloat((1 / dpr).toFixed(2));
- }
- }
- }
- if (!dpr && !scale) {
- var isAndroid = win.navigator.appVersion.match(/android/gi);
- var isIPhone = win.navigator.appVersion.match(/iphone/gi);
- var devicePixelRatio = win.devicePixelRatio;
- if (isIPhone) {
- // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
- if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
- dpr = 3;
- } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
- dpr = 2;
- } else {
- dpr = 1;
- }
- } else {
- // 其他设备下,仍旧使用1倍的方案
- dpr = 1;
- }
- scale = 1 / dpr;
- }
- docEl.setAttribute("data-dpr", dpr);
- if (!metaEl) {
- metaEl = doc.createElement("meta");
- metaEl.setAttribute("name", "viewport");
- metaEl.setAttribute(
- "content",
- "initial-scale=" +
- scale +
- ", maximum-scale=" +
- scale +
- ", minimum-scale=" +
- scale +
- ", user-scalable=no"
- );
- if (docEl.firstElementChild) {
- docEl.firstElementChild.appendChild(metaEl);
- } else {
- var wrap = doc.createElement("div");
- wrap.appendChild(metaEl);
- doc.write(wrap.innerHTML);
- }
- }
- function refreshRem() {
- var width = docEl.getBoundingClientRect().width;
- if (width / dpr > 540) {
- width = 540 * dpr;
- }
- var rem = width / 10;
- docEl.style.fontSize = rem + "px";
- flexible.rem = win.rem = rem;
- }
- win.addEventListener(
- "resize",
- function () {
- clearTimeout(tid);
- tid = setTimeout(refreshRem, 300);
- },
- false
- );
- win.addEventListener(
- "pageshow",
- function (e) {
- if (e.persisted) {
- clearTimeout(tid);
- tid = setTimeout(refreshRem, 300);
- }
- },
- false
- );
- if (doc.readyState === "complete") {
- doc.body.style.fontSize = 12 * dpr + "px";
- } else {
- doc.addEventListener(
- "DOMContentLoaded",
- function (e) {
- doc.body.style.fontSize = 12 * dpr + "px";
- },
- false
- );
- }
- refreshRem();
- flexible.dpr = win.dpr = dpr;
- flexible.refreshRem = refreshRem;
- flexible.rem2px = function (d) {
- var val = parseFloat(d) * this.rem;
- if (typeof d === "string" && d.match(/rem$/)) {
- val += "px";
- }
- return val;
- };
- flexible.px2rem = function (d) {
- var val = parseFloat(d) / this.rem;
- if (typeof d === "string" && d.match(/px$/)) {
- val += "rem";
- }
- return val;
- };
- })(window, window["lib"] || (window["lib"] = {}));
- </script>
- </head>
- <body>
- <div id="app"></div>
- <script type="module" src="/src/main.ts"></script>
- </body>
- </html>
|