icons

front/index.js

@@ -1,12 +1,32 @@
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 
-var map = L.map('map', {
+let map = L.map('map', {
     crs: L.CRS.Simple,
     minZoom: -4
 });
 
-var bounds = [[0,0], [15360, 15360]];
-var image = L.imageOverlay('./maps/Tanoa.png', bounds).addTo(map);
-
+let bounds = [[0,0], [15360, 15360]];
+let image = L.imageOverlay('./maps/Tanoa.png', bounds).addTo(map);
 map.fitBounds(bounds);
+
+function makeIcon() {
+  let markerIcon = L.icon({
+      iconSize:     [30, 30],
+      iconAnchor:   [15, 15],
+      iconUrl: './marker/dot.png'
+  });
+  return markerIcon;
+}
+
+function makeMarker(coord, text) {
+  let [x, y] = coord;
+  let marker = L.marker(L.latLng(y, x), {icon: makeIcon(text)});
+  // https://gis.stackexchange.com/questions/59571/how-to-add-text-only-labels-on-leaflet-map-with-no-icon
+  marker.bindTooltip(text, {permanent: true, offset: [15, 0]});
+  return marker;
+}
+
+let marker1 = makeMarker([0, 0], "测试aaaaaaaaaaaaaaaaa bbbbbbbbbb cccc");
+marker1.addTo(map);
+

front/package-lock.json

@@ -2459,6 +2459,21 @@
       "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.6.0.tgz",
       "integrity": "sha512-CPkhyqWUKZKFJ6K8umN5/D2wrJ2+/8UIpXppY7QDnUZW5bZL5+SEI2J7GBpwh4LIupOKqbNSQXgqmrEJopHVNQ=="
     },
+    "leaflet.label": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/leaflet.label/-/leaflet.label-0.2.4.tgz",
+      "integrity": "sha1-BnZZmvDA2YFhnLiAlWNvyb9xFRs=",
+      "requires": {
+        "leaflet": "0.7.7"
+      },
+      "dependencies": {
+        "leaflet": {
+          "version": "0.7.7",
+          "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-0.7.7.tgz",
+          "integrity": "sha1-HjUrpU5j0HZFH6NjyQCJDLLPde4="
+        }
+      }
+    },
     "loader-runner": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",

front/package.json

@@ -16,6 +16,7 @@
     "webpack-cli": "^3.3.11"
   },
   "dependencies": {
-    "leaflet": "^1.6.0"
+    "leaflet": "^1.6.0",
+    "leaflet.label": "^0.2.4"
   }
 }