admin管理员组文章数量:1650833
Arcgis Online - FeatureLayer篇
- 1.FeatureLayer简介
- 2.上传shp文件至Arcgis Online
- 3.Arcgis for Javascript Api
1.FeatureLayer简介
FeatureLayer是可以从地图服务或要素服务创建的单个图层;ArcGIS Online或ArcGIS Enterprise门户项目;或来自一系列客户端功能。该层可以是空间(具有地理特征)或非空间(表)。
空间层由离散要素组成,每个要素都有一个几何图形,可以将其呈现在2D MapView或3D SceneView中,作为具有空间上下文的图形。要素还包含数据属性,这些数据属性提供有关其所代表的实际要素的其他信息;属性可以在弹出窗口中查看,并用于渲染图层。可以查询,分析和渲染 FeatureLayers 以在空间上下文中可视化数据。
非空间层是不具有表示地理特征的空间列的表。
引用自Arcgis for javaScript Api文档
https://developers.arcgis/javascript/latest/api-reference/esri-layers-FeatureLayer.html#spatialReference
2.上传shp文件至Arcgis Online
首先将你的shp文件打包成一个zip压缩包(可以多个shp文件合并在一起打包)
然后打开Arcgis for Developers网站,登录你的Arcgis账户,点击右上角的 “仪表盘” 图标。
有两个地方可以添加新的Layer文件,第一个是右上角 “仪表盘” 旁边的 “+” ,悬停在此处可以浮出一列选项卡,选择 “New Layer” 项;第二个就是打开 “仪表盘” 界面,找到ArcGIS for Developers那一行,单击 “New Layer” 项,也能进入添加Layer的页面。
点击 “Select a file” 按钮,找到之前打包好的Shp压缩文件,然后选择 “打开”。
选择你的zip文件类型,此处应选择 “Shapefile” 文件类型。
选择完成后点击 “Upload” 按钮,等待上传完毕,上传完成后输入你的Layer标题、服务名以及一个Tags标签。
设置完成后,点击 “Settings” 进行图层属性设置,首先将图层的共享属性设置为 “Everyone” (本案例设置为Everyone即可,其他类型暂时没有尝试过,可能需要做一些身份验证才能使用),然后将权限设置中的 “Enable Editing” (既不允许进行修改设置)设置取消勾选即可。
然后点击下方的 “Create Layer” 按钮,等待创建完毕即可。
上传完成后即为下图,此FeatureLayer层中包含了6个要素图层,右侧的 “Layer ID” 、“Service URL” 这两个参数在后续的开发过程中会使用到。
此详情页面也可以在 “仪表板” 界面的下方,“Layers” 栏中找到,单击打开即可。
3.Arcgis for Javascript Api
本案例使用的Arcgis for JavaScript Api版本为4.15,是目前支持的最新版本,此处主要演示如何使用FeatureLayer来展示要素图层的数据,完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>FeatureLayer - 4.15</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet"
href="https://js.arcgis/4.15/esri/themes/light/main.css" />
<script src="https://js.arcgis/4.15/"></script>
<script>
require([
"esri/config",
"esri/request",
"esri/Color",
"esri/layers/BaseTileLayer",
"esri/Map",
"esri/layers/FeatureLayer",
"esri/views/MapView"
], function (esriConfig, esriRequest, Color, BaseTileLayer, Map, FeatureLayer, MapView) {
let TintLayer = BaseTileLayer.createSubclass({
properties: {
urlTemplate: null,
tint: {
value: null,
type: Color
}
},
getTileUrl: function (level, row, col) {
return this.urlTemplate
.replace("{z}", level)
.replace("{x}", col)
.replace("{y}", row);
},
fetchTile: function (level, row, col) {
var url = this.getTileUrl(level, row, col);
return esriRequest(url, {
responseType: "image",
allowImageDataAccess: true
}).then(
function (response) {
var image = response.data;
var width = this.tileInfo.size[0];
var height = this.tileInfo.size[0];
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;
context.drawImage(image, 0, 0, width, height);
return canvas;
}.bind(this)
);
}
});
//高德地图底层
//esriConfig.request.corsEnabledServers.push("webst01.is.autonavi");
//gaoDeLayer = new TintLayer({
// urlTemplate:
// "http://webst01.is.autonavi/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
// tint: new Color("#004FBB"),
// title: "高德地图"
//});
//谷歌地图底层
esriConfig.request.corsEnabledServers.push("http://www.google/");
let digitalTileLayer = new TintLayer({
urlTemplate:
"http://www.google/maps/vt/lyrs=m@226000000&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}&s=Galil",
tint: new Color("#004FBB"),
title: "谷歌地图"
});
const map = new Map({
//basemap: "gray" //不设置此basemap就不存在底图,不过本案例使用了高德
});
map.add(digitalTileLayer);
var linelayer1 = new FeatureLayer({
url: `此处填写Service URL/对应图层的索引`,
title: "雨水管道"
});
const view = new MapView({
container: "viewDiv",
center: [118.829248, 32.026729],
zoom: 14,
map: map
});
map.add(linelayer1);
});</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
此处需要注意一点,map对象先将谷歌地图添加进来,然后才添加了FeatureLayer,这个顺序关系不能违反,不然谷歌地图会将FeatureLayer图层盖在下方,造成FeatureLayer不能正常显示出来的问题。
引入FeatureLayer的关键代码为这一部分:
var linelayer1 = new FeatureLayer({
url: `此处填写Service URL/对应图层的索引`,
title: "雨水管道"
});
const view = new MapView({
container: "viewDiv",
center: [118.829248, 32.026729],
zoom: 14,
map: map
});
map.add(linelayer1);
首先,定义了一个FeatureLayer对象,将其指向的url地址改为发布到Arcgis Online中的Service URL, “url” 属性结尾的数字则是你需要展示的shp图层在FeatureLayer中List的索引,FeatureLayer其实需要指定一个几何类型,设置FeatureLayer的 “geometryType” 属性即可,例如:
var linelayer1 = new FeatureLayer({
url: `此处填写Service URL/对应图层的索引`,
title: "雨水管道",
geometryType:"polyLine"
});
所有的要素必须具有相同的类型,如不设置 “geometryType” 属性,则会根据此图层中的要素类型进行推断(即按要素类型自动设定其FeatureLayer的geometryType),上例完整代码处就没有特指此FeatureLayer的geometryType。
geometryType允许设置的值包括:“point” | “multipoint” | “polyline” | “polygon” | “multipatch” | “mesh” 这几种。
完整案例展示效果如下:
可以看出,已经将FeatureLayer中的要素图层展示在了Web地图中了,其余要素图层按照此方法可依次加入到Web地图中来。
本文标签: ArcGISOnlineFeatureLayer
版权声明:本文标题:Arcgis Online - FeatureLayer篇 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1729531303a1204841.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论