【leaflet】d6、d7

6b33f16c · sw_pc · 6b62606b · 6b33f16c · 6b33f16c · 6b33f16c
6 changed file
--- a/leaflet/d6/index.html
+++ b/leaflet/d6/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="../lib/inline-module/index.js"></script>
+    <title>leaflet学习</title>
+  </head>
+  <body>
+    <div id="map"></div>
+
+    <script type="module">
+      import "./index.js"
+    </script>
+  </body>
+</html>
\ No newline at end of file
--- a/leaflet/d6/index.js
+++ b/leaflet/d6/index.js
+
+// 0. 引入使用到的leaflet类
+import { Marker, GeoJSON } from '../lib/leaflet/leaflet-src.esm.js';
+import { MyMap } from '../common/myMap.js';
+import dataCommon from '../common/data.js'
+
+class Map6 extends MyMap {
+
+  run() {
+    
+    // 6. 根据YPE设置不同的图标
+    const glayer = new GeoJSON(dataCommon.geoHospitalSchool, {
+      pointToLayer: (geoJsonPoint, latlng) => {
+        switch (geoJsonPoint.properties['TYPE']) {
+          case '医院':
+            return new Marker(latlng, {
+              // icon指定为 医院 的图标
+              icon: this.iconHospital
+            });
+          case '学校':
+            return new Marker(latlng, {
+              // icon指定为 学校 的图标
+              icon: this.iconSchool
+            });
+        }
+      }
+    });
+    
+    glayer.addTo(this.map);
+
+  }
+}
+
+let map = new Map6()
+map.run()
--- a/leaflet/d6/style.css
+++ b/leaflet/d6/style.css
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+}
+
+h1,
+h2 {
+  font-family: Lato;
+}
+
+#map {
+  width: 100%;
+  height: 100%;
+}
+
+.panel {
+  position: absolute;
+  top: 70px;
+  right: 10px;
+  z-index: 1000;
+  padding: 5px 10px;
+  background-color: rgba(255, 255, 255, 1);
+  border: 2px solid rgba(0, 0, 0, 0.2);
+  width: 56px;
+}
--- a/leaflet/d7/index.html
+++ b/leaflet/d7/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="../lib/inline-module/index.js"></script>
+    <title>leaflet学习</title>
+  </head>
+  <body>
+    <div id="map"></div>
+
+    <script type="module">
+      import "./index.js"
+    </script>
+  </body>
+</html>
\ No newline at end of file
--- a/leaflet/d7/index.js
+++ b/leaflet/d7/index.js
+
+// 0. 引入使用到的leaflet类
+import { Marker, GeoJSON } from '../lib/leaflet/leaflet-src.esm.js';
+import { MyMap } from '../common/myMap.js';
+import dataCommon from '../common/data.js'
+
+class MapX extends MyMap {
+
+  run() {
+    
+    // 7. 根据YPE设置不同的图标；marker绑定提示信息：bindTooltip
+    const glayer = new GeoJSON(dataCommon.geoHospitalSchool, {
+      pointToLayer: (geoJsonPoint, latlng) => {
+        switch (geoJsonPoint.properties['TYPE']) {
+          case '医院':
+            return new Marker(latlng, {
+              // icon指定为 医院 的图标
+              icon: this.iconHospital
+            }).bindTooltip(geoJsonPoint.properties['NAME'], { permanent: true });
+          case '学校':
+            return new Marker(latlng, {
+              // icon指定为 学校 的图标
+              icon: this.iconSchool
+            }).bindTooltip(geoJsonPoint.properties['NAME'], { permanent: false });
+        }
+      }
+    });
+    
+    glayer.addTo(this.map);
+
+  }
+}
+
+let map = new MapX()
+map.run()
--- a/leaflet/d7/style.css
+++ b/leaflet/d7/style.css
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+}
+
+h1,
+h2 {
+  font-family: Lato;
+}
+
+#map {
+  width: 100%;
+  height: 100%;
+}
+
+.panel {
+  position: absolute;
+  top: 70px;
+  right: 10px;
+  z-index: 1000;
+  padding: 5px 10px;
+  background-color: rgba(255, 255, 255, 1);
+  border: 2px solid rgba(0, 0, 0, 0.2);
+  width: 56px;
+}