代码如下
var map, layer, vectorLayer, infowin, infowin1, highlightFea, popfeature,
host = "http://localhost:8090" ,
url = host + "/iserver/services/map-yanjin/rest/maps/yanjin";
var controlmove, controlclick, utfgridPark, utfgridSchool;
function init() {
map = new SuperMap.Map("map", {
controls: [
new SuperMap.Control.ScaleLine(),
new SuperMap.Control.Zoom(),
new SuperMap.Control.LayerSwitcher(),
new SuperMap.Control.Navigation({
dragPanOptions: {
enableKinetic: true
}
})],
projection: "EPSG:4326",
//设置地图的最大范围，这行代码相当重要
maxExtent: new SuperMap.Bounds(114.49, 36.86, 114.51, 36.87)
});
layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, { transparent: false }, {
useCanvas: true, maxResolution: "auto"
});
vectorLayer = new SuperMap.Layer.Vector("Vector Layer");
//注意：pixcell与utfgridResolution两个属性有对应关系，在使用的时候也要注意场景；
//1.其中pixcell为发送给服务端请求utfgrid瓦片的精度，数值越小，精度越高，相应的瓦片大小也就越大；
//2.utfgridResolution为客户端解析瓦片使用的精度，应该与pixcell的值相等，否则会产生位置与属性对应不上的问题；
//3.通常如果UTFGrid图层为面图层，对应的数据量会比较大，为了不影响页面的正常浏览，可以将这两个属性设的大一些；
//4.isUseCache设置是否使用缓存，使用缓存能够提高性能；
utfgridSchool = new SuperMap.Layer.UTFGrid("UTFGridLayerSchool", url,
{
layerName: "SH_0210_交通信号灯@arcgis",
utfTileSize: 256,
pixcell: 0.1,
isUseCache: true
},
{
utfgridResolution: 0.1
});
utfgridSchool.maxExtent = layer.maxExtent;
utfgridPark = new SuperMap.Layer.UTFGrid("UTFGridLayerPark", url,
{
layerName: "tingchechang@arcgis",
utfTileSize: 256,
pixcell: 8,
isUseCache: true
},
{
utfgridResolution: 8
});
utfgridPark.maxExtent = layer.maxExtent;
//监听move事件控件
controlmove = new SuperMap.Control.UTFGrid({
layers: [utfgridPark, utfgridSchool],
callback: callback,
handlerMode: "move"
});
//监听click事件控件
controlclick = new SuperMap.Control.UTFGrid({
layers: [utfgridPark, utfgridSchool],
callback: callback2,
});
layer.events.on({ "layerInitialized": addLayer });
map.addControl(controlmove);
map.addControl(controlclick);
map.events.on({ "zoomend": reviewUTFgrid });
}
function addLayer() {
var center = new SuperMap.LonLat(114.499655765765, 36.8687062307649);
map.addLayers([layer, vectorLayer, utfgridSchool, utfgridPark, ]);
map.setCenter(center, 3);
reviewUTFgrid();
}
//move事件回调函数
var callback = function (infoLookup) {
if (infowin)
map.removePopup(infowin);
if (highlightFea)
vectorLayer.removeFeatures(highlightFea);
if (infoLookup) {
var info;
for (var idx in infoLookup) {
// alert(idx);
info = infoLookup[idx];
//var last = JSON.stringify(info); //将JSON对象转化为JSON字符
//alert(last);
if (info && info.data) {
alert(1);
var dom = "<div style='padding: 5px;padding-left:5px;font-size:12px;font-family:Microsoft YaHei;line-height:8px;color: black;background:lightgoldenrodyellow'>" + info.data.name + "<br></br>" + "点击查看更多..." + "</div>";
//设置x与y的像素偏移量，不影响地图浏览；
var xOff = (1 / map.getScale()) * 0.003;
var yOff = -(1 / map.getScale()) * 0.003;
var pos = new SuperMap.LonLat(new Number(info.data.X) + xOff, new Number(info.data.Y) + yOff);
infowin = new SuperMap.Popup("chicken",
pos,
new SuperMap.Size(0, 0),
dom,
false, null);
//根据弹窗内容自动调整弹窗大小
infowin.autoSize = true;
//设置默认样式不显示
infowin.setBackgroundColor("none");
map.addPopup(infowin);
highlightFea = new SuperMap.Feature.Vector(new SuperMap.Geometry.Point(info.data.X, info.data.Y),
null,
{
//绘制矢量点方式
// pointRadius:7,
// fillColor:"#3399FF",
// fillOpacity:0.5,
// strokeColor:"#0033FF",
// strokeWidth:3,
// strokeOpacity:0.2
//引用图片方式
externalGraphic: "image/h12.png",
graphicWidth: 15,
graphicHeight: 15
}
);
vectorLayer.addFeatures([highlightFea]);
}
}
}
};
提示个这，
