arcgis api for js 4.19 尝鲜（React + ts+ arcgis api）

前言

前段时间看到 arcgis api 更新 4.19 版本，而且全面拥抱 ES Modules 开发模式，这无疑是每个 giser 的福音啊；之前的版本基于 dojo 的那种笨重前端框架开发，学习成本大；基于 AMD 模块加载，真的是让人抓狂；虽然很多人也通过 webpack 修改加载策略，但是对于前端小白来说，配置一个 arcgis api 开发环境真的是难。。接下来我们来看看这个新版本；

搭建开发环境

初始化项目

首先我们搭建一个基本的开发环境，标题也说了，是基于 react + ts + arcgis api 进行开发；那么首先初始化一个 react + ts 的开发环境，输入下面命令：

npx create-react-app react-arcgis --template typescript --use-npm

项目名随便起，我这里是 react-arcgis

这里我就不做更多介绍，有关 react 框架的开发，大家可以去官网学习学习、或者你这里也可以初始化一个 vue 的项目，都可以；

初始化三维场景

然后我们初始化一个三维场景；操作很简单，首先安装 arcgis 的 npm 包；输入下面命令：

npm install @arcgis/core

新建一个组件叫 MapContainer；加上初始化三维场景并添加一个图层，如下代码：

import React, { useEffect, useRef } from 'react'
import { Map, SceneView, FeatureLayer, WebTileLayer } from '../../modules/arcgis.modules'
import './index.css'

const MapContainer = () => {
  const mapRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const map = createMap()
    addLayers(map)
    // 销毁 map 对象
    return () => {
      map && map.destroy()
    }
  }, [])

  const createMap = () => {
    const map = new Map({
       basemap: 'osm',
      ground: 'world-elevation'
    })

    mapRef.current && new SceneView({
      map: map,
      center: [-118.805, 34.027],
      zoom: 13,
      container: mapRef.current
    })
    return map
  }

  const addLayers = (map: Map) => {
    const trailheadsLayer = new FeatureLayer({
      url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_Styled/FeatureServer/0"
    })
    map.add(trailheadsLayer)
  }

  return (
    <div ref={mapRef} className="map-container"></div>
  )
}

export default MapContainer

对于这个 arcgis.modules，是我写了一个文件，用于导出 arcgis 对应的模块；如下代码：

import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import SceneView from '@arcgis/core/views/SceneView'
import WebTileLayer from '@arcgis/core/layers/WebTileLayer'

export {
  Map,
  MapView,
  SceneView,
  FeatureLayer,
  WebTileLayer
}

实现效果如下：

加载天地图

加载天地图，是通过 WebTileLayer 实现，代码如下：

import React, { useEffect, useRef } from 'react'
import { Map, SceneView, WebTileLayer } from '../../modules/arcgis.modules'
import './index.css'

const MapContainer = () => {
  const mapRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const map = createMap()
    addTdtLayers(map)
    // 销毁 map 对象
    return () => {
      map && map.destroy()
    }
  }, [])

  const createMap = () => {
    const map = new Map({
      ground: 'world-elevation'
    })

    mapRef.current && new SceneView({
      map: map,
      center: [103, 36],
      zoom: 13,
      container: mapRef.current
    })
    return map
  }

  const addTdtLayers = (map: Map) => {
    const tiledLayer = new WebTileLayer({
      urlTemplate: 'http://{subDomain}.tianditu.gov.cn/DataServer?T=vec_w&x={col}&y={row}&l={level}&tk=秘钥',
      subDomains: ["t0", "t1", "t2", "t3","t4", "t5", "t6", "t7"],
    })

    const tiledLayer_poi = new WebTileLayer({
      urlTemplate:
          "http://{subDomain}.tianditu.gov.cn/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=秘钥",
      subDomains: ["t0", "t1", "t2", "t3","t4", "t5", "t6", "t7"],
    })

    map.layers.addMany([tiledLayer, tiledLayer_poi])
  }

  return (
    <div ref={mapRef} className="map-container"></div>
  )
}

export default MapContainer

实现效果如下：

有需要该项目的可以从这个地址 clone ：

https://github.com/jiegiser/arcgis-react-demo

可以关注我的公众号，会分享一个 webgis 相关开发经验；