1、还是基于天地图的底图,我们这节来操作鼠标事件,鼠标事件无非就是单击、双击、滚轮、拖放、移动等,arcgis js提供了对应的接口,例如鼠标单击事件:
view.on("click", (event) => {
//保留六位小数
let lat = Math.round(event.mapPoint.latitude * 1000000) / 1000000;
let lon = Math.round(event.mapPoint.longitude * 1000000) / 1000000;
alert(lon + ", " + lat);
});
鼠标移动事件:
view.on("pointer-move", (event) => {
let point = view.toMap({ x: event.x, y: event.y });
//保留三位小数
let lon = Math.round(point.x * 1000) / 1000;
let lat = Math.round(point.y * 1000) / 1000;
document.getElementById("box1").innerHTML = lon + " " + lat;
});
全部的鼠标事件如下:
const events = [
"pointer-enter",
"pointer-leave",
"pointer-move",
"pointer-down",
"pointer-up",
"immediate-click",
"click",
"immediate-double-click",
"double-click",
"mouse-wheel",
"drag",
"hold",
"key-down",
"key-up",
"focus",
"blur",
"resize"
];
2、代码演示,还是基于天地图的影像,在右下角加入一个box1显示鼠标当前位置,设置颜色为黄色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>mouse</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%;
}
#box1 {
position: absolute;
bottom: 0;
right: 50px;
color: yellow;
}
</style>
<script>
require([
"esri/Map",
"esri/layers/WebTileLayer",
'esri/layers/support/TileInfo',
'esri/views/MapView',
"esri/layers/FeatureLayer",
"esri/geometry/SpatialReference",
"esri/geometry/Point",
], function (Map, WebTileLayer, TileInfo, MapView, FeatureLayer, SpatialReference, Point, BasemapToggle) {
var tiandituBaseUrl = "http://{subDomain}.tianditu.com"; //天地图服务地址
var token = ""; //天地图token,在官网申请
var tileInfo = new TileInfo({
"rows": 256,
"cols": 256,
"compressionQuality": 0,
"origin": {
"x": -180,
"y": 90
},
"spatialReference": {
"wkid": 4490
},
"lods": [
{ "level": "1", "scale": 295829355.45, "resolution": 0.703125 },
{ "level": "2", "scale": 147914677.725, "resolution": 0.3515625 },
{ "level": "3", "scale": 73957338.8625, "resolution": 0.17578125 },
{ "level": "4", "scale": 36978669.43125, "resolution": 0.087890625 },
{ "level": "5", "scale": 18489334.715625, "resolution": 0.0439453125 },
{ "level": "6", "scale": 9244667.3578125, "resolution": 0.02197265625 },
{ "level": "7", "scale": 4622333.67890625, "resolution": 0.010986328125 },
{ "level": "8", "scale": 2311166.839453125, "resolution": 0.0054931640625 },
{ "level": "9", "scale": 1155583.4197265625, "resolution": 0.00274658203125 },
{ "level": "10", "scale": 577791.7098632812, "resolution": 0.001373291015625 },
{ "level": "11", "scale": 288895.8549316406, "resolution": 0.0006866455078125 },
{ "level": "12", "scale": 144447.9274658203, "resolution": 0.00034332275390625 },
{ "level": "13", "scale": 72223.96373291015, "resolution": 0.000171661376953125 },
{ "level": "14", "scale": 36111.98186645508, "resolution": 0.0000858306884765625 },
{ "level": "15", "scale": 18055.99093322754, "resolution": 0.00004291534423828125 },
{ "level": "16", "scale": 9027.99546661377, "resolution": 0.000021457672119140625 },
{ "level": "17", "scale": 4513.997733306885, "resolution": 0.000010728836059570312 },
{ "level": "18", "scale": 2256.9988666534423, "resolution": 0.000005364418029785156 },
{ "level": "19", "scale": 1128.4994333267211, "resolution": 0.000002682209014892578 }
]
})
//影像地图
var tdtImageLayer= new WebTileLayer({
urlTemplate: tiandituBaseUrl + "/DataServer?T=img_c&x={col}&y={row}&l={level}&tk=" + token,
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo,
spatialReference: { wkid: 4490 },
});
//影像注记
var tdtAnnoImageLayer= new WebTileLayer({
urlTemplate: tiandituBaseUrl + "/DataServer?T=cia_c&x={col}&y={row}&l={level}&tk=" + token,
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo,
spatialReference: { wkid: 4490 },
});
//定位到济南市中心
var cityCenter = new Point(116.985, 36.671, new SpatialReference({ wkid: 4490 }));
// 创建地图
var map = new Map({
basemap: {
baseLayers: [tdtImageLayer, tdtAnnoImageLayer]
},
});
var view = new MapView({
container: "viewDiv",
map: map,
center: cityCenter,
zoom: 12,
ui: {
components: ["zoom", "compass"]
}
});
view.on("pointer-move", (event) => {
let point = view.toMap({ x: event.x, y: event.y });
//保留三位小数
let lon = Math.round(point.x * 1000) / 1000;
let lat = Math.round(point.y * 1000) / 1000;
document.getElementById("box1").innerHTML = lon + " " + lat;
});
view.on("click", (event) => {
//保留六位小数
let lat = Math.round(event.mapPoint.latitude * 1000000) / 1000000;
let lon = Math.round(event.mapPoint.longitude * 1000000) / 1000000;
alert(lon + ", " + lat);
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<p id="box1">位置</p>
</body>
</html>
3、效果: