OpenLayers添加边界json

1、直接引入会报错

import luqiaofrom "../json/luqiao.json";

添加图层的方式添加边界json，添加成功！

方法一：

let json = require("../../../json/luqiao.json");
    let features = new GeoJSON().readFeatures(json);
    let vectorSource = new VectorSource({ features: features });
    this.lineLayer = new VectorLayer({
      name: "boundary",
      source: vectorSource,
      style: new Style({
        // 边界样式
        stroke: new Stroke({
          color: "#414141",
          width: 2,
          // lineDash: [5], // 虚线
        }),
        fill: new Fill({
          color: "rgba(255, 255, 255, .2)",
        }),
      }),
      zIndex: 0,
    });

添加到地图实例中

 this.map = new Map({
        controls: defaultControls({
          zoom: false,
        }).extend([]),
        target: "map", // 对应页面里 id 为 map 的元素
        layers: [
          // 图层
          new Tile({
            // Tile 用来承放所需的底图 使用瓦片渲染方法
            name: "basis",
            // id: "tileLayer",
            layerName: "baseMap",
            // T=vec_c表示请求的是路网数据，x 表示切片的 x 轴坐标，y 表示切片的y轴坐标，z表示切片所在的缩放级别。
            // 使用 ol.source.XYZ 加载切片
            source: new XYZ({
              id: "basisFeature",
              url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}",
              crossOrigin: "Anonymous",
            }), // 图层数据源
          }),
          this.lineLayer,
        ],

方法二：