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

Jie_1997

已于 2022-06-30 15:12:15 修改

阅读量748

点赞数 3

于 2020-06-21 19:59:05 首次发布

本文链接：https://blog.csdn.net/Jie_1997/article/details/106889901

版权

地图__ArcGIS Api For JS 专栏收录该内容

19 篇文章 5 订阅

订阅专栏

常用函数方法

一. 地图放缩小按钮

在这里插入图片描述

二. 底图样式

在这里插入图片描述

更多底图请进入arcgis api for javascrilpt官网查看：https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html#

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

在这里插入图片描述

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

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>