一、发布要素类为Web图层
从ArcGIS Pro中共享要素类为Web图层,如数据不涉密,此处可以勾选共享给所有人。
共享成功后在ArcGIS Online上的要素图层页面复制URL链接备用
二、编写代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>加载Online上的图层</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.16/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.16/"></script>
<script>
require(["esri/Map", "esri/views/MapView","esri/layers/WebTileLayer","esri/layers/FeatureLayer"], function(Map, MapView,WebTileLayer,FeatureLayer) {
var tiledLayer = new WebTileLayer({
urlTemplate:
"http://mt0.google.cn/vt/lyrs=s&x={col}&y={row}&z={level}"
});
var tiledLayer_poi = new WebTileLayer({
urlTemplate:
"http://{subDomain}.tianditu.gov.cn/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=5823959c38b2d69b25e84a7482d27e10",
subDomains: ["t0", "t1", "t2", "t3","t4", "t5", "t6", "t7"],
});
var map = new Map({
basemap: {
baseLayers: [tiledLayer, tiledLayer_poi]
}
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 13,
center: [117.70,28.31] // longitude, latitude
});
// 从VS code中运行时,在网页上弹出的对话框中填写ArcGIS Online账号密码之后不能登陆,可将代码粘贴至CodePen运行
var xzxzqLayer = new FeatureLayer({
url: "https://services5.arcgis.com/6TqOiOhyqcUv6dB0/arcgis/rest/services/铅山县乡镇/FeatureServer/0"
});
map.add(xzxzqLayer, 0);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
注:如果第一步共享为web图层时没有勾选共享给所有人,在浏览器中运行html时会弹出登录Online的对话框,但是即使输入账号密码仍然不能正常登录,这时可以将代码复制到CodenPen中运行,输入账号密码之后可以正常登录Online以访问私有的要素图层。为求简化操作,在不涉密的情况下可以直接勾选共享给所有人,或者在Online中设置共享给所有人。