本文介绍如何使用高德地图API实现区域面积编辑和建筑类型点聚合功能，通过自定义点颜色和透明度，实现不同类型的建筑在地图上的可视化展示。同时，文章还展示了如何通过点击左侧菜单来控制区域和建筑类型的显示与隐藏。
高德地图 编辑面积 添加聚集点
主要用了高德地图的点聚合 画面 清除点功能
效果图
主要核心代码
html
<div id="container" class="map" tabindex="0"></div>
<div class="left-tool">
<header class="head">
<div class="head-left">
三农数据分析
</div>
<div class="head-right">
<img src="image/add.png" >
</div>
<div style="clear: both;"></div>
</header>
<div class="left-body">
<div class="left-down">
<div class="left-body-title">
区域面积
</div>
<ul class="list arealist">暂无数据</ul>
<div class="left-body-title">
建筑类型
</div>
<ul class="list markerlist">暂无数据</ul>
</div>
<div class="down-up">
<div class="down-up-btn"></div>
</div>
</div>
</div>
js
var pointsColor = {}; //存取颜色值
pointsColor['1.居住建筑物'] = '#FF6347'; //1.居住建筑物
pointsColor['2.农业建筑物'] = '#EE7600'; //2.农业建筑物
pointsColor['3.工业建筑物'] = '#FF0000'; //3.工业建筑物
pointsColor['4.生活服务性建筑物'] = '#9933FF'; //4.生活服务性建筑物
pointsColor['5.文教建筑物'] = '#458B00'; //5.文教建筑物
pointsColor['6.托幼建筑物'] = '#00EE76'; //6.托幼建筑物
pointsColor['7.科研建筑物'] = 'red'; //7.科研建筑物
pointsColor['8.医疗福利建筑物'] = '#FF3E96'; //8.医疗福利建筑物
pointsColor['9.商业建筑物'] = '#33CCCC'; //9.商业建筑物
pointsColor['10.行政办公建筑物'] = '#88E3CD'; //10.行政办公建筑物
pointsColor['11.交通建筑物'] = '#CD5555'; //11.交通建筑物
pointsColor['12.通信建筑物'] = '#CD8C95'; //12.通信建筑物
pointsColor['17.园林建筑物'] = '#A02395'; //17.园林建筑物
pointsColor['19.综合性建筑物'] = '#339999'; //19.综合性建筑物
pointsColor['20.其他建筑物（请注明具体名称）'] = 'red'; //20.其他建筑物（请注明具体名称）
pointsColor[''] = '#458B00'; //没有时
pointsColor[56] = '#00CDCD'; //4A风景区
pointsColor[57] = '#006400'; //3A风景区
pointsColor[20] = {}; //丝绸之路
pointsColor[20].sea = 'blue'; //海
pointsColor[20].land = 'green'; //陆
pointsColor[58] = '#00868B'; //其他风景区
var cluster,layerList,areaList,areaShow=[],colorsArr=[],arhType=[] ,markers = [],markersZoom =[];
// 百度地图坐标转换
function bMapTransQQMap(lng, lat) {
let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
let x = lng - 0.0065;
let y = lat - 0.006;
let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
let lngs = z * Math.cos(theta);
let lats = z * Math.sin(theta);
return {
lng: lngs||'',
lat: lats||''
}
}
// 获取点坐标转化
function transcooObj(coordinate){
var cooObj = new Object();
if (coordinate != null && coordinate != "" && coordinate != undefined) {
cooObj = jQuery.parseJSON(coordinate.replace(/'/g, '"'));
}
return cooObj;
}
//rgb颜色随机 透明度0.2
function rgb() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var rgb = 'rgb(' + r + ',' + g + ',' + b +')';
return rgb;
}
//获取区域点
$.ajax({
url: 'static/hdmap.json',
type: "get",
dataType: "json",
async: false,
success: function(data) {
if (data != null) {
layerList = data.data;
}
},
error: function(err) {
}
});
//获取区域点
$.ajax({
url: 'static/areamap.json',
type: "get",
dataType: "json",
async: false,
success: function(data) {
if (data != null) {
areaList = data.data;
}
},
error: function(err) {
}
});
// 左侧菜单操作
$('.head-right').on('click',function(){
$('.left-body').slideToggle()
})
$('.down-up').on('click',function(){
$('.left-body').slideToggle()
})
$('.arealist').on('click','.checkBox',function(){
var that = $(this)
var ischeck = that.hasClass('ischeck');
that.toggleClass('ischeck')
var areaAttr = that.attr("data-area")
var areaIndex = that.attr("data-index")
var areaGrade = that.attr("data-grade")
var areaArr = transcooObj(areaAttr);
if(!ischeck){
areaShow[areaIndex] = [];
var path = [];
for(var i=0;i<areaArr.length;i++){
var areaPoint = areaArr[i]
for(var j=0;j<areaPoint.length;j++){
var getpoints = areaPoint[j]
getpoints = bMapTransQQMap(getpoints.lng, getpoints.lat)
path.push([getpoints.lng, getpoints.lat])
}
}
var colors =''
if(colorsArr[areaIndex]){
colors = colorsArr[areaIndex]
}else{
colors =colorsArr[areaIndex] = rgb()
}
var strokeOpacity = 0.2;
var fillOpacity = 0.4;
if(areaGrade == 5){
strokeOpacity = 1
fillOpacity = 0
}
var polygons = new AMap.Polygon({
path: path,
strokeColor: colors,
strokeWeight: 6,
strokeOpacity: strokeOpacity,
fillOpacity: fillOpacity,
fillColor: colors,
zIndex: 50,
})
areaShow[areaIndex].push(polygons)
map.add(polygons)
// 缩放地图到合适的视野级别
map.setFitView([ polygons ])
}else{
var polygons = areaShow[areaIndex];
map.remove(polygons)
map.setFitView()
}
})
$('.markerlist').on('click','.checkBox',function(){
var that = $(this)
var ischeck = that.hasClass('ischeck');
var type = that.attr('data-type')
that.toggleClass('ischeck')
if(!ischeck){
if(!markers[type]){
markers[type] = []
getMarkers(type)
}
//添加聚合点
cluster.addMarkers(markers[type])
}else{
//删除聚合点
cluster.removeMarkers(markers[type])
}
})
// 绘制面积
function drawArea(area){
}
var areaArr =''
for(var i=0;i<areaList.length;i++){
var areas = areaList[i]
var areasname = areas.layer_name
var coordinate = areas.coordinate
var grade = areas.grade
areaArr +='<li class="item-areas"><span class="checkBox" data-grade="'+grade+'" data-index="'+i+'" data-area="'+coordinate+'" ></span>'
areaArr += areasname+'</li>'
}
if(areaArr){
$('.arealist').html(areaArr)
}
//地图操作
var cens = bMapTransQQMap(116.304782, 39.966128)
var map = new AMap.Map("container", {
resizeEnable: true,
// center: [cens.lng, cens.lat],
center: [116.204195,40.066684],
zoom: 14
});
map.addControl(new AMap.MapType({
defaultType:0 //0代表默认，1代表卫星
}));
// 获取聚合点
getMarkers();
function getMarkers(type){
for (var i = 0; i < layerList.length; i += 1) {
var layer = layerList[i]
// 新增测试
var layerName = layer.name; //名称
var layerbuild = layer.buildType; //建筑类型
var layerType = 'marker'
var coordinate = layer.coordinate; //坐标
var cooObj = transcooObj(coordinate)
if(!type){
if(layerbuild && arhType.indexOf(layerbuild) == -1){
arhType.push(layerbuild)
}
}
var points = bMapTransQQMap(cooObj.lng,cooObj.lat)
var marker = new AMap.Marker({
position: [points.lng,points.lat],
content: '<div style="background-color: '+pointsColor[layerbuild]+'; height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
offset: new AMap.Pixel(-15, -15)
})
marker.content = '<p>'+layerName+'</p>';
marker.content += '<p>详细地址：'+layerName+'</p>';
marker.on('click', markerClick);
marker.on('mousemove', markerClick);
if(!type){
markers[type] = []
}
if(type == layerbuild){
markers[type].push(marker)
}
}
}
var markerArr =''
function sortNumber(a,b){
return parseInt(a) - parseInt(b)
}
for(var i=0;i<arhType.sort(sortNumber).length;i++){
markerArr +='<li class="item-areas">'
markerArr +='<span class="checkBox" data-type="'+arhType[i]+'"></span>'
markerArr +='<span class="colorbox" style="background-color:'+pointsColor[arhType[i]]+'"></span>'+arhType[i]+'</li>'
}
if(markerArr){
$('.markerlist').html(markerArr)
}
var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
function markerClick(e){
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
// var count = markers.length;
var count = 1095;
var _renderClusterMarker = function (context) {
var factor = Math.pow(context.count / count, 1 / 18);
var div = document.createElement('div');
var Hue = 180 - factor * 180;
var bgColor = 'hsla(' + Hue + ',100%,50%,0.7)';
var fontColor = 'hsla(' + Hue + ',100%,20%,1)';
var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
div.style.backgroundColor = bgColor;
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
div.style.width = div.style.height = size + 'px';
div.style.border = 'solid 1px ' + borderColor;
div.style.borderRadius = size / 2 + 'px';
div.style.boxShadow = '0 0 1px ' + shadowColor;
div.innerHTML = context.count;
div.style.lineHeight = size + 'px';
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
context.marker.setContent(div)
};
addCluster()
function addCluster() {
if (cluster) {
cluster.setMap(null);
}
cluster = new AMap.MarkerClusterer(map, [], {
gridSize: 80,
maxZoom:17,
renderClusterMarker: _renderClusterMarker
});
}
map.setFitView();
// 测试
map.on('zoomend',function(){
var zoom = map.getZoom(); //获取当前地图级别
$('#bnt').html(zoom)
})
css
html, body, #container {
height: 100%;
width: 100%;
}
.left-tool{
position: absolute;
top: 20px;
left: 20px;
z-index: 1005;
overflow: hidden;
width: 280px;
border-radius: 3px;
background: #fff;
box-shadow: 2px 5px 5px rgba(0,0,0,.3);
-webkit-transition: .3s;
transition: .3s;
}
.head{
position: relative;
z-index: 1;
padding: 10px;
box-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.head .head-left{
float: left;
height: 24px;
line-height: 24px;
font-size: 16px;
font-weight: bold;
}
.head .head-right{
float: right;
cursor: pointer;
}
.head .head-right img{
height: 24px;
display: block;
}
.left-down{
height: 420px;
padding: 0 10px;
box-sizing: border-box;
overflow: hidden;
overflow-y:scroll ;
}
.down-up {
clear: both;
width: 100%;
height: 31px;
border-top: 1px solid #eee;
background: #fff;
text-align: center;
cursor: pointer;
}
.down-up-btn {
display: inline-block;
margin-top: 11px;
width: 0;
height: 0;
border-top: none;
border-right: 8px solid transparent;
border-bottom: 8px solid #ccc;
border-left: 8px solid transparent;
}
/**设置滚动条的样式**/
::-webkit-scrollbar {
width: 10px;
}
/**滚动槽**/
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px #d1cfcf;
border-radius: 10px;
}
/**滚动条滑块**/
::-webkit-scrollbar-thumb {
border-radius: 12px;
background: #f7f7f7;
-webkit-box-shadow: inset 0 0 6px #d1cfcf;
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(245,245,245,0.4);
}
.left-body-title{
height: 20px;
line-height: 20px;
font-size: 16px;
margin-bottom: 10px;
}
.left-down ul{
list-style: none;
padding-left:10px ;
margin: 0;
margin-bottom: 10px;
}
.left-down ul li{
height: 18px;
line-height: 18px;
}
.checkBox{
cursor: pointer;
vertical-align: middle;
display: inline-block;
margin-top: -2px;
margin-right: 6px;
width: 14px;
height: 14px;
background: url(static/indexImg.png) -90px 0 no-repeat;
}
.checkBox.ischeck{
background-position: -78pt 0;
}
.colorbox{
vertical-align: middle;
display: inline-block;
margin-top: -2px;
margin-right: 6px;
width: 14px;
height: 14px;
border-radius: 50%;
border: 1px solid hsl(180, 100%, 40%);
box-sizing: border-box;
}
.amap-logo,.amap-copyright{
opacity:0;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
