diff --git a/src/demo/index-tx.vue b/src/demo/index-tx.vue index 5beaf6d..36b39a4 100644 --- a/src/demo/index-tx.vue +++ b/src/demo/index-tx.vue @@ -73,7 +73,7 @@ export default { this.initGaodeMap(); this.graph.disableMouseWheel();//禁止滑轮 this.graph.zoom(0);//设置默认画布大小 - + }, methods: { onRender() { @@ -88,11 +88,11 @@ export default { this.graph.getNodes().forEach((node) => { let mapPoint = node.store.data.mapPoint //由地理位置转换为屏幕位置 - var lnglat = new TMap.LatLng(mapPoint.lat,mapPoint.lng) + var lnglat = new TMap.LatLng(mapPoint.lat, mapPoint.lng) var pixel = this.map.projectToContainer(lnglat); - let x6postion=this.graph.pageToLocal(pixel.round().x, pixel.round().y) + let x6postion = this.graph.pageToLocal(pixel.round().x, pixel.round().y) node.position(x6postion.x, x6postion.y); - + }) }, init() { @@ -211,8 +211,8 @@ export default { center: new TMap.LatLng(39.984104, 116.307503),// 设置地图中心点坐标 keyboardShortcuts: false, //设置禁止通过键盘控制地图。默认情况下启用键盘快捷键。 scrollwheel: false, - scrollable:false, - doubleClickZoom:false + scrollable: false, + doubleClickZoom: false }); var mapContainer = document.getElementById('container'); var x6 = document.getElementsByClassName("x6-content"); @@ -265,8 +265,7 @@ export default { }) this.map = map; this.map.on('pan', (e) => { -this.onRender(); - // console.log(this.dataNodes); + this.onRender(); }); this.map.on('dragend', (e) => { @@ -297,7 +296,7 @@ this.onRender(); //初始化画布 initGraph() { console.log("x6图层", this.$refs.container) - + console.log("地图地图", this.map) this.graph = new Graph({ container: this.$refs.container, @@ -484,16 +483,26 @@ this.onRender(); // this.map.ismoved1 = false; // args.e.stopPropagation(); //将在容器的位置坐标转换为地图的地理坐标 - // this.pixelToPoint(args.node, args.node.store.data.position) + // this.pixelToPoint(args.node, args.node.store.data.position) }) //节点在画布上移动 this.graph.on('node:change:position', (args) => { //将在容器的位置坐标转换为地图的地理坐标 - // this.pixelToPoint(args.node, args.node.store.data.position) + // this.pixelToPoint(args.node, args.node.store.data.position) }) this.graph.on('node:mouseup', (args) => { + const container = this.$refs.container + const ports = container.querySelectorAll( + '.x6-port-body', + ) + console.log(ports); + this.graph.getNodes().forEach((node) => { + //let mapPoint = node.store.data.mapPoint + this.pixelToPoint(node, node.store.data.position) + + }) //将在容器的位置坐标转换为地图的地理坐标 - this.pixelToPoint(args.node, args.node.store.data.position) + //this.pixelToPoint(args.node, args.node.store.data.position) }) //画布平移 // this.graph.on('translate', ({ tx, ty }) => { @@ -520,7 +529,7 @@ this.onRender(); this.graph.on('blank:mouseup', async (args) => { this.map.ismoved1 = false; - + //this.onRender(); // setTimeout(() => { // this.map.ismoved1 = true; @@ -556,7 +565,7 @@ this.onRender(); this.graph.on('blank:mousedown', async ({ view, e }) => { this.map.ismoved1 = true; - this.changeMapDrag(true); + this.changeMapDrag(true); //this.map.ismoved1 = false; // this.map.ismoved1 = false; @@ -576,89 +585,89 @@ this.onRender(); }); //滑轮事件 this.graph.on('blank:mousewheel', (e) => { - - + + console.log(this.graph.zoom()); console.log(e); if (e.delta == -1) { if (this.graph.zoom() == 5) { this.graph.zoom(-2.5) - this.map.setZoom(13) + this.map.setZoom(13) } else if (this.graph.zoom() == 2.5) { this.graph.zoom(-1.5); - this.map.setZoom(12) - + this.map.setZoom(12) + } else if (this.graph.zoom() == 1) { this.graph.zoom(-0.5) - this.map.setZoom(11) + this.map.setZoom(11) } else if (this.graph.zoom() == 0.5) { this.graph.zoom(-0.25) - this.map.setZoom(10) + this.map.setZoom(10) } else if (this.graph.zoom() == 0.25) { this.graph.zoom(-0.05) - this.map.setZoom(9) + this.map.setZoom(9) } else if (this.graph.zoom() == 0.2) { this.graph.zoom(-0.1) - this.map.setZoom(8) + this.map.setZoom(8) } else if (this.graph.zoom() == 0.1) { this.graph.zoom(-0.05) - this.map.setZoom(7) + this.map.setZoom(7) } else if (this.graph.zoom() == 0.05) { this.graph.zoom(-0.025) - this.map.setZoom(6) + this.map.setZoom(6) } else if (this.graph.zoom() == 0.025) { this.graph.zoom(-0.015) - this.map.setZoom(5) + this.map.setZoom(5) } } if (e.delta == 1) { if (this.graph.zoom() == 2.5) { this.graph.zoom(2.5) - this.map.setZoom(14) + this.map.setZoom(14) } else if (this.graph.zoom() == 1) { this.graph.zoom(1.5) - this.map.setZoom(13) + this.map.setZoom(13) } else if (this.graph.zoom() == 0.5) { this.graph.zoom(0.5) - this.map.setZoom(12) + this.map.setZoom(12) } else if (this.graph.zoom() == 0.25) { this.graph.zoom(0.25) - this.map.setZoom(11) + this.map.setZoom(11) } else if (this.graph.zoom() == 0.2) { this.graph.zoom(0.05) - this.map.setZoom(10) + this.map.setZoom(10) } else if (this.graph.zoom() == 0.1) { this.graph.zoom(0.1) - this.map.setZoom(9) + this.map.setZoom(9) } else if (this.graph.zoom() == 0.05) { this.graph.zoom(0.05) - this.map.setZoom(8) + this.map.setZoom(8) } else if (this.graph.zoom() == 0.025) { this.graph.zoom(0.025) - this.map.setZoom(7) + this.map.setZoom(7) } else if (this.floatEqual(this.graph.zoom(), 0.01)) { this.graph.zoom(0.015) - this.map.setZoom(6) + this.map.setZoom(6) } } @@ -666,7 +675,7 @@ this.onRender(); // setTimeout(() => { // this.onRender(); // }, 1000); - + }) }, @@ -745,10 +754,10 @@ this.onRender(); pixelToPoint(node, position) { //x6转屏幕 console.log(position); - let pmpostion=this.graph.localToPage(position.x, position.y); - console.log(pmpostion); - let ePoint =this.map.unprojectFromContainer({x:pmpostion.x, y:pmpostion.y}); - console.log(ePoint) + let pmpostion = this.graph.localToPage(position.x, position.y); + console.log(pmpostion); + let ePoint = this.map.unprojectFromContainer({ x: pmpostion.x, y: pmpostion.y }); + console.log(ePoint) //let ePoint = this.map.containerToLngLat(new AMap.Pixel(position.x, position.y)) //将数据记录到node中 node.store.data.mapPoint = ePoint