arcgis of js 4.x 笔记（3） 矢量、栅格图层的加载、图层查询、弹窗等

在具体的项目工作中，最后主要的目的是为了加载一些 .shp .tif 文件，然后在地图上展示，之前的笔记写了如何加载底图和控件，现在记录一下如何加载矢量和栅格文件。

1.图层的加载

目前我使用最多的图层有
FeatureLayer （主要是用来一些 shp 矢量 文件数据）
MapImageLayer （主要是用来加载一些 tif 栅格文件数据）
GraphicsLayer （主要用来加载一些点、线、面数据）

1.1 FeatureLayer 加载

FeatureLayer 矢量加载主要客源加载两个方面的数据，一个是服务器端的数据
例如

加载服务

const  W_layer1 = new FeatureLayer({
 url: "http://localhost:6080/arcgis/rest/services/CoastalWetland/MapServer/0"
});
map.add(W_layer2,0); 

这样是最简单的加载，当然可以添加其他参数，具体的你可以参看这个api

点我就出api

加载本地tif数据

具体这个如何加载我在另外一篇博客写了
在可以补充几点
1.可以在动态文件夹下直接注册D:\ 然后文件名上加上路径就可以找到对应的TIF文件
2.tif 没办法给加载样式

1.2 MapImageLayer 加载

MapImageLayer 主要是用来加载矢量数据以及矢量数据查询。
服务数据加载和FeatureLayer 一样

 const   W_layer2 = new MapImageLayer({
 url: "http://localhost:6080/arcgis/rest/services/CoastalWetland/MapServer",
 sublayers: [
     {
         id: 1,
         visible: true
     }
 ]
});
  map.add(W_layer2,0); 

具体的可以参考api

加载shp数据，大致和FeatureLayer 差不多，但是要注意如下
1.动态文件只有一层，所以FeatureLayer 上注册D:\ ，然后加载 路径+文件名的的这种方式行不通，只能动态加载一层文件，即注册一个D:\testData 文件夹，然后加载这个文件夹下的数据，无法加载这个文件夹下其他文件夹下的数据。
2.shp数据可以进行更改样式。
3.shp文件可以快捷点击弹窗，具体说明如下。

2.矢量图层的的样式、查询、弹窗

首先是矢量图层的样式，可以通过renderer 进行加载

样式代码

	var shplayer = new FeatureLayer({
	url:    "http://localhost:6080/arcgis/rest/services/SampleWorldCities/MapServer/dynamicLayer",
	mode: FeatureLayer.MODE_SNAPSHOT,
	dynamicDataSource: {
		type: "data-layer",
		dataSource: {
		type: "table",
		workspaceId: '动态付出的ID',
		dataSourceName: '文件名'
		}
	}

  shplayer.renderer = {
			type: "simple",  //简单的
			symbol: {
			type: "simple-marker",  // 这可以选择是点（simple-marker）还是面（simple-fill）还是其他
			size: 4,	//大小
			color: "red",	//颜色
			outline: {  // 边框
				width: 0,
				color: "green"
				}
			}
         };
});

样式（红色面）

具体的更多属性可以查看api

查询代码
首选，我们要知道矢量数据的表格数据，可以通过arcgis map 查看，查询对应的表格字段，知道我们要通过什么查询，然后开始查询

			//需要查询图层
		var shplayer = new FeatureLayer({
			url:    "http://localhost:6080/arcgis/rest/services/SampleWorldCities/MapServer/dynamicLayer",
			mode: FeatureLayer.MODE_SNAPSHOT,
			dynamicDataSource: {
				type: "data-layer",
				dataSource: {
				type: "table",
				workspaceId: '动态付出的ID',
				dataSourceName: '文件名'
				}
			}
		
		//查询之后的样式属性 和上面的一样
		var symbolLv1 = {
			type: "simple-marker" 
			size: 5,
			color: [85, 255, 0],
			outline: {  
				width: 0,
				color: "darkblue"
				}
			};
			
        var Leng = selectShp("TYPE", "TYPE='11");//查询条件为 type=11
           
         shplayer .queryFeatures(Leng ).then(function (results) {
                            var features = results.features;
                            for (var i = 0; i < features.length; i++) {
                                //获得图形graphic
                                var graphic = features[i];
                                graphic.symbol = symbolLv1; //设置样式
                                view.graphics.add(graphic);	//可以这样直接添加图层 ，也可以用一个layer去接受然后在添加这个layer
                        }
                      });

			 //返回查询类
           function selectShp(filldName, sql) {
                const query = new Query();
                query.where = sql;
                query.outSpatialReference = {
                    wkid: 102100
                };
                query.returnGeometry = true;
                query.outFields = [filldName];
                //addQuryShpData(query, shpType)
                return query;
            };

弹窗代码

弹窗很简单，只需加载一下弹窗模板就行，和查询一样，需要查看一下表格属性，找到需要哪些字段

//模板演示
var templatehaiwu = {
    // autocasts as new PopupTemplate()
    title: "我是标题",
    content: [
        {
            type: "fields",
            fieldInfos: [
                {
                    fieldName: "FID",
                    label: "ID "
                },
                {
                    fieldName: "x",
                    label: "中心经度 "
                },{
                    fieldName: "y",
                    label: "中心纬度 "
                }
            ]
        }
    ]
};
		//加载图层
		var shplayer = new FeatureLayer({
			url:    "http://localhost:6080/arcgis/rest/services/SampleWorldCities/MapServer/dynamicLayer",
			mode: FeatureLayer.MODE_SNAPSHOT,
			dynamicDataSource: {
				type: "data-layer",
				dataSource: {
				type: "table",
				workspaceId: '动态付出的ID',
				dataSourceName: '文件名'
				}
			}
		
//添加弹窗 这样就可以了
 shplayer.popupTemplate = templatehaiwu;

如图