//创建一个实例
|
var districtExplorer = window.districtExplorer ;
|
/**
|
* rgb转16进制
|
* @param r
|
* @param g
|
* @param b
|
* @returns {string}
|
* @constructor
|
*/
|
function RGBToHex(r, g, b) {
|
var hex = "#" + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1);
|
return hex;
|
}
|
|
// 颜色辅助方法
|
var colors = [];
|
var num = 0;
|
while(num < 20){
|
var gb = Math.random() * 155 + 50;
|
colors.push(RGBToHex(gb,gb,255));
|
num++;
|
}
|
AMapUI.load(['ui/geo/DistrictExplorer', 'lib/$'], function(DistrictExplorer, $) {
|
//创建一个实例
|
districtExplorer = window.districtExplorer = new DistrictExplorer({
|
eventSupport: true, //打开事件支持
|
map: map
|
});
|
//监听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);
|
renderAreas(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);
|
renderAreas(routeFeatures[1].properties.adcode);
|
} else {
|
//切换到全国
|
switch2AreaNode(610000);
|
}
|
}, {
|
levelLimit: 2
|
});
|
});
|
});
|
|
//当前聚焦的区域
|
var currentAreaNode = null;
|
//鼠标hover提示内容
|
var $tipMarkerContent = $('<div class="tipMarker top" style="color: #1E9CFF;font-size: 18px;weight:100px;"></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) {
|
//更新提示内容
|
$tipMarkerContent.html(" " + props.name);
|
//更新位置
|
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.35
|
});
|
}
|
}
|
|
|
|
//绘制区域面板的节点
|
function renderAreaPanelNode(ele, props, color) {
|
var $box = $('<li/>').addClass('lv_' + props.level);
|
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).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 && props.childrenNum) {
|
//父节点不存在，先创建
|
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();
|
//填充子区域
|
for (var i = 0, len = subFeatures.length; i < len; i++) {
|
renderAreaPanelNode($subBox, areaNode.getPropsOfFeature(subFeatures[i]), colors[i % colors.length]);
|
}
|
}
|
|
//绘制某个区域的边界
|
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: areaNode.getSubFeatures().length ? null : colors[0], //填充色
|
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) {
|
//-----------------------刷新数据
|
county = adcode;
|
ajaxFoodNum();
|
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);
|
}
|
});
|
}
|
|
//加载区域
|
function loadAreaNode(adcode, callback) {
|
districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
|
if (error) {
|
if (callback) {
|
callback(error);
|
}
|
console.error(error);
|
return;
|
}
|
renderAreaPanel(areaNode);
|
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', 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');
|
});
|
}
|
}
|
});
|
