layers.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>layers</title>

    <!--<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css"/>-->
    <!--<script src="https://js.arcgis.com/4.11/"></script>-->

    <!--我的接口。-->
    <link rel="stylesheet" href="http://localhost:8080/arcgis_js_v411_api/arcgis_js_api/library/4.11/esri/themes/light/main.css">
    <script src="http://localhost:8080/arcgis_js_v411_api/arcgis_js_api/library/4.11/dojo/dojo.js"></script>

    <style>
        html, body, #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #layerToggle {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 99;
            background-color: white;
            border-radius: 8px;
            padding: 10px;
            opacity: 0.75;
        }
    </style>

    <script>
        require([
            "esri/Map",
            "esri/views/SceneView",
            "esri/layers/TileLayer"
        ], function(Map, SceneView, TileLayer) {
            /*****************************************************************
             * 创建两个TileLayer实例。 一个实例指向
             * 一个缓存地图服务,该服务描述美国男性人口。另一个实例
             * 指向路网的一个图层。
             *****************************************************************/
            var transportationLayer = new TileLayer({
                url: "https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer",
                // id,属性可以用来唯一识别该层。
                id: "streets",
                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  // 透明度。
            });
            // 创建地图。
            var map = new Map({
                basemap: "oceans",  // 底图。
                layers: [housingLayer]  // 其他图层。
            });

            // 添加路网层。
            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("男性人口层视图创建了!", event.layerView);
                }
                else if (event.layer.id === "streets") {
                    // 在这里探索路网层的层视图的特性。
                    console.log("路网层视图创建了!", event.layerView);
                }
            });

            /*****************************************************************
             * 层是承诺,当加载或其所有属性可能被访问时解析。
             * 一旦人口层加载,视图将动画到它的初始范围。
             *****************************************************************/
            view.when(function() {
                housingLayer.when(function() {
                    view.goTo(housingLayer.fullExtent);
                });
            });

            var streetsLayerToggle = document.getElementById("streetsLayer");

            /*****************************************************************
             * 该层的可视属性可用于在视图中切换该层的可见性。
             * 当可见性关闭,图层仍然是地图的一部分,
             * 这意味着您可以访问它的属性并执行分析,即使它是不可见的。
             *******************************************************************/
            streetsLayerToggle.addEventListener("change", function() {
                transportationLayer.visible = streetsLayerToggle.checked;
            });
        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
    <span id="layerToggle">
          <input type="checkbox" id="streetsLayer" /> 路网
    </span>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值