Skip to content

Commit 4286d88

Browse files
author
zhaokai
committed
二维图层组 图层
1 parent b843677 commit 4286d88

14 files changed

Lines changed: 541 additions & 488 deletions

File tree

‎src/mapboxgl/overlay/FabricLayer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* @Author: zk
44
* @Date: 2022-04-25 20:08:02
55
* @LastEditors: Do not edit
6-
* @LastEditTime: 2022-04-27 15:09:26
6+
* @LastEditTime: 2022-05-11 14:46:00
77
*/
88
import mapboxgl from '@mapgis/mapbox-gl';
99
import { PlotMapCoordSys } from './fabric/PlotMapCoordSys';
@@ -14,7 +14,7 @@ export class FabricLayer {
1414
* @description: 构造
1515
* @param {Object} map mapboxglmap
1616
* @param {Function} fabricClass fabric图层
17-
* @param {Object} fabricOptions fabric图层
17+
* @param {Object} fabricOptions fabric图层选项
1818
*/
1919
constructor(map, fabricClass, fabricOptions) {
2020
const m_fabricOptions = fabricOptions || {};

‎src/mapboxgl/overlay/fabric/PlotMapCoordSys.js‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* @Author: zk
44
* @Date: 2022-04-26 09:05:34
55
* @LastEditors: Do not edit
6-
* @LastEditTime: 2022-04-26 14:49:40
6+
* @LastEditTime: 2022-05-11 13:53:18
77
*/
88

99
/**
@@ -45,4 +45,18 @@ PlotMapCoordSys.prototype.pointToData = function pointToData(pt) {
4545
PlotMapCoordSys.prototype.getScale = function getScale() {
4646
const n=this.m_mapboxMap.getZoom()
4747
return 256* Math.pow(2,n);
48-
};
48+
};
49+
50+
/**
51+
* @description: 获取地图边界
52+
* @return {Array<Array<number>>} 边界
53+
*/
54+
PlotMapCoordSys.prototype.getBounds= function getBounds(){
55+
/**
56+
* toArray方法
57+
* var llb = new mapboxgl.LngLatBounds([-73.9876, 40.7661], [-73.9397, 40.8002]);
58+
llb.toArray(); // = [[-73.9876, 40.7661], [-73.9397, 40.8002]]
59+
*/
60+
const lnglatBounds= this.m_mapboxMap.getBounds().toArray()
61+
return lnglatBounds
62+
}

‎src/service/2DPlot/Draw/DrawPoint2D.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* @Author: zk
44
* @Date: 2021-11-17 13:54:10
55
* @LastEditors: Do not edit
6-
* @LastEditTime: 2022-05-10 16:57:02
6+
* @LastEditTime: 2022-05-11 19:14:48
77
*/
88
import DrawObject from "../../PlotBase/Draw/DrawObject";
99
import Point from "../../PlotUtilBase/Geometry/Point";
@@ -25,7 +25,7 @@ export default class DrawPoint2D extends DrawObject {
2525
}
2626

2727
removeHooks() {
28-
this.m_fabricCanvas.interactive = true;
28+
this.m_fabricCanvas.interactive = false;
2929
this.m_fabricCanvas.off("mouse:up", this.onMouseUp);
3030
super.removeHooks();
3131
}

‎src/service/2DPlot/PlotCanvas.js‎

Lines changed: 118 additions & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -1,188 +1,142 @@
11
/*
2-
* @Description:
2+
* @Description: plotLayer
33
* @Author: zk
4-
* @Date: 2021-11-15 17:47:45
4+
* @Date: 2022-05-11 19:05:03
55
* @LastEditors: Do not edit
6-
* @LastEditTime: 2022-05-10 17:05:14
6+
* @LastEditTime: 2022-05-11 20:46:18
77
*/
8-
import { fabric } from "fabric";
9-
import {DrawPlotObjectFactory2D} from "./Draw/DrawPlotObjectFactory2D";
10-
import {PlotObjectFactory} from "./Shapes/PlotObjectFactory";
11-
import SymbolManager from "../PlotBase/SymbolManager/SymbolManager";
12-
import FabricLineUtil from "./EditTool/FabricLineUtil";
13-
14-
export const PlotCanvas = fabric.util.createClass(fabric.Canvas, {
8+
import { DrawPlotObjectFactory2D } from './Draw/DrawPlotObjectFactory2D';
9+
import { PlotObjectFactory } from './Shapes/PlotObjectFactory';
10+
import { createGuid } from "../PlotUtilBase/Util/Guid";
11+
import SymbolManager from '../PlotBase/SymbolManager/SymbolManager';
12+
13+
export default class PlotCanvas {
14+
constructor() {
15+
// 标绘对象
16+
this.m_plotObjects = [];
17+
// fabricCanvas
18+
this._fabricCanvas=null
19+
// uuid
20+
this._layerId= createGuid()
21+
}
1522

16-
m_CoordSys: null,
17-
selection: false,
23+
/**
24+
* set given CoordSystem on PlotCanvas
25+
* @param {CoordSystem} coordSys CoordSystem to set
26+
* @return {void}
27+
*/
28+
setCoordSys(coordSys) {
29+
this.m_CoordSys = coordSys;
30+
}
1831

19-
/**
20-
* Constructor
21-
* @param {HTMLElement | String} el &lt;canvas> element to initialize instance on
22-
* @param {Object} [options] Options object
23-
* @return {Object} thisArg
24-
*/
25-
initialize: function (el, options) {
26-
this.callSuper("initialize", el, options);
27-
// 更新触发事件
28-
this.on("object:modified", (event) => {
29-
const target = event.target;
30-
if (target && target.getElement) {
31-
const ele = target.getElement();
32+
/**
33+
* returns current CoordSystem
34+
* @return {CoordSystem} current CoordSystem
35+
*/
36+
getCoordSys() {
37+
return this.m_CoordSys;
38+
}
3239

33-
if (event.action === "rotate") {
34-
if (ele.tranAngle || ele.tranAngle === 0) {
35-
ele.tranAngle = target.angle;
36-
}
40+
DrawSymbol(symbol) {
41+
if (this.drawTool) {
42+
this.drawTool.disable();
3743
}
38-
if (
39-
event.action === "scale" ||
40-
event.action === "scaleX" ||
41-
event.action === "scaleY"
42-
) {
43-
if (ele.setTranSize) {
44-
ele.setTranSize(target.scaleX, target.scaleY);
45-
}
44+
this.drawTool = DrawPlotObjectFactory2D.createInstance(symbol.type, this, symbol);
45+
if (this.drawTool) {
46+
this.drawTool.enable();
4647
}
47-
}
48-
});
49-
// 修改lineUtil
50-
new FabricLineUtil(this)
51-
},
52-
/**
53-
* set given CoordSystem on PlotCanvas
54-
* @param {CoordSystem} coordSys CoordSystem to set
55-
* @return {void}
56-
*/
57-
setCoordSys: function setCoordSys(coordSys) {
58-
this.m_CoordSys = coordSys;
59-
},
60-
/**
61-
* returns current CoordSystem
62-
* @return {CoordSystem} current CoordSystem
63-
*/
64-
getCoordSys: function getCoordSys() {
65-
return this.m_CoordSys;
66-
},
67-
68-
DrawSymbol: function DrawSymbol(symbol) {
69-
if (this.drawTool) {
70-
this.drawTool.disable();
48+
return this.drawTool;
7149
}
72-
this.drawTool = DrawPlotObjectFactory2D.createInstance(
73-
symbol.type,
74-
this,
75-
symbol
76-
);
77-
if (this.drawTool) {
78-
this.drawTool.enable();
79-
}
80-
return this.drawTool;
81-
},
82-
addPlotObjectBy3DPlotObj(plotObj3D) {
83-
const element = plotObj3D.getElement();
84-
85-
const plotObj = PlotObjectFactory.createInstance(element.type, {
86-
element: element,
87-
positions: element.positions,
88-
canvas: this,
89-
});
90-
91-
this.add(plotObj);
92-
return plotObj;
93-
},
50+
addPlotObjectBy3DPlotObj(plotObj3D) {
51+
const element = plotObj3D.getElement();
9452

95-
/**
96-
* @description: 根据uid获取对象
97-
* @param {*} uid
98-
* @return {*}
99-
*/
100-
getPlotObjectByUid(uid) {
101-
let t;
102-
this.forEachObject((s) => {
103-
const elem = s.getElement();
104-
if (elem && elem.getFeatureId() === uid) {
105-
t = s;
106-
}
107-
});
108-
return t;
109-
},
53+
const plotObj = PlotObjectFactory.createInstance(element.type, {
54+
element: element,
55+
positions: element.positions,
56+
canvas: this
57+
});
11058

111-
toGeoJSON: function toGeoJSON() {
112-
const base = {
113-
type: "FeatureCollection",
114-
features: [],
115-
};
116-
this.forEachObject((s) => {
117-
if (s.toGeoJSON) {
118-
base.features.push(s.toGeoJSON());
119-
}
120-
});
121-
return base;
122-
},
123-
// eslint-disable-next-line no-unused-vars
124-
fromGeoJSON: function fromGeoJSON(geoJson) {
125-
if (geoJson.type === "FeatureCollection") {
126-
const { features } = geoJson;
127-
features.forEach((s) => {
128-
this.addGeoJSONObject(s);
129-
});
130-
} else {
131-
// eslint-disable-next-line no-new
132-
new Error("GeoJSON类型错误，传入值非要素集！");
59+
this.add(plotObj);
60+
return plotObj;
61+
}
62+
add(plotObj) {
63+
this.m_plotObjects.push(plotObj);
64+
if(this._fabricCanvas){
65+
this._fabricCanvas.add(plotObj)
66+
}
13367
}
134-
},
135-
async addGeoJSONObject(geoFeature) {
136-
// 1、element
137-
const id = geoFeature.properties.symbolId;
138-
const symbolManager = SymbolManager.instance;
139-
140-
const leaf = symbolManager.getLeafByID(id);
141-
142-
const element =await leaf.getElement()
143-
const plotObj = PlotObjectFactory.createInstance(element.type, {
144-
element,
145-
positions: element.positions,
146-
canvas: this,
147-
});
14868

149-
plotObj.fromGeoJSON(geoFeature);
69+
/**
70+
* @description: 根据uid获取对象
71+
* @param {*} uid
72+
* @return {*}
73+
*/
74+
getPlotObjectByUid(uid) {
75+
let t;
76+
this.m_plotObjects.forEach((s) => {
77+
const elem = s.getElement();
78+
if (elem && elem.getFeatureId() === uid) {
79+
t = s;
80+
}
81+
});
82+
return t;
83+
}
15084

151-
this.add(plotObj);
152-
},
85+
toGeoJSON() {
86+
const base = {
87+
type: 'FeatureCollection',
88+
features: []
89+
};
90+
this.m_plotObjects.forEach((s) => {
91+
if (s.toGeoJSON) {
92+
base.features.push(s.toGeoJSON());
93+
}
94+
});
95+
return base;
96+
}
97+
// eslint-disable-next-line no-unused-vars
98+
fromGeoJSON(geoJson) {
99+
if (geoJson.type === 'FeatureCollection') {
100+
const { features } = geoJson;
101+
features.forEach((s) => {
102+
this.addGeoJSONObject(s);
103+
});
104+
} else {
105+
// eslint-disable-next-line no-new
106+
new Error('GeoJSON类型错误，传入值非要素集！');
107+
}
108+
}
153109

110+
async addGeoJSONObject(geoFeature) {
111+
// 1、element
112+
const id = geoFeature.properties.symbolId;
113+
const symbolManager = SymbolManager.instance;
154114

155-
/*
156-
tip:改写方法
157-
修改宽度和高度并刷新,原有方法 setDimensions设置高宽时会触发 requestRenderAll()
158-
在二三维联动时三维会频繁发送事件，二维界面会出现闪烁，因此改写为立即触发render
159-
*/
160-
setCanvasDimensionsSize: function (dimensions, options) {
161-
var cssValue;
115+
const leaf = symbolManager.getLeafByID(id);
162116

163-
options = options || {};
117+
const element = await leaf.getElement();
118+
const plotObj = PlotObjectFactory.createInstance(element.type, {
119+
element,
120+
positions: element.positions,
121+
canvas: this
122+
});
164123

165-
for (var prop in dimensions) {
166-
cssValue = dimensions[prop];
124+
plotObj.fromGeoJSON(geoFeature);
167125

168-
if (!options.cssOnly) {
169-
this._setBackstoreDimension(prop, dimensions[prop]);
170-
cssValue += "px";
171-
this.hasLostContext = true;
172-
}
126+
this.add(plotObj);
127+
}
173128

174-
if (!options.backstoreOnly) {
175-
this._setCssDimension(prop, cssValue);
176-
}
129+
setFabricCanvas(fabricCanvas){
130+
this._fabricCanvas=fabricCanvas
177131
}
178-
if (this._isCurrentlyDrawing) {
179-
this.freeDrawingBrush && this.freeDrawingBrush._setBrushStyles();
132+
getFabricCanvas(){
133+
return this._fabricCanvas
180134
}
181-
this._initRetinaScaling();
182-
this.calcOffset();
183-
184-
return this;
185-
},
186-
});
187135

188-
fabric.PlotCanvas = PlotCanvas;
136+
getPlotObjects(){
137+
return this.m_plotObjects
138+
}
139+
getLayerId(){
140+
return this._layerId
141+
}
142+
}

0 commit comments

Comments
 (0)