wangzijun
/
gis-model
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

更改了x6群组

This commit is contained in:
zhaofeiyang 2022-08-04 09:00:55 +08:00
parent 25bd5c5560
commit 3c042f042e
1 changed files with 49 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/demo/index-tx.vue
View File

@ -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