如何使用openlayer

时间：2016-07-01 05:10:46

标签： openlayers

需要更改滑块的圆半径。半径是变化但圆不变，它保持不变。

请查看以下代码。 

options = {
    div: "map",
    zoom: 2,
    center: [0, 0],
    layers: [
        new OpenLayers.Layer.OSM()
    ]
};
map = new OpenLayers.Map(options);
vector = new OpenLayers.Layer.Vector();
map.addLayer(vector);


var point1 = new OpenLayers.Geometry.Point(0,0);
var point2 = new OpenLayers.Geometry.Point(1000000, 1000000);
var point3 = new OpenLayers.Geometry.Point(2000000, 2000000);
var radius = $( "#amount" ).val();
 var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon(point2,radius,40,0);
     var featurecircle = new OpenLayers.Feature.Vector(mycircle);
     


// var selected_polygon_style = {
//     strokeWidth: 5,
//     strokeColor: '#ff0000'
//     // add more styling key/value pairs as your need
// };

// featurecircle.style = selected_polygon_style;

marker1 = new OpenLayers.Feature.Vector(point1, null, {
    externalGraphic: "marker.png",
    graphicWidth: 32,
    graphicHeight: 32,
    fillOpacity: 1,
});
marker1.style = { display: 'none' };

marker2 = new OpenLayers.Feature.Vector(point2, null, {
    externalGraphic: "marker.png",
    graphicWidth: 32,
    graphicHeight: 32,
    fillOpacity: 1
});

marker3 = new OpenLayers.Feature.Vector(point3, null, {
    externalGraphic: "marker.png",
    graphicWidth: 32,
    graphicHeight: 32,
    fillOpacity: 1
});
vector.addFeatures([marker1, marker2, marker3, featurecircle]);



$( "#slider-range-max" ).slider({
      range: "max",
      min: 1000000,
      max: 3000000,
      value: 1000000,
      slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );
         radius =  $( "#amount" ).val();

     
var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon
(
    point2,
    radius,
    40,
    0
);

var featurecircle = new OpenLayers.Feature.Vector(mycircle);

vector.removeFeatures(featurecircle);
vector.addFeatures(featurecircle);
         console.log(radius);

      }
    });
    $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
$( radius ).val( $( "#slider-range-max" ).slider( "value" ) );
html, body {
    height:100%;
    width: 100%;
    padding:5px;
    margin:0px;
}
#map {
    height:90%;
    width: 95%;
}
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="http://openlayers.org/en/v3.16.0/css/ol.css" rel="stylesheet"/>
<script src="http://openlayers.org/api/OpenLayers.js"></script>


<p>
  <label for="amount">Minimum number</label>
  <input type="text" id="amount" value="1000000"  style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range-max"></div>
<div id="map"></div> 

options = {
div: "map",
zoom: 2,
center: [0, 0],
layers: [
    new OpenLayers.Layer.OSM()
]
};
map = new OpenLayers.Map(options);
vector = new OpenLayers.Layer.Vector();
map.addLayer(vector);


var point1 = new OpenLayers.Geometry.Point(0,0);
var point2 = new OpenLayers.Geometry.Point(1000000, 1000000);
var radius = $( "#amount" ).val();
var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon
(
    point2,
    radius,
    40,
    0
);

var featurecircle = new OpenLayers.Feature.Vector(mycircle);

marker1 = new OpenLayers.Feature.Vector(point1, null, {
    externalGraphic: "marker.png",
    graphicWidth: 32,
    graphicHeight: 32,
    fillOpacity: 1
});

marker2 = new OpenLayers.Feature.Vector(point2, null, {
    externalGraphic: "marker.png",
    graphicWidth: 32,
    graphicHeight: 32,
    fillOpacity: 1
});

vector.addFeatures([marker1, marker2, featurecircle]);

$( "#slider-range-max" ).slider({
      range: "max",
      min: 1000000,
      max: 3000000,
      value: 1000000,
      slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );
         radius =  $( "#amount" ).val();
         console.log(radius);
      }
    });
    $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
radius =  $( "#amount" ).val();

Slider adding multiple circles required to change one circle radius only

1 个答案:

答案 0 :(得分：1)

您需要删除圆形要素并将其重新添加到矢量图层。

尝试在幻灯片功能中添加这些行

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnableCdn="true"></asp:ScriptManager>
        <div id="editModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                        <h3 id="editModalLabel">View Details</h3>
                    </div>
                    <asp:UpdatePanel ID="upEdit" runat="server">
                        <ContentTemplate>
                            <div class="modal-body">
                                <table class="table">
                                    <tr>
                                        <td>Item ID:
                        <asp:TextBox ID="txtID" runat="server"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Type:
                        <asp:TextBox ID="txtType" runat="server"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Model:
                        <asp:TextBox ID="txtModel" runat="server"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Requested Quantity:
                        <asp:TextBox ID="txtQuan" runat="server"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Unit:
                        <asp:TextBox ID="txtUnit" runat="server"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Date Needed:
                        <asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Description:
                        <asp:TextBox ID="txtDesc" runat="server"></asp:TextBox>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div class="modal-footer">
                                <asp:Label ID="lblResult" Visible="false" runat="server"></asp:Label>
                                <asp:Button ID="btnSave" runat="server" Text="Approve" CssClass="btn btn-primary" />
                                <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
                            </div>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="GridView1" EventName="RowCommand" />
                            <asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
                        </Triggers>
                    </asp:UpdatePanel>
                </div>
            </div>
        </div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:GridView ID="GridView1" runat="server" OnRowCommand="GridView1_RowCommand" AutoGenerateSelectButton="True">
                </asp:GridView>
            </ContentTemplate>
            <Triggers>
             <asp:AsyncPostBackTrigger ControlID="GridView1" />
         </Triggers>
        </asp:UpdatePanel>
    </form>
</body>
</html>
相关问题
最新问题