react------react-bmapgl

项目应用实例

import React, { useEffect, useState, useRef, useContext } from 'react';
import { Map, MapvglView, MapvglLayer, InfoWindow } from 'react-bmapgl';

//样式
import Style from './index.less';

//常量
import ConfigJson from '@/assets/js/map/custom_map_config.json';

export default function MapLayer(props) {
  //初始化
  const [localInfo, setLocalInfo] = useState([]);

  //地图图层实例对象
  const carLayer = useRef(null);
  //测试运行车辆图层对象
  const mapLayer = useRef(null);
  /***********************************************************************/

  useEffect(() => {
    // 处理经纬度数据并设置
    var info = handle(props.localInfo);
    if (info.length) {
      setLocalInfo(info);
    }
  }, [props.localInfo]);

  // 处理经纬度数据
  const handle = (arr) => {
    var arr1 = [];
    arr.map((item, index) => {
      var i = [item.longitude, item.latitude];
      arr1.push(i);
    });
    return arr1;
  };

  // 根据点的数组自动调整缩放级别
  function setZoom(bPoints) {
    var map = mapLayer.current.map;
    var view = map.getViewport(eval(bPoints));
    var mapZoom = view.zoom;
    var centerPoint = view.center;
    map.centerAndZoom(centerPoint, mapZoom);
  }

  // 处理道路数据
  const createRoadLayer = () => {
    // 处理道路数据
    let data = [];
    data = [
      {
        geometry: {
          type: 'LineString',
          coordinates: localInfo,
        },
      },
    ];

    // 将处理过的道路数据抛出
    return data;
  };

  return (
    <div id={Style.MapLayer}>
      {localInfo.length ? (
        <Map
          ref={(ref) => {
            mapLayer.current = ref;

            // 百度坐标系坐标(地图中需要使用这个)
            if (mapLayer.current) {
              var len = localInfo.length;
              var bPoints = new Array();
              for (var i = 0; i < len; i++) {
                // 添加到百度坐标数组 用于自动调整缩放级别
                bPoints.push({
                  lng: localInfo[i][0],
                  lat: localInfo[i][1],
                });
              }
              // 根据点的数组自动调整缩放级别
              setZoom(bPoints);
            }
          }}
          mapStyleV2={{ styleJson: ConfigJson }}
          style={{
            width: 700,
            height: 360,
          }}
          tilt={0}
          heading={0}
          enableRotate={false}
          enableTilt={false}
          enableScrollWheelZoom={true}
        >
          {/* 地图图层管理器组件 */}
          <MapvglView>
            {/* 测试道路图层 */}
            <MapvglLayer
              type="LineLayer"
              data={createRoadLayer()}
              options={{
                width: 10,
                color: '#549CCB',
                style: 'road',
                renderOrder: 0,
              }}
            />
          </MapvglView>
        </Map>
      ) : (
        '-'
      )}
      {/* 地图*/}
    </div>
  );
}