我无法使集群工作
I cant make to work the clustering
所以这是我的第一张地图,也是我第一次尝试编码,它是一个带有等值线的聚类图
我寻找使它工作的方法,但我做不到。
这是代码行
<script type="text/javascript" src="sectores.js"></script>
<script type="text/javascript" src="geo.js"></script>
<body>
<script>
$.getJSON("geo.js",function(data){
});
var geo = L.geoJson(data,{
pointToLayer: function(feature,latlng){
var marker = L.marker(latlng,{icon: ratIcon});
marker.bindPopup(feature.properties.geometry.coordinates + '<br/>' + feature.properties.OPEN_DT);
return marker;
}
});
var clusters = L.markerClusterGroup();
clusters.addLayer(geo);
map.addLayer(clusters);
});
</script>
</body>
这是 geo.js
中的 300 分之一
var geo =
{"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"Fecha": "05/01/2017",
"Dia": null,
"Hora": null,
"Caratula": "Robo",
"Pais": "Argentina",
"Calle": "CANADA Y ARCACHON",
"Localidad": "Pinamar",
"Provincia": "Buenos Aires",
"Codigo Pos": 7167,
"addrtype": "intersection",
"addrlocat": "GEOMETRIC_CENTER"
},
"geometry": {
"type": "Point",
"coordinates": [
-56.8951216,
-37.1321522
]
}
},
最后是文件的开头
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css" />
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script type='text/javascript' src='http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js'></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js'></script>
请帮帮我;-;
我自己弄明白了,官方对我的解释一开始并不清楚,让它工作的正确代码是
var clusterGroup = L.markerClusterGroup();
var geojsonLayer = L.geoJson(geo); //where it goes your .js file
clusterGroup.addLayer(geojsonLayer);
map.addLayer(clusterGroup);
}
就是这样,这是我唯一需要更改的行,希望这对像我这样的新手有所帮助哈哈
所以这是我的第一张地图,也是我第一次尝试编码,它是一个带有等值线的聚类图 我寻找使它工作的方法,但我做不到。 这是代码行
<script type="text/javascript" src="sectores.js"></script>
<script type="text/javascript" src="geo.js"></script>
<body>
<script>
$.getJSON("geo.js",function(data){
});
var geo = L.geoJson(data,{
pointToLayer: function(feature,latlng){
var marker = L.marker(latlng,{icon: ratIcon});
marker.bindPopup(feature.properties.geometry.coordinates + '<br/>' + feature.properties.OPEN_DT);
return marker;
}
});
var clusters = L.markerClusterGroup();
clusters.addLayer(geo);
map.addLayer(clusters);
});
</script>
</body>
这是 geo.js
中的 300 分之一 var geo =
{"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"Fecha": "05/01/2017",
"Dia": null,
"Hora": null,
"Caratula": "Robo",
"Pais": "Argentina",
"Calle": "CANADA Y ARCACHON",
"Localidad": "Pinamar",
"Provincia": "Buenos Aires",
"Codigo Pos": 7167,
"addrtype": "intersection",
"addrlocat": "GEOMETRIC_CENTER"
},
"geometry": {
"type": "Point",
"coordinates": [
-56.8951216,
-37.1321522
]
}
},
最后是文件的开头
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css" />
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script type='text/javascript' src='http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js'></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js'></script>
请帮帮我;-;
我自己弄明白了,官方对我的解释一开始并不清楚,让它工作的正确代码是
var clusterGroup = L.markerClusterGroup();
var geojsonLayer = L.geoJson(geo); //where it goes your .js file
clusterGroup.addLayer(geojsonLayer);
map.addLayer(clusterGroup);
}
就是这样,这是我唯一需要更改的行,希望这对像我这样的新手有所帮助哈哈