Esri-leaflet迁HTTPS后报Cannot read properties of undefined错误

基于旧版esri-leaflet开发的地图应用，原有功能为查询并展示已发布要素服务中的要素。当前需将搭载该地图的仪表板迁移至强制要求HTTPS协议的新服务器，迁移过程中持续触发报错，暂未定位问题原因。

• 报错信息：Uncaught TypeError: Cannot read properties of undefined
• 报错截图：

旧环境可正常运行的依赖引入代码 #

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="json2.js"></script>
<script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/0.0.1-beta.6/esri-leaflet.js"></script>
<script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet-renderers/0.0.1-beta.3/esri-leaflet-renderers.js"></script>

新环境当前使用的依赖引入代码 #

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js"></script>
<script src="https://unpkg.com/esri-leaflet@3"></script>
<script src="https://unpkg.com/esri-leaflet-renderers@3"></script>

触发报错的业务代码 #

报错在执行要素图层查询逻辑时触发，对应代码段如下：

q="OBJECTID="+params.objectid;
n=params.name;

project = L.esri.featureLayer(
  'https://dmdmaps.cabq.gov/serverext/rest/services/Public/Active_CABQ_Construction_Projects/FeatureServer/1',
  { where:q }
).addTo(map);   

• 核心根因为跨大版本升级导致的API不兼容：原有代码基于esri-leaflet 0.0.1-beta.6开发，当前直接升级到esri-leaflet v3，两个版本间隔多个正式大版本，L.esri.featureLayer的传参规则已经发生破坏性变更。旧beta版本支持第一个参数传服务URL字符串、第二个参数传配置项的写法，v2及之后的正式版本已废弃该写法，要求第一个参数必须为配置对象，服务地址需写入配置对象的url字段，旧写法会导致内部读取配置时取到undefined，触发类型错误。
• 首先修正要素图层初始化代码，适配新版API规则，修改后代码如下：

q = "OBJECTID=" + params.objectid;
n = params.name;

project = L.esri.featureLayer({
  url: 'https://dmdmaps.cabq.gov/serverext/rest/services/Public/Active_CABQ_Construction_Projects/FeatureServer/1',
  where: q
}).addTo(map);

• 清理冗余依赖避免冲突：esri-leaflet v2及以上版本已经将esri-leaflet-renderers的能力合并入核心包，不需要单独引入esri-leaflet-renderers，额外引入同版本的renderers包可能造成内部变量覆盖，直接删除该依赖的script引入标签即可。
• 校验HTTPS访问兼容性：在浏览器单独访问调用的要素服务地址，确认服务本身持有有效HTTPS证书、可正常加载服务元数据，不存在证书错误、HTTP/HTTPS跳转异常问题。如果要素服务本身不支持HTTPS，需要在自己的服务端配置反向代理转发请求，HTTPS页面直接加载HTTP资源会被浏览器安全策略拦截，导致资源加载失败触发后续undefined报错。
• 校验依赖加载顺序：确保所有脚本按「Leaflet核心库 → esri-leaflet库 → 自定义业务代码」的顺序加载，不要将地图初始化、要素查询的业务代码放在依赖库之前执行，避免依赖对象未初始化触发同类错误。

内容的提问来源于stack exchange，提问作者Jessica Ridout