MapDraw.js 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678
  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. var silent = regionModel.get('silent', true);
  196. silent != null && (regionGroup.silent = silent);
  197. regionsInfoByName.set(regionName, {
  198. dataIdx: dataIdx,
  199. regionModel: regionModel
  200. });
  201. }
  202. var polygonSubpaths = [];
  203. var polylineSubpaths = [];
  204. zrUtil.each(region.geometries, function (geometry) {
  205. // Polygon and MultiPolygon
  206. if (geometry.type === 'polygon') {
  207. var polys = [geometry.exterior].concat(geometry.interiors || []);
  208. if (projectionStream) {
  209. polys = projectPolys(polys, projectionStream);
  210. }
  211. zrUtil.each(polys, function (poly) {
  212. polygonSubpaths.push(new graphic.Polygon(getPolyShape(poly)));
  213. });
  214. }
  215. // LineString and MultiLineString
  216. else {
  217. var points = geometry.points;
  218. if (projectionStream) {
  219. points = projectPolys(points, projectionStream, true);
  220. }
  221. zrUtil.each(points, function (points) {
  222. polylineSubpaths.push(new graphic.Polyline(getPolyShape(points)));
  223. });
  224. }
  225. });
  226. var centerPt = transformPoint(region.getCenter(), projection && projection.project);
  227. function createCompoundPath(subpaths, isLine) {
  228. if (!subpaths.length) {
  229. return;
  230. }
  231. var compoundPath = new graphic.CompoundPath({
  232. culling: true,
  233. segmentIgnoreThreshold: 1,
  234. shape: {
  235. paths: subpaths
  236. }
  237. });
  238. regionGroup.add(compoundPath);
  239. applyOptionStyleForRegion(viewBuildCtx, compoundPath, dataIdx, regionModel);
  240. resetLabelForRegion(viewBuildCtx, compoundPath, regionName, regionModel, mapOrGeoModel, dataIdx, centerPt);
  241. if (isLine) {
  242. fixLineStyle(compoundPath);
  243. zrUtil.each(compoundPath.states, fixLineStyle);
  244. }
  245. }
  246. createCompoundPath(polygonSubpaths);
  247. createCompoundPath(polylineSubpaths, true);
  248. });
  249. // Ensure children have been added to `regionGroup` before calling them.
  250. regionsGroupByName.each(function (regionGroup, regionName) {
  251. var _a = regionsInfoByName.get(regionName),
  252. dataIdx = _a.dataIdx,
  253. regionModel = _a.regionModel;
  254. resetEventTriggerForRegion(viewBuildCtx, regionGroup, regionName, regionModel, mapOrGeoModel, dataIdx);
  255. resetTooltipForRegion(viewBuildCtx, regionGroup, regionName, regionModel, mapOrGeoModel);
  256. resetStateTriggerForRegion(viewBuildCtx, regionGroup, regionName, regionModel, mapOrGeoModel);
  257. }, this);
  258. };
  259. MapDraw.prototype._buildSVG = function (viewBuildCtx) {
  260. var mapName = viewBuildCtx.geo.map;
  261. var transformInfoRaw = viewBuildCtx.transformInfoRaw;
  262. this._svgGroup.x = transformInfoRaw.x;
  263. this._svgGroup.y = transformInfoRaw.y;
  264. this._svgGroup.scaleX = transformInfoRaw.scaleX;
  265. this._svgGroup.scaleY = transformInfoRaw.scaleY;
  266. if (this._svgResourceChanged(mapName)) {
  267. this._freeSVG();
  268. this._useSVG(mapName);
  269. }
  270. var svgDispatcherMap = this._svgDispatcherMap = zrUtil.createHashMap();
  271. var focusSelf = false;
  272. zrUtil.each(this._svgGraphicRecord.named, function (namedItem) {
  273. // Note that we also allow different elements have the same name.
  274. // For example, a glyph of a city and the label of the city have
  275. // the same name and their tooltip info can be defined in a single
  276. // region option.
  277. var regionName = namedItem.name;
  278. var mapOrGeoModel = viewBuildCtx.mapOrGeoModel;
  279. var data = viewBuildCtx.data;
  280. var svgNodeTagLower = namedItem.svgNodeTagLower;
  281. var el = namedItem.el;
  282. var dataIdx = data ? data.indexOfName(regionName) : null;
  283. var regionModel = mapOrGeoModel.getRegionModel(regionName);
  284. if (OPTION_STYLE_ENABLED_TAG_MAP.get(svgNodeTagLower) != null && el instanceof Displayable) {
  285. applyOptionStyleForRegion(viewBuildCtx, el, dataIdx, regionModel);
  286. }
  287. if (el instanceof Displayable) {
  288. el.culling = true;
  289. }
  290. var silent = regionModel.get('silent', true);
  291. silent != null && (el.silent = silent);
  292. // We do not know how the SVG like so we'd better not to change z2.
  293. // Otherwise it might bring some unexpected result. For example,
  294. // an area hovered that make some inner city can not be clicked.
  295. el.z2EmphasisLift = 0;
  296. // If self named:
  297. if (!namedItem.namedFrom) {
  298. // label should batter to be displayed based on the center of <g>
  299. // if it is named rather than displayed on each child.
  300. if (LABEL_HOST_MAP.get(svgNodeTagLower) != null) {
  301. resetLabelForRegion(viewBuildCtx, el, regionName, regionModel, mapOrGeoModel, dataIdx, null);
  302. }
  303. resetEventTriggerForRegion(viewBuildCtx, el, regionName, regionModel, mapOrGeoModel, dataIdx);
  304. resetTooltipForRegion(viewBuildCtx, el, regionName, regionModel, mapOrGeoModel);
  305. if (STATE_TRIGGER_TAG_MAP.get(svgNodeTagLower) != null) {
  306. var focus_1 = resetStateTriggerForRegion(viewBuildCtx, el, regionName, regionModel, mapOrGeoModel);
  307. if (focus_1 === 'self') {
  308. focusSelf = true;
  309. }
  310. var els = svgDispatcherMap.get(regionName) || svgDispatcherMap.set(regionName, []);
  311. els.push(el);
  312. }
  313. }
  314. }, this);
  315. this._enableBlurEntireSVG(focusSelf, viewBuildCtx);
  316. };
  317. MapDraw.prototype._enableBlurEntireSVG = function (focusSelf, viewBuildCtx) {
  318. // It's a little complicated to support blurring the entire geoSVG in series-map.
  319. // So do not support it until some requirements come.
  320. // At present, in series-map, only regions can be blurred.
  321. if (focusSelf && viewBuildCtx.isGeo) {
  322. var blurStyle = viewBuildCtx.mapOrGeoModel.getModel(['blur', 'itemStyle']).getItemStyle();
  323. // Only support `opacity` here. Because not sure that other props are suitable for
  324. // all of the elements generated by SVG (especially for Text/TSpan/Image/... ).
  325. var opacity_1 = blurStyle.opacity;
  326. this._svgGraphicRecord.root.traverse(function (el) {
  327. if (!el.isGroup) {
  328. // PENDING: clear those settings to SVG elements when `_freeSVG`.
  329. // (Currently it happen not to be needed.)
  330. setDefaultStateProxy(el);
  331. var style = el.ensureState('blur').style || {};
  332. // Do not overwrite the region style that already set from region option.
  333. if (style.opacity == null && opacity_1 != null) {
  334. style.opacity = opacity_1;
  335. }
  336. // If `ensureState('blur').style = {}`, there will be default opacity.
  337. // Enable `stateTransition` (animation).
  338. el.ensureState('emphasis');
  339. }
  340. });
  341. }
  342. };
  343. MapDraw.prototype.remove = function () {
  344. this._regionsGroup.removeAll();
  345. this._regionsGroupByName = null;
  346. this._svgGroup.removeAll();
  347. this._freeSVG();
  348. this._controller.dispose();
  349. this._controllerHost = null;
  350. };
  351. MapDraw.prototype.findHighDownDispatchers = function (name, geoModel) {
  352. if (name == null) {
  353. return [];
  354. }
  355. var geo = geoModel.coordinateSystem;
  356. if (geo.resourceType === 'geoJSON') {
  357. var regionsGroupByName = this._regionsGroupByName;
  358. if (regionsGroupByName) {
  359. var regionGroup = regionsGroupByName.get(name);
  360. return regionGroup ? [regionGroup] : [];
  361. }
  362. } else if (geo.resourceType === 'geoSVG') {
  363. return this._svgDispatcherMap && this._svgDispatcherMap.get(name) || [];
  364. }
  365. };
  366. MapDraw.prototype._svgResourceChanged = function (mapName) {
  367. return this._svgMapName !== mapName;
  368. };
  369. MapDraw.prototype._useSVG = function (mapName) {
  370. var resource = geoSourceManager.getGeoResource(mapName);
  371. if (resource && resource.type === 'geoSVG') {
  372. var svgGraphic = resource.useGraphic(this.uid);
  373. this._svgGroup.add(svgGraphic.root);
  374. this._svgGraphicRecord = svgGraphic;
  375. this._svgMapName = mapName;
  376. }
  377. };
  378. MapDraw.prototype._freeSVG = function () {
  379. var mapName = this._svgMapName;
  380. if (mapName == null) {
  381. return;
  382. }
  383. var resource = geoSourceManager.getGeoResource(mapName);
  384. if (resource && resource.type === 'geoSVG') {
  385. resource.freeGraphic(this.uid);
  386. }
  387. this._svgGraphicRecord = null;
  388. this._svgDispatcherMap = null;
  389. this._svgGroup.removeAll();
  390. this._svgMapName = null;
  391. };
  392. MapDraw.prototype._updateController = function (mapOrGeoModel, ecModel, api) {
  393. var geo = mapOrGeoModel.coordinateSystem;
  394. var controller = this._controller;
  395. var controllerHost = this._controllerHost;
  396. // @ts-ignore FIXME:TS
  397. controllerHost.zoomLimit = mapOrGeoModel.get('scaleLimit');
  398. controllerHost.zoom = geo.getZoom();
  399. // roamType is will be set default true if it is null
  400. // @ts-ignore FIXME:TS
  401. controller.enable(mapOrGeoModel.get('roam') || false);
  402. var mainType = mapOrGeoModel.mainType;
  403. function makeActionBase() {
  404. var action = {
  405. type: 'geoRoam',
  406. componentType: mainType
  407. };
  408. action[mainType + 'Id'] = mapOrGeoModel.id;
  409. return action;
  410. }
  411. controller.off('pan').on('pan', function (e) {
  412. this._mouseDownFlag = false;
  413. roamHelper.updateViewOnPan(controllerHost, e.dx, e.dy);
  414. api.dispatchAction(zrUtil.extend(makeActionBase(), {
  415. dx: e.dx,
  416. dy: e.dy,
  417. animation: {
  418. duration: 0
  419. }
  420. }));
  421. }, this);
  422. controller.off('zoom').on('zoom', function (e) {
  423. this._mouseDownFlag = false;
  424. roamHelper.updateViewOnZoom(controllerHost, e.scale, e.originX, e.originY);
  425. api.dispatchAction(zrUtil.extend(makeActionBase(), {
  426. totalZoom: controllerHost.zoom,
  427. zoom: e.scale,
  428. originX: e.originX,
  429. originY: e.originY,
  430. animation: {
  431. duration: 0
  432. }
  433. }));
  434. }, this);
  435. controller.setPointerChecker(function (e, x, y) {
  436. return geo.containPoint([x, y]) && !onIrrelevantElement(e, api, mapOrGeoModel);
  437. });
  438. };
  439. /**
  440. * FIXME: this is a temporarily workaround.
  441. * When `geoRoam` the elements need to be reset in `MapView['render']`, because the props like
  442. * `ignore` might have been modified by `LabelManager`, and `LabelManager#addLabelsOfSeries`
  443. * will subsequently cache `defaultAttr` like `ignore`. If do not do this reset, the modified
  444. * props will have no chance to be restored.
  445. * Note: This reset should be after `clearStates` in `renderSeries` because `useStates` in
  446. * `renderSeries` will cache the modified `ignore` to `el._normalState`.
  447. * TODO:
  448. * Use clone/immutable in `LabelManager`?
  449. */
  450. MapDraw.prototype.resetForLabelLayout = function () {
  451. this.group.traverse(function (el) {
  452. var label = el.getTextContent();
  453. if (label) {
  454. label.ignore = mapLabelRaw(label).ignore;
  455. }
  456. });
  457. };
  458. MapDraw.prototype._updateMapSelectHandler = function (mapOrGeoModel, regionsGroup, api, fromView) {
  459. var mapDraw = this;
  460. regionsGroup.off('mousedown');
  461. regionsGroup.off('click');
  462. // @ts-ignore FIXME:TS resolve type conflict
  463. if (mapOrGeoModel.get('selectedMode')) {
  464. regionsGroup.on('mousedown', function () {
  465. mapDraw._mouseDownFlag = true;
  466. });
  467. regionsGroup.on('click', function (e) {
  468. if (!mapDraw._mouseDownFlag) {
  469. return;
  470. }
  471. mapDraw._mouseDownFlag = false;
  472. });
  473. }
  474. };
  475. return MapDraw;
  476. }();
  477. ;
  478. function applyOptionStyleForRegion(viewBuildCtx, el, dataIndex, regionModel) {
  479. // All of the path are using `itemStyle`, because
  480. // (1) Some SVG also use fill on polyline (The different between
  481. // polyline and polygon is "open" or "close" but not fill or not).
  482. // (2) For the common props like opacity, if some use itemStyle
  483. // and some use `lineStyle`, it might confuse users.
  484. // (3) Most SVG use <path>, where can not detect whether to draw a "line"
  485. // or a filled shape, so use `itemStyle` for <path>.
  486. var normalStyleModel = regionModel.getModel('itemStyle');
  487. var emphasisStyleModel = regionModel.getModel(['emphasis', 'itemStyle']);
  488. var blurStyleModel = regionModel.getModel(['blur', 'itemStyle']);
  489. var selectStyleModel = regionModel.getModel(['select', 'itemStyle']);
  490. // NOTE: DON'T use 'style' in visual when drawing map.
  491. // This component is used for drawing underlying map for both geo component and map series.
  492. var normalStyle = getFixedItemStyle(normalStyleModel);
  493. var emphasisStyle = getFixedItemStyle(emphasisStyleModel);
  494. var selectStyle = getFixedItemStyle(selectStyleModel);
  495. var blurStyle = getFixedItemStyle(blurStyleModel);
  496. // Update the itemStyle if has data visual
  497. var data = viewBuildCtx.data;
  498. if (data) {
  499. // Only visual color of each item will be used. It can be encoded by visualMap
  500. // But visual color of series is used in symbol drawing
  501. // Visual color for each series is for the symbol draw
  502. var style = data.getItemVisual(dataIndex, 'style');
  503. var decal = data.getItemVisual(dataIndex, 'decal');
  504. if (viewBuildCtx.isVisualEncodedByVisualMap && style.fill) {
  505. normalStyle.fill = style.fill;
  506. }
  507. if (decal) {
  508. normalStyle.decal = createOrUpdatePatternFromDecal(decal, viewBuildCtx.api);
  509. }
  510. }
  511. // SVG text, tspan and image can be named but not supporeted
  512. // to be styled by region option yet.
  513. el.setStyle(normalStyle);
  514. el.style.strokeNoScale = true;
  515. el.ensureState('emphasis').style = emphasisStyle;
  516. el.ensureState('select').style = selectStyle;
  517. el.ensureState('blur').style = blurStyle;
  518. // Enable blur
  519. setDefaultStateProxy(el);
  520. }
  521. function resetLabelForRegion(viewBuildCtx, el, regionName, regionModel, mapOrGeoModel,
  522. // Exist only if `viewBuildCtx.data` exists.
  523. dataIdx,
  524. // If labelXY not provided, use `textConfig.position: 'inside'`
  525. labelXY) {
  526. var data = viewBuildCtx.data;
  527. var isGeo = viewBuildCtx.isGeo;
  528. var isDataNaN = data && isNaN(data.get(data.mapDimension('value'), dataIdx));
  529. var itemLayout = data && data.getItemLayout(dataIdx);
  530. // In the following cases label will be drawn
  531. // 1. In map series and data value is NaN
  532. // 2. In geo component
  533. // 3. Region has no series legendIcon, which will be add a showLabel flag in mapSymbolLayout
  534. if (isGeo || isDataNaN || itemLayout && itemLayout.showLabel) {
  535. var query = !isGeo ? dataIdx : regionName;
  536. var labelFetcher = void 0;
  537. // Consider dataIdx not found.
  538. if (!data || dataIdx >= 0) {
  539. labelFetcher = mapOrGeoModel;
  540. }
  541. var specifiedTextOpt = labelXY ? {
  542. normal: {
  543. align: 'center',
  544. verticalAlign: 'middle'
  545. }
  546. } : null;
  547. // Caveat: must be called after `setDefaultStateProxy(el);` called.
  548. // because textContent will be assign with `el.stateProxy` inside.
  549. setLabelStyle(el, getLabelStatesModels(regionModel), {
  550. labelFetcher: labelFetcher,
  551. labelDataIndex: query,
  552. defaultText: regionName
  553. }, specifiedTextOpt);
  554. var textEl = el.getTextContent();
  555. if (textEl) {
  556. mapLabelRaw(textEl).ignore = textEl.ignore;
  557. if (el.textConfig && labelXY) {
  558. // Compute a relative offset based on the el bounding rect.
  559. var rect = el.getBoundingRect().clone();
  560. // Need to make sure the percent position base on the same rect in normal and
  561. // emphasis state. Otherwise if using boundingRect of el, but the emphasis state
  562. // has borderWidth (even 0.5px), the text position will be changed obviously
  563. // if the position is very big like ['1234%', '1345%'].
  564. el.textConfig.layoutRect = rect;
  565. el.textConfig.position = [(labelXY[0] - rect.x) / rect.width * 100 + '%', (labelXY[1] - rect.y) / rect.height * 100 + '%'];
  566. }
  567. }
  568. // PENDING:
  569. // If labelLayout is enabled (test/label-layout.html), el.dataIndex should be specified.
  570. // But el.dataIndex is also used to determine whether user event should be triggered,
  571. // where el.seriesIndex or el.dataModel must be specified. At present for a single el
  572. // there is not case that "only label layout enabled but user event disabled", so here
  573. // we depends `resetEventTriggerForRegion` to do the job of setting `el.dataIndex`.
  574. el.disableLabelAnimation = true;
  575. } else {
  576. el.removeTextContent();
  577. el.removeTextConfig();
  578. el.disableLabelAnimation = null;
  579. }
  580. }
  581. function resetEventTriggerForRegion(viewBuildCtx, eventTrigger, regionName, regionModel, mapOrGeoModel,
  582. // Exist only if `viewBuildCtx.data` exists.
  583. dataIdx) {
  584. // setItemGraphicEl, setHoverStyle after all polygons and labels
  585. // are added to the regionGroup
  586. if (viewBuildCtx.data) {
  587. // FIXME: when series-map use a SVG map, and there are duplicated name specified
  588. // on different SVG elements, after `data.setItemGraphicEl(...)`:
  589. // (1) all of them will be mounted with `dataIndex`, `seriesIndex`, so that tooltip
  590. // can be triggered only mouse hover. That's correct.
  591. // (2) only the last element will be kept in `data`, so that if trigger tooltip
  592. // by `dispatchAction`, only the last one can be found and triggered. That might be
  593. // not correct. We will fix it in future if anyone demanding that.
  594. viewBuildCtx.data.setItemGraphicEl(dataIdx, eventTrigger);
  595. }
  596. // series-map will not trigger "geoselectchange" no matter it is
  597. // based on a declared geo component. Because series-map will
  598. // trigger "selectchange". If it trigger both the two events,
  599. // If users call `chart.dispatchAction({type: 'toggleSelect'})`,
  600. // it not easy to also fire event "geoselectchanged".
  601. else {
  602. // Package custom mouse event for geo component
  603. getECData(eventTrigger).eventData = {
  604. componentType: 'geo',
  605. componentIndex: mapOrGeoModel.componentIndex,
  606. geoIndex: mapOrGeoModel.componentIndex,
  607. name: regionName,
  608. region: regionModel && regionModel.option || {}
  609. };
  610. }
  611. }
  612. function resetTooltipForRegion(viewBuildCtx, el, regionName, regionModel, mapOrGeoModel) {
  613. if (!viewBuildCtx.data) {
  614. graphic.setTooltipConfig({
  615. el: el,
  616. componentModel: mapOrGeoModel,
  617. itemName: regionName,
  618. // @ts-ignore FIXME:TS fix the "compatible with each other"?
  619. itemTooltipOption: regionModel.get('tooltip')
  620. });
  621. }
  622. }
  623. function resetStateTriggerForRegion(viewBuildCtx, el, regionName, regionModel, mapOrGeoModel) {
  624. // @ts-ignore FIXME:TS fix the "compatible with each other"?
  625. el.highDownSilentOnTouch = !!mapOrGeoModel.get('selectedMode');
  626. // @ts-ignore FIXME:TS fix the "compatible with each other"?
  627. var emphasisModel = regionModel.getModel('emphasis');
  628. var focus = emphasisModel.get('focus');
  629. toggleHoverEmphasis(el, focus, emphasisModel.get('blurScope'), emphasisModel.get('disabled'));
  630. if (viewBuildCtx.isGeo) {
  631. enableComponentHighDownFeatures(el, mapOrGeoModel, regionName);
  632. }
  633. return focus;
  634. }
  635. function projectPolys(rings,
  636. // Polygons include exterior and interiors. Or polylines.
  637. createStream, isLine) {
  638. var polygons = [];
  639. var curPoly;
  640. function startPolygon() {
  641. curPoly = [];
  642. }
  643. function endPolygon() {
  644. if (curPoly.length) {
  645. polygons.push(curPoly);
  646. curPoly = [];
  647. }
  648. }
  649. var stream = createStream({
  650. polygonStart: startPolygon,
  651. polygonEnd: endPolygon,
  652. lineStart: startPolygon,
  653. lineEnd: endPolygon,
  654. point: function (x, y) {
  655. // May have NaN values from stream.
  656. if (isFinite(x) && isFinite(y)) {
  657. curPoly.push([x, y]);
  658. }
  659. },
  660. sphere: function () {}
  661. });
  662. !isLine && stream.polygonStart();
  663. zrUtil.each(rings, function (ring) {
  664. stream.lineStart();
  665. for (var i = 0; i < ring.length; i++) {
  666. stream.point(ring[i][0], ring[i][1]);
  667. }
  668. stream.lineEnd();
  669. });
  670. !isLine && stream.polygonEnd();
  671. return polygons;
  672. }
  673. export default MapDraw;
  674. // @ts-ignore FIXME:TS fix the "compatible with each other"?