var map = new AMap.Map('container',{
|
resizeEnable: true,
|
zoom:15
|
});
|
setCenterCoordinate();
|
function setCenterCoordinate() {
|
var locationsStr = $("#locationList1").val();
|
if ("" != locationsStr && null != locationsStr) {
|
var locations = JSON.parse(locationsStr);
|
var gid = locations[0].coordinate;
|
var path = convertData(gid);
|
var center = path[0];
|
map.setCenter(center)
|
}
|
}
|
function setElectricFence() {
|
var locationsStr = $("#locationList1").val();
|
if ("" != locationsStr && null != locationsStr) {
|
var locations = JSON.parse(locationsStr);
|
for (let i = 0; i < locations.length; i++) {
|
console.log(locations[i])
|
var gid = locations[i].coordinate
|
if (gid == null || gid == "") {
|
continue;
|
}
|
var path = convertData(gid)
|
var polygon = new AMap.Polygon({
|
path: path,
|
strokeWeight: 1,
|
fillOpacity: 0.4,
|
fillColor: '#00b0ff',
|
strokeColor: '#80d8ff'
|
});
|
map.add(polygon);
|
}
|
}
|
}
|
|
function convertData(data) {
|
var coordinates = data.split(';');
|
var path = [];
|
for (var i = 0; i < coordinates.length; i++) {
|
var coordinate = coordinates[i].split(',');
|
var lng = parseFloat(coordinate[0]);
|
var lat = parseFloat(coordinate[1]);
|
path.push([lng, lat]);
|
}
|
return path;
|
}
|
|
var value = "";
|
map.getCity(
|
callback=function (result) {
|
value = result.city;
|
drawBounds();
|
}
|
);
|
|
|
var mouseTool = new AMap.MouseTool(map);
|
//监听draw事件可获取画好的覆盖物
|
var overlays = [];
|
var name = null;
|
var coordinate = '';//存储坐标
|
var objs = {//存储各种类型的覆盖物对象
|
"polyline":[],
|
"polygon":[],
|
"rectangle":[],
|
"circle":[]
|
};
|
var editors = [];
|
mouseTool.on('draw',function(e){
|
overlays.push(e.obj);
|
console.log(e.obj.getPath());
|
|
switch (name) {
|
case 'polyline':{//折线图
|
var polyline = e.obj.getPath();
|
getCoordinate(polyline);
|
objs.polyline.push(e.obj);
|
break;
|
}
|
case 'polygon':{//多边形
|
var polygon = e.obj.getPath();
|
getCoordinate(polygon);
|
objs.polygon.push(e.obj);
|
break;
|
}
|
case 'rectangle':{//矩形
|
var rectangle = e.obj.getPath();
|
getCoordinate(rectangle);
|
objs.rectangle.push(e.obj);
|
break;
|
}
|
case 'circle':{//圆形
|
var center = e.obj.getCenter();
|
var radius = e.obj.getRadius();
|
if(radius > 5000){
|
Feng.error("创建电子围栏失败，圆半径不能大于5000米");
|
return;
|
}
|
coordinate += center.lng + ',' + center.lat + ';' + radius + "_";
|
objs.circle.push(e.obj);
|
break;
|
}
|
}
|
console.log(coordinate);
|
})
|
|
|
var district = null;
|
var polygons=[];
|
function drawBounds() {
|
if(value == ''){
|
value = '北京市';
|
}
|
|
//加载行政区划插件
|
if(!district){
|
//实例化DistrictSearch
|
var opts = {
|
subdistrict: 0, //获取边界不需要返回下级行政区
|
extensions: 'all', //返回行政区边界坐标组等具体信息
|
level: 'district' //查询行政级别为 市
|
};
|
district = new AMap.DistrictSearch(opts);
|
}
|
//行政区查询
|
district.setLevel(document.getElementById('level').value)
|
district.search(value, function(status, result) {
|
map.remove(polygons)//清除上次结果
|
polygons = [];
|
var bounds = result.districtList[0].boundaries;
|
if (bounds) {
|
for (var i = 0, l = bounds.length; i < l; i++) {
|
//生成行政区划polygon
|
var polygon = new AMap.Polygon({
|
strokeWeight: 1,
|
path: bounds[i],
|
fillOpacity: 0.4,
|
fillColor: '#80d8ff',
|
strokeColor: '#0091ea'
|
});
|
polygons.push(polygon);
|
}
|
}
|
map.add(polygons)
|
map.setFitView(polygons);//视口自适应
|
});
|
}
|
|
document.getElementById('find').onclick = function () {
|
value = document.getElementById('district').value;
|
if(value == ''){
|
value = "北京市";
|
}
|
drawBounds()
|
};
|
document.getElementById('district').onkeydown = function(e) {
|
if (e.keyCode === 13) {
|
value = document.getElementById('district').value;
|
if(value == ''){
|
value = "北京市";
|
}
|
drawBounds();
|
return false;
|
}
|
return true;
|
};
|
|
|
|
|
//处理坐标结果
|
function getCoordinate(arr){
|
var str = '';
|
for(var i = 0; i < arr.length; i++){
|
var lng = arr[i].lng;
|
var lat = arr[i].lat;
|
str += lng + ',' + lat + ';';
|
}
|
coordinate += str.substring(0, str.length - 1) + "_";
|
}
|
|
|
function draw(type){
|
switch(type){
|
case 'marker':{
|
mouseTool.marker({
|
//同Marker的Option设置
|
});
|
break;
|
}
|
case 'polyline':{
|
mouseTool.polyline({
|
strokeColor:'#80d8ff'
|
//同Polyline的Option设置
|
});
|
break;
|
}
|
case 'polygon':{
|
mouseTool.polygon({
|
fillColor:'#00b0ff',
|
strokeColor:'#80d8ff'
|
//同Polygon的Option设置
|
});
|
break;
|
}
|
case 'rectangle':{
|
mouseTool.rectangle({
|
fillColor:'#00b0ff',
|
strokeColor:'#80d8ff'
|
//同Polygon的Option设置
|
});
|
break;
|
}
|
case 'circle':{
|
mouseTool.circle({
|
fillColor:'#00b0ff',
|
strokeColor:'#80d8ff'
|
//同Circle的Option设置
|
});
|
break;
|
}
|
}
|
}
|
var radios = document.getElementsByName('func');
|
for(var i=0;i<radios.length;i+=1){
|
radios[i].onchange = function(e){
|
draw(e.target.value)
|
name = e.target.value;
|
}
|
}
|
// draw('marker')
|
|
document.getElementById('clear').onclick = function(){
|
map.remove(overlays)
|
overlays = [];
|
coordinate = '';
|
objs.circle = [];
|
objs.rectangle = [];
|
objs.polygon = [];
|
objs.polyline = [];
|
closeEdit();
|
}
|
document.getElementById('close').onclick = function(){
|
mouseTool.close()//关闭，并清除覆盖物
|
for(var i=0;i<radios.length;i+=1){
|
radios[i].checked = false;
|
}
|
closeEdit();
|
}
|
|
|
//点击提交处理函数
|
function submitCoordinate(){
|
var name = $('#addressName').val();
|
if('' == name){
|
Feng.error('请填写地址名称');
|
return;
|
}
|
if('' == coordinate){
|
Feng.error('请在地图上规划区域');
|
return;
|
}
|
coordinate = coordinate.substring(0, coordinate.length - 1);
|
|
}
|
|
function editAll() {
|
coordinate = '';
|
editors = [];
|
//折线
|
for(var i in objs.polyline){
|
var polyline = objs.polyline[i];
|
var polyEditor = new AMap.PolyEditor(map, polyline)
|
polyEditor.on('addnode', function(event) {
|
// log.info('触发事件：addnode')
|
})
|
|
polyEditor.on('adjust', function(event) {
|
// log.info('触发事件：adjust')
|
})
|
|
polyEditor.on('removenode', function(event) {
|
// log.info('触发事件：removenode')
|
})
|
|
polyEditor.on('end', function(e) {
|
var polyline = e.target.getPath();
|
getCoordinate(polyline);
|
})
|
editors.push(polyEditor);
|
polyEditor.open();
|
}
|
|
//多边形
|
for(var i in objs.polygon){
|
var polygon = objs.polygon[i];
|
var polyEditor = new AMap.PolyEditor(map, polygon)
|
|
polyEditor.on('addnode', function(event) {
|
// log.info('触发事件：addnode')
|
})
|
|
polyEditor.on('adjust', function(event) {
|
// log.info('触发事件：adjust')
|
})
|
|
polyEditor.on('removenode', function(event) {
|
// log.info('触发事件：removenode')
|
})
|
|
polyEditor.on('end', function(e) {
|
var polygon = e.target.getPath();
|
getCoordinate(polygon);
|
})
|
editors.push(polyEditor);
|
polyEditor.open();
|
}
|
|
|
//矩形
|
for(var i in objs.rectangle){
|
var rectangle = objs.rectangle[i];
|
var rectangleEditor = new AMap.RectangleEditor(map, rectangle)
|
|
rectangleEditor.on('adjust', function(event) {
|
// log.info('触发事件：adjust')
|
})
|
|
rectangleEditor.on('end', function(e) {
|
var polygon = e.target.getPath();
|
getCoordinate(polygon);
|
})
|
editors.push(rectangleEditor);
|
rectangleEditor.open();
|
}
|
|
//圆形
|
for(var i in objs.circle){
|
var circle = objs.circle[i];
|
var circleEditor = new AMap.CircleEditor(map, circle)
|
|
circleEditor.on('move', function(event) {
|
// log.info('触发事件：move')
|
})
|
|
circleEditor.on('adjust', function(e) {
|
var radius = e.target.getRadius();
|
if(radius > 5000){
|
Feng.error("创建电子围栏失败，圆半径不能大于5000米");
|
return;
|
}
|
})
|
|
circleEditor.on('end', function(e) {
|
var center = e.target.getCenter();
|
var radius = e.target.getRadius();
|
coordinate += center.lng + ',' + center.lat + ';' + radius + "_";
|
})
|
editors.push(circleEditor);
|
circleEditor.open();
|
}
|
}
|
|
|
function closeEdit() {
|
for(var i in editors){
|
var editor = editors[i];
|
editor.close();
|
}
|
}
|
$(function () {
|
setElectricFence()
|
})
|
