WebGIS实战系列 四 基于React Hooks、Typescript、arcgis API for js3.x 的例子

此例子是基于 React Hooks、TS 以及 arcgis api for js 的例子；该项目还在完善中；
github地址：https://github.com/jiegiser/arcgis3.x_examples 觉得不错的话可以给个 star；
已完成下面内容：

---

加载 osm 地图（√）

加载天地图（√）

加载高德地图（√）

加载百度地图（√）

人员定位（√）

线标注（√）

加载热力图（√）

自定义绘制箭头路线（√）

项目存在的问题

• 没有充分发挥 ts 的作用；后续完善 arcgis api 的 ts 支持。

通过查资料发现 esri 发布的 @types/arcgis-js-api 虽然是有 3.x 的版本，但是只支持 4 的版本导出 __esri 命名空间以及直接使用:

import Map from 'esri/map'
const map = new Map()

• 解决方法、

可以通过下面的方法来进行类型注释：

import React, {
      useEffect } from 'react';
import * as esriLoader from 'esri-loader';
import IMap from 'esri/map';
import IPoint from 'esri/geometry/Point'
import ISpatialReference from 'esri/SpatialReference'
const options = {
     
  url: 'http://localhost/arcgis/init.js',
}
//加载脚本
esriLoader.loadScript(options)
esriLoader.loadCss(`http://localhost/arcgis/esri/css/esri.css`)
const PathReplay: React.FC = () => {
     
  useEffect(() => {
     
    initMap()
  }, [])
  const initMap =  () => {
     
    esriLoader.loadModules([
      'esri/map',
      'esri/geometry/Point',
      'esri/SpatialReference'
    ])
      .then(([Map, Point, SpatialReference]) => {
     
        const map: IMap = new Map('mapCon', {
     
          basemap: 'osm',
          center: [0, 0],
          zoom: 0
        })
        const spatialRe: ISpatialReference = new SpatialReference({
     
          wkid: 4326
        })
        // 矢量注记图层
        const PointObj: IPoint = new Point({
     
          x: 114.41703647375107,
          y: 23.10750961303711,
          spatialReference: spatialRe
        })
        map.centerAndZoom(PointObj, 11)
      })
      .catch(err => {
     
        console.error(err)
      })
  }
  return (
    <div id="mapCon">
    </div>
  )
}
export default PathReplay;

这样写 arcgis API 就会有对应的提示：

---

更新

react hooks 中 ts 类型注释

// 可以推断 age 是 number类型
const [age, setAge] = useState(20);

// 初始化值为 null 或者 undefined时，需要显示指定 name 的类型,
// name 为 string 或者 undefined
const [name, setName] = useState<string>();

// 初始化值为一个对象时
interface People {
     
    name: string;
    age: number;
    country?: string;
}
const [owner, setOwner] = useState<People>({
     name: 'jiegiser', age: 18});

// 初始化值是一个数组时
const [members, setMembers] = useState<People[]>([]);