Openlayer Cluster

by LandsD Map API

HTML

<script src="https://landsvm.cbpmshk.info/landsd_js_api/jquery/jquery.min.js"></script>
<script src="https://landsapp.azurewebsites.net/openlayers/build/ol.js"></script>
<link rel="stylesheet" href="https://landsapp.azurewebsites.net/openlayers/css/ol.css">
<script src="https://landsapp.azurewebsites.net/landsd_js_api/jquery/jquery.min.js"></script>
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://viglino.github.io/OL3-AnimatedCluster/interaction/selectclusterinteraction.js"></script>
<script src="http://viglino.github.io/OL3-AnimatedCluster/layer/animatedclusterlayer.js"></script>
<div id="map" class="map" style="height:320px">
  <div id="popup" class="ol-popup">
    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    <div id="popup-content"></div>
  </div>
</div>

CSS

.ol-popup {
   position: absolute;
   background-color: white;
   -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
   filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
   padding: 3px;
   border-radius: 10px;
   border: 1px solid #cccccc;
   bottom: 12px;
   left: -50px;
   font-size: 10px;
   width: 150px;
 }
 
 .ol-popup:after,
 .ol-popup:before {
   top: 100%;
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
 }
 
 .ol-popup:after {
   border-top-color: white;
   border-width: 10px;
   left: 48px;
   margin-left: -10px;
 }
 
 .ol-popup:before {
   border-top-color: #cccccc;
   border-width: 11px;
   left: 48px;
   margin-left: -11px;
 }
 
 .ol-popup-closer {
   text-decoration: none;
   position: absolute;
   top: 2px;
   right: 8px;
 }
 
 .ol-popup-closer:after {
   content: "X";
 }

JavaScript

var map = new ol.Map({
       target: 'map',
       layers: [
         new ol.layer.Tile({
           source: new ol.source.XYZ({
             //attributions: [attribution],
             url: 'https://mapapi.blob.core.windows.net/tilecaches/HKMapServiceBase' +
               '/{z}/{y}/{x}.png?Key=e68810d810e144358961d2295b515f60'
           })
         })
       ],
       view: new ol.View({
         center: ol.proj.fromLonLat([114.11, 22.5]),
         zoom: 13,
         minZoom: 10,
         maxZoom: 20
       })
     });

     var clusterSource = new ol.source.Cluster({
       distance: 40,
       source: new ol.source.Vector()
     });
     console.log('first clusterSource:', clusterSource);

     function addFeatures(nb, clusterSource) {
       var features = [];

       $.getJSON("https://landsvm.cbpmshk.info/geocommjson/WGS84/GEOCOMM_SCH.json", function(json) {
         console.log('hello1');
         $.each(json, function(i, fb) {
           //				console.log(json);
           //				console.log(json.features[0].geometry.x);
           for (var i = 0; i < json.features.length; i++) {
             //					console.log(json.features[i].geometry.x + ',' + json.features[i].geometry.y);
             features[i] = new ol.Feature(new ol.geom.Point([json.features[i].geometry.x, json.features[i].geometry.y]));
             features[i].set('id', i);
             features[i].attributes = json.features[i].attributes;
           }
         });
         console.log(features.length);
         clusterSource.getSource().clear();
         clusterSource.getSource().addFeatures(features);
         console.log('clusterSource:', clusterSource);
       });
       /*	  
       	  var ext = map.getView().calculateExtent(map.getSize());
       	  console.log(ext[0]);
       		var features=[];
       		for (var i=0; i<nb; ++i)
       		{	features[i]=new ol.Feature(new ol.geom.Point([ext[0]+(ext[2]-ext[0])*Math.random(), ext[1]+(ext[3]-ext[1])*Math.random()]));
      ...