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

article/2025/9/18 15:26:18

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.csshtml,
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.jsrequire(["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");
});