首页 / 浏览问题 / 云GIS / 问题详情
控件默认位置问题
13EXP 2017年05月31日
在本地调试的时候添加的鹰眼控件、比例尺、鼠标移上去显示经纬度等控件都是按照默认的添加方式添加的,鹰眼显示在右下角、比例尺在左下角、鼠标移到地图上显示的经纬度信息在右下角。但是把代码放到云服务器上后,这些控件全部都变成在左上角了,请问一下这是什么原因造成的?

下面是我的地图初始化的代码:

//地图初始化
function init() {
    //新建线矢量图层
    lineLayer = new SuperMap.Layer.Vector("lineLayer");
    //对线图层应用样式style(前面有定义)
    lineLayer.style = lineStyle;
    //创建画线控制,图层是lineLayer;这里DrawFeature(图层,类型,属性);multi:true在将要素放入图层之前是否现将其放入几何图层中
    drawLine = new SuperMap.Control.DrawFeature(lineLayer, SuperMap.Handler.Path, {
        multi: true
    });
    drawLine.events.on({
        "featureadded": drawLineCompleted
    });

    //新建面矢量图层
    polygonLayer = new SuperMap.Layer.Vector("polygonLayer");
    //对面图层应用样式style(前面有定义)
    polygonLayer.style = polygonStyle;
    //创建画面控制,图层是polygonLayer
    drawPolygon = new SuperMap.Control.DrawFeature(polygonLayer, SuperMap.Handler.Polygon);
    drawPolygon.events.on({
        "featureadded": drawPolygonCompleted
    });

    map = new SuperMap.Map("map", {
        controls: [
            new SuperMap.Control.ScaleLine(), //比例尺控件。默认位置为地图左下角。
            //new SuperMap.Control.Zoom(), //缩放类。 用于缩放地图。默认情况下垂直显示在地图左上角。
            //new SuperMap.Control.LayerSwitcher(), //图层选择控件类。 用于控制地图中的图层可见性。
            new SuperMap.Control.MousePosition(), //该控件显示鼠标移动时,所在点的地理坐标。
            new SuperMap.Control.Navigation({
                dragPanOptions: {
                    enableKinetic: true //设置是否使用拖拽动画。默认为false,不使用动画。
                },
                autoActivate: true, //添加到地图的控件是否自动生效,默认为true
                documentDrag: true, //允许拖拽地图,使地图能够平移到视图窗口外。默认为false
                handleRightClicks: true, //是否响应右键点击,默认为false
            }), //此控件处理伴随鼠标事件(拖拽,双击、鼠标滚轮缩放)的地图浏览, 如果创建地图时没有设置任何控件,此控件会默认添加到地图。
            drawLine, drawPolygon
        ]
    });

    //初始化鹰眼控件类
    overviewmap = new SuperMap.Control.OverviewMap();
    //属性minRectSize:鹰眼范围矩形边框的最小的宽度和高度。默认为8pixels
    overviewmap.minRectSize = 10;
    map.addControl(overviewmap);

    //初始化复杂缩放控件类
    panzoombar = new SuperMap.Control.PanZoomBar();
    // 是否固定缩放级别为[0,16]之间的整数,默认为false
    panzoombar.forceFixedZoomLevel = false;
    //是否显示滑动条,默认值为false
    panzoombar.showSlider = true;
    /*点击箭头移动地图时,所移动的距离占总距离(上下移动的总距离为高度,左右移动的总距离为宽度)
    的百分比,默认为null。 例如:如果slideRatio 设为0.5, 则垂直上移地图半个地图高度.*/
    panzoombar.slideRatio = 0.5;
    //设置缩放条滑块的高度,默认为120
    panzoombar.sliderBarHeight = 180;
    //设置缩放条滑块的宽度,默认为13
    panzoombar.sliderBarWidth = 17;
    map.addControl(panzoombar);

    //初始化拉框缩放控件类
    zoombox = new SuperMap.Control.ZoomBox({
        keyMask: SuperMap.Handler.MOD_SHIFT,
        "autoActivate": true //设置keyMask属性,使同时按住Shift绘矩形框
    });
    //是否将该控件设置为拉框缩小,默认为false,拉框放大
    zoombox.out = false;
    map.addControl(zoombox); //添加控件

    //注册地图上鼠标点击事件
    map.events.on({
        "click": getClickPositionPx
    });

    //地图移动事件
    map.events.on({
        "movestart": function() {
            isMapMoving = true;
            //closeInfoWinPipeline(); //地图开始移动时如果有显示的管线信息框,关闭
        }
    });
    map.events.on({
        "moveend": function() {
            isMapMoving = false;
        }
    });

    vectorLayer = new SuperMap.Layer.Vector("Vector Layer");

    //创建分块动态REST图层,该图层显示iserver 8C 服务发布的地图,
    //其中"JianShuiNZ"为图层名称,url图层的服务地址,{transparent: true}设置到url的可选参数
    layer = new SuperMap.Layer.TiledDynamicRESTLayer("JianShuiNZ", url, {
        transparent: true, //图层是否透明,默认为false
        cacheEnabled: false //是否使用服务端的缓存,默认为true
    }, {
        maxResolution: "auto",
        bufferImgCount: 0,
        projection: "EPSG:4326",
        units: "degrees"
    });

    //创建UTFGrid图层----用户终端
    uftGridOutlet = new SuperMap.Layer.UTFGrid("UTFGridLayer", url, {
        layerName: "Layer_JY_Outlet",
        utfTileSize: 256, //瓦片的像素大小, 默认256像素的正方形。
        pixcell: 16, //瓦片中每个单元格的像素宽度, 默认为2,pixcell应该能够被瓦片宽与高整除,该属性与options属性中 utfgridResolution 属性对应。
        isUseCache: false //是否使用本地缓存策略。设置为false则不使用,默认使用。
    }, {
        utfgridResolution: 16, // 瓦片像素点个数与UTFGrid单行数据点个数的比 值。如果UTFGrid中的一个字符码对应表示4x4的像素块,则utfgridResolution 的值为4,默认值为2。
        projection: "EPSG:4326",
        maxResolution: layer.maxResolution,
        units: "degrees",
    });

    layer.events.on({
        "layerInitialized": addLayer
    });

    //UTFGrid图层对应的控件类----用户终端
    utfControlOutlet = new SuperMap.Control.UTFGrid({
        layers: [uftGridOutlet],
        callback: utfGridOutletCallBack,
        handlerMode: 'move'
    })
    map.addControl(utfControlOutlet);
}

1个回答

您好!你说的云服务器是具体是指什么?是所有的这些控件在左上角叠到一起了吗?
663EXP 2017年05月31日
就是把代码发布到一台服务器上,调试的时候其实也是在一台服务器上调试的只是不是同一台。发布之后这些控件是都在左上角叠到一起了

您好!按照你说的,我理解的你说的发布代码,应该就是把代码放到另外一台服务器吧,我也不太清楚你说的那台服务器上是什么原因导致的,我本地也没法重现,所以建议您,在你说的云服务器上稍微修改一下代码,不用控件默认的位置,自定义控件的位置以达到你想实现的效果,改变控件的位置,可以根据你自己的控件添加方式设置控件的位置:

请问 像素位置默认的是 left和top,能不能设置 right 和 bottom 呢
...