Arcgis api for JavaScript 4.X 学习——图层加载（要素图层、栅格图层、切片图层）

1. 一定要掌握对应需求在官网中查询信息的能力，比如说要加载图层那么就需要对应到api reference下的layers下对应查找API Referencehttps://developers.arcgis.com/javascript/latest/api-reference/

2. 加载矢量图层，显示本地地图服务（FeatureLayer）

引入featurelayer库

require(["esri/layers/FeatureLayer"], (FeatureLayer) => { /* code goes here */ });

创建FeatureLayer，下面代码中的url需替换成自己的本地地图服务

var pointLayer= new FeatureLayer({

url: "http://localhost:6080/arcgis/rest/services/hubei/湖北/MapServer/0"

});

将图层加载到地图中显示

map.add(pointLayer);

3. 加载栅格图层，显示本地栅格地图服务（MapImageLayer）

引入MapImageLayer模块

require(["esri/layers/MapImageLayer"], (MapImageLayer) => { /* code goes here */ });

创建栅格图层，url自行替换

const RasterLayer = new MapImageLayer({

url: " http://localhost:6080/arcgis/rest/services/raster/raster/MapServer"

});

将栅格图层加载到地图中

map.add(RasterLayer);

4. 完整html代码附上（代码中添加了指北针、home键，搜索控件等可在API Reference->widgets下自行查找需要的控件）

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><metaname="viewport"content="initial-scale=1,maximum-scale=1,user-scalable=no"/><title>实例一</title><link rel="stylesheet" href="http://localhost/4.18/esri/themes/light/main.css" /><script src="http://localhost/4.18/dojo/dojo.js"></script><style>html,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}</style><script>require(["esri/Map", "esri/views/MapView", "esri/layers/MapImageLayer","esri/widgets/BasemapGallery","esri/widgets/BasemapToggle","esri/widgets/Home","esri/widgets/Compass","esri/widgets/LayerList","esri/widgets/Legend","esri/widgets/Search","esri/layers/FeatureLayer"], (Map,MapView,MapImageLayer,BasemapGallery,BasemapToggle,Home,Compass,LayerList,Legend,Search,FeatureLayer) => {const map = new Map({basemap: "topo-vector"});const view = new MapView({container: "viewDiv",map: map,center:[114.31667,30.51667],zoom: 7 }});const RasterLayer = new MapImageLayer({url: "     http://localhost:6080/arcgis/rest/services/raster/raster/MapServer",title: "湖北栅格数据"});var pointLayer= new FeatureLayer({url: "http://localhost:6080/arcgis/rest/services/hubei/湖北/MapServer/0",title: "湖北点数据"       });var hbLayer= new FeatureLayer({url: "http://localhost:6080/arcgis/rest/services/hubei/湖北/MapServer/2",title: "湖北面数据" ,visible: false   });var countryLayer= new FeatureLayer({url: "http://localhost:6080/arcgis/rest/services/hubei/湖北/MapServer/1",title: "湖北线数据" ,visible: false      });const basemapToggle = new BasemapToggle({view: view,  nextBasemap: "hybrid"  });//添加const basemapGallery = new BasemapGallery({view: view});const homeWidget=new Home({view:view});const compass=new Compass({view: view});const layerList = new LayerList({view: view});const legend = new Legend({view: view});const searchWidget=new Search({view: view});map.add(RasterLayer);map.add(pointLayer);map.add(hbLayer);map.add(countryLayer);view.ui.add(compass, "top-left");view.ui.add(legend, { position: "bottom-right"});view.ui.add(homeWidget,"top-left");view.ui.add(compass,"top-left");view.ui.add(layerList,"top-right");view.ui.add(searchWidget,{position: "top-right",index: 0 //多个控件处于一个位置时，控制该插件在第几个出现});});</script></head><body><div id="viewDiv"></div></body>
</html>

5. 矢量图层、栅格图层加载实现效果如下：

6. 切片图层加载（TileLayer）

（1）直接加切片服务当作底图（basemap）加载

注：记得在前面引入tilelayer模块

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><metaname="viewport"content="initial-scale=1,maximum-scale=1,user-scalable=no"/><title>切片服务加载</title><link rel="stylesheet" href="http://localhost/4.18/esri/themes/light/main.css" /><script src="http://localhost/4.18/dojo/dojo.js"></script><style>html,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}</style><script>require(["esri/Map","esri/views/MapView","esri/layers/TileLayer","esri/Basemap"], function(Map,MapView,TileLayer,Basemap) {//自定义底图为发布的切片服务var basemap = new Basemap({baseLayers: [new TileLayer({url: "    http://localhost:6080/arcgis/rest/services/vector/HBvector/MapServer",title: "Basemap"})],title: "basemap",id: "basemap"});var map = new Map({basemap: basemap});var view = new MapView({container: "viewDiv",map: map,center: [114.31667,30.51667],//此部分自行选择视图中心经纬度zoom: 5});});</script></head><body><div id="viewDiv"></div></body>
</html>

成果展示如下

（2）加载切片图层

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><metaname="viewport"content="initial-scale=1,maximum-scale=1,user-scalable=no"/><title>切片图层加载</title><link rel="stylesheet" href="http://localhost/4.18/esri/themes/light/main.css" /><script src="http://localhost/4.18/dojo/dojo.js"></script><style>html,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}</style><script>require(["esri/Map","esri/views/MapView","esri/layers/TileLayer","esri/layers/MapImageLayer","esri/Basemap","esri/widgets/BasemapToggle"], function(Map,MapView,MapImageLayer,TileLayer,Basemap, BasemapToggle) {const tileLayer = new TileLayer({url: "  http://localhost:6080/arcgis/rest/services/hbqiepian2/hubei2/MapServer"});var map = new Map({basemap: "streets",layers:[tileLayer]});var view = new MapView({container: "viewDiv",map: map,center: [114.31667,30.51667],zoom: 5});});</script></head><body><div id="viewDiv"></div></body>
</html>

效果如下（注：页面第一次加载进来的时候，可能直接看不到切片图层，先右击检查看一下页面是否会报错，无报错的情况下缩放视图等待一会儿即可出现。）

Arcgis api for JavaScript 4.X 学习——图层加载（要素图层、栅格图层、切片图层）相关推荐

ArcGIS API for JavaScript 4.4学习笔记[新] AJS4.4和AJS3.21新特性
ESRI官网悄无声息突然更新4.4和3.21,公众号也没有什么消息.照例,给大家看看这次更新有什么新特性吧. 1. AJS 4.4 官方更新日志:点我,比较详细.我在这里抽一些主干作为说明. 1.1 ...
ArcGIS api for javascript 的入门学习
1.安装依赖 npm install @arcgis/core 2.按需引入(根据需要引入) import Map from "@arcgis/core/Map"; import ...
ArcGIS API for JavaScript 4.2学习笔记[10] 2D添加指北针widget、视图保存、视图padding（第二章完结）...
这几个例子是第二章除了入门之外比较简单的几个,就做个合集,把最核心的代码(第二参数)和引用放上来即可,不作多解释. 2D地图添加指北针widget 2D地图一般修正方向为正北方就需要这个widget ...
ArcGIS api for javascript——查找任务-在地图上查找要素
描述本例展示了如何使用查找任务搜索数据.本例在地图上用图表显示结果并用 DojoX的grid格式化结果为表格样式. FindTask构造函数需要一个ArcGIS Server地图服务的URL.本例使 ...
视频教程-主流前端框架下ArcGIS API for JavaScript的开发-其他
主流前端框架下ArcGIS API for JavaScript的开发毕业于中国矿业大学地理信息科学专业.现就任于全球领先的GIS公司,主要担任地理平台研发工作,日常工作任务是ArcGIS JS A ...
ArcGIS API for JavaScript心得体验
首发GIS派:ArcGIS API for JavaScript心得体验学习和使用ArcGIS API for JavaScript开发差不多有两年了吧,跌跌撞撞断断续续也做了几个小项目,学习之路相 ...
ArcGIS API For JavaScript学习笔记
之前学习ArcGIS API For JavaScript的一些记录,有些是转载的,不过转载的自己有重新做过一遍,这里做个总结,方便后面来学习回顾. 1.ArcGIS API For JavaScri ...
Arcgis api for javascript学习笔记(3.2X版本)-初步尝试
Arcgis api for javascript(3.22版本)官方地址 :https://developers.arcgis.com/javascript/3/ 1. 根据官方示例实现一个简单地图 ...
ArcGIS API For JavaScript（8）之使用动态图层dynamicLayers实现多图层合并截图
场景还原: 定位某个矢量图斑范围面,过滤展示该图斑,以图斑为中心,截图图斑周边并附带影像底图的截图. 在前端要实现地图截图,首先想到的是使用arcgis rest api中的export接口,这是没问 ...

Arcgis api for JavaScript 4.X 学习——图层加载（要素图层、栅格图层、切片图层）

Arcgis api for JavaScript 4.X 学习——图层加载（要素图层、栅格图层、切片图层）相关推荐

最新文章

热门文章