arcgis api for javascript之加载图层
图层种类有很多种:查看api
加载切片实例TileLayer
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/TileLayer",
"dojo/dom",
"dojo/on",
"dojo/domReady!"
],
function(
Map, SceneView, TileLayer, dom, on
) {
/*****************************************************************
定义图层
*****************************************************************/
var transportationLayer = new TileLayer({
url: "https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer",//arcgisserver切片图层地址
id: "streets",// 唯一id,指map中添加的图层id是唯一的
visible: false//默认是否显示
});
var housingLayer = new TileLayer({
url: "https://tiles.arcgis.com/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/New_York_Housing_Density/MapServer",
id: "ny-housing",
opacity: 0.9//透明度
});
/*****************************************************************
* 初始化Map时直接添加
*****************************************************************/
var map = new Map({
basemap: "oceans",
layers: [housingLayer]
});
/*****************************************************************
* 通过Map对象的方法添加图层
*****************************************************************/
map.add(transportationLayer);
var view = new SceneView({
container: "viewDiv",
map: map
});
/*****************************************************************
监听地图视图初始化过程
*****************************************************************/
view.on("layerview-create", function(event) {
if (event.layer.id === "ny-housing") {
// 判断当前加载的图层属性
console.log("LayerView for male population created!", event.layerView);
}
if (event.layer.id === "streets") {
//判断当前加载的图层属性
console.log("LayerView for streets created!", event.layerView);
}
});
/*****************************************************************
监听图层加载完成事件,缩放到图层范围
*****************************************************************/
view.when(function() {
housingLayer.when(function() {//es6语法
view.goTo(housingLayer.fullExtent);
});
});
var streetsLayerToggle = dom.byId("streetsLayer");
/*****************************************************************
*控制图层显示与隐藏
*******************************************************************/
on(streetsLayerToggle, "change", function() {
transportationLayer.visible = streetsLayerToggle.checked;
});
});
</script>
不同图层具有独自的属性和方法以及适用的服务,按需进行选择。
比如加载ogc标准的其他地图服务的wms,wmts切片服务,加载大量点数据的PointCloudLayer图层等等