home

map/index.html

@@ -64,6 +64,8 @@
           console.log(currentDetailList);
           if(type == 'MassMarks'){
             window.pois = map3d.addPoisMassMarks(currentDetailList)
+          }else if(type == 'Single'){
+            window.pois = map3d.addPoisSingle(currentDetailList)
           }else{
             window.pois = map3d.addPoisMarkerClusterer(currentDetailList)
           }
@@ -71,7 +73,7 @@
           });
       }
       // addPoiByApi('./personal.json')
-      // addPoiByApi('./led.json')
+      // addPoiByApi('./led.json','Single')
     </script>
 </body>
 

map/js/Map3D.js

 import { bounds2Path, MaskLayer } from "./tools.js"
-var _renderClusterMarker = function (context) {
+var _renderClusterMarker = function (context,count) {
     var factor = Math.pow(context.count / count, 1 / 18);
     var div = document.createElement('div');
     var Hue = 180 - factor * 180;
@@ -56,7 +56,15 @@ class Map3D {
         this.cluster.removeMarkers(pois)
         this.map.remove(pois)
     }
-
+    addPoisSingle(pois) {
+        //https://lbs.amap.com/api/javascript-api/guide/overlays/massmarker/
+        //https://lbs.amap.com/api/javascript-api/example/marker/markerclusterer
+        let markers = []
+        pois.map(item => {
+            markers.push(this.setPersonalPoint(item))
+        });
+        return markers
+    }
     addPoisMarkerClusterer(pois) {
         //https://lbs.amap.com/api/javascript-api/guide/overlays/massmarker/
         //https://lbs.amap.com/api/javascript-api/example/marker/markerclusterer
@@ -70,7 +78,7 @@ class Map3D {
             this.cluster = new AMap.MarkerClusterer(this.map, markers, { 
                 gridSize: 80,
                 renderClusterMarker: function (context) {
-                    // _renderClusterMarker(context,markers.length);
+                    _renderClusterMarker(context,markers.length);
                 }
             });
         }