用绘制控件绘制要素示例(openlayers)

by · 2019-04-03

001 <div id="tags"></div>
002 <div id="simpleMap"
style="height: 450px; width: 700px;"></div><br>
003 <script type="text/javascript">
004     var map, drawControls;
005     function init(){
006         //构造地图对象实例,并添加到id为simpleMap的div容器中
007         map = new Geo.View2D.Map("simpleMap");
008         // 构造瓦片地图图层
009         var layer = new Geo.View2D.Layer.GlobeTile("全球1:100万影像图", "http://tile0.tianditu.com/services/sbsm0210", {
010             transitionEffect: "resize",
011             topLevel: 2,
012             bottomLevel: 10,
013             maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90)
014         });
015         // 定义点图层
016         var pointLayer = new OpenLayers.Layer.Vector("Point Layer");
017         // 定义线图层
018         var lineLayer = new OpenLayers.Layer.Vector("Line Layer");
019         // 定义面图层
020         var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
021          
022         //添加图层到地图对象
023         map.addLayers([layer, pointLayer, lineLayer, polygonLayer]);
024         // 构造画图控件
025         drawControls = {
026             // 点
027             point: new OpenLayers.Control.DrawFeature(pointLayer,
028                         OpenLayers.Handler.Point),
029             // 线
030             line: new OpenLayers.Control.DrawFeature(lineLayer,
031                         OpenLayers.Handler.Path),
032             // 多边形
033             polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
034                         OpenLayers.Handler.Polygon),
035             // 圆
036             circle: new OpenLayers.Control.DrawFeature(polygonLayer,
037                         OpenLayers.Handler.RegularPolygon,{handlerOptions: {sides: 40}}),
038             // 规则三角形
039             triangle: new OpenLayers.Control.DrawFeature(polygonLayer,
040                         OpenLayers.Handler.RegularPolygon,{handlerOptions: {sides: 3}}),
041             // 规则四边形
042             square: new OpenLayers.Control.DrawFeature(polygonLayer,
043                         OpenLayers.Handler.RegularPolygon,{handlerOptions: {sides: 4}}),
044             // 规则五边形
045             pentagon: new OpenLayers.Control.DrawFeature(polygonLayer,
046                         OpenLayers.Handler.RegularPolygon,{handlerOptions: {sides: 5}}),
047             // 规则六边形
048             hexagon: new OpenLayers.Control.DrawFeature(polygonLayer,
049                         OpenLayers.Handler.RegularPolygon,{handlerOptions: {sides: 6}}),
050             // 椭圆
051             irregularCircle: new OpenLayers.Control.DrawFeature(polygonLayer,
052                         OpenLayers.Handler.RegularPolygon,{handlerOptions: {sides: 40,irregular: true}}),
053             // 不规则三角形
054             irregularTriangle: new OpenLayers.Control.DrawFeature(polygonLayer,
055                         OpenLayers.Handler.RegularPolygon,{handlerOptions: {sides: 3,irregular: true}}),
056             // 不规则四边形
057             irregularSquare: new OpenLayers.Control.DrawFeature(polygonLayer,
058                         OpenLayers.Handler.RegularPolygon,{handlerOptions: {sides: 4,irregular: true}}),
059             // 不规则五边形
060             irregularPentagon: new OpenLayers.Control.DrawFeature(polygonLayer,
061                         OpenLayers.Handler.RegularPolygon,{handlerOptions: {sides: 5,irregular: true}}),
062             // 不规则六边形
063             irregularHexagon: new OpenLayers.Control.DrawFeature(polygonLayer,
064                         OpenLayers.Handler.RegularPolygon,{handlerOptions: {sides: 6,irregular: true}})
065         };
066         // 加载画图控件到地图对象
067         for(var key in drawControls) {
068             map.addControl(drawControls[key]);
069         }
070  
071         //定位到中心点，缩放级别为2
072         map.setCenter(new OpenLayers.LonLat(104, 37), 2);
073         document.getElementById('noneToggle').checked = true;
074     }
075     // 检测点击的要素控件
076     function toggleControl(element) {
077         for(key in drawControls) {
078             var control = drawControls[key];
079             if(element.value == key && element.checked) {
080                 // 画图对象激活
081                 control.activate();
082             } else {
083                 control.deactivate();
084             }
085         }
086     }
087 </script>
088 <ul id="controlToggle">
089     <li>
090         <input name="type"
value="none" id="noneToggle"
onclick="toggleControl(this);" checked="checked"
type="radio">
091         <label for="noneToggle">导航操作</label>
092     </li>
093     <li>
094         <input name="type"
value="point" id="pointToggle"
onclick="toggleControl(this);" type="radio">
095         <label for="pointToggle">画点</label>
096         <input name="type"
value="line" id="lineToggle"
onclick="toggleControl(this);" type="radio">
097         <label for="lineToggle">画线</label>
098         <input name="type"
value="polygon" id="polygonToggle"
onclick="toggleControl(this);" type="radio">
099         <label for="polygonToggle">画多边形</label>
100     </li>
101     <li>
102         <input name="type"
value="circle" id="circleToggle"
onclick="toggleControl(this);" type="radio">
103         <label for="circleToggle">画圆</label>
104         <input name="type"
value="triangle" id="triangleToggle"
onclick="toggleControl(this);" type="radio">
105         <label for="triangleToggle">画规则三角形</label>
106         <input name="type"
value="square" id="squareToggle"
onclick="toggleControl(this);" type="radio">
107         <label for="squareToggle">画规则四边形</label>
108         <input name="type"
value="pentagon" id="pentagonToggle"
onclick="toggleControl(this);" type="radio">
109         <label for="pentagonToggle">画规则五边形</label>
110         <input name="type"
value="hexagon" id="hexagonToggle"
onclick="toggleControl(this);" type="radio">
111         <label for="hexagonToggle">画规则六边形</label>
112     </li>
113     <li>
114         <input name="type"
value="irregularCircle" id="irregularCircleToggle"
onclick="toggleControl(this);" type="radio">
115         <label for="irregularCircleToggle">画椭圆</label>
116         <input name="type"
value="irregularTriangle" id="irregularTriangleToggle"
onclick="toggleControl(this);" type="radio">
117         <label for="irregularTriangleToggle">画不规则三角形</label>
118         <input name="type"
value="irregularSquare" id="irregularSquareToggle"
onclick="toggleControl(this);" type="radio">
119         <label for="irregularSquareToggle">画不规则四边形</label>
120         <input name="type"
value="irregularPentagon" id="irregularPentagonToggle"
onclick="toggleControl(this);" type="radio">
121         <label for="irregularPentagonToggle">画不规则五边形</label>
122         <input name="type"
value="irregularHexagon" id="irregularHexagonToggle"
onclick="toggleControl(this);" type="radio">
123         <label for="irregularHexagonToggle">画不规则六边形</label>
124     </li>
125 </ul>
126  
127 <div id="docs">
128     <p>1、在地图上点击鼠标左键就可以画一个点</p>
129     <p>2、在地图上点击鼠标左键开始画线的起点，继续单击左键是画转折点，双击左键则是完成画线操作</p>
130     <p>3、在地图上点击鼠标左键开始画面的起点，继续单击左键是画转折点，双击左键则是完成画面操作</p>
131     <p>4、按住shift键是开启自由画图模式，在画线和画面时按住shift键，同时一直按着鼠标左键在地图上移动，将绘制出鼠标移动的细节图形</p><p>

http://hsjian042.blog.163.com/blog/static/176983377201161525834982/

转载自：https://blog.csdn.net/pandary/article/details/43190399

相关推荐

Tags:

You may also like...

公众号

微信群

人数过多只能拉人进群;

加我好友yu389741

微信小程序