From 6b33f16cb9d99576d1795ee89b80c995058912b3 Mon Sep 17 00:00:00 2001 From: sw_pc Date: Mon, 20 Nov 2023 21:04:10 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90leaflet=E3=80=91d6=E3=80=81d7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- leaflet/d6/index.html | 19 +++++++++++++++++++ leaflet/d6/index.js | 35 +++++++++++++++++++++++++++++++++++ leaflet/d6/style.css | 28 ++++++++++++++++++++++++++++ leaflet/d7/index.html | 19 +++++++++++++++++++ leaflet/d7/index.js | 35 +++++++++++++++++++++++++++++++++++ leaflet/d7/style.css | 28 ++++++++++++++++++++++++++++ 6 files changed, 164 insertions(+) create mode 100644 leaflet/d6/index.html create mode 100644 leaflet/d6/index.js create mode 100644 leaflet/d6/style.css create mode 100644 leaflet/d7/index.html create mode 100644 leaflet/d7/index.js create mode 100644 leaflet/d7/style.css diff --git a/leaflet/d6/index.html b/leaflet/d6/index.html new file mode 100644 index 0000000..7d0926a --- /dev/null +++ b/leaflet/d6/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + leaflet学习 + + +
+ + + + \ No newline at end of file diff --git a/leaflet/d6/index.js b/leaflet/d6/index.js new file mode 100644 index 0000000..3217fe2 --- /dev/null +++ b/leaflet/d6/index.js @@ -0,0 +1,35 @@ + +// 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() diff --git a/leaflet/d6/style.css b/leaflet/d6/style.css new file mode 100644 index 0000000..0f8a0c6 --- /dev/null +++ b/leaflet/d6/style.css @@ -0,0 +1,28 @@ + +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; +} diff --git a/leaflet/d7/index.html b/leaflet/d7/index.html new file mode 100644 index 0000000..7d0926a --- /dev/null +++ b/leaflet/d7/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + leaflet学习 + + +
+ + + + \ No newline at end of file diff --git a/leaflet/d7/index.js b/leaflet/d7/index.js new file mode 100644 index 0000000..61781d0 --- /dev/null +++ b/leaflet/d7/index.js @@ -0,0 +1,35 @@ + +// 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() diff --git a/leaflet/d7/style.css b/leaflet/d7/style.css new file mode 100644 index 0000000..0f8a0c6 --- /dev/null +++ b/leaflet/d7/style.css @@ -0,0 +1,28 @@ + +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; +} -- GitLab