當(dāng)前位置：首頁 > 技術(shù)學(xué)院 > 技術(shù)前線

線路圖怎么畫?

時(shí)間：2021-11-13 13:32:59

關(guān)鍵字： js 線路圖

手機(jī)看文章

掃描二維碼
隨時(shí)隨地手機(jī)看文章

[導(dǎo)讀]js 基于高德地圖在地圖上畫線路圖

效果圖如下.

相關(guān)代碼.

<!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("") //使用默認(rèn)信息窗體框樣式，顯示信息內(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();
// 顯示地圖中心點(diǎn)
var label = {
offset: new AMap.Pixel(20,6), //修改label相對(duì)于marker的位置
content: '移動(dòng)地圖將該圖標(biāo)作為起始位置，開始繪制線路圖'
};
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),
//使用所屬基站的擴(kuò)展信息
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('已清空該基站線路圖，請(qǐng)點(diǎn)擊新增開始繪制');
// 顯示地圖中心點(diǎn)
Startdrawing();
map.on('moveend',centermovefn = function(){
linemarker.setPosition(map.getCenter());
})

}

// 在地圖上繪制線路圖

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

/** ******************** 加載 PositionPicker ******************** */
//加載PositionPicker，loadUI的路徑參數(shù)為模塊名中 'ui/' 之后的部分
AMapUI.loadUI(['misc/PositionPicker'], function (PositionPicker) {
window.positionPicker = new PositionPicker({
mode: 'dragMap',//設(shè)定為拖拽地圖模式，可選'dragMap'、'dragMarker'，默認(rèn)為'dragMap'
map: map//依賴地圖對(duì)象
});

positionPicker.on('success', function (positionResult) {
//console.log('success:獲取到新位置');
// 將新的節(jié)點(diǎn)添加到節(jié)點(diǎn)數(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();
// 開始畫新的時(shí)候線路圖的時(shí)候暫時(shí)隱藏掉提交按鈕，防止誤操作沒有提交新增線路
$(".stopbtn").hide();
// 開始畫圖的時(shí)候隱藏新增線路按鈕，只能點(diǎn)擊本段完成之后再畫不同顏色的線路圖
$(".addnewline").hide();
//隱藏掉地圖中心點(diǎn)位置，并且取消掉地圖移動(dòng)時(shí)修改地圖中心點(diǎn)的監(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) {
// 使用一個(gè)位置開始畫線路圖
positionPicker.start(map.getCenter());
});

}

// 本段完成
function finishsome(obj){
$(obj).hide();
// 點(diǎn)擊本段完成的時(shí)候顯示提交按鈕
$(".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進(jìn)去了',polylinePathArray);
allpolylinePathArray.push(polylineOBJ);
polylinenewaddOBJ.push(polyline);
}
alert('操作成功，請(qǐng)進(jìn)行繼續(xù)添加或者提交線路圖')
}

// 繪圖結(jié)束
function stop(obj) {
console.log('示例結(jié)束,獲取到線路圖節(jié)點(diǎn):');
positionPicker.stop();
map.off('movestart',lineMove);
// 移除地圖中心點(diǎn)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>

本站聲明：本文章由作者或相關(guān)機(jī)構(gòu)授權(quán)發(fā)布，目的在于傳遞更多信息，并不代表本站贊同其觀點(diǎn)，本站亦不保證或承諾內(nèi)容真實(shí)性等。需要轉(zhuǎn)載請(qǐng)聯(lián)系該專欄作者，如若文章內(nèi)容侵犯您的權(quán)益，請(qǐng)及時(shí)聯(lián)系本站刪除。

換一批

印制電路板概述及發(fā)展

對(duì)于印制板的生產(chǎn)來說，因?yàn)樵S多設(shè)計(jì)者并不了解線路板的生產(chǎn)工藝，所以其設(shè)計(jì)的線路圖只是最基本的線路圖，并無法直接用于生產(chǎn)。因此在實(shí)際生產(chǎn)前需要對(duì)線路文件進(jìn)行修改和編輯，不僅需要制作出可以適合本廠生產(chǎn)工藝的菲林圖(film)...

關(guān)鍵字：印制電路板菲林圖線路圖

[技術(shù)前線]

接線圖怎么畫

如何迅速畫好接線圖

關(guān)鍵字：配電裝置線路圖 VISIO

[充電吧]

QML中（QML或JS）文件與其它JS文件互相訪問變量或方法

????????最近遇到一個(gè)很有意思的問題，在QML中，新建一個(gè)js文件，這個(gè)js文件是獨(dú)立專門解析一些數(shù)據(jù)的，qml可以創(chuàng)建一個(gè)線程來單獨(dú)訪問，有趣的是我想通過這個(gè)js文件來訪問另外一個(gè)js文件的內(nèi)

關(guān)鍵字： js qml

[充電吧]

js日歷 --- 項(xiàng)目中使用的開源程序

在表單,一般都會(huì)有與日期相關(guān)的選項(xiàng)比如生日這時(shí)候使用一個(gè)js日歷是最方便也是最好的了my97datepicker 免費(fèi),開源,兼容主流瀏覽器(ie6沒有問題的)ie6下的效果 ? (12306 也是用

關(guān)鍵字： js 日歷

[充電吧]

CEF3開發(fā)者系列之JS與C++交互之簡單介紹

JS與Native交互是相對(duì)于比較困難的技術(shù)，在學(xué)習(xí)這門技術(shù)之前，我們先了解下瀏覽器內(nèi)核中的JS引擎與chromium內(nèi)核的V8引擎相關(guān)知識(shí)。在瀏覽器應(yīng)用中，JS與本地代碼互相調(diào)用，得益于瀏覽器內(nèi)核對(duì)

關(guān)鍵字： js js與native交互

[電子設(shè)計(jì)自動(dòng)化]

電路設(shè)計(jì)的充分性和必要性

做結(jié)構(gòu)設(shè)計(jì)，有絕大多數(shù)結(jié)構(gòu)與內(nèi)置的線路板密切關(guān)聯(lián)，例如：外形尺寸、安裝固定、對(duì)外接口、器件擺放、電路布局、對(duì)外輻射、抗外部輻射等。而其中的許多因素并不是結(jié)構(gòu)設(shè)計(jì)專業(yè)所能了解的，最主要的是很多情況下，用戶并不專業(yè)，因此我公...

關(guān)鍵字：原理圖電路設(shè)計(jì) 硬件開發(fā) 線路圖

[電子設(shè)計(jì)自動(dòng)化]