前言
前段时间看到 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 相关开发经验;