json文件通过await import导入解析

已于 2024-12-08 19:50:16 修改
阅读量362 收藏
点赞数
文章标签： json swift 开发语言
于 2024-12-08 16:39:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73938805/article/details/144327485
版权 
// 保存上一次加载的 features，便于移除
let previousFeatures = [];
// 用于缓存已经加载过的 GeoJSON 数据
let geoJsonCache = {};

// 定义动态导入函数
const importJson = async (url) => {
  if (geoJsonCache[url]) {
    return geoJsonCache[url];
  }
  console.log(url);
  console.log(typeof url);
  const data = await import("@/static/区县边界/成县.json");
  // const data1 = await import(`${url}`);
  console.log(data);
  // console.log(data1);
  geoJsonCache[url] = data.default || data; // 有些模块工具需要 `.default`
  return geoJsonCache[url];
};

// 加载 GeoJSON 或 JSON 文件的函数
const loadGeoJsonOrJsonFile = async (vectorSource, zoom) => {
  // 首先移除上次加载的所有 features
  previousFeatures.forEach((feature) => {
    vectorSource.removeFeature(feature);
  });
  previousFeatures = []; // 清空上次加载的 features

  let geoJsonUrls = [];
  if (zoom > 1.6) {
    geoJsonUrls = [
      "@/static/62/621202109.json",
      "@/static/62/621202110.json",
      "@/static/62/621202113.json",
      "@/static/62/621202116.json",
      "@/static/62/621202122.json",
      "@/static/62/621202123.json",
      "@/static/62/621202211.json",
      "@/static/62/621221100.json",
      "@/static/62/621221101.json",
      "@/static/62/621221102.json",
      "@/static/62/621221103.json",
      "@/static/62/621221104.json",
      "@/static/62/621221105.json",
      "@/static/62/621221106.json",
      "@/static/62/621221107.json",
      "@/static/62/621221108.json",
      "@/static/62/621221109.json",
      "@/static/62/621221110.json",
      "@/static/62/621221111.json",
      "@/static/62/621221112.json",
      "@/static/62/621221203.json",
      "@/static/62/621221206.json",
      "@/static/62/621223100.json",
      "@/static/62/621223101.json",
      "@/static/62/621223102.json",
      "@/static/62/621223103.json",
      "@/static/62/621223106.json",
      "@/static/62/621223107.json",
      "@/static/62/621223108.json",
      "@/static/62/621223206.json",
      "@/static/62/621223207.json",
      "@/static/62/621223209.json",
      "@/static/62/621223211.json",
      "@/static/62/621223212.json",
      "@/static/62/621223213.json",
      "@/static/62/621223214.json",
      "@/static/62/621223215.json",
      "@/static/62/621223216.json",
      "@/static/62/621223217.json",
      "@/static/62/621223218.json",
      "@/static/62/621223219.json",
      "@/static/62/621223224.json",
      "@/static/62/621224100.json",
      "@/static/62/621224102.json",
      "@/static/62/621224103.json",
      "@/static/62/621224105.json",
      "@/static/62/621224108.json",
      "@/static/62/621224110.json",
      "@/static/62/621224112.json",
      "@/static/62/621224113.json",
      "@/static/62/621224209.json",
      "@/static/62/621225100.json",
      "@/static/62/621225101.json",
      "@/static/62/621225102.json",
      "@/static/62/621225103.json",
      "@/static/62/621225104.json",
      "@/static/62/621225105.json",
      "@/static/62/621225106.json",
      "@/static/62/621225108.json",
      "@/static/62/621225109.json",
      "@/static/62/621225110.json",
      "@/static/62/621225111.json",
      "@/static/62/621225112.json",
      "@/static/62/621225113.json",
      "@/static/62/621225114.json",
      "@/static/62/621225206.json",
      "@/static/62/621225208.json",
      "@/static/62/621225210.json",
      "@/static/62/621225300.json",
      "@/static/62/621225301.json",
      "@/static/62/621225302.json",
      "@/static/62/621225304.json",
      "@/static/62/621225305.json",
      "@/static/62/621225306.json",
      "@/static/62/621226100.json",
      "@/static/62/621226101.json",
      "@/static/62/621226102.json",
      "@/static/62/621226103.json",
      "@/static/62/621226104.json",
      "@/static/62/621226105.json",
      "@/static/62/621226106.json",
      "@/static/62/621226107.json",
      "@/static/62/621226108.json",
      "@/static/62/621226109.json",
      "@/static/62/621226110.json",
      "@/static/62/621226111.json",
      "@/static/62/621226112.json",
      "@/static/62/621226113.json",
      "@/static/62/621226114.json",
      "@/static/62/621226115.json",
      "@/static/62/621226116.json",
      "@/static/62/621226117.json",
      "@/static/62/621226118.json",
      "@/static/62/621226119.json",
      "@/static/62/621226120.json",
      "@/static/62/621226121.json",
      "@/static/62/621226203.json",
      "@/static/62/621226215.json",
      "@/static/62/621226219.json",
      "@/static/62/621226224.json",
      "@/static/62/621226228.json",
      "@/static/62/621226231.json",
      "@/static/62/621226232.json",
      "@/static/62/621227100.json",
      "@/static/62/621227101.json",
      "@/static/62/621227102.json",
      "@/static/62/621227103.json",
      "@/static/62/621227104.json",
      "@/static/62/621227105.json",
      "@/static/62/621227106.json",
      "@/static/62/621227107.json",
      "@/static/62/621227108.json",
      "@/static/62/621227109.json",
      "@/static/62/621227110.json",
      "@/static/62/621227111.json",
      "@/static/62/621227112.json",
      "@/static/62/621227208.json",
      "@/static/62/621227211.json",
      "@/static/62/621228100.json",
      "@/static/62/621228101.json",
      "@/static/62/621228102.json",
      "@/static/62/621228103.json",
      "@/static/62/621228104.json",
      "@/static/62/621228105.json",
      "@/static/62/621228201.json",
      "@/static/62/621228203.json",
      "@/static/62/621228204.json",
      "@/static/62/621228207.json",
      "@/static/62/621228210.json",
      "@/static/62/621228212.json",
      "@/static/62/623023103.json",
      "@/static/62/623023106.json",
      "@/static/62/623023107.json",
      "@/static/62/623023108.json",
      "@/static/62/623023109.json",
      "@/static/62/623023110.json",
      "@/static/62/623023111.json",
      "@/static/62/623023112.json",
      "@/static/62/623023200.json",
      "@/static/62/623023213.json",
      "@/static/output/output-102-8-1.geojson",
      "@/static/output/output-103-8-1.geojson",
      "@/static/output/output-104-8-1.geojson",
      "@/static/output/output-105-8-1.geojson",
      "@/static/output/output-106-8-1.geojson",
      "@/static/output/output-107-8-1.geojson",
      "@/static/output/output-108-8-1.geojson",
      "@/static/output/output-109-8-1.geojson",
      "@/static/output/output-110-8-1.geojson",
      "@/static/output/output-111-8-1.geojson",
      "@/static/output/output-112-8-1.geojson",
      "@/static/output/output-113-8-1.geojson",
      "@/static/output/output-114-8-1.geojson",
      "@/static/output/output-115-8-1.geojson",
      "@/static/output/output-116-8-1.geojson",
      "@/static/output/output-117-8-1.geojson",
      "@/static/output/output-118-8-1.geojson",
      "@/static/output/output-119-8-1.geojson",
      "@/static/output/output-120-8-1.geojson",
      "@/static/output/output-121-8-1.geojson",
      "@/static/output/output-122-8-1.geojson",
      "@/static/output/output-123-8-1.geojson",
      "@/static/output/output-124-8-1.geojson",
      "@/static/output/output-125-8-1.geojson",
      "@/static/output/output-126-8-1.geojson",
      "@/static/output/output-127-8-1.geojson",
      "@/static/output/output-128-8-1.geojson",
      "@/static/output/output-129-8-1.geojson",
      "@/static/output/output-130-8-1.geojson",
      "@/static/output/output-131-8-1.geojson",
      "@/static/output/output-132-8-1.geojson",
      "@/static/output/output-133-8-1.geojson",
      "@/static/output/output-134-8-1.geojson",
      "@/static/output/output-135-8-1.geojson",
      "@/static/output/output-136-8-1.geojson",
      "@/static/output/output-137-8-1.geojson",
      "@/static/output/output-138-8-1.geojson",
      "@/static/output/output-139-8-1.geojson",
      "@/static/output/output-140-8-1.geojson",
      "@/static/output/output-141-8-1.geojson",
      "@/static/output/output-142-8-1.geojson",
      "@/static/output/output-143-8-1.geojson",
      "@/static/output/output-144-8-1.geojson",
      "@/static/output/output-145-8-1.geojson",
      "@/static/output/output-146-8-1.geojson",
      "@/static/output/output-147-8-1.geojson",
      "@/static/output/output-148-8-1.geojson",
      "@/static/output/output-149-8-1.geojson",
      "@/static/output/output-150-8-1.geojson",
      "@/static/output/output-151-8-1.geojson",
      "@/static/output/output-152-8-1.geojson",
      "@/static/output/output-153-8-1.geojson",
      "@/static/output/output-154-8-1.geojson",
      "@/static/output/output-156-8-1.geojson",
      "@/static/output/output-157-8-1.geojson",
      "@/static/output/output-158-8-1.geojson",
      "@/static/output/output-159-8-1.geojson",
      "@/static/output/output-160-8-1.geojson",
      "@/static/output/output-161-8-1.geojson",
      "@/static/output/output-162-8-1.geojson",
      "@/static/output/output-163-8-1.geojson",
      "@/static/output/output-164-8-1.geojson",
      "@/static/output/output-165-8-1.geojson",
      "@/static/output/output-166-8-1.geojson",
      "@/static/output/output-167-8-1.geojson",
      "@/static/output/output-168-8-1.geojson",
      "@/static/output/output-169-8-1.geojson",
      "@/static/output/output-170-8-1.geojson",
      "@/static/output/output-171-8-1.geojson",
      "@/static/output/output-172-8-1.geojson",
      "@/static/output/output-173-8-1.geojson",
      "@/static/output/output-174-8-1.geojson",
      "@/static/output/output-175-8-1.geojson",
      "@/static/output/output-176-8-1.geojson",
      "@/static/output/output-177-8-1.geojson",
      "@/static/output/output-178-8-1.geojson",
      "@/static/output/output-179-8-1.geojson",
      "@/static/output/output-180-8-1.geojson",
      "@/static/output/output-181-8-1.geojson",
      "@/static/output/output-182-8-1.geojson",
      "@/static/output/output-183-8-1.geojson",
      "@/static/output/output-184-8-1.geojson",
      "@/static/output/output-185-8-1.geojson",
      "@/static/output/output-186-8-1.geojson",
      // 添加更多路径...
    ];
  } else {
    geoJsonUrls = [
      "@/static/区县边界/成县.json",
      "@/static/区县边界/宕昌县.json",
      "@/static/区县边界/徽县.json",
      "@/static/区县边界/康县.json",
      "@/static/区县边界/礼县.json",
      "@/static/区县边界/两当县.json",
      "@/static/区县边界/文县.json",
      "@/static/区县边界/武都区.json",
      "@/static/区县边界/西和县.json",
      "@/static/区县边界/舟曲县.json",
    ];
  }

  // 使用动态导入加载所有 JSON 文件
  const geoJsonPromises = geoJsonUrls.map((url) => importJson(url));

  // 等待所有 JSON 数据加载完成
  const geoJsonDataArray = await Promise.all(geoJsonPromises);

  // 现在 `geoJsonDataArray` 包含了所有加载的 JSON 数据
  console.log(geoJsonDataArray);

  // 处理加载的 GeoJSON 数据，将其转换为 OpenLayers 的 features 并添加到地图中
  geoJsonDataArray.forEach((data) => {
    const features = new GeoJSON().readFeatures(data, {
      featureProjection: "EPSG:4326",
    });

    features.forEach((feature) => {
      vectorSource.addFeature(feature);
      hideFeature(feature); // 自定义逻辑，用于隐藏某些 feature
    });

    previousFeatures = previousFeatures.concat(features); // 更新 previousFeatures
  });
};

 网络与本地请求（打包webpack）

因为需要打包webpack的缘故，所以需要将fetch换成import遍历url传递资源路径，结果是传递的参数和实际书写的参数都是字符串，结果却出现了两个不同的情况。

这是成功的，会打印出module，里面会有我需要的feature。

这是报错的，一片红了，现在只能尝试用绝对的路径去解决问题，不能尝试遍历后使用传参的方法了。 

 问题：

在代码中，使用 await import() 动态导入 JSON 文件时，出现了 找不到 module 的错误，可能是因为你在路径中使用了动态的 url，而不是静态的路径（例如 "@/static/区县边界/成县.json"）。ES6 的 import() 需要一个静态的模块路径，这意味着你不能直接将动态的变量传递给它。

有使用fetch解决的方法，但这属于http请求，所以不能使用，使用后打包会出现问题，无法去做成exe文件。

 好一点的解决方法如下：

const importJson = async (url) => {
  try {
    // Webpack 会根据路径将 JSON 文件自动打包并返回
    const data = await import(`@/static/区县边界/${url}`);
    return data.default || data; // 一些情况下可能需要 .default
  } catch (error) {
    console.error(error);
    return null;
  }
};

// 加载 GeoJSON 文件
const loadGeoJsonOrJsonFile = async (vectorSource, zoom) => {
  // 清理之前加载的 features
  previousFeatures.forEach((feature) => {
    vectorSource.removeFeature(feature);
  });
  previousFeatures = [];

  let geoJsonUrls = [];
  if (zoom > 1.6) {
    geoJsonUrls = [
      "621202109.json",  // 路径相对打包后的路径
      "621202110.json",
      // 其他 JSON 文件...
    ];
  } else {
    geoJsonUrls = [
      "成县.json",
      // 其他 JSON 文件...
    ];
  }

  const geoJsonPromises = geoJsonUrls.map((url) => importJson(url));

  const geoJsonDataArray = await Promise.all(geoJsonPromises);

  geoJsonDataArray.forEach((data) => {
    if (data) {
      const features = new GeoJSON().readFeatures(data, {
        featureProjection: "EPSG:4326",
      });

      features.forEach((feature) => {
        vectorSource.addFeature(feature);
        hideFeature(feature); // 自定义逻辑，用于隐藏某些 feature
      });

      previousFeatures = previousFeatures.concat(features);
    }
  });
};

用webpack打包的时候，json文件的加载在webpack5之后就不需要要去改config，但是我的项目中有使用到geojson文件，所以需要去改一下webpack的配置文件。使用了三个方案只有一个有用

npm install json-loader --save-dev

 先去下载一个依赖包然后再去vue.config.js里使用

const path = require("path");

module.exports = {
  transpileDependencies: true, // 转译依赖项
  publicPath: "./", // 设置公共路径

  chainWebpack: (config) => {
    // 设置 @ 别名，确保它指向 src 文件夹
    config.resolve.alias.set("@", path.resolve(__dirname, "src"));

    // 对 .geojson 文件的处理 (使用 Webpack 5 的 asset/resource 模块)
    config.module
      .rule("geojson")
      .test(/\.geojson$/)
      .type("javascript/auto") // 必须使用 javascript/auto 类型才能正确解析 JSON
      .use("json-loader") // 使用 json-loader
      .loader("json-loader")
      .end();

    // 对 .json 文件的处理 (同样使用 asset/resource)
    // config.module
    //   .rule("json")
    //   .test(/\.json$/)
    //   .type("javascript/auto") // Webpack 5 需要设置为 javascript/auto
    //   .use("asset/resource") // 使用 asset/resource 来处理 json 文件
    //   .loader("asset/resource")
    //   .options({
    //     name: "static/json/[name].[hash:8].[ext]", // 配置文件输出路径和文件名
    //   })
    //   .end();
  },
};

成功后的代码改成了如下的样式：

// 保存上一次加载的 features，便于移除
let previousFeatures = [];
// 用于缓存已经加载过的 GeoJSON 数据
let geoJsonCache = {};

// 定义动态导入函数
const importJson = async (url) => {
  if (geoJsonCache[url]) {
    return geoJsonCache[url];
  }
  console.log(url);
  console.log(typeof url);
  // const data = await import("区县边界/成县.json");
  const data1 = await import(`@/static/${url}`);
  // console.log(data);
  console.log(data1);
  geoJsonCache[url] = data1.default || data1; // 有些模块工具需要 `.default`
  return geoJsonCache[url];
};

// 加载 GeoJSON 或 JSON 文件的函数
const loadGeoJsonOrJsonFile = async (vectorSource, zoom) => {
  // 首先移除上次加载的所有 features
  previousFeatures.forEach((feature) => {
    vectorSource.removeFeature(feature);
  });
  previousFeatures = []; // 清空上次加载的 features

  let geoJsonUrls = [];
  if (zoom > 1.6) {
    geoJsonUrls = [
      "62/621202109.json",
      "62/621202110.json",
      "62/621202113.json",
      "62/621202116.json",
      "62/621202122.json",
      "62/621202123.json",
      "62/621202211.json",
      "62/621221100.json",
      "62/621221101.json",
      "62/621221102.json",
      "62/621221103.json",
      "62/621221104.json",
      "62/621221105.json",
      "62/621221106.json",
      "62/621221107.json",
      "62/621221108.json",
      "62/621221109.json",
      "62/621221110.json",
      "62/621221111.json",
      "62/621221112.json",
      "62/621221203.json",
      "62/621221206.json",
      "62/621223100.json",
      "62/621223101.json",
      "62/621223102.json",
      "62/621223103.json",
      "62/621223106.json",
      "62/621223107.json",
      "62/621223108.json",
      "62/621223206.json",
      "62/621223207.json",
      "62/621223209.json",
      "62/621223211.json",
      "62/621223212.json",
      "62/621223213.json",
      "62/621223214.json",
      "62/621223215.json",
      "62/621223216.json",
      "62/621223217.json",
      "62/621223218.json",
      "62/621223219.json",
      "62/621223224.json",
      "62/621224100.json",
      "62/621224102.json",
      "62/621224103.json",
      "62/621224105.json",
      "62/621224108.json",
      "62/621224110.json",
      "62/621224112.json",
      "62/621224113.json",
      "62/621224209.json",
      "62/621225100.json",
      "62/621225101.json",
      "62/621225102.json",
      "62/621225103.json",
      "62/621225104.json",
      "62/621225105.json",
      "62/621225106.json",
      "62/621225108.json",
      "62/621225109.json",
      "62/621225110.json",
      "62/621225111.json",
      "62/621225112.json",
      "62/621225113.json",
      "62/621225114.json",
      "62/621225206.json",
      "62/621225208.json",
      "62/621225210.json",
      "62/621225300.json",
      "62/621225301.json",
      "62/621225302.json",
      "62/621225304.json",
      "62/621225305.json",
      "62/621225306.json",
      "62/621226100.json",
      "62/621226101.json",
      "62/621226102.json",
      "62/621226103.json",
      "62/621226104.json",
      "62/621226105.json",
      "62/621226106.json",
      "62/621226107.json",
      "62/621226108.json",
      "62/621226109.json",
      "62/621226110.json",
      "62/621226111.json",
      "62/621226112.json",
      "62/621226113.json",
      "62/621226114.json",
      "62/621226115.json",
      "62/621226116.json",
      "62/621226117.json",
      "62/621226118.json",
      "62/621226119.json",
      "62/621226120.json",
      "62/621226121.json",
      "62/621226203.json",
      "62/621226215.json",
      "62/621226219.json",
      "62/621226224.json",
      "62/621226228.json",
      "62/621226231.json",
      "62/621226232.json",
      "62/621227100.json",
      "62/621227101.json",
      "62/621227102.json",
      "62/621227103.json",
      "62/621227104.json",
      "62/621227105.json",
      "62/621227106.json",
      "62/621227107.json",
      "62/621227108.json",
      "62/621227109.json",
      "62/621227110.json",
      "62/621227111.json",
      "62/621227112.json",
      "62/621227208.json",
      "62/621227211.json",
      "62/621228100.json",
      "62/621228101.json",
      "62/621228102.json",
      "62/621228103.json",
      "62/621228104.json",
      "62/621228105.json",
      "62/621228201.json",
      "62/621228203.json",
      "62/621228204.json",
      "62/621228207.json",
      "62/621228210.json",
      "62/621228212.json",
      "62/623023103.json",
      "62/623023106.json",
      "62/623023107.json",
      "62/623023108.json",
      "62/623023109.json",
      "62/623023110.json",
      "62/623023111.json",
      "62/623023112.json",
      "62/623023200.json",
      "62/623023213.json",
      "output/output-102-8-1.geojson",
      "output/output-103-8-1.geojson",
      "output/output-104-8-1.geojson",
      "output/output-105-8-1.geojson",
      "output/output-106-8-1.geojson",
      "output/output-107-8-1.geojson",
      "output/output-108-8-1.geojson",
      "output/output-109-8-1.geojson",
      "output/output-110-8-1.geojson",
      "output/output-111-8-1.geojson",
      "output/output-112-8-1.geojson",
      "output/output-113-8-1.geojson",
      "output/output-114-8-1.geojson",
      "output/output-115-8-1.geojson",
      "output/output-116-8-1.geojson",
      "output/output-117-8-1.geojson",
      "output/output-118-8-1.geojson",
      "output/output-119-8-1.geojson",
      "output/output-120-8-1.geojson",
      "output/output-121-8-1.geojson",
      "output/output-122-8-1.geojson",
      "output/output-123-8-1.geojson",
      "output/output-124-8-1.geojson",
      "output/output-125-8-1.geojson",
      "output/output-126-8-1.geojson",
      "output/output-127-8-1.geojson",
      "output/output-128-8-1.geojson",
      "output/output-129-8-1.geojson",
      "output/output-130-8-1.geojson",
      "output/output-131-8-1.geojson",
      "output/output-132-8-1.geojson",
      "output/output-133-8-1.geojson",
      "output/output-134-8-1.geojson",
      "output/output-135-8-1.geojson",
      "output/output-136-8-1.geojson",
      "output/output-137-8-1.geojson",
      "output/output-138-8-1.geojson",
      "output/output-139-8-1.geojson",
      "output/output-140-8-1.geojson",
      "output/output-141-8-1.geojson",
      "output/output-142-8-1.geojson",
      "output/output-143-8-1.geojson",
      "output/output-144-8-1.geojson",
      "output/output-145-8-1.geojson",
      "output/output-146-8-1.geojson",
      "output/output-147-8-1.geojson",
      "output/output-148-8-1.geojson",
      "output/output-149-8-1.geojson",
      "output/output-150-8-1.geojson",
      "output/output-151-8-1.geojson",
      "output/output-152-8-1.geojson",
      "output/output-153-8-1.geojson",
      "output/output-154-8-1.geojson",
      "output/output-156-8-1.geojson",
      "output/output-157-8-1.geojson",
      "output/output-158-8-1.geojson",
      "output/output-159-8-1.geojson",
      "output/output-160-8-1.geojson",
      "output/output-161-8-1.geojson",
      "output/output-162-8-1.geojson",
      "output/output-163-8-1.geojson",
      "output/output-164-8-1.geojson",
      "output/output-165-8-1.geojson",
      "output/output-166-8-1.geojson",
      "output/output-167-8-1.geojson",
      "output/output-168-8-1.geojson",
      "output/output-169-8-1.geojson",
      "output/output-170-8-1.geojson",
      "output/output-171-8-1.geojson",
      "output/output-172-8-1.geojson",
      "output/output-173-8-1.geojson",
      "output/output-174-8-1.geojson",
      "output/output-175-8-1.geojson",
      "output/output-176-8-1.geojson",
      "output/output-177-8-1.geojson",
      "output/output-178-8-1.geojson",
      "output/output-179-8-1.geojson",
      "output/output-180-8-1.geojson",
      "output/output-181-8-1.geojson",
      "output/output-182-8-1.geojson",
      "output/output-183-8-1.geojson",
      "output/output-184-8-1.geojson",
      "output/output-185-8-1.geojson",
      "output/output-186-8-1.geojson",
      // 添加更多路径...
    ];
  } else {
    geoJsonUrls = [
      "区县边界/成县.json",
      "区县边界/宕昌县.json",
      "区县边界/徽县.json",
      "区县边界/康县.json",
      "区县边界/礼县.json",
      "区县边界/两当县.json",
      "区县边界/文县.json",
      "区县边界/武都区.json",
      "区县边界/西和县.json",
      "区县边界/舟曲县.json",
    ];
  }

  // 使用动态导入加载所有 JSON 文件
  const geoJsonPromises = geoJsonUrls.map((url) => importJson(url));

  // 等待所有 JSON 数据加载完成
  const geoJsonDataArray = await Promise.all(geoJsonPromises);

  // 现在 `geoJsonDataArray` 包含了所有加载的 JSON 数据
  console.log(geoJsonDataArray);

  // 处理加载的 GeoJSON 数据，将其转换为 OpenLayers 的 features 并添加到地图中
  geoJsonDataArray.forEach((data) => {
    const features = new GeoJSON().readFeatures(data, {
      featureProjection: "EPSG:4326",
    });

    features.forEach((feature) => {
      vectorSource.addFeature(feature);
      hideFeature(feature); // 自定义逻辑，用于隐藏某些 feature
    });

    previousFeatures = previousFeatures.concat(features); // 更新 previousFeatures
  });
};

在改代码的时候又碰到个模块问题：

同步模块 vs 异步模块

同步的请求返回的值

异步的请求返回的值

 

 

  • import: 返回的是一个 Promise，你需要通过 then 或 await 来获取模块对象。

  • await import: 使用 await 会等待模块加载完成，然后返回模块对象。

Promise 的内部状态

当你查看 Promise 时，会看到 [[PromiseState]] 和 [[PromiseResult]]：

  • [[PromiseState]]: "pending" 表示 Promise 还在等待完成。

  • [[PromiseState]]: "fulfilled" 表示 Promise 已完成，其结果存储在 [[PromiseResult]] 中。

Demons_kirit
关注
python解析json文件写入数据库_python解析jason串，数据存入数据库
weixin_39540271的博客
12-04 1702
#######################{"xxxx":{ "errsum": 0, "result":{ "os": { "v_message": { "check": "OK", "info": "" }, "v_space": { "check": "OK", "info": "" }, "v_indoe": { "check": "OK", "info": "" }, "v_awai...
Flutter 从 Assets 中读取 JSON 文件：指南 [2024]
前端全栈开发者
04-26 1037
在本教程中，我们将探讨如何从 Flutter 项目中的 asset 中读取 JSON 文件。您将找到详细的解释、实际示例和最佳实践，使您的 JSON 文件处理顺利高效。那么，让我们深入了解 Flutter 和 JSON 的世界吧！
await
Oh_My_Godjun的博客
05-22 740
function sleep(ms) { return new Promise((resolve) => { $.ajax({ url:"http://crawlerapi.buji.net.cn/api/Crawler/projects?pageIndex=1&pageSize=10", async:true,...
启动vue3报错await import****
z17864151193的博客
04-17 2708
await import('source-map-support').then((r) => r.default.install())
Web前端之JavaScript的顶级await，不需要使用async声明即可使用await、import
CSDN博客主页地址：https://mengjian.blog.csdn.net/
06-01 2395
Web前端之JavaScript的顶级await，不需要使用async声明即可使用await、import
await的使用 （前端异步问题）
weixin_48746140的博客
04-18 556
假设你需要按照一定顺序执行一系列异步操作，其中每个操作的结果取决于前一个操作的结果。在这种情况下，适合使用 async/await 来简化代码流程。假设你需要从不同的 API 端点获取数据，并且这些请求是并行执行的。在这种情况下，适合使用 Promise.all() 方法。假设你需要先获取用户信息，然后根据用户信息获取相关的订单信息。在这种情况下，适合使用 async/await 来避免回调地狱。案例三：处理依赖关系的异步操作。案例二：处理嵌套的异步操作。案例一：处理多个并发请求。
json解析
jiangawait的博客
02-23 319
javascript： eval()和JSON.parse()比较： eval（）：不安全，不推荐使用 JSON.parse() :安全， 推荐使用； JQuery： $.parseJSON()
jsnx:解析结构化的json文件以响应组件
05-08
JSNX是一个强大的工具，专门设计用于解析结构化的JSON文件，以便在React应用程序中轻松地利用这些数据创建动态和响应式的组件。这个库尤其适用于Next.js框架，它允许开发者在服务端渲染（SSR）和客户端渲染之间无缝...
vue实战指南 vue中引用json数据的方法
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
10-06 2510
例如，可以在项目启动时加载必要的配置信息，或者在组件内部引用静态数据，减少不必要的HTTP请求，从而优化用户体验。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。通过Vuex，可以在多个组件之间共享JSON数据，保持数据的一致性和可预测性。在SPA（单页应用）中，可以考虑在路由导航之前预加载必要的JSON数据，以减少用户的等待时间。无论使用哪种方式获取JSON数据，都应该加入适当的错误处理机制，确保即使在请求失败的情况下也能给出友好的用户反馈。
处理一行一行的json格式的json文件 导入到mysql中的工具
最新发布
10-13
处理JSON格式的文件并将其导入MySQL数据库通常需要通过编程语言配合相应的库或工具来完成。以下是一些常用的方法： 1. **Python**: 使用`pandas`库可以很方便地加载JSON文件，并将其转换为DataFrame，再通过`mysql-...
async function_如何简单理解 JavaScript 的 Async 和 Await？
weixin_39960793的博客
11-19 330
关注前端达人，与你共同进步文章参考来源：https://www.oxxostudio.tw/articles/201908/js-async-await.html原文作者：oxxostudio由于网页为繁体内容，术语描述和话术与我们有差异的问题，笔者在保证不改变原意的基础上做了调整，并在此基础上进行了错误校正，如发现问题，欢迎你的指正开篇自从Async 和Await 出现后，大幅简化Ja...
es6动态模块import()
qq_37312180的博客
03-11 3437
import命令会被 JavaScript 引擎静态分析，先于模块内的其他语句执行（import命令叫做“连接” binding 其实更合适）。上面代码中，引擎处理import语句是在编译时，这时不会去分析或执行if语句，所以import语句放在if代码块之中毫无意义，因此会报句法错误，而不是执行时错误。也就是说，import和export命令只能在模块的顶层，不能在代码块之中（比如，在if代码块之中，或在函数之中）。这样的设计，固然有利于编译器提高效率，但也导致无法在运行时加载模块。
webpack详细笔记
weixin_39814577的博客
12-14 1312
目录 1.npm命令 2.package.json 3.webpack配置文件 4.source map 5.自动编译 6.模块热更新 7.tree shaking(移除未引用代码) 8.生产环境构建 9.代码分离 10.懒加载 11.缓存 12.创建library 13.shimming 14.babel 15.service workers 16.typescript 17.其他 1.npm命令 npm -v：查看npm版本 npm install：从package.json中安装依赖 npm ins
ES6 async函数（对比generator函数（内置执行器、语义、适用性、返回）、使用形式、用法（返回对象及状态变化）、await命令、错误处理、使用注意点、顶层await）
AIWWY的博客
09-03 557
目录 async函数 对比generator函数 内置执行器。 更好的语义。 更广的适用性。 返回值是 Promise。 使用形式 用法 基础用法 返回 Promise 对象 Promise 对象的状态变化 await 命令 错误处理 使用注意点 顶层await async函数 async 函数是Generator 函数的语法糖。它将Generator 函数的星号（*）替换成async，将yield替换成await。 对比generator函数 async函数...
JavaScript语法特性篇-动态导入 import()
weixin_43303603的博客
06-24 3267
动态导入import 使用场景及如何使用
Python import json 导入
亮亮的专栏
06-28 4165
JSON是用于存储和交换数据的语法。JSON是使用JavaScript对象表示法编写的文本。本文主要介绍Python json 导入。 原文地址：Python import json 导入
深入探讨 Python 的 import 机制：实现远程导入模块
王炳明
10-28 503
所谓的模块导入（ import ），是指在一个模块中使用另一个模块的代码的操作，它有利于代码的复用。 在 Python 中使用 import 关键字来实现这个操作，但不是唯一的方法，还有 importlib.import_module() 和 __import__() 等。 也许你看到这个标题，会说我怎么会发这么基础的文章？ 与此相反。恰恰我觉得这篇文章的内容可以算是 Python 的进阶技能，会深入地探讨并以真实案例讲解 Python import Hook 的知识点。 当然为了使文章更系统、全面，前面会
vite打包报错：await import(‘source-map-support‘).then((r) =＞ r.default.install())(亲测有效)
qq_45651984的博客
10-25 9384
vite打包报错：await import('source-map-support').then((r) => r.default.install())(亲测有效)
13 代码分割之import静动态导入
Stephy_Yy
05-09 1477
前端首屏优化方案之一 项目构建时会整体打包成一个bundle的JS文件，而有的代码、模块是加载时不需要的，需要分割出来单独形成一个文件块chunk（不会打包在main里），让模块懒加载（想加载时才加载），以减少应用体积、减少加载时的体积。 import是关键字而非函数（类比typeof，typeof '123’ or typeof('123')） 静态导入： import xxx from ''，导入并加载时，导入的模块会被编译，不是按需编译 动态导入：import('') 根据条件或按需的模块导入
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值