功能核心：  地理坐标转屏幕坐标

用到的插件：jquery  animo动画插件

核心代码：

 var point = new Point(lon, lat, map.spatialReference);var screenPnt = map.toScreen(point);

功能代码：

<span style="font-size:14px;">for (var i = 0; i < json.length; i++) {</span>

<span style="font-size:14px;"><span style="white-space:pre">        </span>var title = json[i].title;var lon = json[i].lon;var lat = json[i].lat;var value = json[i].value;var code = json[i].code;</span>

<span style="font-size:14px;"><span style="white-space:pre">       </span>//自己定义标签var html = "";html += "<div id='ring" + i + "' class='ring'>";html += "<div id = 'div_mapIcoDiv" + i + "' title='" + title + "' lon='" + lon + "' lat='" + lat + "' value='" + value + "' code='" + code + "'>";</span><pre name="code" class="javascript"><span style="font-size:14px;"><span style="white-space:pre"> </span>       lve = coustomTool.getLveAndColor(value);</span><pre name="code" class="javascript">html += "<div class = 'tip_name' style='border:1px solid " + lve.borderColor + "'>" + title + "</div>"; html += "<div class = 'tip_value' style='background: url(IMG/BG/" + lve.imgColor + ") no-repeat'>" + value + "</div>"; html += "</div>"; html += "</div>";

<span style="font-size:14px;"><span style="white-space:pre">        </span>//地理坐标转屏幕坐标并设置点位div的位置var point = new Point(lon, lat, map.spatialReference);var screenPnt = map.toScreen(point);</span>

<span style="font-size:14px;">                $("#ring" + i).css({ "left": screenPnt.x - 19 + "px", "top": screenPnt.y + 25 + "px", "position": "absolute", "z-index": "10", "cursor": "pointer" });</span>

<span style="font-size:14px;"><span style="white-space:pre">      </span>$("body").append(html);}</span>

<span style="font-size:14px;"><span style="white-space:pre">  </span>//点位动画效果</span>

<span style="font-size:14px;"><span style="white-space:pre">    </span>$(".class_mapIcoDiv").animo({ animation: ["rollIn"], duration: 0.5 });      </span><pre name="code" class="javascript"><span style="font-size:14px;"><span style="white-space:pre">    </span>$(".class_mapIcoDiv").bind("mouseover", function () {$(this).animo({ animation: ["pulse"], duration: 0.5 });});</span>

<span style="font-size:14px;"></span><pre name="code" class="javascript">

<span style="font-size:14px;">
</span>

 var panStart = dojo.connect(map, "onPanStart", function () {$(".ring").css("display", "none");$(".esriPopup").css("display", "none");});var panEnd = dojo.connect(map, "onPanEnd", function () {for (var i = 0; i < json.length; i++) {var x = json[i].lon;var y = json[i].lat;var point = new Point(x, y, map.spatialReference);screenPnt = map.toScreen(point);$("#ring" + i).css({ "left": screenPnt.x - 19 + "px", "top": screenPnt.y + 25 + "px", "position": "absolute", "display": "block", "z-index": "1" });}$(".esriPopup").css("display", "block");});var zoomStart = dojo.connect(map, "onZoomStart", function () {$(".ring").css("display", "none");$(".esriPopup").css("display", "none");});var zoomEnd = dojo.connect(map, "onZoomEnd", function () {for (var i = 0; i < json.length; i++) {var x = json[i].lon;var y = json[i].lat;var point = new Point(x, y, map.spatialReference);screenPnt = map.toScreen(point);$("#ring" + i).css({ "left": screenPnt.x - 19 + "px", "top": screenPnt.y + 25 + "px", "position": "absolute", "display": "block", "z-index": "1" });}$(".esriPopup").css("display", "block");});//将地图事件的句柄加入到句柄集合中。config._eventHandlers.push(panStart);config._eventHandlers.push(panEnd);config._eventHandlers.push(zoomStart);config._eventHandlers.push(zoomEnd);