线路图怎么画?

效果图如下.

相关代码.

<!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="https://cdn.bootcss.com/jquery/1.12.1/jquery.js"></script>
<script src="https://webapi.amap.com/maps?v=1.3&key=key(自己设置)"></script>
<script src="http://webapi.amap.com/ui/1.0/main.js"></script>
<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());
})

}

// 在地图上绘制线路图

/** ******************** 划线 ******************** */
// 折现节点数组
var polylinePathArray = []; //PositionPicker 中使用
var allpolylinePathArray = []; // 所有折现图
var polylineOriginal,polylineOriginalOBJ=[];
var polylinenewadd,polylinenewaddOBJ=[];
var stationInfo; // 基站信息，在点击基站的时候获取
var lineMove; // 开始划线的监听函数
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:获取到新位置');
// 将新的节点添加到节点数组中,开始画线
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();
//隐藏掉地图中心点位置，并且取消掉地图移动时修改地图中心点的监听事件
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('操作成功，请进行继续添加或者提交线路图')
}

// 绘图结束
function stop(obj) {
console.log('示例结束,获取到线路图节点:');
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>