无法在反应中使用openlayer显示矢量图层

Question

我正在使用 openlayers 地图在 create-react-app 项目中添加一个源来自本地 geojson 文件的矢量图层，但无法显示矢量图层。

这是我的代码：

import React,{ Component } from 'react'
import './BaseMap.scss'
import 'ol/ol.css'
import {Map, View} from 'ol'
import TileLayer from 'ol/layer/Tile'
import {fromLonLat} from 'ol/proj'
import XYZ from 'ol/source/XYZ'
import {defaults, ScaleLine } from 'ol/control'
import GeoJSON from 'ol/format/GeoJSON';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';

const vectorLayer = new VectorLayer({
    source: new VectorSource({
        url: './shanghang_lj.json',
        format: new GeoJSON()
    }),
    style: function(feature) {
        style.getText().setText(feature.get('name'));
        return style;
    }
 });


const tian_di_tu_road_layer = new TileLayer({
    title: "road_layer",
    source: new XYZ({
        url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
    })
});
const tian_di_tu_annotation = new TileLayer({
    title: "annotation",
    source: new XYZ({
        url: 'http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}'
    })
});


export class BaseMap extends Component{
    constructor(props){
        super(props);

    };


    componentDidMount(){
        let map = new Map({
            controls: new defaults({
                attributionOptions: {
                    collapsible: false
                }
              }).extend([
                new ScaleLine()
              ]),
            target:'basemap',
            layers:[
                tian_di_tu_road_layer,//can be displayed
                tian_di_tu_annotation,//can be displayed
                vectorLayer//can not be displayed
            ],
            view:new View({
                center:fromLonLat([116.4,25.0]),
                zoom:10
            })
        })

    }


    render(){
        return(
           <div id="basemap" className='basemap'></div>    
        )
    }
}

我从控制台收到错误：

Uncaught SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse (<anonymous>)
at getObject (JSONFeature.js:188)
at GeoJSON.readFeatures (JSONFeature.js:56)
at VectorSource.<anonymous> (featureloader.js:87)

然后我尝试了另一种方式来传递geojson数据：

import border_shanghang from './shanghang_lj.json';

const vectorLayer = new VectorLayer({
    source: new VectorSource({
        features: (new GeoJSON()).readFeatures(border_shanghang)
    }),
});

控制台没有报错，但是还是没有显示矢量图层。

这个问题困扰我很久了。任何帮助将不胜感激。

顺便说一句，如果我运行它没有反应，代码就可以工作。

Answer 1

我尝试用一个示例 geojson 文件实现它，对我有用的是：

import border_shanghang from './shanghang_lj.geojson'; // I got a sample geojson from the web
const style = // ...;
const vectorLayer = new VectorLayer({
  source: new VectorSource({
    url: border_shanghang,
    format: new GeoJSON()
  }),
  style: function (feature) {
    style.getText().setText(feature.get('name'));
    return style;
  }
});
// ...

其他都一样。唯一的区别是将导入直接放入 VectorSource 的 url 字段，并将文件从 .json 重命名为 .geojson

无法在反应中使用openlayer显示矢量图层

can't display a vertor layer using openlayer in react

openlayers

reactjs