arcgis of js 4.x 笔记（3） 矢量、栅格图层的加载、图层查询、弹窗等 |
您所在的位置：网站首页 › 矢量数据地图怎么做的好 › arcgis of js 4.x 笔记（3） 矢量、栅格图层的加载、图层查询、弹窗等 |
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 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;如图 |
【本文地址】
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |