标签：function map adcode 地图 areaNode props var 高德
参考文档：https://lbs.amap.com/demo/amap-ui/demos/amap-ui-districtexplorer/index
1.高德地图使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script
src="https://webapi.amap.com/maps?v=1.4.15&key=您自己的key&plugin=AMap.Riding,AMap.MouseTool,AMap.PolyEditor,AMap.CircleEditor,AMap.DistrictSearch">
</script>
<title>Document</title>
</head>
<body>
<div id="app">
<div id="containermap" style="height:400px;width:400px;">
</div>
</div>
</body>
<script>
var communityMap = [
{
"keyID": 1,
"keyDisplay": "116.453844",
"value": "39.943812",
"remark": "新街口住户1"
},
{
"keyID": 2,
"keyDisplay": "117.453844",
"value": "39.943812",
"remark": "月坛住户2"
}
]
// var firstlnt = 111.22, firstlon = 35.12;
// var firstlnt1 = 112.7, firstlon1 = 38.38;
var markers = [], lnglatlist = [];
var arr = []
communityMap.forEach(item => {
debugger
var marker = new AMap.Marker({
position: new AMap.LngLat(item.keyDisplay, item.value), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: item.remark,
});
markers.push(marker)
})
map = new AMap.Map('containermap', {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 7, //初始化地图层级
center: [communityMap[0].keyDisplay, communityMap[0].value] //初始化地图中心点
});
AMap.plugin('AMap.ToolBar', function () {//异步加载插件
var toolbar = new AMap.ToolBar();
map.addControl(toolbar);
});
map.add(markers);
mouseTool = new AMap.MouseTool(map);
</script>
</html>
2.自定义图标
<!-- 重点参数：iconStyle -->
<!doctype html>
<html lang="zh-CN">
<head>
<!-- 原始地址：//webapi.amap.com/ui/1.1/ui/overlay/SimpleMarker/examples/custom-icon.html -->
<base href="//webapi.amap.com/ui/1.1/ui/overlay/SimpleMarker/examples/" />
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>自定义图标</title>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0px;
}
#myIcon {
background: orange;
width: 20px;
height: 60px;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="container"></div>
<div style="display:none">
<div id="myIcon"></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
});
AMapUI.loadUI(['overlay/SimpleMarker'], function(SimpleMarker) {
var lngLats = getGridLngLats(map.getCenter(), 5, 5);
new SimpleMarker({
iconLabel: '1',
//自定义图标地址
iconStyle: '//webapi.amap.com/theme/v1.3/markers/b/mark_r.png',
//设置基点偏移
offset: new AMap.Pixel(-19, -60),
map: map,
showPositionPoint: true,
position: lngLats[0],
zIndex: 100
});
new SimpleMarker({
iconLabel: '2',
//自定义图标节点(img)的属性
iconStyle: {
src: '//webapi.amap.com/theme/v1.3/markers/b/mark_b.png',
style: {
width: '20px',
height: '30px'
}
},
//设置基点偏移
offset: new AMap.Pixel(-10, -30),
map: map,
showPositionPoint: true,
position: lngLats[1],
zIndex: 200
});
new SimpleMarker({
iconLabel: '3',
//自定义图标节点(img)的属性
iconStyle: {
src: '//webapi.amap.com/theme/v1.3/markers/b/mark_b.png',
style: {
width: '20px',
height: '60px'
}
},
//设置基点偏移
offset: new AMap.Pixel(-10, -60),
map: map,
showPositionPoint: true,
position: lngLats[2]
});
new SimpleMarker({
iconLabel: '4',
//直接设置html(需要以"<"开头并且以">"结尾)
iconStyle: '<div style="background:red;width:20px;height:60px;"></div>',
//设置基点偏移
offset: new AMap.Pixel(-10, -60),
map: map,
showPositionPoint: true,
position: lngLats[3]
});
new SimpleMarker({
iconLabel: '5',
//直接使用dom节点
iconStyle: document.getElementById('myIcon'),
//设置基点偏移
offset: new AMap.Pixel(-10, -60),
map: map,
showPositionPoint: true,
position: lngLats[4]
});
});
/**
* 返回一批网格排列的经纬度
* @param {AMap.LngLat} center 网格中心
* @param {number} colNum 列数
* @param {number} size 总数
* @param {number} cellX 横向间距
* @param {number} cellY 竖向间距
* @return {Array} 返回经纬度数组
*/
function getGridLngLats(center, colNum, size, cellX, cellY) {
var pxCenter = map.lnglatToPixel(center);
var rowNum = Math.ceil(size / colNum);
var startX = pxCenter.getX(),
startY = pxCenter.getY();
cellX = cellX || 70;
cellY = cellY || 70;
var lngLats = [];
for (var r = 0; r < rowNum; r++) {
for (var c = 0; c < colNum; c++) {
var x = startX + (c - (colNum - 1) / 2) * (cellX);
var y = startY + (r - (rowNum - 1) / 2) * (cellY);
lngLats.push(map.pixelToLngLat(new AMap.Pixel(x, y)));
if (lngLats.length >= size) {
break;
}
}
}
return lngLats;
}
</script>
</body>
</html>
3.西城区域-反向镂空-自定义图标
<!doctype html>
<html lang="zh-CN">
<head>
<!-- 原始地址：//webapi.amap.com/ui/1.0/ui/geo/DistrictExplorer/examples/index.html -->
<base href="//webapi.amap.com/ui/1.0/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">
</head>
<body>
<div id="outer-box" style="width: 500px;height: 500px;">
<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=1.4.15&key=您自己的key'></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript">
//创建地图
var map = new AMap.Map('container', {
resizeEnable: true,
rotateEnable: true,
pitchEnable: true,
zoom: 11.8,
pitch: 75,
rotation: -15,
viewMode: '3D',//开启3D视图,默认为关闭
buildingAnimation: true,//楼块出现是否带动画
expandZoomRange: true,
zooms: [3, 18],
center: [116.453844, 39.943812] // 108.907941,34.2463
});
//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/$'], function (DistrictExplorer, $) {
initPage(DistrictExplorer);
//创建一个实例
var districtExplorer = window.districtExplorer = new DistrictExplorer({
eventSupport: true, //打开事件支持
map: map
});
//当前聚焦的区域
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) {
//更新提示内容
$tipMarkerContent.html(props.adcode + ': ' + 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.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) {
debugger
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 $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) {
//父节点不存在，先创建
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];
debugger
return {
cursor: 'default',
bubble: true,
strokeColor: strokeColor, //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 3, //线宽
fillColor: fillColor, //填充色
fillOpacity: 0.2, //填充透明度
};
});
//绘制父区域
districtExplorer.renderParentFeature(areaNode, {
cursor: 'default',
bubble: true,
strokeColor: 'black', //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 1, //线宽
fillColor: null, //填充色
fillOpacity: 0.2, //填充透明度
});
}
//切换区域后刷新显示内容
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);
}
});
}
//加载区域
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[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');
// });
// }
// }
// });
//北京110000
switch2AreaNode(110102);
});
AMapUI.loadUI(['overlay/SimpleMarker'], function (SimpleMarker) {
var lngLats = getGridLngLats(map.getCenter(), 5, 5);
new SimpleMarker({
iconLabel: '新街口住户1',
//自定义图标节点(img)的属性
iconStyle: {
src: '//webapi.amap.com/theme/v1.3/markers/b/mark_b.png',
style: {
width: '70px',
height: '30px'
}
},
//设置基点偏移
offset: new AMap.Pixel(-10, -60),
map: map,
showPositionPoint: true,
position: ['116.37', '39.92']//lngLats[2]
});
});
function getGridLngLats(center, colNum, size, cellX, cellY) {
var pxCenter = map.lnglatToPixel(center);
var rowNum = Math.ceil(size / colNum);
var startX = pxCenter.getX(),
startY = pxCenter.getY();
cellX = cellX || 70;
cellY = cellY || 70;
var lngLats = [];
for (var r = 0; r < rowNum; r++) {
for (var c = 0; c < colNum; c++) {
var x = startX + (c - (colNum - 1) / 2) * (cellX);
var y = startY + (r - (rowNum - 1) / 2) * (cellY);
lngLats.push(map.pixelToLngLat(new AMap.Pixel(x, y)));
if (lngLats.length >= size) {
break;
}
}
}
return lngLats;
}
function getAllRings(feature) {
var coords = feature.geometry.coordinates,
rings = [];
for (var i = 0, len = coords.length; i < len; i++) {
rings.push(coords[i][0]);
}
return rings;
}
function getLongestRing(feature) {
var rings = getAllRings(feature);
rings.sort(function(a, b) {
return b.length - a.length;
});
return rings[0];
}
function initPage(DistrictExplorer) {
//创建一个实例
var districtExplorer = new DistrictExplorer({
map: map
});
var countryCode = 100000, //全国
provCodes = [
// 110000, //北京
// 510000 //四川
],
cityCodes = [
110102, //哈尔滨
];
districtExplorer.loadMultiAreaNodes(
//只需加载全国和市，全国的节点包含省级
[countryCode].concat(cityCodes),
function(error, areaNodes) {
var countryNode = areaNodes[0],
cityNodes = areaNodes.slice(1);
var path = [];
//首先放置背景区域，这里是大陆的边界
path.push(getLongestRing(countryNode.getParentFeature()));
for (var i = 0, len = provCodes.length; i < len; i++) {
//逐个放置需要镂空的省级区域
path.push.apply(path, getAllRings(countryNode.getSubFeatureByAdcode(provCodes[i])));
}
for (var i = 0, len = cityNodes.length; i < len; i++) {
//逐个放置需要镂空的市级区域
path.push.apply(path, getAllRings(cityNodes[i].getParentFeature()));
}
//绘制带环多边形
//https://lbs.amap.com/api/javascript-api/reference/overlay#Polygon
var polygon = new AMap.Polygon({
bubble: true,
lineJoin: 'round',
// strokeColor: 'red', //线颜色
strokeOpacity: 0, //线透明度
strokeWeight: 0, //线宽
fillColor: 'rgb(0,54,109)', //填充色
fillOpacity: 0.65, //填充透明度
map: map,
path: path
});
});
}
</script>
</body>
</html>
4.反向镂空
<!-- 重点：loadAreaNode -->
<!doctype html>
<html lang="zh-CN">
<head>
<!-- 原始地址：//webapi.amap.com/ui/1.1/ui/geo/DistrictExplorer/examples/reverse.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>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=您自己的key'></script>
<!-- UI组件库 1.1 -->
<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', {
cursor: 'default',
zoom: 4
});
AMapUI.loadUI(['geo/DistrictExplorer'], function(DistrictExplorer) {
initPage(DistrictExplorer);
});
function getAllRings(feature) {
var coords = feature.geometry.coordinates,
rings = [];
for (var i = 0, len = coords.length; i < len; i++) {
rings.push(coords[i][0]);
}
return rings;
}
function getLongestRing(feature) {
var rings = getAllRings(feature);
rings.sort(function(a, b) {
return b.length - a.length;
});
return rings[0];
}
function initPage(DistrictExplorer) {
//创建一个实例
var districtExplorer = new DistrictExplorer({
map: map
});
var countryCode = 100000, //全国
provCodes = [
110000, //北京
510000 //四川
],
cityCodes = [
230100, //哈尔滨
331100 //丽水
];
districtExplorer.loadMultiAreaNodes(
//只需加载全国和市，全国的节点包含省级
[countryCode].concat(cityCodes),
function(error, areaNodes) {
var countryNode = areaNodes[0],
cityNodes = areaNodes.slice(1);
var path = [];
//首先放置背景区域，这里是大陆的边界
path.push(getLongestRing(countryNode.getParentFeature()));
for (var i = 0, len = provCodes.length; i < len; i++) {
//逐个放置需要镂空的省级区域
path.push.apply(path, getAllRings(countryNode.getSubFeatureByAdcode(provCodes[i])));
}
for (var i = 0, len = cityNodes.length; i < len; i++) {
//逐个放置需要镂空的市级区域
path.push.apply(path, getAllRings(cityNodes[i].getParentFeature()));
}
//绘制带环多边形
//https://lbs.amap.com/api/javascript-api/reference/overlay#Polygon
var polygon = new AMap.Polygon({
bubble: true,
lineJoin: 'round',
strokeColor: 'red', //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 1, //线宽
fillColor: 'black', //填充色
fillOpacity: 0.65, //填充透明度
map: map,
path: path
});
});
}
</script>
</body>
</html>
5.北京区域-自定义图标
<!doctype html>
<html lang="zh-CN">
<head>
<!-- 原始地址：//webapi.amap.com/ui/1.0/ui/geo/DistrictExplorer/examples/index.html -->
<base href="//webapi.amap.com/ui/1.0/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">
</head>
<body>
<div id="outer-box" style="width: 500px;height: 500px;">
<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=1.4.15&key=您自己的key'></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript">
//创建地图
var map = new AMap.Map('container', {
resizeEnable: true,
rotateEnable: true,
pitchEnable: true,
zoom: 11.8,
pitch: 75,
rotation: -15,
viewMode: '3D',//开启3D视图,默认为关闭
buildingAnimation: true,//楼块出现是否带动画
expandZoomRange: true,
zooms: [3, 18],
center: [116.453844, 39.943812] // 108.907941,34.2463
});
//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/$'], function (DistrictExplorer, $) {
//创建一个实例
var districtExplorer = window.districtExplorer = new DistrictExplorer({
eventSupport: true, //打开事件支持
map: map
});
//当前聚焦的区域
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) {
//更新提示内容
$tipMarkerContent.html(props.adcode + ': ' + 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.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) {
debugger
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 $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) {
//父节点不存在，先创建
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];
debugger
return {
cursor: 'default',
bubble: true,
strokeColor: strokeColor, //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 3, //线宽
fillColor: fillColor, //填充色
fillOpacity: 0.2, //填充透明度
};
});
//绘制父区域
districtExplorer.renderParentFeature(areaNode, {
cursor: 'default',
bubble: true,
strokeColor: 'black', //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 1, //线宽
fillColor: null, //填充色
fillOpacity: 0.2, //填充透明度
});
}
//切换区域后刷新显示内容
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);
}
});
}
//加载区域
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[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');
// });
// }
// }
// });
//北京110000
switch2AreaNode(110000);
});
AMapUI.loadUI(['overlay/SimpleMarker'], function (SimpleMarker) {
var lngLats = getGridLngLats(map.getCenter(), 5, 5);
new SimpleMarker({
iconLabel: '新街口住户1',
//自定义图标节点(img)的属性
iconStyle: {
src: '//webapi.amap.com/theme/v1.3/markers/b/mark_b.png',
style: {
width: '70px',
height: '30px'
}
},
//设置基点偏移
offset: new AMap.Pixel(-10, -60),
map: map,
showPositionPoint: true,
position: ['116.453844', '39.943812']//lngLats[2]
});
});
function getGridLngLats(center, colNum, size, cellX, cellY) {
var pxCenter = map.lnglatToPixel(center);
var rowNum = Math.ceil(size / colNum);
var startX = pxCenter.getX(),
startY = pxCenter.getY();
cellX = cellX || 70;
cellY = cellY || 70;
var lngLats = [];
for (var r = 0; r < rowNum; r++) {
for (var c = 0; c < colNum; c++) {
var x = startX + (c - (colNum - 1) / 2) * (cellX);
var y = startY + (r - (rowNum - 1) / 2) * (cellY);
lngLats.push(map.pixelToLngLat(new AMap.Pixel(x, y)));
if (lngLats.length >= size) {
break;
}
}
}
return lngLats;
}
</script>
</body>
</html>
6.北京区域-反向镂空
<!doctype html>
<html lang="zh-CN">
<head>
<!-- 原始地址：//webapi.amap.com/ui/1.0/ui/geo/DistrictExplorer/examples/index.html -->
<base href="//webapi.amap.com/ui/1.0/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">
</head>
<body>
<div id="outer-box" style="width: 500px;height: 500px;">
<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=1.4.15&key=您自己的key'></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript">
//创建地图
var map = new AMap.Map('container', {
resizeEnable: true,
rotateEnable: true,
pitchEnable: true,
zoom: 11.8,
pitch: 75,
rotation: -15,
viewMode: '3D',//开启3D视图,默认为关闭
buildingAnimation: true,//楼块出现是否带动画
expandZoomRange: true,
zooms: [3, 18],
center: [116.453844, 39.943812] // 108.907941,34.2463
});
//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/$'], function (DistrictExplorer, $) {
initPage(DistrictExplorer);
//创建一个实例
var districtExplorer = window.districtExplorer = new DistrictExplorer({
eventSupport: true, //打开事件支持
map: map
});
//当前聚焦的区域
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) {
//更新提示内容
$tipMarkerContent.html(props.adcode + ': ' + 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.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) {
debugger
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 $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) {
//父节点不存在，先创建
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];
debugger
return {
cursor: 'default',
bubble: true,
strokeColor: strokeColor, //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 3, //线宽
fillColor: fillColor, //填充色
fillOpacity: 0.2, //填充透明度
};
});
//绘制父区域
districtExplorer.renderParentFeature(areaNode, {
cursor: 'default',
bubble: true,
strokeColor: 'black', //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 1, //线宽
fillColor: null, //填充色
fillOpacity: 0.2, //填充透明度
});
}
//切换区域后刷新显示内容
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);
}
});
}
//加载区域
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[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');
// });
// }
// }
// });
//北京110000
switch2AreaNode(110000);
});
AMapUI.loadUI(['overlay/SimpleMarker'], function (SimpleMarker) {
var lngLats = getGridLngLats(map.getCenter(), 5, 5);
new SimpleMarker({
iconLabel: '新街口住户1',
//自定义图标节点(img)的属性
iconStyle: {
src: '//webapi.amap.com/theme/v1.3/markers/b/mark_b.png',
style: {
width: '70px',
height: '30px'
}
},
//设置基点偏移
offset: new AMap.Pixel(-10, -60),
map: map,
showPositionPoint: true,
position: ['116.453844', '39.943812']//lngLats[2]
});
});
function getGridLngLats(center, colNum, size, cellX, cellY) {
var pxCenter = map.lnglatToPixel(center);
var rowNum = Math.ceil(size / colNum);
var startX = pxCenter.getX(),
startY = pxCenter.getY();
cellX = cellX || 70;
cellY = cellY || 70;
var lngLats = [];
for (var r = 0; r < rowNum; r++) {
for (var c = 0; c < colNum; c++) {
var x = startX + (c - (colNum - 1) / 2) * (cellX);
var y = startY + (r - (rowNum - 1) / 2) * (cellY);
lngLats.push(map.pixelToLngLat(new AMap.Pixel(x, y)));
if (lngLats.length >= size) {
break;
}
}
}
return lngLats;
}
function getAllRings(feature) {
var coords = feature.geometry.coordinates,
rings = [];
for (var i = 0, len = coords.length; i < len; i++) {
rings.push(coords[i][0]);
}
return rings;
}
function getLongestRing(feature) {
var rings = getAllRings(feature);
rings.sort(function(a, b) {
return b.length - a.length;
});
return rings[0];
}
function initPage(DistrictExplorer) {
//创建一个实例
var districtExplorer = new DistrictExplorer({
map: map
});
var countryCode = 100000, //全国
provCodes = [
110000, //北京
],
cityCodes = [
230100, //哈尔滨
331100 //丽水
];
districtExplorer.loadMultiAreaNodes(
//只需加载全国和市，全国的节点包含省级
[countryCode].concat(cityCodes),
function (error, areaNodes) {
var countryNode = areaNodes[0],
cityNodes = areaNodes.slice(1);
var path = [];
//首先放置背景区域，这里是大陆的边界
path.push(getLongestRing(countryNode.getParentFeature()));
for (var i = 0, len = provCodes.length; i < len; i++) {
//逐个放置需要镂空的省级区域
path.push.apply(path, getAllRings(countryNode.getSubFeatureByAdcode(provCodes[i])));
}
for (var i = 0, len = cityNodes.length; i < len; i++) {
//逐个放置需要镂空的市级区域
path.push.apply(path, getAllRings(cityNodes[i].getParentFeature()));
}
//绘制带环多边形
//https://lbs.amap.com/api/javascript-api/reference/overlay#Polygon
var polygon = new AMap.Polygon({
bubble: true,
lineJoin: 'round',
strokeColor: 'red', //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 1, //线宽
fillColor: 'black', //填充色
fillOpacity: 0.65, //填充透明度
map: map,
path: path
});
});
}
</script>
</body>
</html>
标签：function,map,adcode,地图,areaNode,props,var,高德 来源： https://www.cnblogs.com/ljingjing/p/16379054.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。