-
Notifications
You must be signed in to change notification settings - Fork 60
/
Draw.html
168 lines (159 loc) · 6.17 KB
/
Draw.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!--
liaotuo
2016.09.25
绘制几何图形
-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap {width: 100%; height:500px; overflow: hidden;}
#result {width:100%;font-size:12px;}
dl,dt,dd,ul,li{
margin:0;
padding:0;
list-style:none;
}
p{font-size:12px;}
dt{
font-size:14px;
font-family:"微软雅黑";
font-weight:bold;
border-bottom:1px dotted #000;
padding:5px 0 5px 5px;
margin:5px 0;
}
dd{
padding:5px 0 0 5px;
}
li{
line-height:28px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5E5EE28a7615536d1ffe2ce2a3667859"></script>
<!--加载鼠标绘制工具-->
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<!--加载检索信息窗口-->
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
<title>百度地图API功能演示</title>
</head>
<body>
<div id="allmap" style="overflow:hidden;zoom:1;position:relative;">
<div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;">
</div>
</div>
<div id="result">
<input type="button" value="获取绘制的覆盖物个数" onclick="alert(overlays.length)"/>
<input type="button" value="清除所有覆盖物" onclick="clearAll()"/>
<input type="button" value="获取多边形的顶点" onclick="getPoint()"/><br/>
<input type="button" value="开启线、面编辑功能" onclick="Editing('enable')"/>
<input type="button" value="关闭线、面编辑功能" onclick="Editing('disable')"/>
<input type="button" value="显示原有多边形" onclick="showPolygon(this)" /><br/>
<input type="button" value="画多边形" onclick="draw(BMAP_DRAWING_POLYGON)" />
<input type="button" value="画矩形" onclick="draw(BMAP_DRAWING_RECTANGLE)" />
<input type="button" value="画线" onclick="draw(BMAP_DRAWING_POLYLINE)" />
<!-- <input type="button" value="画点" onclick="draw(BMAP_DRAWING_MARKER)" />-->
<span>右键获取任意点的经纬度</span>
</div>
<div id="resultShape"></div>
<div id="shape">坐标为</div>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
// 百度地图API功能
var map = new BMap.Map('map');
var poi = new BMap.Point(113.948913,22.530844);
map.centerAndZoom(poi, 16);
map.enableScrollWheelZoom();
var overlays = [];
var overlaycomplete = function(e){
overlays.push(e.overlay);
};
var styleOptions = {
strokeColor:"red", //边线颜色。
fillColor:"red", //填充颜色。当参数为空时，圆形将没有填充效果。
strokeWeight: 3, //边线的宽度，以像素为单位。
strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
strokeStyle: 'solid' //边线的样式，solid或dashed。
}
//实例化鼠标绘制工具
var drawingManager = new BMapLib.DrawingManager(map, {
isOpen: false, //是否开启绘制模式
//enableDrawingTool: true, //是否显示工具栏
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(5, 5), //偏离值
},
circleOptions: styleOptions, //圆的样式
polylineOptions: styleOptions, //线的样式
polygonOptions: styleOptions, //多边形的样式
rectangleOptions: styleOptions //矩形的样式
});
//添加鼠标绘制工具监听事件，用于获取绘制结果
drawingManager.addEventListener('overlaycomplete', overlaycomplete);
map.addEventListener("rightclick",function(e){
if(confirm(e.point.lng + "," + e.point.lat)){
$("shape").innerHTML=$("shape").innerHTML+" <br/>("+e.point.lng+","+e.point.lat+")";
}
});
function draw(type){
drawingManager.open();
drawingManager.setDrawingMode(type);
}
function clearAll() {
for(var i = 0; i < overlays.length; i++){
map.removeOverlay(overlays[i]);
}
overlays.length = 0
}
function getPoint(){
$("resultShape").innerHTML='';
for(var i = 0; i < overlays.length; i++){
var overlay=overlays[i].getPath();
$("resultShape").innerHTML=$("resultShape").innerHTML+overlay.length+'边形:<br/>';
for(var j = 0; j < overlay.length; j++){
var grid =overlay[j];
$("resultShape").innerHTML=$("resultShape").innerHTML+(j+1)+"个点:("+grid.lng+","+grid.lat+");<br/>";
}
}
}
function Editing(state){
for(var i = 0; i < overlays.length; i++){
state=='enable'?overlays[i].enableEditing():overlays[i].disableEditing();
}
}
function showPolygon(btn){
var polygon = new BMap.Polygon([
new BMap.Point(113.941853,22.530777),
new BMap.Point(113.940487,22.527789),
new BMap.Point(113.94788,22.527597),
new BMap.Point(113.947925,22.530618)
], styleOptions); //创建多边形
map.addOverlay(polygon); //增加多边形
// overlays.push(polygon); //是否把该图像加入到编辑和删除行列
btn.setAttribute('disabled','false');
showText();
}
function showText(){
var opts = {
position : new BMap.Point(113.941853,22.530777), // 指定文本标注所在的地理位置
offset : new BMap.Size(30, 30) //设置文本偏移量
}
var label = new BMap.Label("不可编辑", opts); // 创建文本标注对象
label.setStyle({
color : "black",
fontSize : "16px",
fillColor:"red", //填充颜色。当参数为空时，圆形将没有填充效果。
});
map.addOverlay(label);
}
</script>
</body>
</html>