From 6b62606bbb437fd9052fa8ecdf93e1d3bb058697 Mon Sep 17 00:00:00 2001 From: sw_pc Date: Fri, 17 Nov 2023 20:45:54 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90leaflet=E3=80=91=E5=AD=A6=E4=B9=A0?= =?UTF-8?q?=E7=AC=94=E8=AE=B05=20=E8=87=AA=E5=AE=9A=E4=B9=89=E6=8E=A7?= =?UTF-8?q?=E5=88=B6=E5=B1=82=E3=80=81=E5=A4=9A=E5=9B=BE=E5=B1=82=E5=8F=8A?= =?UTF-8?q?=E5=85=B6=E6=8E=A7=E5=88=B6=20&&=20=E9=87=8D=E6=9E=84=20https:/?= =?UTF-8?q?/blog.csdn.net/kinghzking/article/details/134469436?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- leaflet/common/MyMap.js | 71 ++++++++++++++++++++++++++++++++++++ leaflet/common/data.js | 79 +++++++++++++++++++++++++++++++++++++++++ leaflet/d5/index.html | 30 ++++++++++++++++ leaflet/d5/index.js | 53 +++++++++++++++++++++++++++ leaflet/d5/style.css | 28 +++++++++++++++ leaflet/index.html | 11 ++++++ 6 files changed, 272 insertions(+) create mode 100644 leaflet/common/MyMap.js create mode 100644 leaflet/common/data.js create mode 100644 leaflet/d5/index.html create mode 100644 leaflet/d5/index.js create mode 100644 leaflet/d5/style.css diff --git a/leaflet/common/MyMap.js b/leaflet/common/MyMap.js new file mode 100644 index 0000000..28733cf --- /dev/null +++ b/leaflet/common/MyMap.js @@ -0,0 +1,71 @@ +// 0. 引入使用到的leaflet类 +import { Map, TileLayer, LayerGroup, Control, Icon } from '../lib/leaflet/leaflet-src.esm.js'; +import dataCommon from './data.js' + +class MyMap { + constructor() { + this.initBase(); + this.initIcons(); + } + + initBase() { + // 1. 创建一个map对象 + // 参数为html元素的id：
+ this.map = new Map('map'); + + // 2. 创建一个地图图层TileLayer + // 参数为一个url模板，一般包含xyz + // 有时候模板中包含subdomains，表示地图有多个子url（对应模板参数{s}） + this.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' + } + ); + + // 2.1 再创建一个地图图层tdtVectorLayer + 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', + {} + ); + this.tdtLayer = new LayerGroup([tdtVectorLayer, tdtLabelLayer]); + + // 3. 图层加入到地图map中（显示一个图层） + this.tdtLayer.addTo(this.map); + // 4. 设置地图中心点坐标（北京），缩放级别10 + this.map.setView([39.909186, 116.397411], 10); + + // 5. 添加一个控制层 + this.layerControl = new Control.Layers( + { + 高德: this.amapLayer, + 天地图: this.tdtLayer + }, + {}, + { collapsed: false } + ); + // 6. 将控制层加入到地图map中 + this.layerControl.addTo(this.map); + } + + _newIcon(svg) { + return new Icon({ + iconUrl: 'data:image/svg+xml,' + encodeURIComponent(svg), + iconSize: [24, 24], + iconAnchor: [12, 12] + }) + } + + initIcons() { + this.iconRed = this._newIcon(dataCommon.svgRed); + this.iconBlue = this._newIcon(dataCommon.svgBlue); + this.iconHospital = this._newIcon(dataCommon.svgHospital); + this.iconSchool = this._newIcon(dataCommon.svgSchool); + } +} + +export {MyMap}; \ No newline at end of file diff --git a/leaflet/common/data.js b/leaflet/common/data.js new file mode 100644 index 0000000..228c506 --- /dev/null +++ b/leaflet/common/data.js @@ -0,0 +1,79 @@ +export default { + // 各种用到的svg数据 + svgRed: '', + svgBlue: '', + svgHospital: '', + svgSchool: '', + // 4环geo数据 + geoRing4: { + type: 'FeatureCollection', + features: [ + { + type: 'Feature', + properties: { + NAME: '西北五环' + }, + geometry: { + type: 'Point', + coordinates: [116.22196197509766, 39.99527080014614] + } + }, + { + type: 'Feature', + properties: { + NAME: '东五环' + }, + geometry: { + type: 'Point', + coordinates: [116.53816223144531, 39.9034155951341] + } + }, + { + type: 'Feature', + properties: { + NAME: '南五环' + }, + geometry: { + type: 'Point', + coordinates: [116.40151977539062, 39.7631584037253] + } + } + ] + }, + // 5环geo数据 + geoRing5: { + type: 'FeatureCollection', + features: [ + { + type: 'Feature', + properties: { + NAME: '西四环' + }, + geometry: { + type: 'Point', + coordinates: [116.27037048339844, 39.905522539728544] + } + }, + { + type: 'Feature', + properties: { + NAME: '北四环' + }, + geometry: { + type: 'Point', + coordinates: [116.39396667480469, 39.98343393295322] + } + }, + { + type: 'Feature', + properties: { + NAME: '南四环' + }, + geometry: { + type: 'Point', + coordinates: [116.3946533203125, 39.828577091142016] + } + } + ] + }, +} \ No newline at end of file diff --git a/leaflet/d5/index.html b/leaflet/d5/index.html new file mode 100644 index 0000000..8046a36 --- /dev/null +++ b/leaflet/d5/index.html @@ -0,0 +1,30 @@ + + + + + + + + + + leaflet学习 + + +
+ +
+
+ + 四环 +
+
+ + 五环 +
+
+ + + + \ No newline at end of file diff --git a/leaflet/d5/index.js b/leaflet/d5/index.js new file mode 100644 index 0000000..cd7d2ac --- /dev/null +++ b/leaflet/d5/index.js @@ -0,0 +1,53 @@ + +// 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 Map5 extends MyMap { + + run() { + + // 5.1 创建图层-5环 + const glayer5 = new GeoJSON(dataCommon.geoRing5, { + pointToLayer: (geoJsonPoint, latlng) => { + return new Marker(latlng, { + icon: this.iconRed + }); + } + }); + glayer5.addTo(this.map); + + // 5.2 创建图层-4环 + const glayer4 = new GeoJSON(dataCommon.geoRing4, { + pointToLayer: (geoJsonPoint, latlng) => { + return new Marker(latlng, { + icon: this.iconBlue + }); + } + }); + glayer4.addTo(this.map); + + // 5.3 绑定控制层checkbox的change事件，控制图层显示和隐藏 + const check5 = document.getElementById('check5'); + check5.onchange = evt => { + if (evt.target.checked) { + glayer5.addTo(this.map); + } else { + glayer5.removeFrom(this.map); + } + }; + const check4 = document.getElementById('check4'); + check4.onchange = evt => { + if (evt.target.checked) { + glayer4.addTo(this.map); + } else { + glayer4.removeFrom(this.map); + } + }; + + } +} + +let map = new Map5() +map.run() diff --git a/leaflet/d5/style.css b/leaflet/d5/style.css new file mode 100644 index 0000000..0f8a0c6 --- /dev/null +++ b/leaflet/d5/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/index.html b/leaflet/index.html index a8d04f5..07199e0 100644 --- a/leaflet/index.html +++ b/leaflet/index.html @@ -12,5 +12,16 @@
  • d2. 多地图切换：Control.Layers
  • d3. 标记：Marker、Icon
  • d4. GeoJson数据导入：GeoJSON
    • +
  • d5. 自定义控制层、多图层及其控制
    • +
  • d6. GeoJson数据导入：GeoJSON
    • +
  • d7. GeoJson数据导入：GeoJSON
    • +
  • d8. GeoJson数据导入：GeoJSON
    • +
  • d9. GeoJson数据导入：GeoJSON
    • +
  • d10. GeoJson数据导入：GeoJSON
    • +
  • d11. GeoJson数据导入：GeoJSON
    • +
  • d12. GeoJson数据导入：GeoJSON
    • +
  • d13. GeoJson数据导入：GeoJSON
    • +
  • d14. GeoJson数据导入：GeoJSON
    • +
  • d15. GeoJson数据导入：GeoJSON
    • \ No newline at end of file -- GitLab