react中使用高德自定义图层中的canvas画线

少量数据，

5千条数据 主页面

import {Map, Polyline } from 'react-amap';

   <Map plugins={['ToolBar']} center={this.state.mapCenter} zoom={10}>
      <Lines/>	//少量数据
      <Lines2/> //大量数据
   </Map>

//lines组件

import React, { Component } from 'react';
import LG from './GIS.json'//数据

class Lines extends Component {
    constructor(props) {
        super(props);
        this.mymap = props.__map__;

    }
    componentDidMount() {
        let gis = LG
        let paths2 = []
        for (let s = 0; s < gis.length; s++) {
            let data = []
            data.push(
                //eslint-disable-next-line
                new window.AMap.LngLat(gis[s].j, gis[s].i), new window.AMap.LngLat(gis[s].l, gis[s].k)
            )
            paths2.push(data)
        }

        var polylines = [];

        for (var i = 0; i < paths2.length; i++) {
            var path = paths2[i];
            // 创建线实例
            //eslint-disable-next-line
            var polyline = new window.AMap.Polyline({
                path: path,
                strokeWeight: 1,
                strokeColor: '#DC143C',
                isOutline: true,
                borderWeight: 3,
                outlineColor: '#ffeeff'
            });

            polylines.push(polyline);
        }

        //eslint-disable-next-line
        var overlayGroups = new window.AMap.OverlayGroup(polylines);

        this.mymap.add(overlayGroups);
    }

   
    render() {
        return (
            null
        )
    }
}

export default Lines;

//lines2组件
import React, { Component } from 'react';
// import {Map, Polyline } from 'react-amap';
import YQ from './YQGD.json'

class Lines2 extends Component {
  constructor(props) {
    super(props);
    this.mymap = props.__map__; // 地图实例

  }
  componentDidMount() {
    this.addLayer();
  }

  addLayer = () => {
    const  map = this.mymap

    // //eslint-disable-next-line
    window.AMap.plugin('AMap.CustomLayer', function () {
      var canvas = document.createElement('canvas');
      // //eslint-disable-next-line
      var customLayer = new window.AMap.CustomLayer(canvas, {
        zooms: [3, 15],
        alwaysRender: false,//缩放过程中是否重绘，复杂绘制建议设为false
        zIndex: 120
      });
      var onRender = function () {
        let gis = YQ
        // //eslint-disable-next-line
        var retina = window.AMap.Browser.retina;
        var size = map.getSize();//resize
        var width = size.width;
        var height = size.height;
        canvas.style.width = width + 'px'
        canvas.style.height = height + 'px'
        if (retina) {//高清适配
          width *= 2;
          height *= 2;
        }
        canvas.width = width;
        canvas.height = height;//清除画布


        var ctx = canvas.getContext("2d");
        ctx.fillStyle = '#08f';
        ctx.strokeStyle = '#000';
        ctx.beginPath();

        for (let s = 0; s < gis.length; s++) {
          //从点坐标中获取具体的经纬度
          let starLongitude = gis[s].a;
          let starLatitude = gis[s].b;
          let endLongitude = gis[s].c;
          let endLatitude = gis[s].d;
          
          let centerS = [starLongitude, starLatitude];
          let centerE = [endLongitude, endLatitude];


          let pos = map.lngLatToContainer(centerS);
          let posE = map.lngLatToContainer(centerE);
          ctx.moveTo(pos.x, pos.y);
          ctx.lineTo(posE.x, posE.y);
        }

        ctx.closePath();
        ctx.stroke();
        ctx.fill();
      }


      customLayer.render = onRender;
      customLayer.setMap(map);
    });
  }
  render() {
    return (
      null
    )
  }
}

export default Lines2;