arcgis 加载图层失败：无法读取未定义的属性（读取 'bind'）

Question

我正在尝试使用 Typescript 中的某个节点脚本查询 public ArcGIS 服务器，但出现错误：

[esri.layers.FeatureLayer] #load() Failed to load layer (title: 'Subway tcl stations center wgs84', id: '180b472baf2-layer-0') {
  error: TypeError: Cannot read properties of undefined (reading 'bind')
      at H (file:///home/cheezsteak/Code/Typescript/arcgis-query/node_modules/@arcgis/core/request.js:5:3006)
      at C (file:///home/cheezsteak/Code/Typescript/arcgis-query/node_modules/@arcgis/core/request.js:5:1588)
      at l._fetchService (file:///home/cheezsteak/Code/Typescript/arcgis-query/node_modules/@arcgis/core/layers/graphics/sources/FeatureLayerSource.js:5:7865)
      at load (file:///home/cheezsteak/Code/Typescript/arcgis-query/node_modules/@arcgis/core/layers/graphics/sources/FeatureLayerSource.js:5:2197)
      at load (file:///home/cheezsteak/Code/Typescript/arcgis-query/node_modules/@arcgis/core/core/Loadable.js:5:999)
      at l.createGraphicsSource (file:///home/cheezsteak/Code/Typescript/arcgis-query/node_modules/@arcgis/core/layers/FeatureLayer.js:5:13567)
      at async file:///home/cheezsteak/Code/Typescript/arcgis-query/node_modules/@arcgis/core/layers/FeatureLayer.js:5:7341
      at async Promise.all (index 2)
}

package.json

{
  "name": "arcgis-query",
  "version": "0.0.0",
  "main": "./src/main.ts",
  "type": "module",
  "license": "GPL",
  "private": true,
  "dependencies": {
    "@arcgis/core": "^4.23.7",
    "typescript": "^4.6.3"
  },
  "scripts": {
    "build": "tsc",
    "start": "node ./out/main.js"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ES2020",
    "rootDir": "src",
    "moduleResolution": "node",
    "outDir": "./out",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitAny": true,
    "skipLibCheck": true
  }
}

src/main.ts

import FeatureLayer from '@arcgis/core/layers/FeatureLayer.js'
import Query from '@arcgis/core/rest/support/Query.js'
import SpatialReference from '@arcgis/core/geometry/SpatialReference.js'

const main = async (): Promise<void> => {
  const url: string =
    'https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/subway_tcl_stations_center_wgs84/FeatureServer/0'
  const featureLayer = new FeatureLayer({ url })
  const query = new Query({
    outSpatialReference: SpatialReference.WGS84,
  })
  const featureSet = await featureLayer.queryFeatures(query)
  console.log('Feature Set', featureSet)
}

main()

运行和 yarn install && yarn build && yarn start 我得到上面的错误。

如果我在查询之前插入 await featureLayer.load()，我会得到同样的错误。

“未定义 'bind'”消息向我暗示它正在尝试将要素图层显示到某个地方，但我还没有告诉它在哪里，因为我根本不想显示它。这完全是一个控制台应用程序。

更新：打字稿不是问题。问题似乎是运行ning 节点中的 arcgis 代码。如果我像这样将 src/main.ts 翻译成 src/main.js：

import FeatureLayer from '@arcgis/core/layers/FeatureLayer.js'
import Query from '@arcgis/core/rest/support/Query.js'
import SpatialReference from '@arcgis/core/geometry/SpatialReference.js'

const main = () => {
  const url =
    'https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/subway_tcl_stations_center_wgs84/FeatureServer/0'
  const featureLayer = new FeatureLayer({ url })
  const query = new Query({
    outSpatialReference: SpatialReference.WGS84,
  })
  featureLayer.queryFeatures(query).then(featureSet => {
    console.log('Feature Set', featureSet)
  })
}
main()

和运行与node src/main.js我得到同样的错误。

Answer 1

只是为了证明代码应该有效。为了方便工作，我使用了另一项功能较少的服务。

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Intro to FeatureLayer | Sample | ArcGIS API for JavaScript 4.23
    </title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.23/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.23/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/rest/support/Query",
        "esri/geometry/SpatialReference"
      ], (
        Map,
        MapView,
        FeatureLayer,
        Query,
        SpatialReference
      ) => {
        // Carbon storage of trees in Warren Wilson College.
        const featureLayer = new FeatureLayer({
          url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/subway_tcl_stations_center_wgs84/FeatureServer/0"
        });

        let query = featureLayer.createQuery({
          outSpatialReference: SpatialReference.WGS84
        });
        featureLayer.queryFeatures(query)
          .then(function(response){
            console.log(response);
            document.getElementById("response").innerText = JSON.stringify(response.features);
          });
      });
    </script>
  </head>

  <body>
    <div id="response"></div>
  </body>
</html>

Answer 2

看来我使用的库是严格供 in-browser 使用的。我应该一直使用 @esri/arcgis-rest-feature-service 来代替。

package.json

{
  "name": "arcgis-query",
  "version": "0.0.0",
  "main": "./src/main.ts",
  "type": "module",
  "license": "GPL",
  "private": true,
  "dependencies": {
    "@esri/arcgis-rest-feature-service": "^4.0.3",
    "@esri/arcgis-rest-portal": "^4.0.3",
    "@esri/arcgis-rest-request": "^4.0.3",
    "typescript": "^4.6.3"
  },
  "scripts": {
    "build": "tsc",
    "start": "node ./out/main.js"
  }
}

src/main.ts

import * as arcgisRest from "@esri/arcgis-rest-request"
import * as arcgisRestFeatureService from "@esri/arcgis-rest-feature-service"

const main = async (): Promise<void> => {
  const url: string =
    'https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/subway_tcl_stations_center_wgs84/FeatureServer/0'
  const featureSet = await arcgisRestFeatureService.queryFeatures({
    url
  })
  console.log('Feature Set', featureSet)
}

main()

arcgis 加载图层失败：无法读取未定义的属性（读取 'bind'）

arcgis Failed to load layer: Cannot read properties of undefined (reading 'bind')

arcgis

typescript

arcgis-js-api

package.json

tsconfig.json

src/main.ts

package.json

src/main.ts