leaflet d2

5822fe6b · kinghzking · c643797e · 5822fe6b · 5822fe6b · 5822fe6b
7 changed file
--- a/index.html
+++ b/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>Document</title>
+</head>
+<body>
+  <h1>leaflet</h1>
+  <li><a href="leaflet/d1/index.html">d1</a></li>
+  <li><a href="leaflet/d2/index.html">d2</a></li>
+  <li><a href="leaflet/d3/index.html">d3</a></li>
+  <li><a href="leaflet/d4/index.html">d4</a></li>
+</body>
+</html>
\ No newline at end of file
--- a/leaflet/d1/index.html
+++ b/leaflet/d1/index.html
@@ -13,3 +13,10 @@
 </head>
 <body>
  <div id="map"></div>
+
+  <!-- <script src="./index.js"></script> -->
+  <script type="module">
+    import "./index.js"
+  </script>
+</body>
+</html>
\ No newline at end of file
--- a/leaflet/d2/index.html
+++ b/leaflet/d2/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">
+  <link rel="stylesheet" href="../lib/leaflet/leaflet.css"></link>
+  <link rel="stylesheet" href="./style.css"></link>
+  <!-- <script src="https://unpkg.com/inline-module/index.js"></script> -->
+  <script src="../lib/inline-module/index.js"></script>
+  <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' * blob: data: file:"> -->
+  <title>Document</title>
+</head>
+<body>
+  <div id="map"></div>
+
+  <!-- <script src="./index.js"></script> -->
+  <script type="module">
+    import "./index.js"
+  </script>
+</body>
+</html>
\ No newline at end of file
--- a/leaflet/d2/index.js
+++ b/leaflet/d2/index.js
+
+import { Map, TileLayer, LayerGroup, Control } from '../lib/leaflet/leaflet-src.esm.js';
+
+// Write Javascript code!
+const map = new Map('map');
+
+const amapLayer = new TileLayer(
+  'http://wprd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7',
+  {
+    subdomains: '1234'
+  }
+);
+
+const tdtVectorLayer = new TileLayer(
+  'http://t0.tianditu.gov.cn/vec_w/wmts?layer=vec&style=default&tilematrixset=w&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=11b55a09c9e0df4a1e91741b455b7f28',
+  {}
+);
+
+const tdtLabelLayer = new TileLayer(
+  'http://t0.tianditu.gov.cn/cva_w/wmts?layer=cva&style=default&tilematrixset=w&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=11b55a09c9e0df4a1e91741b455b7f28',
+  {}
+);
+
+const tdtLayer = new LayerGroup([tdtVectorLayer, tdtLabelLayer]);
+
+amapLayer.addTo(map);
+
+map.setView([39.909186, 116.397411], 10);
+
+const layerControl = new Control.Layers(
+  {
+    高德: amapLayer,
+    天地图: tdtLayer
+  },
+  {},
+  { collapsed: false }
+);
+layerControl.addTo(map);
--- a/leaflet/d2/style.css
+++ b/leaflet/d2/style.css
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+}
+
+h1,
+h2 {
+  font-family: Lato;
+}
+
+#map {
+  width: 100%;
+  height: 100%;
+}
+
+.panel {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 1000;
+  padding: 5px 10px;
+  background-color: rgba(255, 255, 255, 0.8);
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "live-server --port=80 /root/MyOpen/leaflet/d1"
+    "dev": "live-server /root/MyOpen/leaflet"
  },
  "keywords": [
    "study"
@@ -14,5 +14,8 @@
  "license": "ISC",
  "dependencies": {
    "leaflet": "^1.9.4"
+  },
+  "devDependencies": {
+    "live-server": "^1.2.2"
  }
 }