<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>编辑折线、多边形、圆</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://webapi.amap.com/maps?v=1.4.4&key=？&plugin=AMap.PolyEditor,AMap.CircleEditor,AMap.MouseTool"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<style>
#main,.tab-content,#content,.row,.col-xs-12{
width:100%!important;
height:100%!important;
}
.button-group {
position: absolute;
top: 0px;
left: 87px;
right:auto!important;
bottom:auto!important;
font-size: 12px;
padding: 10px;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="button-group">
<select class="form-control" name="shuizhan" id="shuitong" style='width: 150px;'>
{volist name="shuizhan" id="vo"}
<option value="{$vo.id}" data-lat="{$vo.lat}" data-lng="{$vo.lng}" data-gid="{$vo.gid}" >{$vo.name}</option>
{/volist}
</select>
<input type="button" class="button" value="开始编辑多边形" onclick="polyEditor.open()" />
<input type="button" class="button" value="结束编辑多边形" onclick="polyEditor.close()"/>
<input type="button" class="button btnclear" value="删除围栏"/>
</div>
<script>
var editorTool, map = new AMap.Map("container",{
resizeEnable: true,
zoom: 14 //地图显示的缩放级别
});
var polyEditor;
var show=true;
var lat1 = $("#shuitong option:selected").attr("data-lat");
var lng1 = $("#shuitong option:selected").attr("data-lng");
var val = $("#shuitong option:selected").val();
var gid = $("#shuitong option:selected").attr("data-gid");
var lat=Number(lat1);
var lng=Number(lng1);
/* 判断 该水站 是否有 电子围栏 */
if(gid==""){
var path=[[lat,lng],[lat,lng],[lat,lng],[lat,lng]]; //没有电子围栏
dot(lat,lng,val,path,gid,map);
}else{
point(lat,lng,val,gid,map);//有电子围栏
}
/* 查询 水站 点 */
function point(lats,lngs,vals,gids,map){
$.ajax({
url:"/admin/dianziweilan/chaxun",
dataType:'json',
type:'POST',
data:{
id:vals,
},
success:function(res){
if(res.code==0){
var data=res.points;
var arr1=[];
for(var i=0;i<data.length;i++){
var arr=data[i].split(",");
for(var a=0;a<arr.length;a++){
arr[a]=Number(arr[a]);
}
arr1.push(arr);
}
dot(lats,lngs,vals,arr1,gids,map);
}
}
});
}
function dot(lats,lngs,vals,paths,gids,map){
/* 圆点标记 */
var circleMarker = new AMap.CircleMarker({
center:[lats,lngs],
radius:10+Math.random()*10,//3D视图下，CircleMarker半径不要超过64px
strokeColor:'white',
strokeWeight:2,
strokeOpacity:0.5,
fillColor:'rgba(0,0,255,1)',
fillOpacity:0.5,
zIndex:10,
bubble:true,
cursor:'pointer',
clickable: true
});
circleMarker.setMap(map);
/* 电子围栏 */
var polygon= new AMap.Polygon({
path: paths,
strokeColor: "#FF33FF",
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.4,
fillColor: '#1791fc',
zIndex: 50,
});
map.add(polygon);
// 缩放地图到合适的视野级别
map.setFitView([ polygon ]);
/* 电子围栏 开始到画后 点击事件*/
polyEditor = new AMap.PolyEditor(map, polygon);
polyEditor.on('addnode', function(event) {
console.log('触发事件：addnode');
})
polyEditor.on('adjust', function(event) {
console.log('触发事件：adjust');
show=false;
})
polyEditor.on('removenode', function(event) {
console.log('触发事件：removenode');
})
/* 电子围栏 点击结束编辑 的点击事件 */
polyEditor.on('end', function(event) {
// event.target 即为编辑后的多边形对象
var data=event.target.Uh.path;
var datarr=[];
for(var i=0;i<data.length;i++){
var obj=data[i].lng+","+data[i].lat;
datarr.push(obj);
}
var str=datarr.join(";");
console.log(gids)
if(gids==""){
/* 添加 电子围栏 */
$.ajax({
url:"/admin/dianziweilan/tianjia",
dataType:'json',
type:'POST',
data:{
id:vals,
points:str
},
success:function(res){
if(res.code==0){
alert(res.msg);
location.reload();
}else{
alert("添加失败");
}
}
})
}else if(gids!=""){
/* 修改 电子围栏 */
$.ajax({
url:"/admin/dianziweilan/gengxin",
dataType:'json',
type:'POST',
data:{
id:vals,
points:str
},
success:function(res){
if(res.code==0){
alert(res.msg);
location.reload();
}else{
alert("修改失败");
}
}
})
}
show=true;
});
}
/* 点击选中的水站 */
$('#shuitong').change(function(){
if(show==false){
alert("请结束上一个站点的编辑");
$("#shuitong option:selected").removeAttr("selected");
return;
}else if(show==true){
var lat1=$("#shuitong option:selected").attr("data-lat");
var lng1=$("#shuitong option:selected").attr("data-lng");
var val2=$("#shuitong option:selected").val();
var gid2=$("#shuitong option:selected").attr("data-gid");
var lat2=Number(lat1);
var lng2=Number(lng1);
/* 圆点标记 */
if(gid2==""){
var path2=[[lat2,lng2],[lat2,lng2],[lat2,lng2],[lat2,lng2]];
dot(lat2,lng2,val2,path2,gid2,map);
}else{
console.log(1)
point(lat2,lng2,val2,gid2,map);
}
}
});
/* 删除 电子围栏 */
$(".btnclear").click(function(){
console.log(1)
var opgid=$("#shuitong option:selected").attr("data-gid");
var opval=$("#shuitong option:selected").val();
var lat1ss=$("#shuitong option:selected").attr("data-lat");
var lng1ss=$("#shuitong option:selected").attr("data-lng");
var option=$("#shuitong option");
var obj=false;
for(var i=0;i<option.length;i++){
if(option[i].selected==true){
obj=true;
}
}
if(obj==false){
alert("请选择您要删除的水站电子围栏");
return;
}else if(opgid==""){
alert("您选择的水站暂时没有电子围栏,无需删除");
return;
}else if(obj==true && opgid!=""){
$.ajax({
url:"/admin/dianziweilan/shanchu",
dataType:'json',
type:'POST',
data:{
id:opval,
},
success:function(res){
if(res.code==0){
alert(res.msg);
location.reload();
}else{
alert("删除失败")
}
}
})
}
})
</script>
</body>
</html>
网友评论