-
2019-01-17 09:39:55
效果图如下.
相关代码.
<!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>
更多相关内容 -
小程序之基于canvas绘制高铁线路图
2021-03-29 21:11:142、将整个路线图分为四个小图片,(1)站点圆角矩形(2)站点之间的直连线(3)站点之间右侧弯曲连线(4)站点之间左侧弯曲连线; 3、通过观察分析,将绘制过程分为两步,(1)奇数行圆角矩形、连线的绘制点x坐标... -
js点击绘制地铁线路图地铁站(可自定义颜色)百度map_subway line
2021-12-20 15:01:47可支持h5、web端js绘制百度地铁线路图 -
画线路图软件
2013-09-03 20:15:09用于印刷线路板的制作可用他做图很好用的是中文版的 -
VC画电工图的源码(自制的VC开发画线路图源码)
2010-03-29 21:37:26自制的VC开发画线路图源码。可以提供参考,类似电路图的画法,可以参见。 -
使用Google Earth画线路图
2017-01-06 11:10:141.首先需要将GPS Debug.log打开。打开方法 :点我传送。 2.使用 NMEA2KMZ 程序将LOG 中的Nmealog开头的log转换成 KMZ文件,会生成一个日期的文件。 3.直接将生成的文件放到Google Earth中就行了。... -
纯jquery+css绘画地图线路图插件Subway Map
2015-09-04 13:20:43纯jquery+css绘画地图线路图插件Subway Map,可用于线路图,电路图,html5开发环境下 -
ArcGIS应用(十六)Arcgis 点对连线制作航空线路图
2021-11-28 22:11:34使用点图层数据进行点对连接,效果如下图: 计算 2.计算过程 打开点图层数据,使用Arctoolboxs中的Add XY Coordinates工具添加坐标点。 然后再给图层添加X Y字段属性。 给新添加的字段属性赋值为北京市的坐标...1.效果
使用点图层数据进行点对连接,效果如下图:
计算
2.计算过程
打开点图层数据,使用Arctoolboxs中的Add XY Coordinates工具添加坐标点。
然后再给图层添加X Y字段属性。
给新添加的字段属性赋值为北京市的坐标(这里没有显示全):
使用XY To Line工具进行连线:
计算完成即得到以上效果。
-
初学者怎么用电脑画出精美的电路图?
2021-07-27 03:04:29接下来,小编就根据亿图图示软件,详细介绍一下电路图是怎样画出来的!新建基本电路打开亿图图示软件,鼠标单击“新建”-“工程”-“基本电路”,然后点击右侧面板中的“创建”。如果需要相关的例子参考,也可以鼠标...电路图由各种电路元件符号组成,是一种表示各元器件组成及器件关系的原理布局图。有了电路图,技术员们就能轻松的进行施工、规划和交流。电路图也可以说是每个电路施工技术人员必须要掌握的一种基本技能。接下来,小编就根据亿图图示软件,详细介绍一下电路图是怎样画出来的!
新建基本电路
打开亿图图示软件,鼠标单击“新建”-“工程”-“基本电路”,然后点击右侧面板中的“创建”。
如果需要相关的例子参考,也可以鼠标左键双击下方“例子”中的样式,启动例子,作为绘图参考。
亿图图示官网:www.edrawsoft.cn
电路图绘制
使用亿图图示软件绘制电路图,基本包括以下三个步骤:电子元件布局、电路图连线、美化电路图。
小编以一个最为简单的基本电路为例子,教大家如何按步骤完成电路图的绘制,并顺便讲解亿图绘制电路图的一些特点。
一、电子元件布局
电子元件是组成电路图的基本单元,也是绘制电路图的基础符号。在亿图图示软件的“符号库”中,您可以找寻到各种电子元件符号,然后将所需的电子元件符号从“符号库”拖动至画布中即可。另外,开关以及电源符号也应该拖动至画布中。
对于简单的电路图,我们可以先对电子元件做基本的布局,后续再连接优化。倘若电路图较为复杂,则建议是边布局边连线。
二、电路图连线
在亿图图示软件设置面板区域,选择“开始”-“连接线”(或使用快捷键Ctrl+3)。
系统默认的连接线符号是带箭头,此处可以在右侧属性面板里进行修改,同时也可以按照个人的需求,对连接线的粗细、颜色以及圆角类型等属性进行设置。
特色功能1:
亿图图示每个电子元件符号右上角都有一个浮动按钮,选择不同的状态,画布上的符号状态随即发生变化,无需另外从符号库里置换符号。
特色功能2:
使用连接线的时候,当连接线接近电路符号的时候,系统会自动将线条吸附在电路符号上。
特色功能3:
对于复杂的电路图,开启“交点样式”的功能后,当线条交叉的时候,会生成拱形交叉。此功能可以避免误读电路图。
三、美化电路图
在这一个过程中,我们需要为电路图标注代号、添加背景、添加标题栏等,目的是完善电路图。
1、标注代号:
标注代号的方式有两种。一种方法是在亿图图示软件设置面板区域,选择“开始”-“文本”(或使用快捷键Ctrl+2),鼠标拉动出一块空白区域,输入文本内容。另外一种比较简单,可以直接鼠标双击电子元件即可输入文本。
2、添加背景和标题栏:
在符号库中搜索背景,选择合适的背景图样式拖动至画布中,系统就会为之一键生成。添加标题栏的方式也同样如此,但需要修改文本。
四、其他注意事项
1、如果电路图周边有很多空白,可以选择鼠标右键“页面适应到绘图”。
2、亿图图示软件支持打印功能,在顶部菜单有对应的操作按钮。
3、电路图支持导出为png、jpg、pdf,以及office软件的相关格式。
简单的电路图示例:
-
深圳地铁线路图及站点经纬度,echarts可用,包含6号线、8号线、10号线路
2020-07-18 14:58:48深圳地铁线路图及站点经纬度,echarts可用,包含6号线、8号线、10号线路;可用于地图展示等;json格式 -
VB绘制公交线路节点演示程序代码
2021-05-07 18:39:55内容索引:VB源码,图形处理,节点,绘制 VB绘制公交线路节点演示程序代码,在图中,拖动文字上方的空白到其它地方可实现线路节点的拖动,大家可借鉴一下,我认为这个小例子还不错哦。 -
【大数据】城市公交网络分析与可视化(四):绘制城市公交(地铁)线路图
2021-01-20 03:12:27梗概:爬取公交路径坐标,处理成为符合高德地图Map Lab线形图的格式,通过该平台绘制公交(地铁)线路图等 一些必要的知识点可在该系列博客的其他内容中获得! 1 采用循环法获取线路名 怎么获取一个城市有哪些线路名... -
地铁线路图怎么画?几个步骤助你轻松作出
2021-07-09 07:49:08地铁是主要以地下运输为主的交通系统。其轨道通常在地下隧道内。其中:地铁线路中的M,L,S,R分别代表:M=Metro地,L=Light轻轨,S=Suburb市郊铁路,R=rapid,快速铁路。...地铁线路图绘制方法地铁线路图的绘... -
vue中使用svg画路径图
2022-03-31 15:27:16效果图: html <svg class="svgClass" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1100px" height="700px"> <!-- 标记点之间的路径 --> <path v-for="(item,i) in paths" :d=... -
根据电路板元器件和印制线路画出电路原理图
2020-07-18 09:50:00一、画电路图的基本思路 1、缩小画图范围 没有必要画出整机电路图,根据故障现象和可能采取的检查步骤,将故障范围确定在最小范围内,只对这一范围内的电路依据实物画图。 2、确定单元电路类型 根据印制电路板上元... -
微信小程序-小程序canvas绘制高铁线路图
2019-08-06 03:58:03wxapp-Gline 小程序canvas绘制高铁线路图 效果图 -
PADS在画好的线路图、PCB上修改.doc
2021-10-03 10:56:06PADS在画好的线路图、PCB上修改.doc -
如何绘制电气控制线路图详细教程
2020-07-17 21:25:59绘制电气控制线路图是积累工作资料的一项重要内容,可采用辅助绘图软件提高工作效率。AutoCAD2006是常用的电气辅助设计软件之一。利用AutoCAD2006的工具选项板,将电气图常用电气图形文字符号定制在工具选项板中,... -
教你看懂集成电路的线路图
2020-08-21 14:04:54集成电路的线路图的识辨方法 -
EffactRange_北京地铁线路图SVG_
2021-10-01 00:36:01svg画北京地铁线路图,目前只是初级班,但是能够画出完整的地图 -
常用印刷线路图识图方法
2020-08-21 08:26:01印刷线路图与修理密切相关,对修理的重要性仅次于整机电原理图,所以印刷线路图主要是为修理服务的。 -
js画地铁图
2017-02-24 10:51:03js画地铁图 -
教你认识如何看懂集成电路的线路图
2021-01-20 06:24:49②有些集成电路应用电路中,画出了集成电路的内电路方框图,这时对分析集成电路应用电路是相当方便的,但这种表示方式不多。 ③集成电路应用电路有典型应用电路和实用电路两种,前者在集成电路手册中可以查到,... -
如何按线路板还原电路图
2020-08-02 23:40:36在遇到一些小的实物,或者有需要的时候,遇到无图纸的电子产品时,需要根据实物画出电路原理图。虽然在规模稍大的情况就,就变得很复杂,但是在掌握以下几点后,相信我们还是可以做到的,对于简单一点的电路,就不在话下了... -
acad2004_管道算量插件_线路连画_
2021-09-28 19:35:09[专用软件] 连续画杆路和管道等CAD小插件、带统计工作量(Autolisp) -
教你轻松又简单的绘制地铁线路图
2021-04-27 15:30:00地铁是主要以地下运输为主的交通系统。其轨道通常在地下隧道内。其中:地铁线路中的M,L,S,R分别代表:M...地铁线路图的绘制方法并不难,根据以下步骤就可以绘制出专业实用的地铁线路图。 第一步:在电脑上下载亿图图示 -
用canvas画路线图的案例
2018-08-15 13:57:43<head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta http-equiv="X-UA-Compatible"...always& -
在地图上绘制路线图
2020-10-16 18:05:36最近做个项目,官方给了车的一些经纬度数据,为了看的更清楚,需要把数据标注在地图上 想到了两套方案,第一种采用python的folium库 结果遇到问题,数据一多,绘画出来的速度很慢,而且它的某JS插件还有问题,可能要... -
可视化例子(6)——geo3D-北京公交线路图(2.5D地图流动)
2019-11-28 15:30:29二、完整代码 geo3D-北京公交线路图 结果图: 若将第 39、40、41 行代码注释掉: return { coords: points, //lineStyle: { // color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx)) //给每条线...