supermap 绘制不同颜色的线条

最新推荐文章于 2022-10-24 16:59:43 发布

许海洋

最新推荐文章于 2022-10-24 16:59:43 发布

阅读量2.8k

点赞数

分类专栏： GIS

本文链接：https://blog.csdn.net/qq_16557323/article/details/52120591

版权

GIS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>点线面绘制</title>
    <style type="text/css">
        body{
            margin: 0;
            overflow: hidden;
            background: #fff;
        }
        #map{
            position: relative;
            height: 520px;
            border:1px solid #3473b7;
        }
        #toolbar{
            position: relative;
            height: 33px;
            padding-top:5;
        }
    </style>
    <script src = './libs/SuperMap.Include.js'></script>
    <script src='./js/jquery.js'></script>
    <script type="text/javascript">
        var map,layer,drawPoint, drawLineRed,drawLineBlue,drawLineGreen,drawPolygon,lineLayerRed,lineLayerBlue,lineLayerGreen,
                host = document.location.toString().match(/file:\/\//) ? "http://localhost:8090" : 'http://' + document.location.host;
        url = "http://localhost:8090/iserver/services/map-world/rest/maps/World";
        function init()
        {

            //新建线矢量图层
            lineLayerRed = new SuperMap.Layer.Vector("lineLayer");
            lineLayerRed.style = {
                   strokeColor:"red",
                   strokeWidth:5
           }

            lineLayerBlue = new SuperMap.Layer.Vector("lineLayer");
            lineLayerBlue.style = {
                   strokeColor:"blue",
                   strokeWidth:5
           }

            lineLayerGreen = new SuperMap.Layer.Vector("lineLayer");
            lineLayerGreen.style = {
                   strokeColor:"green",
                   strokeWidth:5
           }

            drawLineRed = new SuperMap.Control.DrawFeature(lineLayerRed, SuperMap.Handler.Path, { multi: true});
            drawLineBlue = new SuperMap.Control.DrawFeature(lineLayerBlue, SuperMap.Handler.Path, { multi: true});
            drawLineGreen = new SuperMap.Control.DrawFeature(lineLayerGreen, SuperMap.Handler.Path, { multi: true});
            map = new SuperMap.Map("map",{controls:[
                new SuperMap.Control.Zoom() ,
                new SuperMap.Control.Navigation() ,
                new SuperMap.Control.LayerSwitcher()
            ,drawLineRed,drawLineBlue,drawLineGreen]});
            layer= new SuperMap.Layer.TiledDynamicRESTLayer("World", url, null,{maxResolution:"auto"});
            layer.events.on({"layerInitialized":addLayer});

            $("#selectColor").change(function(){
               var color = $("input[type=radio]:checked").val();
               deactiveAll();
               if(color == "red"){
                   drawLineRed.activate();
               }else if(color == "blue"){
                   drawLineBlue.activate();
               }else{
                   drawLineGreen.activate();
               }


            });

        }
        function addLayer(){

            map.addLayers([layer,lineLayerRed,lineLayerBlue,lineLayerGreen]);
            //显示地图范围
            map.setCenter(new SuperMap.LonLat(0, 0), 0);
        }

        function draw_line(){
            drawLine.activate();
        }



        function clearFeatures(){
            lineLayerRed.removeAllFeatures();
            lineLayerGreen.removeAllFeatures();
            lineLayerBlue.removeAllFeatures();
        }

        function deactiveAll(){
           drawLineRed.deactivate();
            drawLineBlue.deactivate();
            drawLineGreen.deactivate();

        }


    </script>
</head>
<body οnlοad="init()" >
<div id="toolbar">
    <input type="button" style="float:left" value="清除" οnclick="clearFeatures()"/>
    <div id="selectColor"style="float:left">
        <label style="float:left;display:block;"><input name="kind" type="radio" value="red"/>红色</label>
        <label style="float:left;display:block;"><input name="kind" type="radio" value="blue"/>蓝色</label>
        <label style="float:left;display:block;"><input name="kind" type="radio" value="green"/>绿色</label>
    </div>

</div>
   <div id="map"></div>

</body>
</html>