diff --git a/leaflet/d3/index.html b/leaflet/d3/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..4806da5c15b4518c082486f492ff5157dae8aace
--- /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 0000000000000000000000000000000000000000..389d6f63605be6303dd0339cc439e707bee81045
--- /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 0000000000000000000000000000000000000000..393a1e1fac8cefaa765d55ff043025263f0d825f
--- /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 0000000000000000000000000000000000000000..4806da5c15b4518c082486f492ff5157dae8aace
--- /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 0000000000000000000000000000000000000000..17de4ee172de4e853466510e622643d2b7691255
--- /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 0000000000000000000000000000000000000000..393a1e1fac8cefaa765d55ff043025263f0d825f
--- /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 a620125d8e0ce31f7c146920af9b70be0f996f4f..9389335f8ebfaa81650910f397d75cdda7da5755 100644
--- a/index.html
+++ b/leaflet/index.html
@@ -8,9 +8,9 @@
leaflet
- d1
- d2
- d3
- d4
+ d1
+ d2
+ d3
+ d4