layers.html

最新推荐文章于 2021-07-07 20:49:41 发布

学无止境慢慢来

最新推荐文章于 2021-07-07 20:49:41 发布

阅读量183

点赞数

分类专栏： arcgis_js_api_demo4.11

arcgis_js_api_demo4.11 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

<!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
评论
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...
复制链接

扫一扫

专栏目录