Drupal自定义地图模块中GeoJSON文件动态路径调用问题

方案一：通过路由提供GeoJSON访问端点 #

这种方法通过创建专用路由来返回GeoJSON内容，路径完全动态，不受站点部署结构影响。

1. 更新路由配置（routing.yml） #

添加新路由指向控制器的GeoJSON返回方法：

carto_conseillers.content:
  path: '/carto_conseillers'
  defaults:
    _controller: '\Drupal\carto_conseillers\Controller\CartoConseillersController::content'
    _title: 'Une page exemple avec un contenu simple'
  requirements:
    _permission: 'access content'
  core: 8.x

# 新增GeoJSON路由
carto_conseillers.geojson_annuaire:
  path: '/carto-conseillers/geojson/annuaire'
  defaults:
    _controller: '\Drupal\carto_conseillers\Controller\CartoConseillersController::getAnnuaireGeoJson'
  requirements:
    _permission: 'access content'
  core: 8.x

2. 扩展控制器方法（ModuleController.php） #

添加读取并返回GeoJSON文件的方法，同时调整文件存放路径（推荐将GeoJSON从src/geojson移到模块根目录的geojson文件夹，符合Drupal资源规范）：

namespace Drupal\carto_conseillers\Controller;  

use Drupal\Core\Controller\ControllerBase; 
use Symfony\Component\HttpFoundation\Response;

class CartoConseillersController extends ControllerBase {
    
  public function content() {
    return [
      '#type' => 'markup',
      '#markup' => '<div id="map" class="map"></div>
            <div id="info">&nbsp;</div>
            <div id="popup"></div>',
      '#attached' => [
        'library' => [
          'carto_conseillers/openlayer',
          'carto_conseillers/carto_annuaire',
        ],
      ],
    ];
  }

  // 新增返回GeoJSON的方法
  public function getAnnuaireGeoJson() {
    $module_path = drupal_get_path('module', 'carto_conseillers');
    $file_path = $module_path . '/geojson/annuaire_cf.geojson';
    
    if (!file_exists($file_path)) {
      return new Response('GeoJSON file not found', 404);
    }
    
    $content = file_get_contents($file_path);
    return new Response($content, 200, ['Content-Type' => 'application/geo+json']);
  }
  
}

3. 修改JavaScript路径（carto_annuaire.js） #

替换硬编码路径为新路由的URL：

var url = "/carto-conseillers/geojson/annuaire";

var centerProj = new ol.proj.transform([1.33333,47.583328], 'EPSG:4326', 'EPSG:3857');

const source = new ol.source.Vector({
    url: url,
    format: new ol.format.GeoJSON(),
  });

// 其余代码保持不变

方案二：通过Drupal Settings传递动态路径 #

这种方法无需额外路由，直接将动态路径注入到前端JS的全局配置中。

1. 更新控制器传递路径（ModuleController.php） #

在返回内容时添加drupalSettings，注入GeoJSON的动态URL：

public function content() {
  $module_path = drupal_get_path('module', 'carto_conseillers');
  // 构建绝对访问路径
  $geojson_url = base_path() . $module_path . '/geojson/annuaire_cf.geojson';

  return [
    '#type' => 'markup',
    '#markup' => '<div id="map" class="map"></div>
          <div id="info">&nbsp;</div>
          <div id="popup"></div>',
    '#attached' => [
      'library' => [
        'carto_conseillers/openlayer',
        'carto_conseillers/carto_annuaire',
      ],
      'drupalSettings' => [
        'cartoConseillers' => [
          'geojsonUrl' => $geojson_url,
        ],
      ],
    ],
  ];
}

2. 更新库依赖（module.libraries.yml） #

添加core/drupalSettings依赖，确保前端能读取全局配置：

carto_annuaire:
  js:
    js/carto_annuaire.js: {}
  dependencies:
    - core/drupalSettings
  css:
    theme:
      css/carto_annuaire.css: {}

openlayer:
  remote: https://github.com/openlayers/openlayers/
  version: 7.2.2
  license:
    name: BSD 2-Clause License
    url: https://github.com/openlayers/openlayers/blob/main/LICENSE.md
    gpl-compatible: true
  js: 
    https://cdn.jsdelivr.net/npm/ol@v7.2.2/dist/ol.js: { type: external }

3. 修改JavaScript读取路径（carto_annuaire.js） #

从全局配置中获取动态路径：

// 从drupalSettings读取动态路径
var url = drupalSettings.cartoConseillers.geojsonUrl;

var centerProj = new ol.proj.transform([1.33333,47.583328], 'EPSG:4326', 'EPSG:3857');

const source = new ol.source.Vector({
    url: url,
    format: new ol.format.GeoJSON(),
  });

// 其余代码保持不变

内容的提问来源于stack exchange，提问作者Richard P.