Arcgis api for javascript学习笔记(4.5版本)-三维地图实现弹窗功能
1. 对于Graphic对象，在初始化Graphic对象时设置popupTemplate属性，即可实现点击Graphic时显示弹窗。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Intro to SceneView - Create a 3D map</title>
<style type="text/css">
html, body, .map-container { margin: 0; padding: 0; width: 100%; height: 100%; overflow-x: hidden; overflow-y: hidden; position: relative; }
#map-container .esri-popup__main-container { width: 480px; }
#map-container .esri-popup__header { border-bottom: 1px solid #a9a9a9; }
#map-container .esri-popup__content { margin: 0; }
#map-container .esri-popup__content > div { display: block; width: 450px; margin: 0 15px; }
#map-container .popup-con-title { margin: 1.2em 0; font-weight: bold; }
#map-container .popup-con-con { width: 450px; margin-bottom: 1em; }
</style>
</head>
<body>
<div class="map-container" id="map-container"></div>
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<script src="https://js.arcgis.com/4.5/"></script>
<script type="text/javascript">
require(["esri/Map", "esri/views/SceneView", "esri/Graphic", "dojo/domReady!"], function (Map, SceneView, Graphic) {
_map = new Map({
"basemap": "satellite",
"ground": "world-elevation"
});
_view = new SceneView({
"map": _map,
"container": "map-container"
});
//_view.ui.empty("top-left"); //清空左上角区域按钮 var lng = 116.46, lat = 39.92;
_view.then(function () {
_view.goTo({ "zoom": 11, "tilt": 45, "center": [lng, lat] });
var g = new Graphic({
"geometry": { "type": "point", "latitude": lat, "longitude": lng, "spatialReference": { "wkid": 4326 } },
"symbol": { "type": "simple-marker", "color": [226, 119, 40], },
"attributes": { "id": 1, "name": "名称XXXXX", "value": "结果YYYYY" },
"popupTemplate": {
"title": "信息提示",
"content": "<p class='popup-con-title'>这是一个模拟火情点</p>"
+ "<div class='popup-con-con'>"
+ "<div>坐标位置.经度：" + lng + "</div>"
+ "<div>坐标位置.纬度：" + lat + "</div>"
+ "<div>还可以显示其他的属性信息，并且这些信息可以自定义布局</div>"
+ "</div>"
}
});
_view.graphics.add(g);
});
});
</script>
</body>
</html>
2. 上面设置Graphic的popupTemplate属性只有在点击对象时才会显示弹窗。如果有这样一个需求，点击页面上某个按钮显示弹窗，则需要采用SceneView对象的popup属性来实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Intro to SceneView - Create a 3D map</title>
<style type="text/css">
html, body, .map-container { margin: 0; padding: 0; width: 100%; height: 100%; overflow-x: hidden; overflow-y: hidden; position: relative; }
#map-container .esri-popup__main-container { width: 480px; }
#map-container .esri-popup__header { border-bottom: 1px solid #a9a9a9; }
#map-container .esri-popup__content { margin: 0; }
#map-container .esri-popup__content > div { display: block; width: 450px; margin: 0 15px; }
#map-container .popup-con-title { margin: 1.2em 0; font-weight: bold; }
#map-container .popup-con-con { width: 450px; margin-bottom: 1em; }
.btn-container { position: absolute; top: 25px; right: 25px; }
</style>
</head>
<body>
<div class="map-container" id="map-container"></div>
<div class="btn-container">
<button id="btn-show">显示弹窗</button>
</div>
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<script src="https://js.arcgis.com/4.5/"></script>
<script type="text/javascript">
require(["esri/Map", "esri/views/SceneView", "esri/Graphic", "dojo/domReady!"], function (Map, SceneView, Graphic) {
_map = new Map({
"basemap": "satellite",
"ground": "world-elevation"
});
_view = new SceneView({
"map": _map,
"container": "map-container"
});
//_view.ui.empty("top-left"); //清空左上角区域按钮 var lng = 116.46, lat = 39.92;
_view.then(function () {
_view.goTo({ "zoom": 11, "tilt": 45, "center": [lng, lat] });
var g = new Graphic({
"geometry": { "type": "point", "latitude": lat, "longitude": lng, "spatialReference": { "wkid": 4326 } },
"symbol": { "type": "simple-marker", "color": [226, 119, 40], },
"attributes": { "id": 1, "name": "名称XXXXX", "value": "结果YYYYY" }
});
_view.graphics.add(g);
dojo.connect(dojo.byId("btn-show"), "onclick", function () {
console.info(g);
_view.popup.visible = false;
_view.popup.title = g.attributes.name;
_view.popup.location = g.geometry;
_view.popup.content =
"<p class='popup-con-title'>这是一个模拟火情点</p>"
+ "<div class='popup-con-con'>"
+ "<div>坐标位置.经度：" + g.geometry.x + "</div>"
+ "<div>坐标位置.纬度：" + g.geometry.y + "</div>"
+ "<div>还可以显示其他的属性信息，并且这些信息可以自定义布局</div>"
+ "</div>";
_view.popup.visible = true;
});
});
});
</script>
</body>
</html>
3.当页面中存在对Graphic连线或移动等其他操作，此时需要暂时禁用Graphic弹窗。当未进行此操作时，要显示弹窗。需要SceneView对象的popup属性和hitTest函数配合来使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Intro to SceneView - Create a 3D map</title>
<style type="text/css">
html, body, .map-container { margin: 0; padding: 0; width: 100%; height: 100%; overflow-x: hidden; overflow-y: hidden; position: relative; }
#map-container .esri-popup__main-container { width: 480px; }
#map-container .esri-popup__header { border-bottom: 1px solid #a9a9a9; }
#map-container .esri-popup__content { margin: 0; }
#map-container .esri-popup__content > div { display: block; width: 450px; margin: 0 15px; }
#map-container .popup-con-title { margin: 1.2em 0; font-weight: bold; }
#map-container .popup-con-con { width: 450px; margin-bottom: 1em; }
.btn-container { position: absolute; top: 25px; right: 25px; color:#fff }
</style>
</head>
<body>
<div class="map-container" id="map-container"></div>
<div class="btn-container">
<input type="checkbox" id="chk_disable"/>禁用弹窗
</div>
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<script src="https://js.arcgis.com/4.5/"></script>
<script type="text/javascript">
require(["esri/Map", "esri/views/SceneView", "esri/Graphic", "dojo/domReady!"], function (Map, SceneView, Graphic) {
_map = new Map({
"basemap": "satellite",
"ground": "world-elevation"
});
_view = new SceneView({
"map": _map,
"container": "map-container"
});
//_view.ui.empty("top-left"); //清空左上角区域按钮 var lng = 116.46, lat = 39.92;
_view.then(function () {
_view.goTo({ "zoom": 5, "tilt": 5, "center": [lng, lat] });
var g = new Graphic({
"geometry": { "type": "point", "latitude": lat, "longitude": lng, "spatialReference": { "wkid": 4326 } },
"symbol": { "type": "simple-marker", "color": [226, 119, 40], },
"attributes": { "id": 1, "name": "名称XXXXX", "value": "结果YYYYY" }
});
_view.graphics.add(g);
_view.on("click", function (event) {
_view.hitTest({ x: event.x, y: event.y }).then(function (response) {
if (document.getElementById("chk_disable").checked) {
return;
}
var gCurr = response.results[0].graphic;
_view.popup.open();
_view.popup.title = gCurr.attributes.name;
_view.popup.location = gCurr.geometry;
_view.popup.content =
"<p class='popup-con-title'>这是一个模拟火情点</p>"
+ "<div class='popup-con-con'>"
+ "<div>坐标位置.经度：" + gCurr.geometry.x + "</div>"
+ "<div>坐标位置.纬度：" + gCurr.geometry.y + "</div>"
+ "<div>还可以显示其他的属性信息，并且这些信息可以自定义布局</div>"
+ "</div>";
_view.popup.visible = true;
});
});
});
});
</script>
</body>
</html>
Arcgis api for javascript学习笔记(4.5版本)-三维地图实现弹窗功能的更多相关文章
- Arcgis api for javascript学习笔记(4.5版本)-三维地图并叠加天地图标注
1.三维地图实现 在官网的demo中就有三维地图的实现,如下图所示 <!DOCTYPE html> <html> <head> <meta charset=& ...
- Arcgis api for javascript学习笔记(4.5版本)-三维地图的飞行效果
其实就只是用到了 view.goTo() 函数,再利用 window.setInterval() 函数(定时器)定时执行goTo().代码如下: <!DOCTYPE html> < ...
- Arcgis api for javascript学习笔记(4.5版本) - 获取FeatureLayer中的graphics集合
在Arcgis api for javascript 3.x 版本中,我们可以直接通过某个FeatureLayer对象中的graphics属性获取要素集合. graphics属性 但是在4.x版本中, ...
- Arcgis api for javascript学习笔记(4.5版本) - 本地部署及代理配置
在开发过程中,由于api的文件比较多,没必要每个项目都将api加入到解决方案中.况且在VS中如果将api加入解决方案,在编写css或js代码时,由于智能提示需要扫描脚本等文件,会导致VS很卡.所以个人 ...
- Arcgis api for javascript学习笔记(3.2X版本)-初步尝试
Arcgis api for javascript(3.22版本)官方地址 :https://developers.arcgis.com/javascript/3/ 1. 根据官方示例实现一个简单地图 ...
- Arcgis api for javascript学习笔记(4.5版本) - 点击多边形(Polygon)并高亮显示
在现在的 arcgis_js_v45_api 版本中并没有直接提供点击Polygon对象高亮显示.需要实现如下几个步骤: 1.点击地图时,获取Polygon的Graphic对象: 2.对获取到的Gra ...
- Arcgis api for javascript学习笔记(4.6版本) - 二维MapView中的FeatureLayer显示标注
4.6版本api的FeatureLayer中有提供 labelsVisible 和 labelingInfo 两个属性,设置这两个属性可以实现显示将属性中某个字段作为标注.但是这两个属性只针对三维Sc ...
- Arcgis api for javascript学习笔记(3.2X版本)-Map图层叠加以及基本操作
1. 不设置默认底图,第一个图层作为底图,然后叠加另外一个图层 先添加图层1,第一个图层1作为默认底图,然后在图层1上叠加图层2,并设置图层2的透明度为50%. <!DOCTYPE html&g ...
- Arcgis api for javascript学习笔记(3.2版本) - 匀速行驶轨迹动画效果
一.前言 有这样一个需求:已知某条线上的n个点的经纬度数组 ,实现物体运行轨迹. 如果这些点中两个距离很近,那么我们可以用一个定时器在地图上每次重新画一个点,这样肉眼看到这个点上的运动效果,如下图代码 ...
随机推荐
- （转）RMAN-06054: media recovery requesting unknown archived log for thread...
转自:http://blog.itpub.net/29800581/viewspace-1307267/ 使用rman执行recover database 的时候出现RMAN-06054的错误提示: ...
- set_fix_multiple_port_nets
set_fix_multiple_port_nets -all -buffer_constants 加上这个命令之后 综合之后的网表就不会出现assign语句 否则会出现
- 【Codeforces Round #433 (Div. 2) A】Fraction
[链接]h在这里写链接 [题意] 在这里写题意 [题解] 枚举分子从高到低就好. 这样得到的一定是最大的. (可以约分没错,但是约分过后和就不是n了,所以不会有错的) [错的次数] 0 [反思] 在这 ...
- Spring Boot中的缓存支持（一）注解配置与EhCache使用
Spring Boot中的缓存支持(一)注解配置与EhCache使用 随着时间的积累,应用的使用用户不断增加,数据规模也越来越大,往往数据库查询操作会成为影响用户使用体验的瓶颈,此时使用缓存往往是解决 ...
- screenX, clientX, pageX
screenX:鼠标相对屏幕左上角的水平偏移量. clientX:鼠标相对于浏览器左上角的水平偏移量,会随着滚动条的移动而移动. pageX:鼠标相对浏览器左上角的水平偏移量.不会随着滚动条的移动而移 ...
- Emacs常用快捷键
基本命令 C-x C-f 打开/新建文件 C-x C-s 保存当前缓冲区 C-x C-w 当前缓冲区另存为 C-x C-v 关闭当前Buffer并打开新文件 C-x i 光标处插入文件 C-x b 切 ...
- VS2012调试C++工程DLL
1.C++工程属性对话框 2.配置属性: (1)常规:输出目录:..\Bin\WFCrawler(调用DLL的工程) 中间目录:..\Bin\WFCrawler(调用DLL的工程 ...
- POJ 2014 Flow Layout 模拟
http://poj.org/problem?id=2014 嘻嘻2014要到啦,于是去做Prob.ID 为2014的题~~~~祝大家新年快乐~~ 题目大意: 给你一个最大宽度的矩形,要求把小矩形排放 ...
- 数据结构与算法实验题 4.2 Who is the strongest
数据结构与算法实验题 4.2 Who is the strongest ★实验任务 在神奇的魔法世界,召唤师召唤了一群的魁偶.这些魁偶排成一排,每个魁偶都有一个 战斗值.现在该召唤师有一个技能,该技能 ...
- 用Eclipse替代Keil&IAR来开发ARM应用（升级版）
Eclipse GNU ARM Plugin 2014/7/16 作者 kiya 几个月前写了一篇<),想自己丰衣足食的参考我的上一篇文章,以及GNU ARM的官网. 用Eclipse替代Kei ...