DataV:map container (v4.x)

Lens Settings

1. Click the icon in the upper-right corner of the Basic Flat Map 4.0 widget to go to the Lens Settings page.

2. In the lens setting interface, you can freely change the lens angle of view of the map. After the change is completed, you need to save the set lens angle of view of the map.

   There are several ways to change the angle of view of the map lens through the mouse:

   • Click and hold the left mouse button to pan the map by dragging.

   • Scroll the mouse wheel up and down to scale the size of the map.

   • When you add the Custom Region Drill-down Layer component, double-click a province, municipality, or prefecture-level region in the map to drill down and zoom in on the region to the middle of the map.

3. After you set the map lens, click Save and Exit in the Lens Settings section to close the Lens Settings section.

   Note

   After exiting the lens setting interface, you can still re-enter to modify the map lens style. Every time you enter the lens setting page, if there is any change in the lens angle, you need to save it again.

Manage sub-components

• Add a component

  1. On the canvas, click the Basic Flat Map 4.0 widget. The Style tab appears on the right.

  2. Click the icon to expand the subcomponent.

  3. In the left-side sub-layer panel, click to add one or more sub-components. After the component is added, the component appears in the Component Management list.

  4. Click an added component and configure its parameters.

  5. After the configuration is complete, click the icon to go back to the Style panel and configure other widgets.

• To copy, delete, and rename a component, right-click the component and select Copy or Delete. Double-click the subcomponent to rename it.

  Note

  For more information about sub-widgets, see Manage map sub-widgets.

Style Panel

• Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel. In the Search Configuration panel, enter the name of the configuration items that you want to search for and locate the configuration items. Fuzzy match is supported. For more information, see Search configuration items.

  • Size: the width and height of the widget. Unit: pixels.

  • Positioning: the x-axis and y-axis of the component. Unit: pixels. X-coordinate indicates the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate indicates the pixel distance between the upper-left corner of the widget and the upper border of the canvas.

  • Rotate: The widget is rotated around the center of the widget. Unit: degrees.

    • Directly enter the degrees in the Rotation Angle spin box or click the plus sign (+) or minus sign (-) to increase or decrease the value in the Rotation Angle spin box.

    • Click the icon to flip the widget style.

    • Click the icon to flip the widget style.

  • Opacity: Valid values: 0 to 1. If this parameter is set to 0, the widget is hidden. If this parameter is set to 1, the widget is completely displayed. Default value: 1.

• General: the general configuration of the map container.

  Metric	description
  Map background	The background color of the map. For more information, see color picker.
  Map Zoom	Controls the zoom range and default level of the map's parent container. Zoom Range: The zoom range controls the parent container only within the zoom range. Valid values: 0 to 22. Default Level: The default level of the parent container. The default level must be within the zoom range. Valid values: 0 to 22. Note The map zoom supports fractional zoom. The zoom level controls that the parent container can only operate within the zoom range; the default level sets the default display level of the parent container, which needs to be set within the zoom range.
  Map Center	The latitude and longitude of the center of the map.
  scale ruler	Click the icon to the right of the scale ruler to display the scale ruler on the map. When on, you can adjust the font color, border color, and offset values in the horizontal and vertical directions of the scale ruler.

• Coordinate: the coordinate system type of the map. You can select Universal Coordinate or Custom.

  Metric	description
  General Coordinates	Common coordinates include EPSG3857, EPSG3395, and EPSG4326. By default, the system sets the common coordinate system to EPSG3857. If you change the common coordinate system to another type, the tile URL corresponding to the raster tile layer must be reset.
  user-defined	You can customize the coordinate system, including the EPSG, proj parameters, longitude origin, latitude origin, and resolution. For more information about custom coordinate systems, see Custom coordinate system maps. Note Resolution: the resolution information of each level of the slice of the current coordinate system. The resolution of each level is separated by commas in sequence.

• Interactive: Set the parameters for the interactive map feature.

  Metric	description
  Map interaction	Turn on the switch to enable the map interaction feature. On the Preview or Publish page, you can click to focus on an area and view the data configuration information of the area.
  Drag interaction	Turn on the switch to enable the map dragging feature. On the Preview or Publish page, you can click and drag the map.
  Zoom interaction	Turn on the switch to enable the map zoom function. Under the preview or publish page, you can scroll the mouse wheel to zoom the map.

Data Sources panel

No configuration data is required for this component.

Advanced Panel

Turn on the switch to enable the associated global variable feature. The custom variable value is thrown when the map is moved or when the map is moved. For more information, see Component interaction configuration.

Blueprint Interaction

1. Click the icon in the upper-left corner to go to the Blueprint page.

2. On the Layer Nodes tab, add the widget to the main canvas.

3. View blueprint configuration parameters.

   • Event

     Event	Description
     When the map moves	The event that is raised when the center point of the map is moved. For more information, see the sample data. { // The zoom level. "zoom": 4.3, // Longitude, range:[-180, 180] "lng": 106.5306, // The latitude. Range:[-90,90]. "lat": 38.5714 }
     Map moving end	The event that is raised when the center point of the map is moved. For more information, see the sample data. { // The zoom level. "zoom": 4.3, // Longitude, range:[-180, 180] "lng": 106.5306, // The latitude. Range:[-90,90]. "lat": 38.5714 }

   • Action

     Action	Description
     Set View	Set the map center point and zoom level of the map view. Refer to the data example. { // The zoom level, which must be within the set zoom level range. "zoom":4.5, // Longitude range:[-180,180] "lng":108, // Latitude range:[-180,180] "lat":38 }
     Set Zoom Level	Set the zoom level of the map. For more information, see the data example. { // The zoom level, which must be within the set zoom level range. "zoom":4.5 }
     Set Zoom Range	Set the zoom range of the map. For more information, see the data example. { // Zoom level range: [minimum level, maximum level]. "range":[3,18] }
     Set the maximum view range	Set the coordinate range of the maximum view of the map. For more information, see the data example. { // Coordinate range:[[minimum latitude, minimum longitude],[maximum latitude, maximum longitude]] "bounds": [ [0,72], [53,138] ] }
     Fly to the designated position	Set the latitude and longitude, zoom level, and time interval for the flight to the specified location. For more information, see the sample data. { // The zoom level, which must be within the set zoom level range. "zoom": 4.5, // Longitude range:[-180,180] "lng": 108, // Latitude range:[-90,90] "lat": 38, // gap. Unit: seconds. "duration": 0.25 }
     Fly to Specified Range	Set the coordinate range and flight gap for flying to the specified range. Refer to the data example. { // Coordinate range:[[minimum latitude, minimum longitude],[maximum latitude, maximum longitude]] "bounds": [ [0,72], [53,138] ], // The time interval. Unit: seconds. "duration": 0.25 }
     Move	Move a widget to a specified location. For more information, see the data example. { // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. "positionType": "to", // The location, which is indicated by the x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation type. "animation": { "enable": false, // The animation delay. Unit: milliseconds. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }
     Switch Display /Display	Specifies whether to show or hide a widget. No parameters are required.
     Display	Display the widget. For more information, see Data example. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Hide	Hide the component. For more information, see Data example. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Update component configurations	Style configurations of widgets are dynamically updated. In the Style panel, click Copy Configuration to Clipboard to obtain the configuration data of the widget. After that, change the style field for the data processing node in Blueprint Editor.