iframe-proxy | Sunbelt Computer Software

142 lines (134 loc) · 6.02 KB
﻿<!DOCTYPE>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>聚类图层</title>
        <style type="text/css">
            body{
                margin: 0;
                overflow: hidden;
                background: #fff;
            #map{
                position: relative;
                height: 553px;
                border:1px solid #3473b7;
        </style>
        <link href='./css/bootstrap.min.css' rel='stylesheet' />
        <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
        <script src='../libs/SuperMap.Include.js'></script>
        <script src='./data/changchundata.js'></script><!--该文件中保存了长春地图的一些兴趣点-->
        <script type="text/javascript">
            var host = document.location.toString().match(/file:\/\//)?"http://localhost:8090":'http://' + document.location.host;
            var map, layer,clusterLayer,infowin,
            url=host+"/iserver/services/map-changchun/rest/maps/长春市区图";
            var styleLine = {
                strokeColor: "black",
                strokeWidth: 1,
                fill: false
            function init(){
                //创建map对象和动态图层
                map = new SuperMap.Map("map", { controls: [
                    new SuperMap.Control.ScaleLine(),
                    new SuperMap.Control.Zoom(),
                    new SuperMap.Control.Navigation({
                        dragPanOptions: {
                            enableKinetic: true
                    })], units: "m"
                layer = new SuperMap.Layer.TiledDynamicRESTLayer("changchun", url, {transparent: true, cacheEnabled: true, redirect: true}, {maxResolution:"auto"});
                layer.events.on({"layerInitialized": addLayer});
            function addLayer(){
                //创建聚散图层并添加layers
                clusterLayer = new SuperMap.Layer.ClusterLayer("Cluster");
                map.addLayers([layer,clusterLayer]);
                //创建聚散选择控件。该控件实现了聚散图层的鼠标事件。
                var select = new SuperMap.Control.SelectCluster(clusterLayer,{
                    callbacks:{
                        click:function(f){ //点击兴趣点弹出信息窗口
                            closeInfoWin();
                            if(!f.isCluster){ //当点击聚散点的时候不弹出信息窗口
                                openInfoWin(f);
                        clickout:function(){       //点击空白处关闭信息窗口
                            closeInfoWin();
                //将控件添加到map上
                map.addControl(select);
                //设置中心点，出图
                map.setCenter(new SuperMap.LonLat(4803, -3726), 1);
                clusterLayer.events.on({"moveend": function(e){//注册moveend事件，当缩放的时候关闭信息窗口
                    if(e&& e.zoomChanged)closeInfoWin();
                clusterLayer.events.on({"clusterend":function(e){
                                        //e包含了聚散完成所需要的信息，其结构如下e={clusterPoints:[],displayedPoints:[],element:null,object:null,type:"clusterEnd"}
                                        //其中，clusterMaps是包含了聚散点映射关系集合，clusterPoints[i]则表示第i个聚散点映射关系，其类型为{SuperMap.Feature.Vector}，其内的children属性包含有对应的实际点坐标
                                        //而displayedPoints则是用户所设定的某一范围内不需要被聚散的点集合
                //激活控件。
                select.activate();
                //往聚散图层中添加兴趣点
                var fs1 = getFeatures();
                clusterLayer.addFeatures(fs1);
            function getFeatures(){
                var b = map.getExtent();
                var ps = [];
                var fs = changchundata;
                for(var i=0;i<fs.length;i++){
                    var fi = fs[i];
                    var c = fi.geometry.center;
                    var f = new SuperMap.Feature.Vector();
                    f.geometry = new SuperMap.Geometry.Point(c.x, c.y);
                    f.style = {
                        pointRadius: 4,
                        graphic:true,
                        externalGraphic:"../theme/images/cluster4.png",
                        graphicWidth:12,
                        graphicHeight:12
                    f.info = {
                        "name":fi.fieldValues[4]
                    ps.push(f);
                return ps;
            function openInfoWin(feature){
                var geo = feature.geometry;
                var bounds = geo.getBounds();
                var center = bounds.getCenterLonLat();
                var contentHTML = "<div style='font-size:.8em; opacity: 0.8; overflow-y:hidden;'>";
                contentHTML += "<div>"+feature.info.name+"</div></div>";
                var popup = new SuperMap.Popup.FramedCloud("popwin",
                        new SuperMap.LonLat(center.lon,center.lat),
                        contentHTML,
                feature.popup = popup;
                infowin = popup;
                map.addPopup(popup);
            function closeInfoWin(){
                if(infowin){
                        infowin.hide();
                        infowin.destroy();
                    catch(e){}
        </script>
    </head>
    <body onload="init()">
        <div id="map"></div>
    </body>
Sunbelt Computer Software

PL/B Language Development and Support

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sunbelt Computer Software

PL/B Language Development and Support

FilesExpand file tree

clusterLayer.html

Latest commit

History

clusterLayer.html

File metadata and controls
