当前位置：首页 > 技术学院 > 技术前线

线路图怎么画?

时间：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="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>

来源：互联网

本站声明： 本文章由作者或相关机构授权发布，目的在于传递更多信息，并不代表本站赞同其观点，本站亦不保证或承诺内容真实性等。需要转载请联系该专栏作者，如若文章内容侵犯您的权益，请及时联系本站删除。
换一批
延伸阅读
[基础知识科普站]

印制电路板概述及发展

对于印制板的生产来说，因为许多设计者并不了解线路板的生产工艺，所以其设计的线路图只是最基本的线路图，并无法直接用于生产。因此在实际生产前需要对线路文件进行修改和编辑，不仅需要制作出可以适合本厂生产工艺的菲林图(film)...

关键字： 印制电路板 菲林图 线路图
[技术前线]

接线图怎么画

如何迅速画好接线图

关键字： 配电装置 线路图 VISIO
[充电吧]

QML中（QML或JS） 文件与其它JS文件互相访问变量或方法

        最近遇到一个很有意思的问题，在QML中，新建一个js文件，这个js文件是独立专门解析一些数据的，qml可以创建一个线程来单独访问，有趣的是我想通过这个js文件来访问另外一个js文件的内

关键字： js qml
[充电吧]

js日历 --- 项目中使用的开源程序

在表单,一般都会有与日期相关的选项比如生日这时候使用一个js日历是最方便也是最好的了my97datepicker 免费,开源,兼容主流浏览器(ie6没有问题的)ie6下的效果   (12306 也是用

关键字： js 日历
[充电吧]

CEF3开发者系列之JS与C++交互之简单介绍

JS与Native交互是相对于比较困难的技术，在学习这门技术之前，我们先了解下浏览器内核中的JS引擎与chromium内核的V8引擎相关知识。在浏览器应用中，JS与本地代码互相调用，得益于浏览器内核对

关键字： js js与native交互
[电子设计自动化]

电路设计的充分性和必要性

做结构设计，有绝大多数结构与内置的线路板密切关联，例如：外形尺寸、安装固定、对外接口、器件摆放、电路布局、对外辐射、抗外部辐射等。而其中的许多因素并不是结构设计专业所能了解的，最主要的是很多情况下，用户并不专业，因此我公...

关键字： 原理图 电路设计 硬件开发 线路图
[电子设计自动化]

教你认识如何看懂集成电路的线路图

有些集成电路应用电路中，画出了集成电路的内电路方框图，这时对分析集成电路应用电路是相当方便的，但这种表示方式不多。

关键字： 线路图 集成电路
[光电显示电路]

两室一厅居室电源布线分配线路图

两室一厅居室电源布线分配线路图

关键字： 布线 电源 线路图 BSP
[半导体]

郭明池爆料苹果产品线路图 iPhone6分辨率首曝

来自凯基证券的知名分析师郭明池今天公布了一份自制的苹果产品路线图，透露了不少新情报，尤其是下一代iPhone 6。他指出，iPhone 6确实会有4.7寸、5.5寸两种版本，分辨率都会大大提高，其中4.7寸的是1334×...

关键字： 苹果 IPHONE6 线路图 iPhone
[消费电子]

【图】联发科六核MT6591处理器细节曝光

21ic电子网讯：潘九堂近日放出了一张联发科的手机处理器线路图，上面除了在MWC上发布的64位处理器MT6732和本月初发布的MT6595外，还有一颗神秘的六核处理器MT6591。产品线路图从名字上来看，这颗MT6591...

关键字： 处理器 联发科 MT 线路图

技术前线

2090 篇文章

关注

发布文章

厂商专栏

热门文章

编辑精选

更多

论坛活动

更多

论坛热帖

技术子站

更多

资料下载

更多

技术学院

关闭