preface

The inescapable chart of big data visualization is the map. In this section, we will simply implement a complete Map of China and simple interactions, encapsulated in the React component. The renderings are as follows:

render() {
    const { clientX, clientY, province } = this.state;
    return (
      <React.Fragment>
        <div style={{top: clientY, left: clientX}} className="tip">
          { province }
        </div>
        <Map
          className="chart"
          onClick={this.onMapClick}
        />
      </React.Fragment>
  )
}
Copy the code

Map layer

The realization of map layer is actually very simple, as can be seen from the renderings, the map is composed of multiple deformation splicing, so we only need to calculate the corresponding coordinates of each provincial border, several map. Here we only need to convert the latitude and longitude of each province into the coordinates on the canvas. The geoJSON data of each province can be printed here. The map layer drawing code is as follows:

make() {
    this.clearEventListener();
    this.childs.splice(0, this.childs.length);
    const xStep = this.width / (maxX - minX);
    const yStep = this.height / (maxY - minY);
    for (let m = 0; m < bound.features.length; m++) {
      const coordinates =  bound.features[m].geometry.coordinates;
      for (let i = 0; i < coordinates.length; i++) {
        let item = coordinates[i];
        for (let j = 0; j < item.length; j++) {
          let dots = item[j];
          let polygonPoint = [];
          for (let k = 0; k < dots.length; k++) {
            polygonPoint.push(
              new Point(
                (dots[k][0] - minX) * xStep,
                (dots[k][1] - minY) * yStep
              ));
          }
          let polygon = new Polygon(this.canvas, {
            type: Polygon.TYPE.STROKE, color: this.color, }, polygonPoint); this.addChild(polygon); }}} // Draw provincial boundariesfor (let m = 0; m < full.features.length; m++) {
      const coordinates =  full.features[m].geometry.coordinates;
      for (let i = 0; i < coordinates.length; i++) {
        let item = coordinates[i];
        for (let j = 0; j < item.length; j++) {
          let dots = item[j];
          let polygonPoint = [];
          for (let k = 0; k < dots.length; k++) {
            polygonPoint.push(
              new Point(
                (dots[k][0] - minX) * xStep,
                (dots[k][1] - minY) * yStep
              ));
          }
          let polygon = new Polygon(this.canvas, {
            type: Polygon.TYPE.STROKE, color: this.color, lineDash: [5, 10], lineWidth: 1, }, polygonPoint); polygon.ext = full.features[m].properties; (this.onClick && ( polygon.addEventListener(Event.EVENT_CLICK, (e) => { console.log(e); this.onClick && this.onClick(e); }) )) this.addChild(polygon); }}}}Copy the code

In order to reduce the calculation in the drawing process, we have completed the calculation of the maximum and minimum latitude and longitude of China map maxX, maxY, minX, minY. The geo data bound is the longitude and latitude geo data of China map outline, and the GEO data full is the geo data of provinces and autonomous regions

The React to encapsulate

The React wrapper requires the DOM to be mounted, so we build our layers in the lifecycle componentDidMount function. The code is as follows:

componentDidMount () {
    const { style = {} } = this.props;
    this.canvas = new Canvas({
      ele: this.ref.current,
      canAction: false}); this.map = new MapLayer(this.canvas, { color: style.color, onClick: this.props.onClick }); this.map.make(); this.canvas.addChild(this.map); this.canvas.paint(); }Copy the code

directory

【 Realization of my own visualization engine 01】 Understanding Canvas 【 realization of my own Visualization framework engine 02】 Abstract image elements 【 Realization of my own visualization engine 03】 Construction of basic metalibrary 【 Realization of my own visualization engine 04】 Image elements animation 【 Realization of my own visualization engine 05】 interaction and events [Realize my own visualization engine 06] broken line chart [realize my own visualization engine 07] Bar chart [Realize my own visualization engine 08] Bar chart [Realize my own visualization engine 09] pie chart [Realize my own visualization engine 10] Scatter chart [Realize my own visualization engine 11] Radar chart [Achieve your own visualization engine 12] K-line [achieve your own visualization engine 13] Dashboard [achieve your own visualization engine 14] map [achieve your own visualization engine 15] diagram