效果圖如下.
相關代碼.
<!DOCTYPE
html>
<html>
<head>
<title>demo</title>
<meta
charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<script
src=">
<script
src="
<script src=">
<style type="text/css">
html,body,#container{
width:100%;
height:100%;
margin:0;
padding:0;
}
a, button, input {
-webkit-tap-highlight-color:
rgba(0,0,0,0);
}
.cl:after,.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden
}
.cl,.clearfix{
zoom:1
}
.button-group {
position: absolute;
bottom: 36px;
font-size: 12px;
right: 30px;
}
.button-group .button
{
background-color: #0D9BF2;
color: #FFF;
border:
0;
outline: none;
border-radius: 3px;
padding:
5px;
margin-bottom: 4px;
cursor: pointer;
text-align:
center;
font-size: 14px;
margin-right: 6px;
float:
right;
}
.addnewline, .restartline {
position:
relative;
float: right;
}
.line-color-group {
position: absolute;
bottom: 21px;
left:
-40px;
}
.line-color-group input:nth-of-type(1) {
background:
#ddab89;
}
.line-color-group input:nth-of-type(2) {
background: #274e13;
}
.addnewline input, .restartline input
{
background-color: #0D9BF2;
color: #FFF;
border:
0;
outline: none;
padding: 5px;
width: 78px;
cursor: pointer;
text-align: center;
font-size:
14px;
}
</style>
</head>
<body>
<div
id="container"></div>
<script type="text/javascript">
//
初始數據
var electricLines =
[
{
"type":1,
"polylinePathArray":[
{"O":39.95593567222839,"M":116.39812341237257,"lng":116.398123,"lat":39.955936},
{"O":39.95575885456828,"M":116.39814487004469,"lng":116.398145,"lat":39.955759},
{"O":39.95575885456828,"M":116.39814487004469,"lng":116.398145,"lat":39.955759},
{"O":39.95579997499513,"M":116.39824142956923,"lng":116.398241,"lat":39.9558}
]
},
{
"type":0,
"polylinePathArray":[
{"O":39.95579997499513,"M":116.39824142956923,"lng":116.398241,"lat":39.9558},
{"O":39.95579997499513,"M":116.39836481118391,"lng":116.398365,"lat":39.9558},
{"O":39.95579997499513,"M":116.39836481118391,"lng":116.398365,"lat":39.9558},
{"O":39.9558246472394,"M":116.3985418369789,"lng":116.398542,"lat":39.955825}
]
},
{
"type":2,
"polylinePathArray":[
{"O":39.9558246472394,"M":116.3985418369789,"lng":116.398542,"lat":39.955825},
{"O":39.95563138108786,"M":116.3985418369789,"lng":116.398542,"lat":39.955631},
{"O":39.95563138108786,"M":116.3985418369789,"lng":116.398542,"lat":39.955631},
{"O":39.95553680383595,"M":116.39853647256086,"lng":116.398536,"lat":39.955537}
]
},
{
"type":0,
"polylinePathArray":[
{"O":39.909184736742915,"M":116.3974762797622,"lng":116.397476,"lat":39.909185},
{"O":39.90919296642823,"M":116.39774986508172,"lng":116.39775,"lat":39.909193},
{"O":39.90919296642823,"M":116.39774986508172,"lng":116.39775,"lat":39.909193},
{"O":39.90906540619449,"M":116.39775522949975,"lng":116.397755,"lat":39.909065}
]
},
{
"type":1,
"polylinePathArray":[
{"O":39.90906540619449,"M":116.39775522949975,"lng":116.397755,"lat":39.909065},
{"O":39.90906540619449,"M":116.39827021363061,"lng":116.39827,"lat":39.909065}
]
},
{
"type":2,
"polylinePathArray":[
{"O":39.90906540619449,"M":116.39827021363061,"lng":116.39827,"lat":39.909065},
{"O":39.90940693789983,"M":116.39827557804864,"lng":116.398276,"lat":39.909407}
]
}
];
var
infoWindow;
var selectedmark;
var map = new AMap.Map('container',
{
resizeEnable: true,
zoom:20,
center:
[116.397428, 39.90923]
});
marker = new
AMap.Marker({
map: map,
content: '',
position: [116.397428, 39.90923],
zIndex: 101,
size: new
AMap.Size(20,20),
offset: new AMap.Pixel(0,-20),
extData:{
'id':'1234567'
}
});
marker.on('click',markerClick);
function markerClick(e){
selectedmark = e.target;
var extData = e.target.getExtData();
console.log(extData);
stationInfo = extData;
var info =
[];
info.push('<div onclick="showPolyline(this)"
id="'+stationInfo.id+'">顯示線路圖</div>');
infoWindow = new
AMap.InfoWindow({
content: info.join("")
//使用默認信息窗體框樣式，顯示信息內容
});
infoWindow.open(map,
e.target.getPosition());
}
// 顯示供電線路圖
var linemarker =
null;
function showPolyline(obj){
infoWindow.close();
if(linemarker){
map.remove(linemarker);
}
$('.button-group').remove();
$('#container').append('<div
class="button-group">' +
'<input type="button" class="button
stopbtn" data-id="'+$(obj).attr('id')+'" value="提交繪制" onclick="stop(this)"
style="display: none;">' +
'<input type="button"
class="button finishsomebtn" data-id="'+$(obj).attr('id')+'" value="本段完成"
onclick="finishsome(this)" style="display: none;">' +
'<div
class="addnewline clearfix" style="display: none;">' +
'<input type="button" class="button showlinegroupbtn"
data-id="'+$(obj).attr('id')+'" value="新增線路圖" onclick="showlinegroup(this)">'
+
'<ul class="line-color-group" style="display:none;">'
+
'<input type="button" class="botton" data-id="'+
$(obj).attr('id') +'" value="深埋線路"
onclick="start(this,1,0)">'+
'<input type="button"
class="botton" data-id="'+ $(obj).attr('id') +'" value="普通線路"
onclick="start(this,1,1)">'+
'<input type="button"
class="botton" data-id="'+ $(obj).attr('id') +'" value="架空線路"
onclick="start(this,1,2)">'+
'</ul>'+
'</div>' +
'<input type="button" class="button"
data-id="'+$(obj).attr('id')+'" value="重畫線路圖"
onclick="removelinegroup(this)">'+
'<input type="button"
class="button StartdrawingBTN" data-id="'+$(obj).attr('id')+'" value="開始繪制"
onclick="Startdrawing(this)">'+
'</div>');
map.off('movestart',lineMove);
if(electricLines
== '' || electricLines == '[]'){
alert('暫無供電線路圖');
}else{
allpolylinePathArray = electricLines;
console.log(allpolylinePathArray);
for(var i in
allpolylinePathArray){
if( allpolylinePathArray[i].type ===
0 ){
polylineOriginal = new AMap.Polyline({map: map,
strokeColor:'#ddab89'}); // 深埋
}else if(
allpolylinePathArray[i].type === 1 ){
polylineOriginal
= new AMap.Polyline({map: map, strokeColor:'#274e13'}); //
普通
} else {
polylineOriginal = new
AMap.Polyline({map: map, strokeColor:'#3c78d8'}); //架空
}
polylineOriginal.setPath(allpolylinePathArray[i].polylinePathArray);
polylineOriginalOBJ.push(polylineOriginal);
}
}
}
// 開始繪制線路圖按鈕
function Startdrawing(obj){
$('.StartdrawingBTN').hide();
$('.addnewline').show();
//
顯示地圖中心點
var label = {
offset: new AMap.Pixel(20,6),
//修改label相對于marker的位置
content: '移動地圖將該圖標作為起始位置，開始繪制線路圖'
};
linemarker = new AMap.Marker({
map: map,
draggable:false,
position: map.getCenter(),
zIndex:
150,
size: new AMap.Size(40, 40),
offset: new
AMap.Pixel(-10,-34),
//使用所屬基站的擴展信息
extData:'',
label:label
});
map.on('moveend',centermovefn = function(){
linemarker.setPosition(map.getCenter());
})
}
function
showlinegroup(obj){
$('.line-color-group').hide();
$(obj).siblings('.line-color-group').show();
}
// 重畫線路圖
移除所有的線路圖
function removelinegroup(){
console.log('刪除所有的折線圖');
$('.addnewline').show();
polylinePathArray = [];
allpolylinePathArray = [];
for(var i
in polylinenewaddOBJ){
polylinenewaddOBJ[i].hide();
}
for(var j in polylineOriginalOBJ){
polylineOriginalOBJ[j].hide();
}
positionPicker.stop();
map.off('movestart',lineMove);
alert('已清空該基站線路圖，請點擊新增開始繪制');
// 顯示地圖中心點
Startdrawing();
map.on('moveend',centermovefn =
function(){
linemarker.setPosition(map.getCenter());
})
}
// 在地圖上繪制線路圖
/** ******************** 劃線
******************** */
// 折現節(jié)點數組
var polylinePathArray = [];
//PositionPicker 中使用
var allpolylinePathArray = []; // 所有折現圖
var
polylineOriginal,polylineOriginalOBJ=[];
var
polylinenewadd,polylinenewaddOBJ=[];
var stationInfo; //
基站信息，在點擊基站的時候獲取
var lineMove; // 開始劃線的監(jiān)聽函數
var linetype; //
折線的類型
/** ******************** 加載 PositionPicker
******************** */
//加載PositionPicker，loadUI的路徑參數為模塊名中 'ui/'
之后的部分
AMapUI.loadUI(['misc/PositionPicker'], function (PositionPicker)
{
window.positionPicker = new PositionPicker({
mode:
'dragMap',//設定為拖拽地圖模式，可選'dragMap'、'dragMarker'，默認為'dragMap'
map:
map//依賴地圖對象
});
positionPicker.on('success', function
(positionResult) {
//console.log('success:獲取到新位置');
//
將新的節(jié)點添加到節(jié)點數組中,開始畫線
polylinePathArray.push(positionResult.position);
polyline.setPath(polylinePathArray);
});
positionPicker.on('fail', function (positionResult) {
console.log(positionResult);
console.log('fail:海上或海外無法獲得地址信息')
});
});
//開始畫線路圖
function start(obj,category,type)
{ // category 0,重繪 1,新增 type 0,深埋 1,普通 2 架空
$('.finishsomebtn').show();
//
開始畫新的時候線路圖的時候暫時隱藏掉提交按鈕，防止誤操作沒有提交新增線路
$(".stopbtn").hide();
//
開始畫圖的時候隱藏新增線路按鈕，只能點擊本段完成之后再畫不同顏色的線路圖
$(".addnewline").hide();
//隱藏掉地圖中心點位置，并且取消掉地圖移動時修改地圖中心點的監(jiān)聽事件
map.remove(linemarker);
map.off('moveend',centermovefn);
$('.line-color-group').hide();
linetype = type;
console.log(allpolylinePathArray);
polylinePathArray = [];
polyline = null;
if( type === 0 ){
polyline = new
AMap.Polyline({map: map, strokeColor:'#ddab89'}); // 深埋
}else if( type
=== 1 ){
polyline = new AMap.Polyline({map: map,
strokeColor:'#274e13'}); // 普通
} else {
polyline = new
AMap.Polyline({map: map, strokeColor:'#3c78d8'}); //架空
}
polylinenewaddOBJ.push(polyline);
map.on('movestart',lineMove =
function(e) {
// 使用一個位置開始畫線路圖
positionPicker.start(map.getCenter());
});
}
//
本段完成
function finishsome(obj){
$(obj).hide();
//
點擊本段完成的時候顯示提交按鈕
$(".stopbtn").show();
// 顯示新增按鈕
$(".addnewline").show();
map.off('movestart',lineMove);
var
polylineOBJ = {};
polylineOBJ.type = linetype;
console.log(polylineOBJ);
if(polylinePathArray.length >
0){
polylineOBJ.polylinePathArray = polylinePathArray;
console.log('push進去了',polylinePathArray);
allpolylinePathArray.push(polylineOBJ);
polylinenewaddOBJ.push(polyline);
}
alert('操作成功，請進行繼續(xù)添加或者提交線路圖')
}
// 繪圖結束
function stop(obj)
{
console.log('示例結束,獲取到線路圖節(jié)點:');
positionPicker.stop();
map.off('movestart',lineMove);
//
移除地圖中心點marker
var data = {
id :
$(obj).attr('data-id'),
electricLines:JSON.stringify(allpolylinePathArray)
};
console.log(data)
alert('提交成功');
$('.button-group').remove();
for(var i in
polylinenewaddOBJ){
polylinenewaddOBJ[i].hide();
}
for(var i in
polylineOriginalOBJ){
polylineOriginalOBJ[i].hide();
}
/*$.ajax({
url: '',
type: "",
data:
data,
async:true,
success: function(d)
{
console.log(d);
var res =
JSON.parse(d);
if(res.status == "OK"){
alert('提交成功');
$('.button-group').remove();
for(var i in
polylinenewaddOBJ){
polylinenewaddOBJ[i].hide();
}
for(var
i in polylineOriginalOBJ){
polylineOriginalOBJ[i].hide();
}
}
},
error: function(d) {
console.log(d);
}
})*/
}
</script>
</body>
</html>
下載文檔
