为什么选择高德
成功案例
产品优势
数据优势
服务优势
精选权益
产品介绍
基础产品
地图
定位
导航
搜索
特色产品
外勤调度引擎
地图小程序
3D地形图
排线调度服务
GeoHUB定制地图
GIS企业智图
猎鹰轨迹服务
地址服务
LOCA 数据可视化
高德智慧景区
高德企业用车
解决方案
解决方案
智能派单
上门服务调度
零售铺货
智慧物流
智慧交通
出行
O2O
电商
社交
运动
智能硬件
开发支持
Web端
地图 JS API
LOCA数据可视化 API
地图组件
URI API
室内地图 JS API
地铁图 JS API
Android平台
Android 地图SDK
Android 轻量版地图SDK
Android 定位SDK
Android 导航SDK
Android 猎鹰SDK
iOS平台
iOS 地图SDK
iOS 轻量版地图SDK
iOS 定位SDK
iOS 导航SDK
iOS 猎鹰SDK
Web服务
Web服务 API
猎鹰服务 API
物流服务 API
其他
GeoHUB使用指南
微信小程序插件
高德地图手机版
地图Flutter插件
HarmonyOS 地图SDK
帮助与支持
常见问题
合规中心
开发者论坛
加入我们
地图工具
GeoHUB
坐标拾取器
地图名片
地图快速生成器
GeoHUB自定义地图
三维模型转换
服务升级
配额提升
GeoHUB自定义地图
GeoHUB数据中心
商用服务
高级能力
企业智图SaaS
云图市场
控制台
登录
注册
退出
我的消息
云图市场
应用管理
GeoHUB
JS API UI 组件示例
加载
使用 AMapLoader 加载 AMapUI
简单标注
自定义图标
自定义文字
内置样式
定位点
纯色背景
更新图标和文字
图标主题
字体图标标注
字体样式
图标样式
设置awesomeIcon
自定义FontAwesome资源
矢量标注
各类形状
自定义路径
自定义形状
使用Iconfont
水滴
调节Shape属性
简单信息窗体
覆盖默认的dom结构
监听事件
简单信息窗体
使用模板
标注列表
完整示例
事件监听
选中样式的控制
Marker带Circle
自定义选中后的行为
搜索+分页
selectedClassNames
简单数据渲染
SimpleMarker&SimpleWindow
使用SvgMarker
基础控件
自定义主题
基础控件
图层切换控件
实时交通控件
缩放控件
海量点展示
调整绘制样式
调整TopN选取
动态改样式
自定义绘制内容
自定义绘制引擎
样式分组引擎
图片内容
海量点展示
图标分组
点选取漏斗
闪烁效果
轨迹展示
简单路径
调整巡航器样式
调整线、点样式
省域边界
动态修改巡航器
动态延展路径
轨迹展示&巡航
轨迹巡航控制
仅展示驶过线
简单数据附加
行政区划浏览
事件处理
行政区分组
行政区浏览
区域定位
多区域加载
反向镂空区域
单区域加载
行政区划聚合
区划聚合
点击后显示聚合标注
定制聚合信息标注
自定义绘制引擎
事件支持
排除部分区划
区划面样式
各地美食
点击后展示海量点
区划聚合+海量点展示
设置顶级区划
拖拽选址
拖拽选址
自定义图标
POI选点
输入框选择POI点
POI搜索
‹
›
行政区分组
使用DistrictExplorer实现行政区分组。
源代码编辑器
复制
运行
还原
<!doctype html> <html lang="zh-CN"> <head> <!-- 原始地址://webapi.amap.com/ui/1.1/ui/geo/DistrictExplorer/examples/group.html --> <base href="//webapi.amap.com/ui/1.1/ui/geo/DistrictExplorer/examples/" /> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>行政区分组</title> <link rel="stylesheet" type="text/css" href="./area.css"> <style> #loadingTip { position: absolute; z-index: 9999; top: 0; left: 0; padding: 3px 10px; background: red; color: #fff; font-size: 14px; } </style> </head> <body> <div id="outer-box"> <div id="container" tabindex="0"></div> <div id="panel" class="scrollbar1"> <ul id="area-tree"> </ul> </div> </div> <script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=您申请的key值'></script> <!-- UI组件库 1.0 --> <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script> <script type="text/javascript"> //创建地图 var map = new AMap.Map('container', { zoom: 4 }); //just some colors var colors = [ "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707", "#651067", "#329262", "#5574a6", "#3b3eac" ]; AMapUI.load(['ui/geo/DistrictExplorer', 'lib/$', 'ui/misc/PointSimplifier'], function(DistrictExplorer, $, PointSimplifier) { //创建一个实例 var districtExplorer = window.districtExplorer = new DistrictExplorer({ map: map, eventSupport: true, //打开事件支持 preload: [100000] //预加载全国 }); //要聚合的点列表 var lngLatList; //当前聚焦的区域 var currentAreaNode = null; //鼠标hover提示内容 var $tipMarkerContent = $('<div class="tipMarker top"></div>'); var tipMarker = new AMap.Marker({ content: $tipMarkerContent.get(0), offset: new AMap.Pixel(0, 0), bubble: true }); //根据Hover状态设置相关样式 function toggleHoverFeature(feature, isHover, position) { tipMarker.setMap(isHover ? map : null); if (!feature) { return; } var props = feature.properties; if (isHover) { var points = groupedPointsCache[props.adcode] || []; //更新提示内容 $tipMarkerContent.html(props.adcode + ': ' + props.name + '(' + points.length + ')'); //更新位置 tipMarker.setPosition(position || props.center); } $('#area-tree').find('h2[data-adcode="' + props.adcode + '"]').toggleClass('hover', isHover); //更新相关多边形的样式 var polys = districtExplorer.findFeaturePolygonsByAdcode(props.adcode); for (var i = 0, len = polys.length; i < len; i++) { polys[i].setOptions({ fillOpacity: isHover ? 0.5 : 0.2 }); } } //监听feature的hover事件 districtExplorer.on('featureMouseout featureMouseover', function(e, feature) { toggleHoverFeature(feature, e.type === 'featureMouseover', e.originalEvent ? e.originalEvent.lnglat : null); }); //监听鼠标在feature上滑动 districtExplorer.on('featureMousemove', function(e, feature) { //更新提示位置 tipMarker.setPosition(e.originalEvent.lnglat); }); //feature被点击 districtExplorer.on('featureClick', function(e, feature) { var props = feature.properties; //如果存在子节点 if (props.childrenNum > 0) { //切换聚焦区域 switch2AreaNode(props.adcode); } }); //外部区域被点击 districtExplorer.on('outsideClick', function(e) { districtExplorer.locatePosition(e.originalEvent.lnglat, function(error, routeFeatures) { if (routeFeatures && routeFeatures.length > 1) { //切换到省级区域 switch2AreaNode(routeFeatures[1].properties.adcode); } else { //切换到全国 switch2AreaNode(100000); } }, { levelLimit: 2 }); }); //绘制区域面板的节点 function renderAreaPanelNode(ele, props, color) { var $box = $('<li/>').addClass('lv_' + props.level); var points = groupedPointsCache[props.adcode] || []; var $h2 = $('<h2/>').addClass('lv_' + props.level).attr({ 'data-adcode': props.adcode, 'data-level': props.level, 'data-children-num': props.childrenNum || void(0), 'data-center': props.center.join(',') }).html(props.name + '(' + points.length + ')').appendTo($box); if (color) { $h2.css('borderColor', color); } //如果存在子节点 if (props.childrenNum > 0) { //显示隐藏 $('<div class="showHideBtn"></div>').appendTo($box); //子区域列表 $('<ul/>').addClass('sublist lv_' + props.level).appendTo($box); $('<div class="clear"></div>').appendTo($box); if (props.level !== 'country') { $box.addClass('hide-sub'); } } $box.appendTo(ele); } //填充某个节点的子区域列表 function renderAreaPanel(areaNode) { var props = areaNode.getProps(); var $subBox = $('#area-tree').find('h2[data-adcode="' + props.adcode + '"]').siblings('ul.sublist'); if (!$subBox.length) { //父节点不存在,先创建 renderAreaPanelNode($('#area-tree'), props); $subBox = $('#area-tree').find('ul.sublist'); } if ($subBox.attr('data-loaded') === 'rendered') { return; } $subBox.attr('data-loaded', 'rendered'); var subFeatures = areaNode.getSubFeatures(); subFeatures.sort(function(f1, f2) { var props1 = areaNode.getPropsOfFeature(f1), props2 = areaNode.getPropsOfFeature(f2); var points1 = groupedPointsCache[props1.adcode] || [], points2 = groupedPointsCache[props2.adcode] || []; return points2.length - points1.length; }); //填充子区域 for (var i = 0, len = subFeatures.length; i < len; i++) { renderAreaPanelNode($subBox, areaNode.getPropsOfFeature(subFeatures[i]), colors[i % colors.length]); } return $subBox; } //绘制某个区域的边界 function renderAreaPolygons(areaNode) { //更新地图视野 map.setBounds(areaNode.getBounds(), null, null, true); //清除已有的绘制内容 districtExplorer.clearFeaturePolygons(); //绘制子区域 districtExplorer.renderSubFeatures(areaNode, function(feature, i) { var fillColor = colors[i % colors.length]; var strokeColor = colors[colors.length - 1 - i % colors.length]; return { cursor: 'default', bubble: true, strokeColor: strokeColor, //线颜色 strokeOpacity: 1, //线透明度 strokeWeight: 1, //线宽 fillColor: fillColor, //填充色 fillOpacity: 0.35, //填充透明度 }; }); //绘制父区域 districtExplorer.renderParentFeature(areaNode, { cursor: 'default', bubble: true, strokeColor: 'black', //线颜色 strokeOpacity: 1, //线透明度 strokeWeight: 1, //线宽 fillColor: null, //填充色 fillOpacity: 0.35, //填充透明度 }); } //切换区域后刷新显示内容 function refreshAreaNode(areaNode) { districtExplorer.setHoverFeature(null); renderAreaPolygons(areaNode); //更新选中节点的class var $nodeEles = $('#area-tree').find('h2'); $nodeEles.removeClass('selected'); var $selectedNode = $nodeEles.filter('h2[data-adcode=' + areaNode.getAdcode() + ']').addClass('selected'); //展开下层节点 $selectedNode.closest('li').removeClass('hide-sub'); //折叠下层的子节点 $selectedNode.siblings('ul.sublist').children().addClass('hide-sub'); } //切换区域 function switch2AreaNode(adcode, callback) { if (currentAreaNode && ('' + currentAreaNode.getAdcode() === '' + adcode)) { return; } loadAreaNode(adcode, function(error, areaNode) { if (error) { if (callback) { callback(error); } return; } currentAreaNode = window.currentAreaNode = areaNode; //设置当前使用的定位用节点 districtExplorer.setAreaNodesForLocating([currentAreaNode]); refreshAreaNode(areaNode); if (callback) { callback(null, areaNode); } }); } var groupedPointsCache = {}; function getGroupedPoints(adcode) { return groupedPointsCache[adcode] || lngLatList; } //保留中间聚合结果 function saveGroupedPoints(areaNode, groups) { for (var i = 0, len = groups.length; i < len; i++) { var subFeature = groups[i].subFeature; //所属子区域 if (!subFeature) { groupedPointsCache['-out-' + areaNode.getAdcode()] = groups[i].points; continue; } groupedPointsCache[subFeature.properties.adcode] = groups[i].points; } } //这里创建一个海量点组件 var pointSimplifierIns; var questionContent = PointSimplifier.Render.Canvas.getImageContent( './imgs/question.png', function onload() { pointSimplifierIns.renderLater(); }, function onerror() { alert('图片加载失败!'); }); pointSimplifierIns = new PointSimplifier({ zIndex: 115, autoSetFitView: false, map: map, //所属的地图实例 getPosition: function(item) { return item.pos; }, getHoverTitle: function(item, idx) { if (item.gid === -1) { return '区域外'; } }, //使用GroupStyleRender renderConstructor: PointSimplifier.Render.Canvas.GroupStyleRender, renderOptions: { //点的样式 pointStyle: { fillStyle: 'red', width: 5, height: 5 }, getGroupId: function(item) { return item.gid; }, groupStyleOptions: function(gid) { //未知区域 if (gid === -1) { return { pointStyle: { content: questionContent, fillStyle: null, strokeStyle: null, lineWidth: 2, width: 16, height: 16 } }; } return { pointStyle: { fillStyle: colors[gid % colors.length], //strokeStyle: 'rgba(255,255,255,0.3)', lineWidth: 1 } }; } } }); function renderGroupedPoints(groups) { var pointsData = []; for (var i = 0, len = groups.length; i < len; i++) { var gid = groups[i].subFeatureIndex; for (var j = 0, jlen = groups[i].points.length; j < jlen; j++) { pointsData.push({ gid: gid, pos: groups[i].points[j] }); } } pointSimplifierIns.setData(pointsData); } //加载区域 function loadAreaNode(adcode, callback) { districtExplorer.loadAreaNode(adcode, function(error, areaNode) { if (error) { if (callback) { callback(error); } console.error(error); return; } var points = getGroupedPoints(adcode); //当前子区域聚合 var groups = areaNode.groupByPosition(points, function(item) { return item; }); saveGroupedPoints(areaNode, groups); var $subBox = renderAreaPanel(areaNode); if (groups.length && !groups[groups.length - 1].subFeature) { renderAreaPanelNode($subBox, { adcode: '-out-' + areaNode.getAdcode(), name: '区域外', center: groups[groups.length - 1].points[0] }, 'gray'); } renderGroupedPoints(groups); if (callback) { callback(null, areaNode); } }); } $('#area-tree').on('mouseenter mouseleave', 'h2[data-adcode]', function(e) { if (e.type === 'mouseleave') { districtExplorer.setHoverFeature(null); return; } var adcode = $(this).attr('data-adcode'); districtExplorer.setHoverFeature(currentAreaNode.getSubFeatureByAdcode(adcode)); }); $('#area-tree').on('click', 'h2[data-children-num]', function() { var adcode = $(this).attr('data-adcode'); switch2AreaNode(adcode); }); $('#area-tree').on('click', '.showHideBtn', function() { var $li = $(this).closest('li'); $li.toggleClass('hide-sub'); if (!$li.hasClass('hide-sub')) { //子节点列表被展开 var $subList = $li.children('ul.sublist'); //尚未加载 if (!$subList.attr('data-loaded')) { $subList.attr('data-loaded', 'loading'); $li.addClass('loading'); //加载 loadAreaNode($li.children('h2').attr('data-adcode'), function() { $li.removeClass('loading'); }); } } }); $('<div id="loadingTip">加载数据,请稍候...</div>').appendTo(document.body); $.get('https://a.amap.com/amap-ui/static/data/10w.txt', function(csv) { $('#loadingTip').remove(); var lines = csv.split('\n'); var lngLats = []; for (var i = 0, len = lines.length; i < len; i++) { if (!lines[i]) { continue; } var parts = lines[i].split(','); lngLats.push([parseFloat(parts[0]), parseFloat(parts[1])]); } lngLatList = lngLats; groupedPointsCache['100000'] = lngLats; //加载全国 switch2AreaNode(100000); }); }); </script> </body> </html>
控制台
清空
示例
中心
常见
问题
智能
客服