我是靠谱客的博主 内向刺猬,最近开发中收集的这篇文章主要介绍ArcGIS API For Javascript 4.15 绘制地图:在地图上测距离、测面积和在不同图层上搜索,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

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、实现效果

测距离

测面积

在不同图层上搜索

最后

以上就是内向刺猬为你收集整理的ArcGIS API For Javascript 4.15 绘制地图:在地图上测距离、测面积和在不同图层上搜索的全部内容,希望文章能够帮你解决ArcGIS API For Javascript 4.15 绘制地图:在地图上测距离、测面积和在不同图层上搜索所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(38)

评论列表共有 0 条评论

立即
投稿
返回
顶部