ArcGIS API For JavaScript - 地图常用函数方法

浅浅的花香味﹌ 2021-07-25 21:15 485阅读 0赞

### 常用函数方法 ###

*   *   *  一. 地图放缩小按钮
         *  二. 底图样式
         *  三. 创建加载ArcGISDynamicMapServiceLayer图层、FeatureLayer图层
         *  四. 跳转地图中心点至指定坐标位置
         *  五. 缩放地图至指定等级
         *  六. 清空加载至地图的要素类
         *  七. 加载、清除指定图层
         *  八. 创建及使用客户端图层（GraphicsLayer）
         *  九. Demo实例

### 一. 地图放缩小按钮 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 1]

### 二. 底图样式 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 3]  
**更多底图请进入arcgis api for javascrilpt官网查看：**[https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html\#][https_developers.arcgis.com_javascript_latest_api-reference_esri-Map.html]

### 三. 创建加载ArcGISDynamicMapServiceLayer图层、FeatureLayer图层 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 4]

### 四. 跳转地图中心点至指定坐标位置 ###

map.centerAt([118.675403, 32.067296])

### 五. 缩放地图至指定等级 ###

map.setZoom(18)

### 六. 清空加载至地图的要素类 ###

map.graphics.clear();

### 七. 加载、清除指定图层 ###

//清除serverLayer图层
    map.removeLayer(serverLayer);
    //加载stationLayer图层
    map.addLayer(stationLayer);

### 八. 创建及使用客户端图层（GraphicsLayer） ###

//创建客户端图层
    var graphicsLayer = new esri.layers.GraphicsLayer();
    //将客户端图层添加到地图中
    map.addLayer(graphicsLayer);
    //将点要素放入客户端图层
    graphicsLayer.add(marker);
    //清空graphicsLayer图层
    graphicsLayer.clear();

### 九. Demo实例 ###

@{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        @*加载高德地图*@
        <script type="text/javascript">
            var dojoConfig = {
                async: true,
                parseOnLoad: true,
                packages: [{
                    name: "js",
                    location: location.pathname.replace(/\/[^/]*$/, '') + '/js'
                }]
            };
        </script>
    
        <script src="~/Scripts/jquery-3.3.1.js"></script>
        <link href="~/Content/esri.css" rel="stylesheet" />
        <link href="~/Content/tundra.css" rel="stylesheet" />
        <script src="~/Scripts/init.js"></script>
    
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            #map {
                width: 100%;
                height: 100%;
                position: absolute
            }
            .list {
                width: 12%;
                background-color: rgba(22, 59, 90, 0.8);
                color: #fff;
                position: absolute;
            }
    
            input, select, button {
                width: 90%;
                margin: 10px 5%;
                border-radius: 5px;
                height: 26px;
            }
        </style>
    
        <script>
            var urlMap = 'http://xxx:6080/arcgis/rest/services/njcs/MapServer'
            var stationUrl = 'http://xxx:6080/arcgis/rest/services/njcs/MapServer/0'
            var lineUrl = 'http://xxx:6080/arcgis/rest/services/njcs/MapServer/1'
    
            var map;
            var serverLayer;//总图层
            var stationLayer;//站点图层
            var lineLayer;//线路图层
            require(["esri/map", "js/gaodeLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/FeatureLayer", "esri/geometry/Circle", "esri/layers/GraphicsLayer","dojo/domReady!"],
                function (Map, gaodeLayer, ArcGISDynamicMapServiceLayer, FeatureLayer, Circle,GraphicsLayer,) {
                    /* code goes here */
                    map = new Map("map", {
                        center: [118.724, 32.186],
                        zoom: 12,
                        logo: false,
                        slider: false,//放大、缩小按钮
                        //basemap:"streets-vector",//设置底图样式
                    });
                    //创建ArcGISDynamicMapServiceLayer图层（opacity：图层透明度）
                    serverLayer = new ArcGISDynamicMapServiceLayer(urlMap, { "opacity": 0.6 });
                    //创建FeatureLayer图层，ArcGISDynamicMapServiceLayer子图层
                    stationLayer = new FeatureLayer(stationUrl, { "opacity": 0.6 });
                    lineLayer = new FeatureLayer(lineUrl, { "opacity": 0.6 });
                    
    
                    var baselayer = new gaodeLayer();//默认加载矢量 new gaodeLayer({layertype:"road"});也可以    //加载高德地图
                    map.addLayer(baselayer);//添加高德地图到map容器
    
                    //加载ArcGISDynamicMapServiceLayer图层或FeatureLayer图层至地图
                    map.addLayer(serverLayer);
                });
    
            function center() {
                map.centerAt([118.675403, 32.067296])
            }
            function zoom() {
                map.setZoom(18)
            }
            function clear() {
                map.graphics.clear()
            }
            function clearLayer() {
                map.removeLayer(serverLayer);
            }
            function addLayer() {
                map.addLayer(stationLayer);
            }
        </script>
    </head>
    <body>
        <div id="map"></div>
        <div class="list">
            <button onclick="center()">跳转中心点</button>
            <button onclick="zoom()">缩放地图</button>
            <button onclick="clear()">清空图层</button>
            <button onclick="clearLayer()">清除指定图层</button>
            <button onclick="addLayer()">加载指定图层</button>
        </div>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70]: /images/20210725/372baf0b647e489d987dadeed2d6c0f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 1]: /images/20210725/066faf5be8ff4fc1b3311a0524cc6055.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 2]: /images/20210725/b2ad914786994d99a2cb18d3b1c77585.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 3]: /images/20210725/f5f017daf6af4a93b0feddca0d7df49e.png
[https_developers.arcgis.com_javascript_latest_api-reference_esri-Map.html]: https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html#
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 4]: /images/20210725/cccd922b1e3c4b3ab3a7c450f5e55dac.png