MapDraw.js 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674
  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. /**
  20. * AUTO-GENERATED FILE. DO NOT MODIFY.
  21. */
  22. /*
  23. * Licensed to the Apache Software Foundation (ASF) under one
  24. * or more contributor license agreements. See the NOTICE file
  25. * distributed with this work for additional information
  26. * regarding copyright ownership. The ASF licenses this file
  27. * to you under the Apache License, Version 2.0 (the
  28. * "License"); you may not use this file except in compliance
  29. * with the License. You may obtain a copy of the License at
  30. *
  31. * http://www.apache.org/licenses/LICENSE-2.0
  32. *
  33. * Unless required by applicable law or agreed to in writing,
  34. * software distributed under the License is distributed on an
  35. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  36. * KIND, either express or implied. See the License for the
  37. * specific language governing permissions and limitations
  38. * under the License.
  39. */
  40. import * as zrUtil from 'zrender/lib/core/util.js';
  41. import RoamController from './RoamController.js';
  42. import * as roamHelper from '../../component/helper/roamHelper.js';
  43. import { onIrrelevantElement } from '../../component/helper/cursorHelper.js';
  44. import * as graphic from '../../util/graphic.js';
  45. import { toggleHoverEmphasis, enableComponentHighDownFeatures, setDefaultStateProxy } from '../../util/states.js';
  46. import geoSourceManager from '../../coord/geo/geoSourceManager.js';
  47. import { getUID } from '../../util/component.js';
  48. import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle.js';
  49. import { getECData } from '../../util/innerStore.js';
  50. import { createOrUpdatePatternFromDecal } from '../../util/decal.js';
  51. import Displayable from 'zrender/lib/graphic/Displayable.js';
  52. import { makeInner } from '../../util/model.js';
  53. /**
  54. * Only these tags enable use `itemStyle` if they are named in SVG.
  55. * Other tags like <text> <tspan> <image> might not suitable for `itemStyle`.
  56. * They will not be considered to be styled until some requirements come.
  57. */
  58. var OPTION_STYLE_ENABLED_TAGS = ['rect', 'circle', 'line', 'ellipse', 'polygon', 'polyline', 'path'];
  59. var OPTION_STYLE_ENABLED_TAG_MAP = zrUtil.createHashMap(OPTION_STYLE_ENABLED_TAGS);
  60. var STATE_TRIGGER_TAG_MAP = zrUtil.createHashMap(OPTION_STYLE_ENABLED_TAGS.concat(['g']));
  61. var LABEL_HOST_MAP = zrUtil.createHashMap(OPTION_STYLE_ENABLED_TAGS.concat(['g']));
  62. var mapLabelRaw = makeInner();
  63. function getFixedItemStyle(model) {
  64. var itemStyle = model.getItemStyle();
  65. var areaColor = model.get('areaColor');
  66. // If user want the color not to be changed when hover,
  67. // they should both set areaColor and color to be null.
  68. if (areaColor != null) {
  69. itemStyle.fill = areaColor;
  70. }
  71. return itemStyle;
  72. }
  73. // Only stroke can be used for line.
  74. // Using fill in style if stroke not exits.
  75. // TODO Not sure yet. Perhaps a separate `lineStyle`?
  76. function fixLineStyle(styleHost) {
  77. var style = styleHost.style;
  78. if (style) {
  79. style.stroke = style.stroke || style.fill;
  80. style.fill = null;
  81. }
  82. }
  83. var MapDraw = /** @class */function () {
  84. function MapDraw(api) {
  85. var group = new graphic.Group();
  86. this.uid = getUID('ec_map_draw');
  87. this._controller = new RoamController(api.getZr());
  88. this._controllerHost = {
  89. target: group
  90. };
  91. this.group = group;
  92. group.add(this._regionsGroup = new graphic.Group());
  93. group.add(this._svgGroup = new graphic.Group());
  94. }
  95. MapDraw.prototype.draw = function (mapOrGeoModel, ecModel, api, fromView, payload) {
  96. var isGeo = mapOrGeoModel.mainType === 'geo';
  97. // Map series has data. GEO model that controlled by map series
  98. // will be assigned with map data. Other GEO model has no data.
  99. var data = mapOrGeoModel.getData && mapOrGeoModel.getData();
  100. isGeo && ecModel.eachComponent({
  101. mainType: 'series',
  102. subType: 'map'
  103. }, function (mapSeries) {
  104. if (!data && mapSeries.getHostGeoModel() === mapOrGeoModel) {
  105. data = mapSeries.getData();
  106. }
  107. });
  108. var geo = mapOrGeoModel.coordinateSystem;
  109. var regionsGroup = this._regionsGroup;
  110. var group = this.group;
  111. var transformInfo = geo.getTransformInfo();
  112. var transformInfoRaw = transformInfo.raw;
  113. var transformInfoRoam = transformInfo.roam;
  114. // No animation when first draw or in action
  115. var isFirstDraw = !regionsGroup.childAt(0) || payload;
  116. if (isFirstDraw) {
  117. group.x = transformInfoRoam.x;
  118. group.y = transformInfoRoam.y;
  119. group.scaleX = transformInfoRoam.scaleX;
  120. group.scaleY = transformInfoRoam.scaleY;
  121. group.dirty();
  122. } else {
  123. graphic.updateProps(group, transformInfoRoam, mapOrGeoModel);
  124. }
  125. var isVisualEncodedByVisualMap = data && data.getVisual('visualMeta') && data.getVisual('visualMeta').length > 0;
  126. var viewBuildCtx = {
  127. api: api,
  128. geo: geo,
  129. mapOrGeoModel: mapOrGeoModel,
  130. data: data,
  131. isVisualEncodedByVisualMap: isVisualEncodedByVisualMap,
  132. isGeo: isGeo,
  133. transformInfoRaw: transformInfoRaw
  134. };
  135. if (geo.resourceType === 'geoJSON') {
  136. this._buildGeoJSON(viewBuildCtx);
  137. } else if (geo.resourceType === 'geoSVG') {
  138. this._buildSVG(viewBuildCtx);
  139. }
  140. this._updateController(mapOrGeoModel, ecModel, api);
  141. this._updateMapSelectHandler(mapOrGeoModel, regionsGroup, api, fromView);
  142. };
  143. MapDraw.prototype._buildGeoJSON = function (viewBuildCtx) {
  144. var regionsGroupByName = this._regionsGroupByName = zrUtil.createHashMap();
  145. var regionsInfoByName = zrUtil.createHashMap();
  146. var regionsGroup = this._regionsGroup;
  147. var transformInfoRaw = viewBuildCtx.transformInfoRaw;
  148. var mapOrGeoModel = viewBuildCtx.mapOrGeoModel;
  149. var data = viewBuildCtx.data;
  150. var projection = viewBuildCtx.geo.projection;
  151. var projectionStream = projection && projection.stream;
  152. function transformPoint(point, project) {
  153. if (project) {
  154. // projection may return null point.
  155. point = project(point);
  156. }
  157. return point && [point[0] * transformInfoRaw.scaleX + transformInfoRaw.x, point[1] * transformInfoRaw.scaleY + transformInfoRaw.y];
  158. }
  159. ;
  160. function transformPolygonPoints(inPoints) {
  161. var outPoints = [];
  162. // If projectionStream is provided. Use it instead of single point project.
  163. var project = !projectionStream && projection && projection.project;
  164. for (var i = 0; i < inPoints.length; ++i) {
  165. var newPt = transformPoint(inPoints[i], project);
  166. newPt && outPoints.push(newPt);
  167. }
  168. return outPoints;
  169. }
  170. function getPolyShape(points) {
  171. return {
  172. shape: {
  173. points: transformPolygonPoints(points)
  174. }
  175. };
  176. }
  177. regionsGroup.removeAll();
  178. // Only when the resource is GeoJSON, there is `geo.regions`.
  179. zrUtil.each(viewBuildCtx.geo.regions, function (region) {
  180. var regionName = region.name;
  181. // Consider in GeoJson properties.name may be duplicated, for example,
  182. // there is multiple region named "United Kindom" or "France" (so many
  183. // colonies). And it is not appropriate to merge them in geo, which
  184. // will make them share the same label and bring trouble in label
  185. // location calculation.
  186. var regionGroup = regionsGroupByName.get(regionName);
  187. var _a = regionsInfoByName.get(regionName) || {},
  188. dataIdx = _a.dataIdx,
  189. regionModel = _a.regionModel;
  190. if (!regionGroup) {
  191. regionGroup = regionsGroupByName.set(regionName, new graphic.Group());
  192. regionsGroup.add(regionGroup);
  193. dataIdx = data ? data.indexOfName(regionName) : null;
  194. regionModel = viewBuildCtx.isGeo ? mapOrGeoModel.getRegionModel(regionName) : data ? data.getItemModel(dataIdx) : null;
  195. regionsInfoByName.set(regionName, {
  196. dataIdx: dataIdx,
  197. regionModel: regionModel
  198. });
  199. }
  200. var polygonSubpaths = [];
  201. var polylineSubpaths = [];
  202. zrUtil.each(region.geometries, function (geometry) {
  203. // Polygon and MultiPolygon
  204. if (geometry.type === 'polygon') {
  205. var polys = [geometry.exterior].concat(geometry.interiors || []);
  206. if (projectionStream) {
  207. polys = projectPolys(polys, projectionStream);
  208. }
  209. zrUtil.each(polys, function (poly) {
  210. polygonSubpaths.push(new graphic.Polygon(getPolyShape(poly)));
  211. });
  212. }
  213. // LineString and MultiLineString
  214. else {
  215. var points = geometry.points;
  216. if (projectionStream) {
  217. points = projectPolys(points, projectionStream, true);
  218. }
  219. zrUtil.each(points, function (points) {
  220. polylineSubpaths.push(new graphic.Polyline(getPolyShape(points)));
  221. });
  222. }
  223. });
  224. var centerPt = transformPoint(region.getCenter(), projection && projection.project);
  225. function createCompoundPath(subpaths, isLine) {
  226. if (!subpaths.length) {
  227. return;
  228. }
  229. var compoundPath = new graphic.CompoundPath({
  230. culling: true,
  231. segmentIgnoreThreshold: 1,
  232. shape: {
  233. paths: subpaths
  234. }
  235. });
  236. regionGroup.add(compoundPath);
  237. applyOptionStyleForRegion(viewBuildCtx, compoundPath, dataIdx, regionModel);
  238. resetLabelForRegion(viewBuildCtx, compoundPath, regionName, regionModel, mapOrGeoModel, dataIdx, centerPt);
  239. if (isLine) {
  240. fixLineStyle(compoundPath);
  241. zrUtil.each(compoundPath.states, fixLineStyle);
  242. }
  243. }
  244. createCompoundPath(polygonSubpaths);
  245. createCompoundPath(polylineSubpaths, true);
  246. });
  247. // Ensure children have been added to `regionGroup` before calling them.
  248. regionsGroupByName.each(function (regionGroup, regionName) {
  249. var _a = regionsInfoByName.get(regionName),
  250. dataIdx = _a.dataIdx,
  251. regionModel = _a.regionModel;
  252. resetEventTriggerForRegion(viewBuildCtx, regionGroup, regionName, regionModel, mapOrGeoModel, dataIdx);
  253. resetTooltipForRegion(viewBuildCtx, regionGroup, regionName, regionModel, mapOrGeoModel);
  254. resetStateTriggerForRegion(viewBuildCtx, regionGroup, regionName, regionModel, mapOrGeoModel);
  255. }, this);
  256. };
  257. MapDraw.prototype._buildSVG = function (viewBuildCtx) {
  258. var mapName = viewBuildCtx.geo.map;
  259. var transformInfoRaw = viewBuildCtx.transformInfoRaw;
  260. this._svgGroup.x = transformInfoRaw.x;
  261. this._svgGroup.y = transformInfoRaw.y;
  262. this._svgGroup.scaleX = transformInfoRaw.scaleX;
  263. this._svgGroup.scaleY = transformInfoRaw.scaleY;
  264. if (this._svgResourceChanged(mapName)) {
  265. this._freeSVG();
  266. this._useSVG(mapName);
  267. }
  268. var svgDispatcherMap = this._svgDispatcherMap = zrUtil.createHashMap();
  269. var focusSelf = false;
  270. zrUtil.each(this._svgGraphicRecord.named, function (namedItem) {
  271. // Note that we also allow different elements have the same name.
  272. // For example, a glyph of a city and the label of the city have
  273. // the same name and their tooltip info can be defined in a single
  274. // region option.
  275. var regionName = namedItem.name;
  276. var mapOrGeoModel = viewBuildCtx.mapOrGeoModel;
  277. var data = viewBuildCtx.data;
  278. var svgNodeTagLower = namedItem.svgNodeTagLower;
  279. var el = namedItem.el;
  280. var dataIdx = data ? data.indexOfName(regionName) : null;
  281. var regionModel = mapOrGeoModel.getRegionModel(regionName);
  282. if (OPTION_STYLE_ENABLED_TAG_MAP.get(svgNodeTagLower) != null && el instanceof Displayable) {
  283. applyOptionStyleForRegion(viewBuildCtx, el, dataIdx, regionModel);
  284. }
  285. if (el instanceof Displayable) {
  286. el.culling = true;
  287. }
  288. // We do not know how the SVG like so we'd better not to change z2.
  289. // Otherwise it might bring some unexpected result. For example,
  290. // an area hovered that make some inner city can not be clicked.
  291. el.z2EmphasisLift = 0;
  292. // If self named:
  293. if (!namedItem.namedFrom) {
  294. // label should batter to be displayed based on the center of <g>
  295. // if it is named rather than displayed on each child.
  296. if (LABEL_HOST_MAP.get(svgNodeTagLower) != null) {
  297. resetLabelForRegion(viewBuildCtx, el, regionName, regionModel, mapOrGeoModel, dataIdx, null);
  298. }
  299. resetEventTriggerForRegion(viewBuildCtx, el, regionName, regionModel, mapOrGeoModel, dataIdx);
  300. resetTooltipForRegion(viewBuildCtx, el, regionName, regionModel, mapOrGeoModel);
  301. if (STATE_TRIGGER_TAG_MAP.get(svgNodeTagLower) != null) {
  302. var focus_1 = resetStateTriggerForRegion(viewBuildCtx, el, regionName, regionModel, mapOrGeoModel);
  303. if (focus_1 === 'self') {
  304. focusSelf = true;
  305. }
  306. var els = svgDispatcherMap.get(regionName) || svgDispatcherMap.set(regionName, []);
  307. els.push(el);
  308. }
  309. }
  310. }, this);
  311. this._enableBlurEntireSVG(focusSelf, viewBuildCtx);
  312. };
  313. MapDraw.prototype._enableBlurEntireSVG = function (focusSelf, viewBuildCtx) {
  314. // It's a little complicated to support blurring the entire geoSVG in series-map.
  315. // So do not support it until some requirements come.
  316. // At present, in series-map, only regions can be blurred.
  317. if (focusSelf && viewBuildCtx.isGeo) {
  318. var blurStyle = viewBuildCtx.mapOrGeoModel.getModel(['blur', 'itemStyle']).getItemStyle();
  319. // Only support `opacity` here. Because not sure that other props are suitable for
  320. // all of the elements generated by SVG (especially for Text/TSpan/Image/... ).
  321. var opacity_1 = blurStyle.opacity;
  322. this._svgGraphicRecord.root.traverse(function (el) {
  323. if (!el.isGroup) {
  324. // PENDING: clear those settings to SVG elements when `_freeSVG`.
  325. // (Currently it happen not to be needed.)
  326. setDefaultStateProxy(el);
  327. var style = el.ensureState('blur').style || {};
  328. // Do not overwrite the region style that already set from region option.
  329. if (style.opacity == null && opacity_1 != null) {
  330. style.opacity = opacity_1;
  331. }
  332. // If `ensureState('blur').style = {}`, there will be default opacity.
  333. // Enable `stateTransition` (animation).
  334. el.ensureState('emphasis');
  335. }
  336. });
  337. }
  338. };
  339. MapDraw.prototype.remove = function () {
  340. this._regionsGroup.removeAll();
  341. this._regionsGroupByName = null;
  342. this._svgGroup.removeAll();
  343. this._freeSVG();
  344. this._controller.dispose();
  345. this._controllerHost = null;
  346. };
  347. MapDraw.prototype.findHighDownDispatchers = function (name, geoModel) {
  348. if (name == null) {
  349. return [];
  350. }
  351. var geo = geoModel.coordinateSystem;
  352. if (geo.resourceType === 'geoJSON') {
  353. var regionsGroupByName = this._regionsGroupByName;
  354. if (regionsGroupByName) {
  355. var regionGroup = regionsGroupByName.get(name);
  356. return regionGroup ? [regionGroup] : [];
  357. }
  358. } else if (geo.resourceType === 'geoSVG') {
  359. return this._svgDispatcherMap && this._svgDispatcherMap.get(name) || [];
  360. }
  361. };
  362. MapDraw.prototype._svgResourceChanged = function (mapName) {
  363. return this._svgMapName !== mapName;
  364. };
  365. MapDraw.prototype._useSVG = function (mapName) {
  366. var resource = geoSourceManager.getGeoResource(mapName);
  367. if (resource && resource.type === 'geoSVG') {
  368. var svgGraphic = resource.useGraphic(this.uid);
  369. this._svgGroup.add(svgGraphic.root);
  370. this._svgGraphicRecord = svgGraphic;
  371. this._svgMapName = mapName;
  372. }
  373. };
  374. MapDraw.prototype._freeSVG = function () {
  375. var mapName = this._svgMapName;
  376. if (mapName == null) {
  377. return;
  378. }
  379. var resource = geoSourceManager.getGeoResource(mapName);
  380. if (resource && resource.type === 'geoSVG') {
  381. resource.freeGraphic(this.uid);
  382. }
  383. this._svgGraphicRecord = null;
  384. this._svgDispatcherMap = null;
  385. this._svgGroup.removeAll();
  386. this._svgMapName = null;
  387. };
  388. MapDraw.prototype._updateController = function (mapOrGeoModel, ecModel, api) {
  389. var geo = mapOrGeoModel.coordinateSystem;
  390. var controller = this._controller;
  391. var controllerHost = this._controllerHost;
  392. // @ts-ignore FIXME:TS
  393. controllerHost.zoomLimit = mapOrGeoModel.get('scaleLimit');
  394. controllerHost.zoom = geo.getZoom();
  395. // roamType is will be set default true if it is null
  396. // @ts-ignore FIXME:TS
  397. controller.enable(mapOrGeoModel.get('roam') || false);
  398. var mainType = mapOrGeoModel.mainType;
  399. function makeActionBase() {
  400. var action = {
  401. type: 'geoRoam',
  402. componentType: mainType
  403. };
  404. action[mainType + 'Id'] = mapOrGeoModel.id;
  405. return action;
  406. }
  407. controller.off('pan').on('pan', function (e) {
  408. this._mouseDownFlag = false;
  409. roamHelper.updateViewOnPan(controllerHost, e.dx, e.dy);
  410. api.dispatchAction(zrUtil.extend(makeActionBase(), {
  411. dx: e.dx,
  412. dy: e.dy,
  413. animation: {
  414. duration: 0
  415. }
  416. }));
  417. }, this);
  418. controller.off('zoom').on('zoom', function (e) {
  419. this._mouseDownFlag = false;
  420. roamHelper.updateViewOnZoom(controllerHost, e.scale, e.originX, e.originY);
  421. api.dispatchAction(zrUtil.extend(makeActionBase(), {
  422. totalZoom: controllerHost.zoom,
  423. zoom: e.scale,
  424. originX: e.originX,
  425. originY: e.originY,
  426. animation: {
  427. duration: 0
  428. }
  429. }));
  430. }, this);
  431. controller.setPointerChecker(function (e, x, y) {
  432. return geo.containPoint([x, y]) && !onIrrelevantElement(e, api, mapOrGeoModel);
  433. });
  434. };
  435. /**
  436. * FIXME: this is a temporarily workaround.
  437. * When `geoRoam` the elements need to be reset in `MapView['render']`, because the props like
  438. * `ignore` might have been modified by `LabelManager`, and `LabelManager#addLabelsOfSeries`
  439. * will subsequently cache `defaultAttr` like `ignore`. If do not do this reset, the modified
  440. * props will have no chance to be restored.
  441. * Note: This reset should be after `clearStates` in `renderSeries` because `useStates` in
  442. * `renderSeries` will cache the modified `ignore` to `el._normalState`.
  443. * TODO:
  444. * Use clone/immutable in `LabelManager`?
  445. */
  446. MapDraw.prototype.resetForLabelLayout = function () {
  447. this.group.traverse(function (el) {
  448. var label = el.getTextContent();
  449. if (label) {
  450. label.ignore = mapLabelRaw(label).ignore;
  451. }
  452. });
  453. };
  454. MapDraw.prototype._updateMapSelectHandler = function (mapOrGeoModel, regionsGroup, api, fromView) {
  455. var mapDraw = this;
  456. regionsGroup.off('mousedown');
  457. regionsGroup.off('click');
  458. // @ts-ignore FIXME:TS resolve type conflict
  459. if (mapOrGeoModel.get('selectedMode')) {
  460. regionsGroup.on('mousedown', function () {
  461. mapDraw._mouseDownFlag = true;
  462. });
  463. regionsGroup.on('click', function (e) {
  464. if (!mapDraw._mouseDownFlag) {
  465. return;
  466. }
  467. mapDraw._mouseDownFlag = false;
  468. });
  469. }
  470. };
  471. return MapDraw;
  472. }();
  473. ;
  474. function applyOptionStyleForRegion(viewBuildCtx, el, dataIndex, regionModel) {
  475. // All of the path are using `itemStyle`, because
  476. // (1) Some SVG also use fill on polyline (The different between
  477. // polyline and polygon is "open" or "close" but not fill or not).
  478. // (2) For the common props like opacity, if some use itemStyle
  479. // and some use `lineStyle`, it might confuse users.
  480. // (3) Most SVG use <path>, where can not detect whether to draw a "line"
  481. // or a filled shape, so use `itemStyle` for <path>.
  482. var normalStyleModel = regionModel.getModel('itemStyle');
  483. var emphasisStyleModel = regionModel.getModel(['emphasis', 'itemStyle']);
  484. var blurStyleModel = regionModel.getModel(['blur', 'itemStyle']);
  485. var selectStyleModel = regionModel.getModel(['select', 'itemStyle']);
  486. // NOTE: DON'T use 'style' in visual when drawing map.
  487. // This component is used for drawing underlying map for both geo component and map series.
  488. var normalStyle = getFixedItemStyle(normalStyleModel);
  489. var emphasisStyle = getFixedItemStyle(emphasisStyleModel);
  490. var selectStyle = getFixedItemStyle(selectStyleModel);
  491. var blurStyle = getFixedItemStyle(blurStyleModel);
  492. // Update the itemStyle if has data visual
  493. var data = viewBuildCtx.data;
  494. if (data) {
  495. // Only visual color of each item will be used. It can be encoded by visualMap
  496. // But visual color of series is used in symbol drawing
  497. // Visual color for each series is for the symbol draw
  498. var style = data.getItemVisual(dataIndex, 'style');
  499. var decal = data.getItemVisual(dataIndex, 'decal');
  500. if (viewBuildCtx.isVisualEncodedByVisualMap && style.fill) {
  501. normalStyle.fill = style.fill;
  502. }
  503. if (decal) {
  504. normalStyle.decal = createOrUpdatePatternFromDecal(decal, viewBuildCtx.api);
  505. }
  506. }
  507. // SVG text, tspan and image can be named but not supporeted
  508. // to be styled by region option yet.
  509. el.setStyle(normalStyle);
  510. el.style.strokeNoScale = true;
  511. el.ensureState('emphasis').style = emphasisStyle;
  512. el.ensureState('select').style = selectStyle;
  513. el.ensureState('blur').style = blurStyle;
  514. // Enable blur
  515. setDefaultStateProxy(el);
  516. }
  517. function resetLabelForRegion(viewBuildCtx, el, regionName, regionModel, mapOrGeoModel,
  518. // Exist only if `viewBuildCtx.data` exists.
  519. dataIdx,
  520. // If labelXY not provided, use `textConfig.position: 'inside'`
  521. labelXY) {
  522. var data = viewBuildCtx.data;
  523. var isGeo = viewBuildCtx.isGeo;
  524. var isDataNaN = data && isNaN(data.get(data.mapDimension('value'), dataIdx));
  525. var itemLayout = data && data.getItemLayout(dataIdx);
  526. // In the following cases label will be drawn
  527. // 1. In map series and data value is NaN
  528. // 2. In geo component
  529. // 3. Region has no series legendIcon, which will be add a showLabel flag in mapSymbolLayout
  530. if (isGeo || isDataNaN || itemLayout && itemLayout.showLabel) {
  531. var query = !isGeo ? dataIdx : regionName;
  532. var labelFetcher = void 0;
  533. // Consider dataIdx not found.
  534. if (!data || dataIdx >= 0) {
  535. labelFetcher = mapOrGeoModel;
  536. }
  537. var specifiedTextOpt = labelXY ? {
  538. normal: {
  539. align: 'center',
  540. verticalAlign: 'middle'
  541. }
  542. } : null;
  543. // Caveat: must be called after `setDefaultStateProxy(el);` called.
  544. // because textContent will be assign with `el.stateProxy` inside.
  545. setLabelStyle(el, getLabelStatesModels(regionModel), {
  546. labelFetcher: labelFetcher,
  547. labelDataIndex: query,
  548. defaultText: regionName
  549. }, specifiedTextOpt);
  550. var textEl = el.getTextContent();
  551. if (textEl) {
  552. mapLabelRaw(textEl).ignore = textEl.ignore;
  553. if (el.textConfig && labelXY) {
  554. // Compute a relative offset based on the el bounding rect.
  555. var rect = el.getBoundingRect().clone();
  556. // Need to make sure the percent position base on the same rect in normal and
  557. // emphasis state. Otherwise if using boundingRect of el, but the emphasis state
  558. // has borderWidth (even 0.5px), the text position will be changed obviously
  559. // if the position is very big like ['1234%', '1345%'].
  560. el.textConfig.layoutRect = rect;
  561. el.textConfig.position = [(labelXY[0] - rect.x) / rect.width * 100 + '%', (labelXY[1] - rect.y) / rect.height * 100 + '%'];
  562. }
  563. }
  564. // PENDING:
  565. // If labelLayout is enabled (test/label-layout.html), el.dataIndex should be specified.
  566. // But el.dataIndex is also used to determine whether user event should be triggered,
  567. // where el.seriesIndex or el.dataModel must be specified. At present for a single el
  568. // there is not case that "only label layout enabled but user event disabled", so here
  569. // we depends `resetEventTriggerForRegion` to do the job of setting `el.dataIndex`.
  570. el.disableLabelAnimation = true;
  571. } else {
  572. el.removeTextContent();
  573. el.removeTextConfig();
  574. el.disableLabelAnimation = null;
  575. }
  576. }
  577. function resetEventTriggerForRegion(viewBuildCtx, eventTrigger, regionName, regionModel, mapOrGeoModel,
  578. // Exist only if `viewBuildCtx.data` exists.
  579. dataIdx) {
  580. // setItemGraphicEl, setHoverStyle after all polygons and labels
  581. // are added to the regionGroup
  582. if (viewBuildCtx.data) {
  583. // FIXME: when series-map use a SVG map, and there are duplicated name specified
  584. // on different SVG elements, after `data.setItemGraphicEl(...)`:
  585. // (1) all of them will be mounted with `dataIndex`, `seriesIndex`, so that tooltip
  586. // can be triggered only mouse hover. That's correct.
  587. // (2) only the last element will be kept in `data`, so that if trigger tooltip
  588. // by `dispatchAction`, only the last one can be found and triggered. That might be
  589. // not correct. We will fix it in future if anyone demanding that.
  590. viewBuildCtx.data.setItemGraphicEl(dataIdx, eventTrigger);
  591. }
  592. // series-map will not trigger "geoselectchange" no matter it is
  593. // based on a declared geo component. Because series-map will
  594. // trigger "selectchange". If it trigger both the two events,
  595. // If users call `chart.dispatchAction({type: 'toggleSelect'})`,
  596. // it not easy to also fire event "geoselectchanged".
  597. else {
  598. // Package custom mouse event for geo component
  599. getECData(eventTrigger).eventData = {
  600. componentType: 'geo',
  601. componentIndex: mapOrGeoModel.componentIndex,
  602. geoIndex: mapOrGeoModel.componentIndex,
  603. name: regionName,
  604. region: regionModel && regionModel.option || {}
  605. };
  606. }
  607. }
  608. function resetTooltipForRegion(viewBuildCtx, el, regionName, regionModel, mapOrGeoModel) {
  609. if (!viewBuildCtx.data) {
  610. graphic.setTooltipConfig({
  611. el: el,
  612. componentModel: mapOrGeoModel,
  613. itemName: regionName,
  614. // @ts-ignore FIXME:TS fix the "compatible with each other"?
  615. itemTooltipOption: regionModel.get('tooltip')
  616. });
  617. }
  618. }
  619. function resetStateTriggerForRegion(viewBuildCtx, el, regionName, regionModel, mapOrGeoModel) {
  620. // @ts-ignore FIXME:TS fix the "compatible with each other"?
  621. el.highDownSilentOnTouch = !!mapOrGeoModel.get('selectedMode');
  622. // @ts-ignore FIXME:TS fix the "compatible with each other"?
  623. var emphasisModel = regionModel.getModel('emphasis');
  624. var focus = emphasisModel.get('focus');
  625. toggleHoverEmphasis(el, focus, emphasisModel.get('blurScope'), emphasisModel.get('disabled'));
  626. if (viewBuildCtx.isGeo) {
  627. enableComponentHighDownFeatures(el, mapOrGeoModel, regionName);
  628. }
  629. return focus;
  630. }
  631. function projectPolys(rings,
  632. // Polygons include exterior and interiors. Or polylines.
  633. createStream, isLine) {
  634. var polygons = [];
  635. var curPoly;
  636. function startPolygon() {
  637. curPoly = [];
  638. }
  639. function endPolygon() {
  640. if (curPoly.length) {
  641. polygons.push(curPoly);
  642. curPoly = [];
  643. }
  644. }
  645. var stream = createStream({
  646. polygonStart: startPolygon,
  647. polygonEnd: endPolygon,
  648. lineStart: startPolygon,
  649. lineEnd: endPolygon,
  650. point: function (x, y) {
  651. // May have NaN values from stream.
  652. if (isFinite(x) && isFinite(y)) {
  653. curPoly.push([x, y]);
  654. }
  655. },
  656. sphere: function () {}
  657. });
  658. !isLine && stream.polygonStart();
  659. zrUtil.each(rings, function (ring) {
  660. stream.lineStart();
  661. for (var i = 0; i < ring.length; i++) {
  662. stream.point(ring[i][0], ring[i][1]);
  663. }
  664. stream.lineEnd();
  665. });
  666. !isLine && stream.polygonEnd();
  667. return polygons;
  668. }
  669. export default MapDraw;
  670. // @ts-ignore FIXME:TS fix the "compatible with each other"?