arcgis api for javascript之加载图层

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/82116422 arcgis ap...
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/82116422

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图层等等

相关文章
|
2月前
|
JavaScript 前端开发 Go
动态加载与异步加载 JavaScript 详解:加载远程js,加载成功后执行回调函数
动态加载与异步加载 JavaScript 详解:加载远程js,加载成功后执行回调函数
238 1
|
2月前
|
JavaScript 前端开发 数据可视化
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)
Three.js 是一个用于在 Web 上创建和显示 3D 图形的 JavaScript 库。它提供了丰富的功能和灵活的 API,使开发者可以轻松地在网页中创建各种 3D 场景、模型和动画效果。可以用来展示产品模型、建立交互式场景、游戏开发、数据可视化、教育和培训等等。这里记录一下如何在Vue项目中使用Three.js
136 4
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)
|
5天前
|
缓存 JavaScript 前端开发
老程序员分享:js刷新页面得重新加载和页面的刷新
老程序员分享:js刷新页面得重新加载和页面的刷新
10 0
|
11天前
|
前端开发 JavaScript
阿里云验证码2.0 验证时报错 前端页面获取的验证参数有问题,动态JS加载失败,请问怎么解决啊?急,急,急。
用户反馈校验时遇到错误,日志显示验证码参数获取异常。采用无痕验证,失败后,返回`{captchaResult:false,bizResult:false}`,未触发滑块二次验证。
|
11天前
|
SQL 存储 关系型数据库
ArcGIS Engine连接ArcSDE SQL Server(获得所有SDE图层)
ArcGIS Engine连接ArcSDE SQL Server(获得所有SDE图层)
|
13天前
|
数据采集 前端开发 JavaScript
Python爬虫技术:动态JavaScript加载音频的解析
Python爬虫技术:动态JavaScript加载音频的解析
|
2月前
|
JavaScript 前端开发 开发者
JavaScript文档加载和文档准备的区别
JavaScript文档加载和文档准备的区别
25 3
|
2月前
|
JavaScript
EasyUi js 加载数据进下拉框combobox
EasyUi js 加载数据进下拉框combobox
|
2月前
|
JavaScript 前端开发
EasyUi js 加载数据表格DataGrid
EasyUi js 加载数据表格DataGrid
|
2月前
|
JavaScript
理解DOM树的加载过程(js的问题)
理解DOM树的加载过程(js的问题)
14 0