高德地图行政区划聚合demo（展示某类数据在各地区的分布情况，用于数据统计和显示）_AMapUIDistrictCluster.getClusterRecord资源-CSDN文库

共2个文件

js：1个

html：1个

高德地图

行政区划聚合

数据统计

数据分布

3星 · 超过75%的资源需积分: 30 58 浏览量 2018-01-24 09:58:53 上传评论 3 收藏 33KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

高德地图demo（数据的地区分布）.rar （2个子文件）

高德地图demo（数据的地区分布）

index.html 3KB

jquery-1.11.3.min.js 94KB

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>高德地图demo</title> <script src="js/jquery-1.11.3.min.js"></script> </head> <body> <div id="container" style="width:1000px;height:600px;"></div> </body> <script type="text/javascript" src='http://webapi.amap.com/maps?v=1.3&key=d9e28242d75be331682608db111d773c'></script> <script src="http://webapi.amap.com/ui/1.0/main.js?v=1.0.10"></script> <script type="text/javascript"> /** * 高德地图官网上关于行政区划聚合的参考手册： * http://lbs.amap.com/api/javascript-api/reference-amap-ui/geo/district-cluster * 高德地图官网上关于行政区划聚合的例子： * http://lbs.amap.com/api/javascript-api/example/amap-ui-districtcluster/index */ // 创建地图 var map = new AMap.Map('container', { zoom: 6, center: [96.633482, 35.557426] // 以这个点为中心显示地图 }); // 只显示地图背景 map.setFeatures("bg"); AMap.plugin(['AMap.ToolBar'], function(){ map.addControl(new AMap.ToolBar()); }); map.setLimitBounds(map.getBounds()); // 设置地图一直显示的范围，这样地图被移动后仍然会马上回到此范围内 // 加载相关组件 AMapUI.loadUI(['geo/DistrictCluster'], function(DistrictCluster) { // 启动页面 initPage(DistrictCluster); }); function initPage(DistrictCluster) { var distCluster = new DistrictCluster({ map: map, //所属的地图实例 // 设置显示行政区划 topAdcodes: [630100, 630200, 632200, 632300, 632500, 632600, 632700, 632800],//青海省下面几个州市 autoSetFitView: false, getPosition: function(item) { if (!item) { return null; } return item.position; }, renderOptions: { // 定义某些区划的样式，比如背景色 getFeatureStyle: function(feature, dataItems) { if (dataItems.length > 100) { return { fillStyle: 'red' }; } else if (dataItems.length > 50) { return { fillStyle: 'orange' }; } return {}; }, getClusterMarkerPosition: DistrictCluster.ClusterMarkerPositionStrategy.CENTROID } }); // 随机创建一批点，仅作示意 var data = createPoints([96.633482, 35.557426], 10000); // 设置数据 distCluster.setData(data); } // 随机生产点，参数center为中心点的经纬度 function createPoints(center, num) { var data = []; for (var i = 0, len = num; i < len; i++) { data.push({ position: [ center[0] + (Math.random() > 0.5 ? 1 : -1) * Math.random() * 30, center[1] + (Math.random() > 0.5 ? 1 : -1) * Math.random() * 20 ] }); } return data; } </script> </html>

评论收藏

内容反馈

summer198191

2019-10-09

这不和高德的示例一样的么...能不能做到缩放到最后一级的时候直接显示到明细的点啊，这个一直都是显示汇总...没用啊..

john1028_csdn
上传者
2020-06-18

和高德的示例是一样的，我在资源的描述文字里也说明了，区别也有写。我刚看了一下，确实不会显示到明细的点的，因为是侧重于统计，所以只会显示数字。如果要显示点，需要参考高德上的例子做修改。
qq_24836569

2019-04-30

数据来源怎么设定啊

john1028_csdn
上传者
2019-05-23

好像是随机生成的一些带经纬度的数据（一对经纬度对应一个点），你看一下代码。
sunhao2jh

2018-05-07

数据来源怎么设定啊

john1028_csdn
上传者
2019-05-23

好像是随机生成的一些带经纬度的数据（一对经纬度对应一个点），你看一下代码。