|React+Openlayuers 模板(学习中，持续更新)

基础模板基础

    import React { createRef useEffect useReffrom 'react';
    import { Map View Feature Overlayfrom 'ol';
    import reactDom from 'react-dom';
    import TileLayer from 'ol/layer/Tile';
    import { OSMfrom 'ol/source';
    import { Point LineStringfrom 'ol/geom'; //点
    import { Icon Stroke Stylefrom 'ol/style';
    import VectorLayer from 'ol/layer/Vector';
    import VectorSource from 'ol/source/Vector';
    import 'ol/ol.css';
    import styles from './index.less';
    import poiImg from '@/assets/images/house.png';
    import ycdl from '../json/ycdl.json'
    const Index: React.FC = () => {
      // 地图
      const map = useRef<any>();
      // 地图容器
      const mapDom = createRef<HTMLDivElement>();
      useEffect(() => {
        // 初始化地图
        initMap()
        // 加载标注
        createFeature(ycdl.features[0
.geometry.coordinates poiImg 'iconFeature');
        //加载线
        createLine(ycdl.features[0
.geometry.coordinates poiImg 'lineFeature');
        //加载信息框
        createInfo()
      );
      /**
     * 初始化地图
     */
      const initMap = () => {
        map.current = new Map({
          target: 'map'
          layers: [
            new TileLayer({
              source: new OSM()
            )


          view: new View({
            center: [111.286962 30.69217

            projection: 'EPSG:4326'
            zoom: 14
          )
        );

      //创建标注
      const createFeature = (featureData: Array<any> featureImg: string layerId: string) => {
        // 创建标注
        if (featureData.length > 0) {
          let iconFeatures: any;
          iconFeatures = new Array();
          featureData.forEach((v index) => {
            iconFeatures.push(new Feature({
              geometry: new Point([...v
)
            ))
            iconFeatures[index
.setId(`icon ${index`)
          )
          // 将标注属性添加到矢量数据源中
          let iconSource = new VectorSource({
            features: iconFeatures
          )
          //将标注矢量数据源添加到矢量层
          let iconLayer = new VectorLayer({
            source: iconSource
            zIndex: 3
            style: () => {
              return new Style({