ArcGIS API For Javascript 4.15 绘制地图：在地图上测距离、测面积和在不同图层上搜索

短命女 2022-12-26 15:28 105阅读 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://localhost/arcgis_js_api/4.15/esri/css/main.css">
        <link rel="stylesheet" href="css/index.css">
        <script src="http://localhost/arcgis_js_api/4.15/init.js"></script>
        <script src="js/index.js"></script>
    </head>
    
    <body>
        <div id="viewDiv">
            <button id="measureDistance" class="tool-btn1">测距离</button>
            <button id="measureArea" class="tool-btn2">测面积</button>
            <button id="clearMeasure" class="tool-btn3">清除测量</button>
        </div>
    </body>
    </html>

## 2、样式设置 ##

## index.css html, body { 
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    
    #viewDiv { 
        height: 100%;
        width: 100%;
    }
    
    .tool-btn1 { 
        position: absolute;
        top: 20px;
        right: 150px;
    }
    
    .tool-btn2 { 
        position: absolute;
        top: 20px;
        right: 90px;
    }
    
    .tool-btn3 { 
        position: absolute;
        top: 20px;
        right: 15px;
    }

## 3、Javascript API 实现地图绘制 ##

## index.js
    
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/TileLayer",
        "esri/widgets/DistanceMeasurement2D",
        "esri/widgets/AreaMeasurement2D",
        "esri/layers/FeatureLayer",
        "esri/widgets/Search"
    ], function(Map, MapView, TileLayer, DistanceMeasurement2D, AreaMeasurement2D, FeatureLayer, Search) { 
    
        var countriesLayer = new TileLayer({ 
            url: "http://127.0.0.1:6080/arcgis/rest/services/SampleWorldCities/MapServer"
        });
    
        var citiesLayer = new FeatureLayer({ 
            url: "http://127.0.0.1:6080/arcgis/rest/services/SampleWorldCities/MapServer/0",
            outFields: ["*"]
        });
    
        var map = new Map({ 
            layers: [countriesLayer]
        });
    
        var view = new MapView({ 
            container: "viewDiv",
            map: map
        });
    
        var measurementTool;
    
        var distanceMeasurement = new DistanceMeasurement2D({ 
            view: view
        });
    
        document.getElementById("measureDistance").addEventListener("click", function(e) { 
            if (measurementTool != null) { 
                measurementTool.viewModel.clearMeasurement();
                view.ui.remove(measurementTool);
            }
            measurementTool = new DistanceMeasurement2D({ 
                view: view,
                unit: "kilometers",
                unitOptions: ["meters", "kilometers"]
            });
            view.ui.add(measurementTool, "bottom-right");
            measurementTool.viewModel.newMeasurement();
        });
    
        document.getElementById("measureArea").addEventListener("click", function(e) { 
            if (measurementTool != null) { 
                measurementTool.viewModel.clearMeasurement();
                view.ui.remove(measurementTool);
            }
            measurementTool = new AreaMeasurement2D({ 
                view: view,
                unit: "square-kilometers",
                unitOptions: ["square-meters", "square-kilometers"]
            });
            view.ui.add(measurementTool, "bottom-right");
            measurementTool.viewModel.newMeasurement();
        });
    
        document.getElementById("clearMeasure").addEventListener("click", function(e) { 
            if (measurementTool != null) { 
                measurementTool.viewModel.clearMeasurement();
                view.ui.remove(measurementTool);
            }
            measurementTool = null;
        });
    
        var search = new Search({ 
            view: view,
            locationEnabled: false,
            includeDefaultSources: false,
            allPlaceholder: "请输入关键词",
            sources: [{ 
                    layer: citiesLayer,
                    searchFields: ["CITY_NAME"],
                    displayField: "CITY_NAME",
                    exactMatch: false,
                    outFields: ["*"],
                    name: "城市1",
                    placeholder: "请输入城市名称",
                    maxResults: 6,
                    maxSuggestions: 6,
                    suggestionsEnabled: true,
                    minSuggestCharacters: 1,
                    withinViewEnabled: true,
                    resultSymbol: { 
                        type: "simple-marker",
                        style: "circle",
                        size: 12,
                        color: "red"
                    },
                    popupTemplate: { 
                        title: "详细信息",
                        content: [{ 
                            type: "fields",
                            fieldInfos: [{ 
                                fieldName: "CITY_NAME",
                                label: "城市名称"
                            }, { 
                                fieldName: "POP",
                                label: "人口数量"
                            }]
                        }]
                    }
                },
                { 
                    layer: citiesLayer,
                    searchFields: ["CITY_NAME"],
                    // displayField: "Email",
                    exactMatch: false,
                    outFields: ["*"],
                    name: "城市2",
                    placeholder: "请输入城市名称",
                    maxResults: 6,
                    maxSuggestions: 6,
                    suggestionsEnabled: true,
                    minSuggestCharacters: 1
                }
            ]
        });
        view.ui.add(search, "top-left");
    });

## 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 1][]

### 在不同图层上搜索 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/0b9e6e558f0b438fb3a82ccaef66e619.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/12d11cb7c44c40179de297b7cc1eb52b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201206140758768.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU=,size_16,color_FFFFFF,t_70#pic_center