CustomMapJs学习记录

1. 引入js

js链接：链接：https://pan.baidu.com/s/1OrlNqouemO-G6nKD5cyppA
提取码：ra0g

<script src='./CustomMapJs.js'></script>
 <script src='./vis-network.js'></script>

2.创建自定义地图对象

		<div id="box">
			<img id="img" :url="bigmapImg">
			<div class="markerContainer"></div>
		</div>

	  let that=this;
	  lte nodeList=[{id:1,name:'cs1',px:10,py:10},{id:2,name:'cs2',px:10,py:30},
	  {id:3,name:'cs3',px:20,py:20},{id:4,name:'cs4',px:10,py:30},{id:5,name:'cs5',px:30,py:30}]
      lte dituObj = new CustomMapJs({
           $box: document.getElementById("box"),
           markerArr:  nodeList,

           clickImg: function (opt) {
         	  //点击图片事件
           },
           clickMarker: function (marker) {
           		//点击节点事件
           		that.showDevInfo(marker);
           },
           createMarker: function (marker, element) {
	           	let x=marker.px;
	           	let y=marker.py;
	           	//在地图上创建带名称的节点
	           	let name=marker.name;
	            var newElement = document.createElement('div');
	            var newTitle = document.createElement('span');
				newTitle.innerHTML=name;
				
                newElement.style.left = parseInt(x) + 'px';
                newElement.style.top = parseInt(y) + 'px';
	              
                newTitle.style.left = '-'+(16)+'px';//字体宽度的一半
                newTitle.style.width = (32+'px';
	               
                newElement.appendChild(newTitle);
				newElement.data=marker;
	            return newElement
           },
           removeMarker: function (marker) {
           		//删除节点事件
	           	this.opt.markerArr.splice(marker.index, 1);
	           	this.RenderMarker()
           },
           move: function (){
	           	this.moveMarker();
           }
       });

3.调用添加，删除节点方法

	//删除
	let delNode={id:3,name:'cs3'};

	dituObj.opt.markerArr.splice(delNode.index, 1);
	dituObj.opt.markerArr = dituObj.opt.markerArr.filter(t => t.id != delNode.id);
	dituObj.RenderMarker();
	delNode=null;

	//添加
	let obj={id:3,name'cs3',px:20,py:20}
	dituObj.opt.markerArr.push(obj);
	dituObj.RenderMarker();
	obj=null;

4.给地图添加事件

	let addNode={};
	let delNode={}; 

	let parentDocument=null;
	//地图元素的父节点，用于解决,当滚动条滚动出现右键坐标偏移问题
	parentDocument=document.getElementById("boxshell").parentNode.parentNode;
	let boxDocument=null;
	boxDocument=document.getElementById("box");
	function menuFun(e) {
		let parentDocument=that.parentDocument;
		let scrollTop=parentDocument.scrollTop;
		parentDocument.scrollTo(0,0);
		let scaleSize=dituObj.opt.scaleSize;
     	let srcType=e.srcElement.toString();
		let px=e.x;
      	let py=e.y+scrollTop;
   		if(srcType.indexOf('HTMLImageElement')!=-1){
   			addNode.px=e.layerX/scaleSize;
   			addNode.py=(e.layerY/scaleSize)+scrollTop;
   		}else if(srcType.indexOf('HTMLDivElement')!=-1&&e.srcElement.data!=null){
			delNode=e.srcElement.data;
   		}else {
   			return;
   		}
	}

	boxDocument.removeEventListener("contextmenu", menuFun);
   	boxDocument.addEventListener("contextmenu", menuFun);
    //鼠标右键
      	
	//关闭右键菜单，很简单
	window.onclick=function(e) {
		//用户触发click事件就可以关闭了，因为绑定在window上，按事件冒泡处理，不会影响菜单的功能
		if(document.querySelector('#menu')!=null) 
			document.querySelector('#menu').style.display='none';
	}