【TS 4 ArcGIS】- hello world

官方案例地址

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