ArcGIS API For Javascript 4.15 绘制地图：MapImageLayer、TileLayer 和 FeatureLayer

柔情只为你懂 2022-12-26 15:27 235阅读 0赞

## 1、HTML 页面 ##

## index.html
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>第二讲-图层类型</title>
        <link rel="stylesheet" href="http://127.0.0.1/arcgis_js_api/4.15/esri/css/main.css">
        <link rel="stylesheet" href="css/index.css">
        <script src="http://127.0.0.1/arcgis_js_api/4.15/init.js"></script>
        <script src="js/index.js"></script>
    </head>
    
    <body>
        <div id="viewDiv"></div>
    </body>
    </html>

## 2、样式设置 ##

## index.css html, body { 
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    
    #viewDiv { 
        width: 100%;
        height: 100%;
    }

## 3、JavaScript 实现地图绘制 ##

## index.js
    
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/MapImageLayer",
        "esri/layers/TileLayer",
        "esri/layers/FeatureLayer"
    ], function(Map, MapView, MapImageLayer, TileLayer, FeatureLayer) { 
    
        var worldCities = new MapImageLayer({ 
            url: "http://localhost:6080/arcgis/rest/services/SampleWorldCities/MapServer",
            title: "全球主要城市",
            opacity: 0.5
        });
    
        var worldCountries = new TileLayer({ 
            url: "http://localhost:6080/arcgis/rest/services/SampleWorldCities/MapServer",
            title: "全球国家"
        });
    
        var citiesRenderer = { 
            type: "simple",
            symbol: { 
                type: "simple-marker",
                size: 12,
                color: "yellow",
                outline: { 
                    width: 2,
                    color: "red"
                }
            }
        };
    
        var cities = new FeatureLayer({ 
            url: "https://localhost:6443/arcgis/rest/services/SampleWorldCities/MapServer/0",
            title: "城市",
            // outFields: ["*"],
            definitionExpression: "POP>5000000",
            // definitionExpression: "CITY_NAME='Beijing' or CITY_NAME='Tianjin'",
            // definitionExpression: "CITY_NAME in ('Beijing', 'Tianjin')",
            renderer: citiesRenderer
        });
    
        var map = new Map({ 
            // basemap: "satellite",
            layers: [worldCountries, cities]
        });
    
        var view = new MapView({ 
            container: "viewDiv",
            map: map,
            center: [0, 0],
            zoom: 2
            // zoom: 18
            // scale: 50000000
        });
    });

## 4、实现效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/738877d928a34c5cab16a97476f0e4e9.png