From 9c15d319f180e22ef26218eda396d1acad6cd5d8 Mon Sep 17 00:00:00 2001 From: kinghzking Date: Thu, 16 Nov 2023 15:15:48 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90leaflet=E3=80=91Marker=E3=80=81GeoJSON?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- leaflet/d3/index.html | 22 +++++++ leaflet/d3/index.js | 50 ++++++++++++++ leaflet/d3/style.css | 26 ++++++++ leaflet/d4/index.html | 22 +++++++ leaflet/d4/index.js | 110 +++++++++++++++++++++++++++++++ leaflet/d4/style.css | 26 ++++++++ index.html => leaflet/index.html | 8 +-- 7 files changed, 260 insertions(+), 4 deletions(-) create mode 100644 leaflet/d3/index.html create mode 100644 leaflet/d3/index.js create mode 100644 leaflet/d3/style.css create mode 100644 leaflet/d4/index.html create mode 100644 leaflet/d4/index.js create mode 100644 leaflet/d4/style.css rename index.html => leaflet/index.html (55%) diff --git a/leaflet/d3/index.html b/leaflet/d3/index.html new file mode 100644 index 0000000..4806da5 --- /dev/null +++ b/leaflet/d3/index.html @@ -0,0 +1,22 @@ + + + + + + + + + + + + Document + + +
+ + + + + \ No newline at end of file diff --git a/leaflet/d3/index.js b/leaflet/d3/index.js new file mode 100644 index 0000000..389d6f6 --- /dev/null +++ b/leaflet/d3/index.js @@ -0,0 +1,50 @@ + +import { Map, TileLayer, LayerGroup, Control, Marker, Icon } 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); + +const svg = ''; + +const marker = new Marker([39.909186, 116.397411], { + icon: new Icon({ + iconUrl: 'data:image/svg+xml,' + encodeURIComponent(svg), + iconSize: [32,32], + iconAnchor: [16,32] + }) +}); + +marker.addTo(map); diff --git a/leaflet/d3/style.css b/leaflet/d3/style.css new file mode 100644 index 0000000..393a1e1 --- /dev/null +++ b/leaflet/d3/style.css @@ -0,0 +1,26 @@ + +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); +} diff --git a/leaflet/d4/index.html b/leaflet/d4/index.html new file mode 100644 index 0000000..4806da5 --- /dev/null +++ b/leaflet/d4/index.html @@ -0,0 +1,22 @@ + + + + + + + + + + + + Document + + +
+ + + + + \ No newline at end of file diff --git a/leaflet/d4/index.js b/leaflet/d4/index.js new file mode 100644 index 0000000..17de4ee --- /dev/null +++ b/leaflet/d4/index.js @@ -0,0 +1,110 @@ + +import { Map, TileLayer, LayerGroup, Control, Marker, Icon, GeoJSON } 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); + +const svg = ''; + +const marker = new Marker([39.909186, 116.397411], { + icon: new Icon({ + iconUrl: 'data:image/svg+xml,' + encodeURIComponent(svg), + iconSize: [32,32], + iconAnchor: [16,32] + }) +}); + +marker.addTo(map); + + +const data = { + "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 + ] + } + } + ] +}; + +const glayer = new GeoJSON(data, { + pointToLayer: (geoJsonPoint, latlng) => { + return new Marker(latlng, { + icon: new Icon({ + iconUrl: 'data:image/svg+xml,' + encodeURIComponent(svg), + iconSize: [32, 32], + iconAnchor: [16, 32] + }) + }); + } +}); + +glayer.addTo(map); diff --git a/leaflet/d4/style.css b/leaflet/d4/style.css new file mode 100644 index 0000000..393a1e1 --- /dev/null +++ b/leaflet/d4/style.css @@ -0,0 +1,26 @@ + +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); +} diff --git a/index.html b/leaflet/index.html similarity index 55% rename from index.html rename to leaflet/index.html index a620125..9389335 100644 --- a/index.html +++ b/leaflet/index.html @@ -8,9 +8,9 @@

leaflet

-
  • d1
    • -
  • d2
    • -
  • d3
    • -
  • d4
    • +
  • d1
    • +
  • d2
    • +
  • d3
    • +
  • d4
    • \ No newline at end of file -- GitLab