js 8c的网络客户端,调试监听发现触发selectGraphic控件的onUnselect事件时传了一个参数,是对应graphicLayer的其中一个要素,但是这个要素没有规律,不知道是不是离鼠标事件位置最近的对象。操作是:事先并未选中要素,任点图层上的空白处。费解。贴上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Graphic</title>
<style type="text/css">
body{
margin: 0;
overflow: hidden;
background: #fff;
}
#map{
position: relative;
height: 500px;
border:1px solid #3473b7;
}
#toolbar {
position: relative;
padding-top: 5px;
padding-bottom: 10px;
}
</style>
<script type="text/javascript" src = '
http://support.supermap.com.cn:8090/iserver/iClient/forJavaScript/libs/SuperMap.Include.js'></script>
<script type="text/javascript">
var map,layer,graphicLayer,symbolinfo,vectorLayer,
host = document.location.toString().match(/file:\/\//) ? "http://localhost:8090" : 'http://' + document.location.host;
url = "http://localhost:8090/iserver/services/map-China400/rest/maps/RailwayChina";
function init()
{
if(!document.createElement("canvas").getContext){
return;
}
map = new SuperMap.Map("map",{controls:[
new SuperMap.Control.Navigation({
dragPanOptions: {
enableKinetic: true
}
})
]});
layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, null,{maxResolution:"auto"});
layer.events.on({"layerInitialized":addLayer});
vectorLayer = new SuperMap.Layer.Vector("vector");
graphicLayer = new SuperMap.Layer.Graphics("Graphic Layer",null,{hitDetection:true});
}
function unselect(obj){
var a = 1;
alert(JSON.stringify(obj));
}
function addLayer(){
map.addLayers([layer,graphicLayer,vectorLayer]);
map.setCenter(new SuperMap.LonLat(0, 0), 1);
var selectfeature = new SuperMap.Control.SelectFeature(vectorLayer,{
onSelect : function(result,event){
alert('ttttt');
}
});
var selectGraphic = new SuperMap.Control.SelectGraphic(graphicLayer, {
onSelect: function(result,event){
alert(JSON.stringify(result));
},
onUnselect :unselect
});
map.addControl(selectfeature);
selectfeature.activate();
map.addControl(selectGraphic);
selectGraphic.activate();
}
var fillColors = ['rgba(255,153,0,0.4)', 'rgba(70,80,224,0.4)', 'rgba(60,150,79,0.4)', 'rgba(176,61,35,0.4)'];
var strokeColors = ['rgba(255,204,0,0.2)', 'rgba(12,21,138,0.2)', 'rgba(20,99,32,0.2)', 'rgba(145,43,20,0.2)'];
var radius = [3,6,9,12,15,18];
var sybolCount = fillColors.length * radius.length * 2;
var symbols = [];
for(var i = 0; i <fillColors.length; i++){
for(var j = 0; j<radius.length; j++){
//circle symbol
symbols.push(new SuperMap.Style.Circle({
radius: radius[j],
fill: new SuperMap.Style.Fill({
color: fillColors[i]
}),
stroke: new SuperMap.Style.Stroke({
color: strokeColors[i]
})
}));
//star symbol
symbols.push(new SuperMap.Style.RegularShape({
pointsLength: 5,
radius: radius[j],
radius1: radius[j]*0.6,
fill: new SuperMap.Style.Fill({
color: fillColors[i]
}),
stroke: new SuperMap.Style.Stroke({
color: strokeColors[i]
})
}));
}
}
var total,t1,t2;
var e = 10000000;
function addData()
{
graphicLayer.removeAllGraphics();
vectorLayer.removeAllFeatures();
var total = document.getElementById("total").value;
t1 = new Date().getTime();
var points2 = [];
var points = [];
var offlineStyle = {fillColor: "#898989",strokeColor: "#898989",pointRadius:"12px",cursor:"pointer"};
for(var i = 0; i<total; i++){
var point= new SuperMap.Geometry.Point(2 * e * Math.random() - e, 2 * e * Math.random() - e);
var point2 = new SuperMap.Geometry.Point(3 * e * Math.random() - e, 3 * e * Math.random() - e);
var pointVector = new SuperMap.Graphic(point);
var pointvector2 = new SuperMap.Feature.Vector(point2);
pointvector2.style = offlineStyle;
pointVector.style={
image: symbols[i % sybolCount]
};
points.push(pointVector);
points2.push(pointvector2);
}
graphicLayer.addGraphics(points);
vectorLayer.addFeatures(points2);
t2 = new Date().getTime();
}
function removeData()
{
graphicLayer.removeAllGraphics();
graphicLayer.refresh();
}
</script>
</head>
<body onload="init()" >
<div id="toolbar">
<input id="total" type="text" style="width: 100px" value="1000">
<input type="button" class="btn" style="margin-bottom: 10px" value="DRAW" onclick="addData()">
<input type="button" class="btn" style="margin-bottom: 10px" value="REMOVE" onclick="removeData()">
</div>
<div id="map"></div>
</body>
</html>
捕捉到的事件对象obj打印:
{"id":"SuperMap.Graphic_3639","geometry":{"id":"SuperMap.Geometry.Point_3637","x":-2824257.0461351853,"y":5743943.61292712,"type":"NONE","bounds":{"left":-2824257.0461352,"bottom":5743943.6129271,"right":-2824257.0461352,"top":5743943.6129271}},"attributes":{},"style":{"image":{"radius":15,"fill":{"color":"rgba(60,150,79,0.4)"},"stroke":{"color":"rgba(20,99,32,0.2)"},"canvas":{},"anchor":[15.5,15.5],"size":[31,31]}}}