高德地图水纹预警效果；高德地图控制可视行政区域

最新推荐文章于 2024-08-08 15:15:12 发布

zhang8907xiaoyue

最新推荐文章于 2024-08-08 15:15:12 发布

阅读量4.9k

点赞数 3

分类专栏：地图

本文链接：https://blog.csdn.net/zhang8907xiaoyue/article/details/80451740

版权

地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

利用高德地图的“调节Shape属性”功能

<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>重点人员预警</title>
<jsp:include page="../share/acehead.jsp"></jsp:include>
</head>
<style type="text/css">
ul,li,form, dl,dt,dd, div,p{ padding: 0px; margin: 0px;}
ul,li{ list-style:none;}
a{ color: #0166b6; text-decoration:none; noline: -webkit-tap-highlight-color:rgba(0,0,0,0);}
.lay2{ overflow:hidden;margin:0px auto; background:#fff;}
.w80 {
margin: 0 auto;
min-width: 1100px;
padding: 5px;
}
.lay2_TabWrap{ font-family: '微软雅黑';}
.lay2_TabWrap .lay2tab{ overflow: hidden;
padding: 0px 0px 10px; margin-bottom: -10px; background: #ffffff;}
.lay2_TabWrap .lay2tab a{ display: block;
padding: 5px 15px;
float: left;margin-right: 10px;
font-size: 15px;
}
.lay2_TabWrap .lay2tab a:hover{ color: #fff;
text-decoration: none;
background: #f14a5a;}
.lay2_TabWrap .lay2tab a.lay2on{color: #fff;
text-decoration: none;
background: #f14a5a;}
.lay2_TabWrap .lay2cont{ overflow:hidden; padding:10px;}
.lay2_TabWrap .lay2cont li{ display:none;}

.sstz_table{width:100%;border-collapse: collapse;border: solid 1px #BFBFBF;}
.sstz_table td,.sstz_table th{text-align: center;padding: 10px 2px;color: #404040;}
.sstz_table th{color: #014886; font-weight: bold;}
.sstz_table tr:nth-child(odd) > td { background: #F5F5F5;}
.introduce{ text-indent: 60px;
line-height: 28px;
font-size: 1em;}
.lay2tab a{position: relative; line-height: 40px;}
.lay2tab a:hover .triangle,
.lay2tab a.lay2on .triangle {
position: absolute;
top: 50px;
left: 50%;
display: block;
margin: 0 0 0 -8px;
font-size: 0;
border-width: 8px;
border-color: #f14a5a transparent transparent transparent;
border-style: solid;
border-bottom: 0
}
.circle{
border-radius: 6px;
border: solid 1px silver;
width: 35px;
height: 16px;
padding: 3px;
text-align: center;
line-height: 18px;
max-width: 50px;
color:white;
}

</style>
<body>
<div class="w80 lay2">
<div class="lay2_TabWrap">
<div class="lay2tab">
<a href="javascript:;" class="lay2on">进京访<span class="triangle"></span></a>
<a href="javascript:;">集体访<span class="triangle"></span></a>
<a href="javascript:;">赴省访<span class="triangle"></span></a>
<a href="javascript:;">非访<span class="triangle"></span></a>
<a href="javascript:;">越级访<span class="triangle"></span></a>
<a href="javascript:;">信访部门未及时受理<span class="triangle"></span></a>
<a href="javascript:;">责任单位未及时受理<span class="triangle"></span></a>
<a href="javascript:;">按期办结<span class="triangle"></span></a>
<a href="javascript:;">信访部门满意度<span class="triangle"></span></a>
<a href="javascript:;">责任单位满意度<span class="triangle"></span></a>
</div>
</div>
</div>
<div class="row" style="padding:5px 5px; background: #fff;margin:0px">
<div class="col-xs-9" style="padding-left:2px;padding-right:2px">
<div id="container" tabindex="0" style="height: 600px;"></div>
<script type="text/javascript">
$('#container').css('height',$(window).height()-$('#topnav').outerHeight()-$('.footer').outerHeight());
</script>
</div>
<div class="col-xs-3" style="padding-left:2px;padding-right:2px">
<table class="sstz_table" border="1" cellspacing="5" cellpadding="5">
<tr>
<th>地区</th>
<th>预警类型</th>
<th>数量</th>
</tr>
<tr>
<td>市辖区</td>
<td>进京访</td>
<td><a href="javascript:;">1</a></td>
</tr>
<tr>
<td>清江浦区</td>
<td>进京访</td>
<td><a href="javascript:;">0</a></td>
</tr>
<tr>
<td>经济开发区</td>
<td>进京访</td>
<td><a href="javascript:;">0</a></td>
</tr>
<tr>
<td>淮阴区</td>
<td>进京访</td>
<td><a href="javascript:;">0</a></td>
</tr>
<tr>
<td>生态新城</td>
<td>进京访</td>
<td>0</td>
</tr>
<tr>
<td>淮安区</td>
<td>进京访</td>
<td>0</td>
</tr>
<tr>
<td>金湖县</td>
<td>进京访</td>
<td><a href="javascript:;">3</a></td>
</tr>
<tr>
<td>洪泽县</td>
<td>进京访</td>
<td><a href="javascript:;">0</a></td>
</tr>
<tr>
<td>涟水县</td>
<td>进京访</td>
<td><a href="javascript:;">0</a></td>
</tr>
</table>
</div>
</div>
<jsp:include page="../share/acefoot.jsp"></jsp:include>
<script type="text/javascript"
src="http://webapi.amap.com/ui/1.0/plug/ext/dat.gui.min.js?v=1.0.11"></script>




<script type="text/javascript">
$(function(){
$('.lay2tab').children("a").on('click',function(){
var _this=$(this);
$('.lay2tab').children("a").removeClass('lay2on');
$(_this).addClass('lay2on');
});
});


//创建地图
var map = new AMap.Map('container', {
cursor: 'default',
zoom: 9,
center: [119.115335,33.555172]
});



AMapUI.loadUI(['geo/DistrictExplorer'], function(DistrictExplorer) {

initPage(DistrictExplorer);

});

AMapUI.loadUI(['overlay/SvgMarker'], function(SvgMarker) {

if (!SvgMarker.supportSvg) {
//当前环境并不支持SVG，此时SvgMarker会回退到父类，即SimpleMarker
alert('当前环境不支持SVG');
}

var ryyjlist=[
{orgid:'01', Location: "119.228632,33.610088", name:"大沟坎"},
{orgid:'02', Location: "119.143488,33.406267", name:"蔡家坡"},
{orgid:'03', Location: "119.201166,33.680969", name:"扁山村"},
{orgid:'04', Location: "119.28631,33.49335", name:"大冲村"},
{orgid:'05', Location: "118.967707,33.293847", name:"张官堡"}
];

var markers = []; //markers数组，用于接多个图标点

//创建地图图标方法
var createMarker = function (data) {
var div = document.createElement('div');
div.className = 'circle';
var marker = new SvgMarker(
null, {
title: data.Name,
map: map,
position: data.Location.split(','),
showPositionPoint: true,
offset: new AMap.Pixel(0, 0)
});
//传递参数
marker.subMarkers = [data.Orgid, data.Name, data.Location];
marker.setMap(map);

//**********************地图图标marker绘制水纹开始**************************
function ParamsCls() {

this.shape = 'Circle';

this.width = 36;

this.height = 36;

this.keepAspectRatio = true;

this.fillColor = '#f14a5a';

this.strokeColor = '#edebc8';

this.strokeWidth = 0;
};

var controlParams = new ParamsCls();

function getSvgShape() {

return new SvgMarker.Shape[controlParams.shape]({
width: controlParams.width,
height: controlParams.keepAspectRatio ? false : controlParams.height,
fillColor: controlParams.fillColor,
strokeColor: controlParams.strokeColor,
strokeWidth: controlParams.strokeWidth
});
}

function updateShape() {

//heightControl.domElement.style.display = controlParams.keepAspectRatio ? 'none' : 'block';

var shape = getSvgShape();

marker.setSvgShape(shape);
}

updateShape();

//图标水纹动画
window.setInterval(function(){

if(controlParams.strokeWidth>0){
controlParams.strokeWidth=controlParams.strokeWidth-1;
}else{
controlParams.strokeWidth=20;
}
updateShape();
},80);
//**********************地图图标marker绘制水纹结束**************************

return marker;
};

//根据后台数据动态生成地图图标点
for (var i = 0; i < ryyjlist.length; i += 1) {
var marker;
marker = createMarker(ryyjlist[i]);
markers.push(marker);
console.log(marker);
marker.on('click', function(e) {
alert(e.target.subMarkers[2]+e.target.getPosition());
});
}
});

//**************控制地图行政区划显示开始***********************
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 = [
320800
];

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()));
}

//绘制带环多边形
//http://lbs.amap.com/api/javascript-api/reference/overlay#Polygon
var polygon = new AMap.Polygon({
bubble: true,
lineJoin: 'round',
strokeColor: '#BDBBB7', //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 1, //线宽
fillColor: 'black', //填充色
fillOpacity: 0.25, //填充透明度
map: map,
path: path
});
});
}
//**************控制地图行政区划显示结束***********************
</script>

</body>
</html>