官方案例地址
https://developers.arcgis.com/javascript/latest/guide/typescript-setup/index.html
本图文是根据官方提供的demo模板，做的一些修改
官方案例下载地址
开发环境
node v7.10.0
npm v4.2.0
arcgis for js 4.7
vs code
Live Server //vs code插件，运行web服务
初始化demo
npm install
//安装arcgis-js-api,直接使用官方demo可以忽略这步
npm install --save @types/arcgis-js-api
//dojo 依赖
npm install dojo-typings --save-dev
注：由于官方demo中package.json中 arcgis-js-api版本可能不是最新的，可以先去除掉arcgis 依赖版本或者直接修改版本号
运行
npm run dev //启动 ts 转 js
//运行 Live Server 启动web服务 默认端口号是 5500
运行效果
ts4gis-helloworld.png
功能介绍
- 通过LayerList做图层显示隐藏
- 通过WebTileLayer添加高德地图和高德影像图
- 通过GroupLayer将影像图和注解合并为一个图层组
- view.ui.remove属性移除官方版权信息标注
main.ts
import EsriMap = require("esri/Map");
import MapView = require("esri/views/MapView");
import GroupLayer = require("esri/layers/GroupLayer");
import WebTileLayer = require("esri/layers/WebTileLayer");
import LayerList = require("esri/widgets/LayerList");
import Point = require("esri/geometry/Point");
const gaodeWebTileLayer = new WebTileLayer({
title: "高德地图",
urlTemplate: "http://webrd0{subDomain}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={col}&y={row}&z={level}",
subDomains: ["1", "2", "3", "4"],
copyright: "高德地图"
});
const gaodeSat_WTL = new WebTileLayer({
title: "高德影像图",
urlTemplate: "http://webst0{subDomain}.is.autonavi.com/appmaptile?style=6&x={col}&y={row}&z={level}",
subDomains: ["1", "2", "3", "4"],
copyright: "高德影像图"
});
const gaodeSatAnnotion_WTL = new WebTileLayer({
title: "高德影像图注解",
urlTemplate: "http://webst0{subDomain}.is.autonavi.com/appmaptile?style=8&x={col}&y={row}&z={level}",
subDomains: ["1", "2", "3", "4"],
copyright: "高德影像图"
});
const gaodeSat_group = new GroupLayer({
title: "高德影像图"
});
gaodeSat_group.addMany([gaodeSat_WTL, gaodeSatAnnotion_WTL])
const map = new EsriMap({
layers: [gaodeWebTileLayer, gaodeSat_group]
});
const view = new MapView({
map: map,
container: "viewDiv",
center: new Point({
x: 118.244,
y: 34.052
}),
zoom: 10
});
//移除 版权信息
view.ui.remove(["attribution"]);
//图层列表
const layerList = new LayerList({
view: view
});
view.ui.add(layerList, "top-left");
更多内容，欢迎关注公众号
seeling_GIS
