ArcGIS Api forJavaScript - 頁面展示一個線上圖層

1. 引入js文件,及css樣式文件
在這裏插入圖片描述
注意: js文件及css樣式文件以實際地址實際爲準。
文件下載地址: https://download.csdn.net/download/Jie_1997/12438411

2. 添加對應的類要素
在這裏插入圖片描述
ArcGIS API for JavaScript 官方文檔使用:
https://developers.arcgis.com/javascript/3/jsapi/map-amd.html

3. 項目代碼
在這裏插入圖片描述

源碼:

@{
    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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章