ArcGIS API For JavaScript 实现鼠标移入graphic提醒功能
16lz
2021-01-22
前言
实现鼠标移入graphic提醒功能，类似于Dom元素的title属性
实现代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Simple Map</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/esri/css/esri.css" />
<script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.20/3.20/init.js"></script>
<style> html, body, #map { height: 100%; margin: 0; padding: 0; } body { background-color: #FFF; overflow: hidden; font-family: "Trebuchet MS"; } </style>
<script> var cityInfo = [ {"id":0,"name":"北京","X":116.068276,"Y":39.892225}, {"id":1,"name":"乌鲁木齐","X":87.575829,"Y":43.782212}, {"id":2,"name":"拉萨","X":91.162998,"Y":29.71042}, {"id":3,"name":"西宁","X":101.797303,"Y":36.593642}, {"id":4,"name":"兰州","X":103.584297,"Y":36.119086}, {"id":5,"name":"成都","X":104.035508,"Y":30.714179}, {"id":6,"name":"重庆","X":106.519115,"Y":29.478925}, {"id":7,"name":"贵阳","X":106.668071,"Y":26.457312}, {"id":8,"name":"昆明","X":102.726775,"Y":24.969385}, {"id":9,"name":"银川","X":106.167225,"Y":38.598524}, {"id":10,"name":"西安","X":108.967128,"Y":34.276112}, {"id":11,"name":"南宁","X":108.233931,"Y":22.748296}, {"id":12,"name":"海口","X":110.346181,"Y":19.96992}, {"id":13,"name":"广州","X":113.226683,"Y":23.18307}, {"id":14,"name":"长沙","X":112.947928,"Y":28.169916}, {"id":15,"name":"南昌","X":115.893715,"Y":28.652363}, {"id":16,"name":"福州","X":119.246768,"Y":26.070765}, {"id":17,"name":"台北","X":121.503567,"Y":25.008274}, {"id":18,"name":"杭州","X":120.183046,"Y":30.330584}, {"id":19,"name":"上海","X":121.449707,"Y":31.253361}, {"id":20,"name":"武汉","X":114.216597,"Y":30.579253}, {"id":21,"name":"合肥","X":117.262302,"Y":31.838353}, {"id":22,"name":"南京","X":118.805692,"Y":32.085022}, {"id":23,"name":"郑州","X":113.6511,"Y":34.746308}, {"id":24,"name":"济南","X":117.048331,"Y":36.60841}, {"id":25,"name":"石家","X":114.478215,"Y":38.033276}, {"id":26,"name":"太原","X":112.483066,"Y":37.798404}, {"id":27,"name":"呼和浩特","X":111.842806,"Y":40.895751}, {"id":28,"name":"天津","X":117.351094,"Y":38.925719}, {"id":29,"name":"沈阳","X":123.296299,"Y":41.801604}, {"id":30,"name":"长春","X":125.26142,"Y":43.981984}, {"id":31,"name":"哈尔","X":126.567138,"Y":45.69381}, {"id":33,"name":"香港","X":114.093117,"Y":22.427852}, {"id":34,"name":"澳门","X":113.552482,"Y":22.184495}]; var map,sr; var index = 0,t=0; require([ "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/GraphicsLayer", "esri/symbols/PictureMarkerSymbol", "esri/symbols/SimpleLineSymbol", //简单线符号 "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleFillSymbol", "esri/geometry/Circle", "esri/geometry/Polyline", "esri/graphic", "dojo/_base/Color", "esri/geometry/Point", "dojo/on", "dojo/dom", "dojo/dom-construct", "dojo/dom-attr", "dojo/dom-style", "dojo/domReady!"], function(Map, ArcGISDynamicMapServiceLayer, GraphicsLayer, PictureMarkerSymbol, SimpleLineSymbol, SimpleMarkerSymbol, SimpleFillSymbol, Circle, Polyline, Graphic, Color, Point, on, dom, domConstruct, domAttr, domStyle ) { map = new Map("map",{logo:false}); var tiled = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/firstTest/firstService/MapServer"); map.addLayer(tiled, 0); sr = map.spatialReference; var mapCenter = new Point(103.847, 36.0473, sr); map.centerAndZoom(mapCenter); var popupLayer = new GraphicsLayer({"id":"popupLayer"}); map.addLayer(popupLayer, 2); map.on("load",function(){ addReadPopup(cityInfo); }); function addReadPopup(data){ for(var i= 0;i<data.length;i++){ var pms = new PictureMarkerSymbol('images/red.png', 14, 16); var pt=new Point(data[i].X,data[i].Y,sr); var graphic = new Graphic(pt, pms, data[i]); popupLayer.add(graphic); } } popupLayer.on("click",popupLayerClick); popupLayer.on("mouse-over",popupLayerOver); popupLayer.on("mouse-out",popupLayerOut); function popupLayerClick(evt){ var graphic = evt.graphic; map.infoWindow.setTitle(graphic.attributes.name); map.infoWindow.setContent(graphic.attributes.name); map.infoWindow.show(graphic.geometry); } function popupLayerOver(e){ map.setMapCursor("pointer"); console.log(e.graphic.attributes); var scrPt = map.toScreen(e.graphic.geometry); var textDiv = domConstruct.create("div"); domAttr.set(textDiv,{ "id":"text" }); domStyle.set(textDiv, { "left": scrPt.x+10 + "px", "top": scrPt.y+10 + "px", "position": "absolute", "z-index":99, "background":"#fcffd1", "font-size":"10px", "border":"1px solid #0096ff", "padding": "0.1em 0.3em 0.1em", "border-radius": "3px", "box-shadow": "0 0 0.75em #777777" }); textDiv.innerHTML ="当前是："+e.graphic.attributes.name; dom.byId("map").appendChild(textDiv); } function popupLayerOut(e){ map.setMapCursor("default"); dom.byId("map").removeChild(dom.byId("text")); } }); </script>
</head>
<body>
<div id="map">
</div>
</body>
</html>结果
更多相关文章
- 字体图标的引入和通过媒体查询改变导航样式
- HTML样式和常用选择器
- 字体图标的引用和自定义样式/媒体查询的使用
- 数据库的CURD操作、PDO本质与原理的学习
- CSS之伪类选择器和简单盒子简单案例
- 伪类选择器与盒模型常用属性
- 伪类选择器-结构伪类、根据位置选择匹配
- 7.4——常用标签与应用场景之表格与单元格
- css伪类选择器和盒模型