如何在 arcgis 4.0 中的 (lng,lat) 位置打开弹出窗口
How to open popup at (lng,lat) position in arcgis 4.0
让我们从参考 (https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Popup.html#open) 中考虑这段代码:
view.on("click", function(evt){
view.popup.open({
location: evt.mapPoint, // location of the click on the view
title: "Some title",
});
这行得通。但是如何在由预定义的经纬度坐标指定的点打开弹出窗口?
第一次尝试:
var point = new Point({latitude:lat,longitude:lng});
view.popup.open({
location: point,
title: "Some title"
});
这不起作用。原因是创建的点当前与地图视图断开连接。有没有办法通过指定的(lng,lat)接收当前视图的屏幕坐标(x,y)? google 地图 api 中有 latLngToDivPixel、latLngToDivPoint 等方法,那么 argis 为这项任务提供了什么?
您似乎遇到了 SpatialReference 问题。由于您是通过 lat/lng 创建点,因此它不在 WebMercator 中,因此当您将其添加到地图时,它会到达错误的位置。这是给您的固定代码:
// this works, but needs to be in webmercator:
// var point = new Point({x:-9035831.315416021, y:3095345.196351918});
// as an alternative you can translate to webmercator on the fly:
var point = webMercatorUtils.geographicToWebMercator(new Point({latitude:28.526622,longitude:-81.914063}));
view.popup.open({
location: point,
title: "Some title"
});
上面的代码在an example.
上面的 answer/issue 对于版本 4.0 和 4.1 是正确的。
但是,对于新发布的4.2版本,这已经被简化了。 Popup.location 现在,当地图处于 web 墨卡托投影时,自动将 WGS84(纬度、经度)点转换为 web 墨卡托。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="description" content="[Define custom Popup actions - 4.2]">
<!--
ArcGIS API for JavaScript, https://js.arcgis.com
For more information about the popup-actions sample, read the original sample description at developers.arcgis.com.
https://developers.arcgis.com/javascript/latest/popup-actions/index.html
-->
<title>Define custom Popup actions - 4.2</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css">
<script src="https://js.arcgis.com/4.2/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/geometry/Point",
"dojo/domReady!"
], function(
Map,
MapView,
Point
) {
// Create the Map
var map = new Map({
basemap: "topo"
});
// Create the MapView
var view = new MapView({
container: "viewDiv",
map: map,
center: [-117, 34],
zoom: 9
});
view.then(function() {
var peak = new Point({
latitude: 34.09916,
longitude: -116.82485
});
view.popup.open({
location: peak,
title: "San Gorgonio Mountain",
content: "Tallest peak in Southern California"
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
让我们从参考 (https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Popup.html#open) 中考虑这段代码:
view.on("click", function(evt){
view.popup.open({
location: evt.mapPoint, // location of the click on the view
title: "Some title",
});
这行得通。但是如何在由预定义的经纬度坐标指定的点打开弹出窗口?
第一次尝试:
var point = new Point({latitude:lat,longitude:lng});
view.popup.open({
location: point,
title: "Some title"
});
这不起作用。原因是创建的点当前与地图视图断开连接。有没有办法通过指定的(lng,lat)接收当前视图的屏幕坐标(x,y)? google 地图 api 中有 latLngToDivPixel、latLngToDivPoint 等方法,那么 argis 为这项任务提供了什么?
您似乎遇到了 SpatialReference 问题。由于您是通过 lat/lng 创建点,因此它不在 WebMercator 中,因此当您将其添加到地图时,它会到达错误的位置。这是给您的固定代码:
// this works, but needs to be in webmercator:
// var point = new Point({x:-9035831.315416021, y:3095345.196351918});
// as an alternative you can translate to webmercator on the fly:
var point = webMercatorUtils.geographicToWebMercator(new Point({latitude:28.526622,longitude:-81.914063}));
view.popup.open({
location: point,
title: "Some title"
});
上面的代码在an example.
上面的 answer/issue 对于版本 4.0 和 4.1 是正确的。
但是,对于新发布的4.2版本,这已经被简化了。 Popup.location 现在,当地图处于 web 墨卡托投影时,自动将 WGS84(纬度、经度)点转换为 web 墨卡托。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="description" content="[Define custom Popup actions - 4.2]">
<!--
ArcGIS API for JavaScript, https://js.arcgis.com
For more information about the popup-actions sample, read the original sample description at developers.arcgis.com.
https://developers.arcgis.com/javascript/latest/popup-actions/index.html
-->
<title>Define custom Popup actions - 4.2</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css">
<script src="https://js.arcgis.com/4.2/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/geometry/Point",
"dojo/domReady!"
], function(
Map,
MapView,
Point
) {
// Create the Map
var map = new Map({
basemap: "topo"
});
// Create the MapView
var view = new MapView({
container: "viewDiv",
map: map,
center: [-117, 34],
zoom: 9
});
view.then(function() {
var peak = new Point({
latitude: 34.09916,
longitude: -116.82485
});
view.popup.open({
location: peak,
title: "San Gorgonio Mountain",
content: "Tallest peak in Southern California"
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>