MapView.js 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. /*
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. var echarts = require("../../echarts");
  20. var zrUtil = require("zrender/lib/core/util");
  21. var graphic = require("../../util/graphic");
  22. var MapDraw = require("../../component/helper/MapDraw");
  23. /*
  24. * Licensed to the Apache Software Foundation (ASF) under one
  25. * or more contributor license agreements. See the NOTICE file
  26. * distributed with this work for additional information
  27. * regarding copyright ownership. The ASF licenses this file
  28. * to you under the Apache License, Version 2.0 (the
  29. * "License"); you may not use this file except in compliance
  30. * with the License. You may obtain a copy of the License at
  31. *
  32. * http://www.apache.org/licenses/LICENSE-2.0
  33. *
  34. * Unless required by applicable law or agreed to in writing,
  35. * software distributed under the License is distributed on an
  36. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  37. * KIND, either express or implied. See the License for the
  38. * specific language governing permissions and limitations
  39. * under the License.
  40. */
  41. var HIGH_DOWN_PROP = '__seriesMapHighDown';
  42. var RECORD_VERSION_PROP = '__seriesMapCallKey';
  43. var _default = echarts.extendChartView({
  44. type: 'map',
  45. render: function (mapModel, ecModel, api, payload) {
  46. // Not render if it is an toggleSelect action from self
  47. if (payload && payload.type === 'mapToggleSelect' && payload.from === this.uid) {
  48. return;
  49. }
  50. var group = this.group;
  51. group.removeAll();
  52. if (mapModel.getHostGeoModel()) {
  53. return;
  54. } // Not update map if it is an roam action from self
  55. if (!(payload && payload.type === 'geoRoam' && payload.componentType === 'series' && payload.seriesId === mapModel.id)) {
  56. if (mapModel.needsDrawMap) {
  57. var mapDraw = this._mapDraw || new MapDraw(api, true);
  58. group.add(mapDraw.group);
  59. mapDraw.draw(mapModel, ecModel, api, this, payload);
  60. this._mapDraw = mapDraw;
  61. } else {
  62. // Remove drawed map
  63. this._mapDraw && this._mapDraw.remove();
  64. this._mapDraw = null;
  65. }
  66. } else {
  67. var mapDraw = this._mapDraw;
  68. mapDraw && group.add(mapDraw.group);
  69. }
  70. mapModel.get('showLegendSymbol') && ecModel.getComponent('legend') && this._renderSymbols(mapModel, ecModel, api);
  71. },
  72. remove: function () {
  73. this._mapDraw && this._mapDraw.remove();
  74. this._mapDraw = null;
  75. this.group.removeAll();
  76. },
  77. dispose: function () {
  78. this._mapDraw && this._mapDraw.remove();
  79. this._mapDraw = null;
  80. },
  81. _renderSymbols: function (mapModel, ecModel, api) {
  82. var originalData = mapModel.originalData;
  83. var group = this.group;
  84. originalData.each(originalData.mapDimension('value'), function (value, originalDataIndex) {
  85. if (isNaN(value)) {
  86. return;
  87. }
  88. var layout = originalData.getItemLayout(originalDataIndex);
  89. if (!layout || !layout.point) {
  90. // Not exists in map
  91. return;
  92. }
  93. var point = layout.point;
  94. var offset = layout.offset;
  95. var circle = new graphic.Circle({
  96. style: {
  97. // Because the special of map draw.
  98. // Which needs statistic of multiple series and draw on one map.
  99. // And each series also need a symbol with legend color
  100. //
  101. // Layout and visual are put one the different data
  102. fill: mapModel.getData().getVisual('color')
  103. },
  104. shape: {
  105. cx: point[0] + offset * 9,
  106. cy: point[1],
  107. r: 3
  108. },
  109. silent: true,
  110. // Do not overlap the first series, on which labels are displayed.
  111. z2: 8 + (!offset ? graphic.Z2_EMPHASIS_LIFT + 1 : 0)
  112. }); // Only the series that has the first value on the same region is in charge of rendering the label.
  113. // But consider the case:
  114. // series: [
  115. // {id: 'X', type: 'map', map: 'm', {data: [{name: 'A', value: 11}, {name: 'B', {value: 22}]},
  116. // {id: 'Y', type: 'map', map: 'm', {data: [{name: 'A', value: 21}, {name: 'C', {value: 33}]}
  117. // ]
  118. // The offset `0` of item `A` is at series `X`, but of item `C` is at series `Y`.
  119. // For backward compatibility, we follow the rule that render label `A` by the
  120. // settings on series `X` but render label `C` by the settings on series `Y`.
  121. if (!offset) {
  122. var fullData = mapModel.mainSeries.getData();
  123. var name = originalData.getName(originalDataIndex);
  124. var fullIndex = fullData.indexOfName(name);
  125. var itemModel = originalData.getItemModel(originalDataIndex);
  126. var labelModel = itemModel.getModel('label');
  127. var hoverLabelModel = itemModel.getModel('emphasis.label');
  128. var regionGroup = fullData.getItemGraphicEl(fullIndex); // `getFormattedLabel` needs to use `getData` inside. Here
  129. // `mapModel.getData()` is shallow cloned from `mainSeries.getData()`.
  130. // FIXME
  131. // If this is not the `mainSeries`, the item model (like label formatter)
  132. // set on original data item will never get. But it has been working
  133. // like that from the begining, and this scenario is rarely encountered.
  134. // So it won't be fixed until have to.
  135. var normalText = zrUtil.retrieve2(mapModel.getFormattedLabel(fullIndex, 'normal'), name);
  136. var emphasisText = zrUtil.retrieve2(mapModel.getFormattedLabel(fullIndex, 'emphasis'), normalText);
  137. var highDownRecord = regionGroup[HIGH_DOWN_PROP];
  138. var recordVersion = Math.random(); // Prevent from register listeners duplicatedly when roaming.
  139. if (!highDownRecord) {
  140. highDownRecord = regionGroup[HIGH_DOWN_PROP] = {};
  141. var onEmphasis = zrUtil.curry(onRegionHighDown, true);
  142. var onNormal = zrUtil.curry(onRegionHighDown, false);
  143. regionGroup.on('mouseover', onEmphasis).on('mouseout', onNormal).on('emphasis', onEmphasis).on('normal', onNormal);
  144. } // Prevent removed regions effect current grapics.
  145. regionGroup[RECORD_VERSION_PROP] = recordVersion;
  146. zrUtil.extend(highDownRecord, {
  147. recordVersion: recordVersion,
  148. circle: circle,
  149. labelModel: labelModel,
  150. hoverLabelModel: hoverLabelModel,
  151. emphasisText: emphasisText,
  152. normalText: normalText
  153. }); // FIXME
  154. // Consider set option when emphasis.
  155. enterRegionHighDown(highDownRecord, false);
  156. }
  157. group.add(circle);
  158. });
  159. }
  160. });
  161. function onRegionHighDown(toHighOrDown) {
  162. var highDownRecord = this[HIGH_DOWN_PROP];
  163. if (highDownRecord && highDownRecord.recordVersion === this[RECORD_VERSION_PROP]) {
  164. enterRegionHighDown(highDownRecord, toHighOrDown);
  165. }
  166. }
  167. function enterRegionHighDown(highDownRecord, toHighOrDown) {
  168. var circle = highDownRecord.circle;
  169. var labelModel = highDownRecord.labelModel;
  170. var hoverLabelModel = highDownRecord.hoverLabelModel;
  171. var emphasisText = highDownRecord.emphasisText;
  172. var normalText = highDownRecord.normalText;
  173. if (toHighOrDown) {
  174. circle.style.extendFrom(graphic.setTextStyle({}, hoverLabelModel, {
  175. text: hoverLabelModel.get('show') ? emphasisText : null
  176. }, {
  177. isRectText: true,
  178. useInsideStyle: false
  179. }, true)); // Make label upper than others if overlaps.
  180. circle.__mapOriginalZ2 = circle.z2;
  181. circle.z2 += graphic.Z2_EMPHASIS_LIFT;
  182. } else {
  183. graphic.setTextStyle(circle.style, labelModel, {
  184. text: labelModel.get('show') ? normalText : null,
  185. textPosition: labelModel.getShallow('position') || 'bottom'
  186. }, {
  187. isRectText: true,
  188. useInsideStyle: false
  189. }); // Trigger normalize style like padding.
  190. circle.dirty(false);
  191. if (circle.__mapOriginalZ2 != null) {
  192. circle.z2 = circle.__mapOriginalZ2;
  193. circle.__mapOriginalZ2 = null;
  194. }
  195. }
  196. }
  197. module.exports = _default;