| Arcgis api for JavaScript 4.X 学习 | 您所在的位置：网站首页 › arcgis加载进去的图层不显示 › Arcgis api for JavaScript 4.X 学习 |
Arcgis api for JavaScript 4.X 学习
|
1. 一定要掌握对应需求在官网中查询信息的能力，比如说要加载图层那么就需要对应到api reference下的layers下对应查找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下自行查找需要的控件） 实例一 html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } 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 //多个控件处于一个位置时，控制该插件在第几个出现 }); });5. 矢量图层、栅格图层加载实现效果如下：
（1）直接加切片服务当作底图（basemap）加载 注： 记得在前面引入tilelayer模块 切片服务加载 html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } 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 }); });成果展示如下
（2）加载切片图层 切片图层加载 html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } 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 }); });效果如下（注：页面第一次加载进来的时候，可能直接看不到切片图层，先右击检查看一下页面是否会报错，无报错的情况下缩放视图等待一会儿即可出现。）
|
https://developers.arcgis.com/javascript/latest/api-reference/
6. 切片图层加载（TileLayer）
【本文地址】