用arcgis api js写一个 输入坐标实现定位的程序
时间: 2024-06-12 20:04:47 浏览: 15
以下是一个简单的示例代码,使用ArcGIS API for JavaScript实现从输入的坐标定位到地图上:
```javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>坐标定位</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.20/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#coordinateInput {
position: absolute;
top: 10px;
left: 10px;
width: 200px;
padding: 5px;
}
#locateButton {
position: absolute;
top: 10px;
left: 220px;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/geometry/Point",
"esri/symbols/SimpleMarkerSymbol",
"esri/layers/GraphicsLayer",
"esri/Graphic",
"dojo/domReady!"
], function(Map, MapView, Point, SimpleMarkerSymbol, GraphicsLayer, Graphic) {
// 创建地图和视图
var map = new Map({
basemap: "streets-navigation-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [116.46, 39.92],
zoom: 12
});
// 创建一个图形图层
var graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
// 创建一个简单的标记符号
var markerSymbol = new SimpleMarkerSymbol({
color: [226, 119, 40],
outline: {
color: [255, 255, 255],
width: 2
}
});
// 绑定定位按钮的点击事件
var locateButton = document.getElementById("locateButton");
locateButton.addEventListener("click", function() {
// 获取输入的坐标
var coordinateInput = document.getElementById("coordinateInput");
var coordinate = coordinateInput.value.trim();
if (!coordinate) {
return;
}
var coords = coordinate.split(",");
if (coords.length !== 2) {
alert("请输入正确的坐标");
return;
}
var x = parseFloat(coords[0]);
var y = parseFloat(coords[1]);
// 创建一个点并添加到图层中
var point = new Point({
x: x,
y: y
});
var graphic = new Graphic({
geometry: point,
symbol: markerSymbol
});
graphicsLayer.removeAll();
graphicsLayer.add(graphic);
// 定位到点
view.goTo(point);
});
});
</script>
</head>
<body>
<input id="coordinateInput" type="text" placeholder="请输入坐标,格式为x,y">
<button id="locateButton">定位</button>
<div id="viewDiv"></div>
</body>
</html>
```
在该示例中,用户可以在输入框中输入坐标,点击定位按钮后,程序会在地图上显示相应的标记,并将视图定位到该坐标。这个示例为了简单起见,只支持输入格式为x,y的坐标,实际应用中需要根据需要进行相应的修改。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)