|
1 |
| -/* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved. |
2 |
| - * This program are made available under the terms of the Apache License, Version 2.0 |
3 |
| - * which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html.*/ |
4 |
| -import L from "leaflet"; |
5 |
| -import '../core/Base'; |
6 |
| -import { |
7 |
| - DataFlowService |
8 |
| -} from "../services/DataFlowService"; |
9 |
| -import { |
10 |
| - MapvRenderer |
11 |
| -} from './dataflow/MapvRenderer'; |
12 |
| -import { |
13 |
| - NormalRenderer |
14 |
| -} from './dataflow/NormalRenderer'; |
15 |
| - |
16 |
| -/** |
17 |
| - * @class DataFlowLayer |
18 |
| - * @deprecatedclassinstance L.supermap.dataFlowLayer |
19 |
| - * @classdesc 数据流图层源。订阅SuperMap iServer 数据流服务并上图。订阅得到的数据会根据 `options.idField` 自动更新。 |
20 |
| - * @category iServer DataFlow |
21 |
| - * @extends {L.LayerGroup} |
22 |
| - * @param {string} url - 服务地址。 |
23 |
| - * @param {Object} options - 参数。 |
24 |
| - * @param {Object} [options.render='normal'] - 绘制方式。可选值为'normal','mapv'。 |
25 |
| - 'normal' 表示以 {( {@link L.LatLng}|{@link L.Polyline}|{@link L.Polygon}|{@link L.Marker} )} 方式绘制数据流。'mapv' 表示以 {@link mapVLayer} 方式绘制实时数据。 |
26 |
| - * @param {GeoJSONObject} [options.geometry] - 指定几何范围,该范围内的要素才能被订阅。 |
27 |
| - * @param {Object} [options.prjCoordSys] - 投影坐标对象。 |
28 |
| - * @param {string} [options.excludeField] - 排除字段。 |
29 |
| - * @param {string} [options.idField='id'] - 要素属性中表示唯一标识的字段。 |
30 |
| - * @param {function} [options.pointToLayer] - 定义点要素如何绘制在地图上。 |
31 |
| - `function(geoJsonPoint, latlng) { |
32 |
| - return L.marker(latlng); |
33 |
| - }` |
34 |
| - * @param {function} [options.style] - 定义点、线、面要素样式。参数为{@link L.Path-option}。</br> |
35 |
| - `function (feature) { |
36 |
| - return { |
37 |
| - fillColor: "red", |
38 |
| - fillOpacity: 1, |
39 |
| - radius: 6, |
40 |
| - weight: 0 |
41 |
| - }; |
42 |
| - }` |
43 |
| - * @param {function|number} [options.deg] - 定义图标的旋转角度。`options.render` 为 `mapv` 时有效。</br> |
44 |
| - `function (feature,latlng) { |
45 |
| - return feature.properties['rotate']; |
46 |
| - }` |
47 |
| - * @fires DataFlowLayer#subscribesucceeded |
48 |
| - * @fires DataFlowLayer#subscribefailed |
49 |
| - * @fires DataFlowLayer#setfilterparamsucceeded |
50 |
| - * @fires DataFlowLayer#dataupdated |
51 |
| - * @usage |
52 |
| - */ |
53 |
| - |
54 |
| -export var DataFlowLayer = L.LayerGroup.extend({ |
55 |
| - |
56 |
| - options: { |
57 |
| - geometry: null, |
58 |
| - prjCoordSys: null, |
59 |
| - excludeField: null, |
60 |
| - idField: "id", |
61 |
| - render: 'normal' |
62 |
| - }, |
63 |
| - |
64 |
| - initialize: function (url, options) { |
65 |
| - options = options || {}; |
66 |
| - L.Util.setOptions(this, options); |
67 |
| - this.url = url; |
68 |
| - this._layers = {}; |
69 |
| - this.dataService = new DataFlowService(this.url, { |
70 |
| - geometry: this.options.geometry, |
71 |
| - prjCoordSys: this.options.prjCoordSys, |
72 |
| - excludeField: this.options.excludeField |
73 |
| - }) |
74 |
| - |
75 |
| - }, |
76 |
| - /** |
77 |
| - * @private |
78 |
| - * @function DataFlowLayer.prototype.onAdd |
79 |
| - * @description 添加地图。 |
80 |
| - * @param {L.Map} map - Leaflet Map 对象。 |
81 |
| - */ |
82 |
| - onAdd: function (map) { // eslint-disable-line no-unused-vars |
83 |
| - this.dataService.initSubscribe(); |
84 |
| - /** |
85 |
| - * @event DataFlowLayer#subscribesucceeded |
86 |
| - * @description 初始化成功后触发。 |
87 |
| - * @property {Object} e - 事件对象。 |
88 |
| - */ |
89 |
| - this.dataService.on('subscribeSocketConnected', (e) => this.fire("subscribesucceeded", e)); |
90 |
| - |
91 |
| - /** |
92 |
| - * @event DataFlowLayer#subscribefailed |
93 |
| - * @description 初始化失败后触发。 |
94 |
| - * @property {Object} e - 事件对象。 |
95 |
| - */ |
96 |
| - this.dataService.on('subscribeSocketError', (e) => this.fire("subscribefailed", e)) |
97 |
| - this.dataService.on('messageSucceeded', (msg) => this._onMessageSuccessed(msg)); |
98 |
| - |
99 |
| - /** |
100 |
| - * @event DataFlowLayer#setfilterparamsucceeded |
101 |
| - * @description 过滤参数设置成功后触发。 |
102 |
| - * @property {Object} e - 事件对象。 |
103 |
| - */ |
104 |
| - this.dataService.on('setFilterParamSucceeded', (msg) => this.fire("setfilterparamsucceeded", msg)); |
105 |
| - if (this.options.render === 'mapv') { |
106 |
| - this.addLayer(new MapvRenderer(this.url, this.options)); |
107 |
| - } else { |
108 |
| - this.addLayer(new NormalRenderer(this.url, this.options)); |
109 |
| - } |
110 |
| - L.LayerGroup.prototype.onAdd.call(this, map); |
111 |
| - }, |
112 |
| - /** |
113 |
| - * @private |
114 |
| - * @function DataFlowLayer.prototype.onRemove |
115 |
| - * @description 删除指定地图。 |
116 |
| - * @param {L.Map} map - Leaflet Map 对象。 |
117 |
| - */ |
118 |
| - onRemove: function (map) { // eslint-disable-line no-unused-vars |
119 |
| - L.LayerGroup.prototype.onRemove.call(this, map); |
120 |
| - this.dataService && this.dataService.unSubscribe(); |
121 |
| - }, |
122 |
| - /** |
123 |
| - * @function DataFlowLayer.prototype.setExcludeField |
124 |
| - * @description 设置唯一字段。 |
125 |
| - * @param {string} excludeField - 唯一字段。 |
126 |
| - */ |
127 |
| - setExcludeField: function (excludeField) { |
128 |
| - this.dataService.setExcludeField(excludeField); |
129 |
| - this.options.excludeField = excludeField; |
130 |
| - return this; |
131 |
| - }, |
132 |
| - |
133 |
| - /** |
134 |
| - * @function DataFlowLayer.prototype.setGeometry |
135 |
| - * @description 设置集合要素。 |
136 |
| - * @param {GeoJSONObject} geometry - 待设置的 GeoJSON 几何要素对象。 |
137 |
| - */ |
138 |
| - setGeometry: function (geometry) { |
139 |
| - this.dataService.setGeometry(geometry); |
140 |
| - this.options.geometry = geometry; |
141 |
| - return this; |
142 |
| - }, |
143 |
| - _onMessageSuccessed: function (msg) { |
144 |
| - this.getLayers().map((layer) => { |
145 |
| - if (layer.onMessageSuccessed) { |
146 |
| - layer.onMessageSuccessed(msg); |
147 |
| - /** |
148 |
| - * @description 图层数据更新成功后触发。 |
149 |
| - * @event DataFlowLayer#dataupdated |
150 |
| - * @property {Object} layer - 更新数据成功的图层。 |
151 |
| - * @property {Object} data - 更新的要素。 |
152 |
| - */ |
153 |
| - this.fire("dataupdated", { |
154 |
| - layer: layer, |
155 |
| - data: msg.featureResult |
156 |
| - }); |
157 |
| - } |
158 |
| - return layer; |
159 |
| - }) |
160 |
| - } |
161 |
| - |
162 |
| -}); |
163 |
| -export var dataFlowLayer = function (url, options) { |
164 |
| - return new DataFlowLayer(url, options); |
165 |
| -}; |
| 1 | +/* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved. |
| 2 | + * This program are made available under the terms of the Apache License, Version 2.0 |
| 3 | + * which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html.*/ |
| 4 | +import L from "leaflet"; |
| 5 | +import '../core/Base'; |
| 6 | +import { |
| 7 | + DataFlowService |
| 8 | +} from "../services/DataFlowService"; |
| 9 | +import { |
| 10 | + MapvRenderer |
| 11 | +} from './dataflow/MapvRenderer'; |
| 12 | +import { |
| 13 | + NormalRenderer |
| 14 | +} from './dataflow/NormalRenderer'; |
| 15 | + |
| 16 | +/** |
| 17 | + * @class DataFlowLayer |
| 18 | + * @deprecatedclassinstance L.supermap.dataFlowLayer |
| 19 | + * @classdesc 数据流图层源。订阅SuperMap iServer 数据流服务并上图。订阅得到的数据会根据 `options.idField` 自动更新。 |
| 20 | + * @category iServer DataFlow |
| 21 | + * @extends {L.LayerGroup} |
| 22 | + * @param {string} url - 服务地址。 |
| 23 | + * @param {Object} options - 参数。 |
| 24 | + * @param {Object} [options.render='normal'] - 绘制方式。可选值为'normal','mapv'。 |
| 25 | + 'normal' 表示以 {( {@link L.LatLng}|{@link L.Polyline}|{@link L.Polygon}|{@link L.Marker} )} 方式绘制数据流。'mapv' 表示以 {@link MapVLayer} 方式绘制实时数据。 |
| 26 | + * @param {GeoJSONObject} [options.geometry] - 指定几何范围,该范围内的要素才能被订阅。 |
| 27 | + * @param {Object} [options.prjCoordSys] - 投影坐标对象。 |
| 28 | + * @param {string} [options.excludeField] - 排除字段。 |
| 29 | + * @param {string} [options.idField='id'] - 要素属性中表示唯一标识的字段。 |
| 30 | + * @param {function} [options.pointToLayer] - 定义点要素如何绘制在地图上。 |
| 31 | + `function(geoJsonPoint, latlng) { |
| 32 | + return L.marker(latlng); |
| 33 | + }` |
| 34 | + * @param {function} [options.style] - 定义点、线、面要素样式。参数为{@link L.Path-option}。</br> |
| 35 | + `function (feature) { |
| 36 | + return { |
| 37 | + fillColor: "red", |
| 38 | + fillOpacity: 1, |
| 39 | + radius: 6, |
| 40 | + weight: 0 |
| 41 | + }; |
| 42 | + }` |
| 43 | + * @param {function|number} [options.deg] - 定义图标的旋转角度。`options.render` 为 `mapv` 时有效。</br> |
| 44 | + `function (feature,latlng) { |
| 45 | + return feature.properties['rotate']; |
| 46 | + }` |
| 47 | + * @fires DataFlowLayer#subscribesucceeded |
| 48 | + * @fires DataFlowLayer#subscribefailed |
| 49 | + * @fires DataFlowLayer#setfilterparamsucceeded |
| 50 | + * @fires DataFlowLayer#dataupdated |
| 51 | + * @usage |
| 52 | + */ |
| 53 | + |
| 54 | +export var DataFlowLayer = L.LayerGroup.extend({ |
| 55 | + |
| 56 | + options: { |
| 57 | + geometry: null, |
| 58 | + prjCoordSys: null, |
| 59 | + excludeField: null, |
| 60 | + idField: "id", |
| 61 | + render: 'normal' |
| 62 | + }, |
| 63 | + |
| 64 | + initialize: function (url, options) { |
| 65 | + options = options || {}; |
| 66 | + L.Util.setOptions(this, options); |
| 67 | + this.url = url; |
| 68 | + this._layers = {}; |
| 69 | + this.dataService = new DataFlowService(this.url, { |
| 70 | + geometry: this.options.geometry, |
| 71 | + prjCoordSys: this.options.prjCoordSys, |
| 72 | + excludeField: this.options.excludeField |
| 73 | + }) |
| 74 | + |
| 75 | + }, |
| 76 | + /** |
| 77 | + * @private |
| 78 | + * @function DataFlowLayer.prototype.onAdd |
| 79 | + * @description 添加地图。 |
| 80 | + * @param {L.Map} map - Leaflet Map 对象。 |
| 81 | + */ |
| 82 | + onAdd: function (map) { // eslint-disable-line no-unused-vars |
| 83 | + this.dataService.initSubscribe(); |
| 84 | + /** |
| 85 | + * @event DataFlowLayer#subscribesucceeded |
| 86 | + * @description 初始化成功后触发。 |
| 87 | + * @property {Object} e - 事件对象。 |
| 88 | + */ |
| 89 | + this.dataService.on('subscribeSocketConnected', (e) => this.fire("subscribesucceeded", e)); |
| 90 | + |
| 91 | + /** |
| 92 | + * @event DataFlowLayer#subscribefailed |
| 93 | + * @description 初始化失败后触发。 |
| 94 | + * @property {Object} e - 事件对象。 |
| 95 | + */ |
| 96 | + this.dataService.on('subscribeSocketError', (e) => this.fire("subscribefailed", e)) |
| 97 | + this.dataService.on('messageSucceeded', (msg) => this._onMessageSuccessed(msg)); |
| 98 | + |
| 99 | + /** |
| 100 | + * @event DataFlowLayer#setfilterparamsucceeded |
| 101 | + * @description 过滤参数设置成功后触发。 |
| 102 | + * @property {Object} e - 事件对象。 |
| 103 | + */ |
| 104 | + this.dataService.on('setFilterParamSucceeded', (msg) => this.fire("setfilterparamsucceeded", msg)); |
| 105 | + if (this.options.render === 'mapv') { |
| 106 | + this.addLayer(new MapvRenderer(this.url, this.options)); |
| 107 | + } else { |
| 108 | + this.addLayer(new NormalRenderer(this.url, this.options)); |
| 109 | + } |
| 110 | + L.LayerGroup.prototype.onAdd.call(this, map); |
| 111 | + }, |
| 112 | + /** |
| 113 | + * @private |
| 114 | + * @function DataFlowLayer.prototype.onRemove |
| 115 | + * @description 删除指定地图。 |
| 116 | + * @param {L.Map} map - Leaflet Map 对象。 |
| 117 | + */ |
| 118 | + onRemove: function (map) { // eslint-disable-line no-unused-vars |
| 119 | + L.LayerGroup.prototype.onRemove.call(this, map); |
| 120 | + this.dataService && this.dataService.unSubscribe(); |
| 121 | + }, |
| 122 | + /** |
| 123 | + * @function DataFlowLayer.prototype.setExcludeField |
| 124 | + * @description 设置唯一字段。 |
| 125 | + * @param {string} excludeField - 唯一字段。 |
| 126 | + */ |
| 127 | + setExcludeField: function (excludeField) { |
| 128 | + this.dataService.setExcludeField(excludeField); |
| 129 | + this.options.excludeField = excludeField; |
| 130 | + return this; |
| 131 | + }, |
| 132 | + |
| 133 | + /** |
| 134 | + * @function DataFlowLayer.prototype.setGeometry |
| 135 | + * @description 设置集合要素。 |
| 136 | + * @param {GeoJSONObject} geometry - 待设置的 GeoJSON 几何要素对象。 |
| 137 | + */ |
| 138 | + setGeometry: function (geometry) { |
| 139 | + this.dataService.setGeometry(geometry); |
| 140 | + this.options.geometry = geometry; |
| 141 | + return this; |
| 142 | + }, |
| 143 | + _onMessageSuccessed: function (msg) { |
| 144 | + this.getLayers().map((layer) => { |
| 145 | + if (layer.onMessageSuccessed) { |
| 146 | + layer.onMessageSuccessed(msg); |
| 147 | + /** |
| 148 | + * @description 图层数据更新成功后触发。 |
| 149 | + * @event DataFlowLayer#dataupdated |
| 150 | + * @property {Object} layer - 更新数据成功的图层。 |
| 151 | + * @property {Object} data - 更新的要素。 |
| 152 | + */ |
| 153 | + this.fire("dataupdated", { |
| 154 | + layer: layer, |
| 155 | + data: msg.featureResult |
| 156 | + }); |
| 157 | + } |
| 158 | + return layer; |
| 159 | + }) |
| 160 | + } |
| 161 | + |
| 162 | +}); |
| 163 | +export var dataFlowLayer = function (url, options) { |
| 164 | + return new DataFlowLayer(url, options); |
| 165 | +}; |
0 commit comments