ArcGIS Api forJavaScript - 页面展示一个线上图层

左手的ㄟ右手 2021-07-25 12:29 418阅读 0赞

**1. 引入js文件，及css样式文件**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70]  
**注意：** js文件及css样式文件以实际地址实际为准。  
**文件下载地址：** [https://download.csdn.net/download/Jie\_1997/12438411][https_download.csdn.net_download_Jie_1997_12438411]

**2. 添加对应的类要素**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 1]  
**ArcGIS API for JavaScript 官方文档使用:**  
[https://developers.arcgis.com/javascript/3/jsapi/map-amd.html][https_developers.arcgis.com_javascript_3_jsapi_map-amd.html]

**3. 项目代码**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 2]

## 源码： ##

@{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>test</title>
        @*引入js及css*@
        <link href="~/Content/esri.css" rel="stylesheet" />
        <link href="~/Content/tundra.css" rel="stylesheet" />
        <script src="~/Scripts/init.js"></script>
        <style>
            *{
                padding:0;
                margin:0;
            }
            html, body, #map{
                width:100%;
                height:100%;
            }
        </style>
        <script>
            var urlMap ="线上图层链接地址"
            require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer"],
                function (Map, ArcGISDynamicMapServiceLayer) {
                    /* code goes here */
                    //地图
                    map = new Map("map", {
                        center: [118.563409, 33.864469],
                        zoom: 10,
                        logo: false,
                        slider: false,
                    });
    
                    //定义图层  (opacity  透明度)
                    var ServiceLayer = new ArcGISDynamicMapServiceLayer(urlMap, { "opacity": 0.8 });
                    //地图加载图层
                    map.addLayer(ServiceLayer);
                });
        </script>
    </head>
    <body>
        <div id="map"></div>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70]: /images/20210725/9c5a8486b6654b87a5ec801ed6e6256f.png
[https_download.csdn.net_download_Jie_1997_12438411]: https://download.csdn.net/download/Jie_1997/12438411
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 1]: /images/20210725/7a8e48b3cbfa481ba877f8f2d2e83c23.png
[https_developers.arcgis.com_javascript_3_jsapi_map-amd.html]: https://developers.arcgis.com/javascript/3/jsapi/map-amd.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 2]: /images/20210725/93d3f283723b47e2a0522b0003bda5f3.png