<!DOCTYPE >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>UTFgridAndPopup</title>
<style type="text/css">
body{
margin: 0;
overflow: hidden;
background: #fff;
}
#map{
/*position: absolute;*/
border:1px solid #3473b7;
}
div{
display: block;
}
.pop{
height: 400px;
width: 300px;
background: #0c82a9;
color: #FFFFFF;
margin-left: 120px;
margin-top: 10px;
-webkit-box-shadow:0px 0px 10px 5px #888888;
-moz-box-shadow:0px 0px 10px 5px #888888;
box-shadow:0px 0px 10px 5px #888888;
border-radius: 10px;
opacity:0.9;
}
.pop_header
{
height: 24px;
width: 100%;
}
.pop_close
{
background-image: url("image/close.png");
background-repeat: no-repeat;
background-position:4px 4px;
width: 24px;
height: 100%;
position: relative;
left:276px;
opacity: 1;
}
.pop_close:hover{
opacity: .5;
cursor:default;
}
.pop_content{
padding:15px;
width: 270px;
height: 50px;
}
.pop_content p span:first-child{
font-family:Microsoft YaHei;
font-size: 14px;
}
.pop_content p span:last-child{
font-family: Microsoft YaHei;
font-size: 12px;
}
.pop_arrow{
position:absolute;
top:30%;
margin-left: -50px;
border-top: 5px solid transparent;
border-left: 0 solid transparent;
border-right: 50px solid #0c82a9;
border-bottom: 20px solid transparent;
}
</style>
<script src='http://support.supermap.com.cn:8090/iserver/iClient/forJavaScript/libs/SuperMap.Include.js'></script>
<script type="text/javascript">
var map,layer,vectorLayer,infowin,infowin1,highlightFea,popfeature,
host = document.location.toString().match(/file:\/\//)?"http://localhost:8090":'http://' + document.location.host,
url="http://support.supermap.com.cn:8090/iserver/services/map-changchun/rest/maps/长春市区图_Local";
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:0",
//设置地图的最大范围，这行代码相当重要
maxExtent:new SuperMap.Bounds(48.4 , -7668.25,8958.85 , -55.58 )
});
layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, {transparent: false}, {useCanvas: true, maxResolution: "auto",
scales:[1/2000,1/4000,1/8000,1/16000,1/32000]
});
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: "School@Changchun",
utfTileSize: 256,
pixcell: 16,
isUseCache: true
},
{
utfgridResolution: 16
});
utfgridSchool.maxExtent=layer.maxExtent;
utfgridPark = new SuperMap.Layer.UTFGrid("UTFGridLayerPark", url,
{
layerName: "Park@Changchun",
utfTileSize: 256,
pixcell: 16,
isUseCache: true
},
{
utfgridResolution: 16
});
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(4539.98 , -3835.29);
map.addLayers([layer,vectorLayer,utfgridSchool,utfgridPark,]);
map.setCenter(center, 0);
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) {
info = infoLookup[idx];
if (info && info.data) {
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,
//
