描述

  1. 指地图基本的放大、缩小、漫游、全幅显示等地图操作,这是一个在线地图应用最基本的功能,OSP支持所有的基本地图操作,同时也支持鼠标滑轮、键盘操作

代码 (文件格式为 UTF-8)


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="http://www.supermapcloud.com/demo/china/styles/action.css" rel="stylesheet" type="text/css"></link>
    <link href="http://www.supermapcloud.com/online/samples/actions/js_color_picker_v2.css" rel="stylesheet" type="text/css"></link>
	<script type="text/javascript" src="http://services.supermapcloud.com/iserver/api?key=aXtbCHyF5FSZn6TeeEywSW0u8TDHrwC0IjFudD2j5xM%3D&v=1.1"></script>
    <script type="text/javascript" src="http://www.supermapcloud.com/online/samples/actions/js_color_picker_v2.js"></script>
    <script type="text/javascript">
        var map = null;
        var markerLayer = null;
        var featuresLayer = null;
		var layer = null;
        //初始化地图
        function onPageLoad() {
			layer = new SuperMap.Layer.CloudLayer();
			markerLayer = new SuperMap.Layer.Markers("maker");
			featuresLayer = new SuperMap.Layer.Vector();
			drawLine = new SuperMap.Control.DrawFeature(featuresLayer,SuperMap.Handler.Path, { multi: true });
			drawLine.events.on({"featureadded": drawCompleted});
			drawPoint = new SuperMap.Control.DrawFeature(featuresLayer,SuperMap.Handler.Point, { multi: true });
			drawPoint.events.on({"featureadded":drawCompleted});
			drawPolygon = new SuperMap.Control.DrawFeature(featuresLayer,SuperMap.Handler.Polygon, { multi: true });
			drawPolygon.events.on({"featureadded":drawCompleted});
			 map = new SuperMap.Map("mapDiv", { controls: [
                      new SuperMap.Control.PanZoomBar(),
                      new SuperMap.Control.Navigation({
                          dragPanOptions: {
                              enableKinetic: true
                          }
                      }),drawLine,drawPoint,drawPolygon], allOverlays: true
            });
			map.addLayer(layer);
			map.addLayer(featuresLayer);
			map.addLayer(markerLayer);
			map.setCenter(new SuperMap.LonLat(12958399.4681885, 4852082.44060595),11);
        }

		function drawLines(){
			drawLine.activate();
		}
		function drawPoints(){
			var fillColor = document.getElementById("color1").value;
				if (fillColor.indexOf("#") != 0) {
					alert("填充颜色为非法值!");
					return false;
				}
				var strokeColor = document.getElementById("color2").value;
				if (strokeColor.indexOf("#") != 0) {
					alert("边线颜色为非法值!");
					return false;
				}
				var opacity = document.getElementById("txtOpacity").value;
				if (isNaN(opacity)) {
					alert("透明度的范围在【0-1.0】之间!");
					return false;
				}
				var lineWidth = document.getElementById("txtLineWidth").value;
				if (isNaN(lineWidth)) {
					alert("边线宽度应该是数值型");
					return false;
				}
				featuresLayer.style = {fillColor:fillColor,strokeColor:strokeColor,strokeWidth:lineWidth,pointRadius:6,strokeOpacity:opacity,fillOpacity:opacity,strokeWidth:lineWidth};
			drawPoint.activate();
		}
		function drawPolygons(){
			drawPolygon.activate();
		}
		var feature;
		function drawCompleted(drawGeometryArgs){
			var fillColor = document.getElementById("color1").value;
            if (fillColor.indexOf("#") != 0) {
                alert("填充颜色为非法值!");
                return false;
            }
            var strokeColor = document.getElementById("color2").value;
            if (strokeColor.indexOf("#") != 0) {
                alert("边线颜色为非法值!");
                return false;
            }
            var opacity = document.getElementById("txtOpacity").value;
            if (isNaN(opacity)) {
                alert("透明度的范围在【0-1.0】之间!");
                return false;
            }
            var lineWidth = document.getElementById("txtLineWidth").value;
            if (isNaN(lineWidth)) {
                alert("边线宽度应该是数值型");
                return false;
            }
			featuresLayer.style = {fillColor:fillColor,strokeColor:strokeColor,strokeWidth:lineWidth,pointRadius:6,strokeOpacity:opacity,fillOpacity:opacity,strokeWidth:lineWidth};
			drawLine.deactivate();
			drawPoint.deactivate();
			drawPolygon.deactivate();
			var geometry = drawGeometryArgs.feature.geometry;
			feature = new SuperMap.Feature.Vector(geometry);
		}
		function clearAll(){
			featuresLayer.removeAllFeatures();
		}
		
		function zoomIn(){
			map.zoomIn();
		}
		
		function zoomOut(){
			map.zoomOut();
		}

        //将绘制的图形加载到矢量要素图层上。绘制点、线和面结束后传回的回调函数中都是DrawGeometryArgs类型的参数,而绘制圆后传回的回调函数的参数为 DrawCircleArgs,因此以下这个函数不能将圆加载到矢量图层上

        function addScaleBar() {
            //单线比例尺控件样式
            var simpleScaleBarStyle = new SuperMap.Web.Controls.ScaleBarStyle();
            simpleScaleBarStyle.color = "black";
            simpleScaleBarStyle.fontSize = 1;
            simpleScaleBarStyle.mode = SuperMap.Web.Controls.ScaleBarMode.SIMPLE;

            //单线比例尺控件
            var simpleScaleBar = $create(SuperMap.Web.Controls.ScaleBar, { scaleBarStyle: simpleScaleBarStyle, map: map }, null, null, document.getElementById("simpleScaleBarContainer"));

        }

        //编辑操作,必设指定编辑的地图和矢量图层
        function editEntity() {
            var drawAction = $create(SuperMap.Web.Actions.EditFeature, { map: map, featuresLayer: featuresLayer }, null, null, null);
            //drawAction.add_actionCompleted(function (arg) { debugger});
            map.set_action(drawAction);
        }



        //获取地图当前可视范围
        function getMapViewBounds() {
            var objViewBounds = document.getElementById("divViewBounds");
            var view = map.getExtent();
            objViewBounds.innerHTML = "LeftBottom坐标为,<br/>x:" + view.left + "<br/>y:" + view.bottom + "<br/>";
            objViewBounds.innerHTML += "RightTop坐标为,<br/>x:" + view.right + ",<br/>y:" + view.top;
        }

        //调整窗口大小
        function mapResize() {
            var width = document.getElementById("txtWidth").value;
            var height = document.getElementById("txtHeight").value;
            if (isNaN(width) || isNaN(height)) {
                alert("宽和高必须为数值类型");
                return false;
            }
            map.resize(parseInt(width), parseInt(height));
        }
        //恢复窗口大小
        function mapRecovery() {
            map.resize(880, 580);
        }

        var isshow = false;
        function showLegend() {
            if (isshow) {
                document.getElementById("maplegend").style.display = "none";
                isshow = false;
            } else {
                document.getElementById("maplegend").style.display = "block";
                isshow = true;
            }
        }

    </script>

</head>
<body onload="onPageLoad()">
    <!--地图控件-->
    <div id="main" style="position: absolute; height:398px;width:498px; top: 0px;
        left: 0px; border: solid 0px">
        <!--地图控件-->
        <div id="mapDiv" style="position: absolute; height:398px;width:498px; top: 0px;
        left: 0px;">
        </div>
       
        <div id="simpleScaleBarContainer" style="position: absolute; width: 200px; height: 50px;
            bottom: 30px; left: 30px;">
        </div>
        <div id="divMousePosition" style="position: absolute; bottom: 30px; right: 30px;
            z-index: 9999">
        </div>
        <div id="maplegend" style="position: absolute; bottom: 10px; left: 10px; height: 230px;
            width: 300px; border: 1px solid #ccc; overflow: auto; overflow-x: hidden; display: none;
            z-index: 9999">
            <table>
                <tr>
                    <td align="center">
                        图例
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="../../images/legend.jpg" />
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div id="tool" style="position: absolute; left:460px; top:0px; width: 72px; z-index: 100;
        padding-bottom: 5px;">
        <img src="http://www.supermapcloud.com/online/images/drawPoint.png" title="绘制点" onmouseover="this.src = 'http://www.supermapcloud.com/online/images/drawPoint_on.png'"
            onmouseout="this.src = 'http://www.supermapcloud.com/online/images/drawPoint.png'" onclick="drawPoints()"></img>
        <img src="http://www.supermapcloud.com/online/images/drawLine.png" title="绘制线" onmouseover="this.src = 'http://www.supermapcloud.com/online/images/drawLine_on.png'"
            onmouseout="this.src = 'http://www.supermapcloud.com/online/images/drawLine.png'" onclick="drawLines()"></img>
        <img src="http://www.supermapcloud.com/online/images/drawRegion.png" title="绘制面" onmouseover="this.src = 'http://www.supermapcloud.com/online/images/drawRegion_on.png'"
            onmouseout="this.src = 'http://www.supermapcloud.com/online/images/drawRegion.png'" onclick="drawPolygons()"></img>
        <img src="http://www.supermapcloud.com/online/images/ZoomIn.png" title="放大" onmouseover="this.src = 'http://www.supermapcloud.com/online/images/zoomin_on.png'"
            onmouseout="this.src = 'http://www.supermapcloud.com/online/images/ZoomIn.png'" onclick="zoomIn()" />
        <img src="http://www.supermapcloud.com/online/images/ZoomOut.png" title="缩小" onmouseover="this.src = 'http://www.supermapcloud.com/online/images/zoomout_on.png'"
            onmouseout="this.src = 'http://www.supermapcloud.com/online/images/ZoomOut.png'" onclick="zoomOut()" />
        <img src="http://www.supermapcloud.com/online/images/eraser.png" title="清除矢量要素" onmouseover="this.src = 'http://www.supermapcloud.com/online/images/eraser_on.png'"
            onmouseout="this.src = 'http://www.supermapcloud.com/online/images/eraser.png'" onclick="clearAll()"></img>
    </div>
    <form>
    <div id="operatePanel" style="position: absolute; width: 260px; left:500px; top:0px;
        border: solid 1px #969696; z-index: 100; padding-bottom: 5px; background-image: url(../../images/toolbar_backgroundb.png);">
        <font style="font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 100%">地图的基本操作</font>
        <div style="font-size: 12px">
               地图窗口的右上方一列按钮分别是绘制点、绘制线、绘制面、矢量要素编辑、漫游、拉框放大、拉框缩小、清除矢量要素共8个按钮。下方填充颜色、透明度、线宽、边线颜色可以对矢量绘制的线型、颜色等进行设置,设置完成后,点击绘制点、线、或面按钮后,可以在地图上绘制自定义风格的矢量图形。<br />
              点击下方按钮,可以获取地图当前可视范围。<br />
              设定宽、高的具体值(单位均为像素),点调整按钮,可以调整地图到指定大小,点恢复按钮,则地图回到默认大小。<br />
        </div>
        <div id="divFeature" class="box">
            <table style="font-size: 12px">
                <tr>
                    <td>
                        填充颜色:
                    </td>
                    <td>
                        <input type="text" size="10" id="color1" maxlength="7" name="rgb1" value="#FF0000"
                            onclick="showColorPicker(this,document.forms[0].rgb1)">
                    </td>
                </tr>
                <tr>
                    <td>
                        填充透明度:
                    </td>
                    <td>
                        <select id="txtOpacity">
                            <option value="0.1">0.1</option>
                            <option value="0.2">0.2</option>
                            <option value="0.3">0.3</option>
                            <option value="0.4">0.4</option>
                            <option value="0.5" selected>0.5</option>
                            <option value="0.6">0.6</option>
                            <option value="0.7">0.7</option>
                            <option value="0.8">0.8</option>
                            <option value="0.9">0.9</option>
                            <option value="1.0">1.0</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        线宽:
                    </td>
                    <td>
                        <input type="text" id="txtLineWidth" style="width: 50px" value="2" />
                    </td>
                </tr>
                <tr>
                    <td>
                        边线颜色:
                    </td>
                    <td>
                        <input type="text" size="10" id="color2" maxlength="7" name="rgb2" value="#0000FF"
                            onclick="showColorPicker(this,document.forms[0].rgb2)">
                    </td>
                </tr>
            </table>
            <div id="picker">
            </div>
        </div>
        <input type="button" value="获取当前地图可视范围" onclick="getMapViewBounds()" />
        <input type="button" value="显示/隐藏图例" onclick="showLegend()" />
        <div id="divViewBounds" style="font-size: 12px">
        </div>
        <!--<div style="font-size: 12px">
            调整窗口大小:<br />
            宽:<input type="text" id="txtWidth" value="500" style="width: 50px" />高:<input style="width: 50px"
                type="text" id="txtHeight" value="300" /><input type="button" value="调整" onclick="mapResize()" /><input
                    type="button" value="恢复" onclick="mapRecovery()" />
        </div>-->
    </div>
    </form>
</body>
</html>