線路圖怎么畫?

時間：2021-11-13 13:32:59

關鍵字： js 線路圖

手機看文章

掃描二維碼
隨時隨地手機看文章

[導讀]js 基于高德地圖在地圖上畫線路圖

效果圖如下.

相關代碼.

<!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">
// 初始數(shù)據(jù)
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("") //使用默認信息窗體框樣式，顯示信息內(nèi)容
});
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());
})

}

// 在地圖上繪制線路圖

/** ******************** 劃線 ******************** */
// 折現(xiàn)節(jié)點數(shù)組
var polylinePathArray = []; //PositionPicker 中使用
var allpolylinePathArray = []; // 所有折現(xiàn)圖
var polylineOriginal,polylineOriginalOBJ=[];
var polylinenewadd,polylinenewaddOBJ=[];
var stationInfo; // 基站信息，在點擊基站的時候獲取
var lineMove; // 開始劃線的監(jiān)聽函數(shù)
var linetype; // 折線的類型

/** ******************** 加載 PositionPicker ******************** */
//加載PositionPicker，loadUI的路徑參數(shù)為模塊名中 '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é)點數(shù)組中,開始畫線
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>