<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2017/6/14
Time: 11:39
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>热点分布</title>
<style type="text/css">
body, html {
100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
.anchorBL {
display: none;
}
#l-map {
height: 70%;
100%;
float: left;
}
#function-map {
height: 30%;
100%;
float: left;
}
</style>
<link rel="stylesheet" type="text/css" href="easyui/icon.css">
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css">
<link rel="stylesheet" type="text/css" href="mapImg/DrawingManager_min.css">
<link rel="stylesheet" type="text/css" href="mapImg/SearchInfoWindow_min.css">
</head>
<body>
<div id="function-map">
<button style="background-color: #2e6da4;color: #fff; 99%;height: 35px;">基础功能</button>
<table border="0" style=" 98%;height: auto; margin-left: 10px" cellspacing="0px">
<tr>
<td>
<button style="background-color: #2e6da4;color: #fff; 100px;height: 35px;">时间范围</button>
<input id="startime" type="text" class="easyui-datetimebox" style="150px; height: 30px;">
~~~
<input id="endtime" type="text" class="easyui-datetimebox"
style="150px; height: 30px;">
<button style="background-color: #2e6da4;color: #fff; 100px;height: 35px;">IMSI</button>
<input class="easyui-textbox" id="imsi" style="150px;height:32px;">
<button style="background-color: #CA30A8;color: #fff; 100px;height: 35px;"
onclick="query()">查询
</button>
</td>
</tr>
<tr>
<td>
<button style="background-color: #2e6da4;color: #fff; 100px;height: 35px;">位点</button>
<input class="easyui-textbox" id="weidian" style="150px;height:32px;">
<button style="background-color: #CA30A8;color: #fff; 100px;height: 35px;"
onclick="searchWeidian()">位点查询
</button>
<input type="button" value="双击测距" onclick="ceju()"
style="background-color: #CA30A8;color: #fff; 100px;height: 35px;"/>
<input type="button" value="画多边形" onclick="draw(BMAP_DRAWING_POLYGON)"
style="background-color: #CA30A8;color: #fff; 100px;height: 35px;"/>
<input type="button" value="画矩形" onclick="draw(BMAP_DRAWING_RECTANGLE)"
style="background-color: #CA30A8;color: #fff; 100px;height: 35px;"/>
<%--<input type="button" value="只显示矩形内的点位" onclick="reSearchWeidian()" style="color: #fff; 150px;height: 35px;"/>--%>
<input type="button" value="画线" onclick="draw(BMAP_DRAWING_POLYLINE)"
style="background-color: #CA30A8;color: #fff; 100px;height: 35px;"/>
<input type="button" value="画圆" onclick="draw(BMAP_DRAWING_CIRCLE)"
style="background-color: #CA30A8;color: #fff; 100px;height: 35px;"/>
<%--<input type="button" value="标注点" onclick="draw(BMAP_DRAWING_MARKER)"--%>
<%--style="color: #fff; 100px;height: 35px;"/>--%>
<input type="button" value="开启线、面编辑功能" onclick="Editing('enable')"
style="background-color: #CA30A8;color: #fff; 130px;height: 35px;"/>
<input type="button" value="关闭线、面编辑功能" onclick="Editing('disable')"
style="background-color: #CA30A8;color: #fff; 130px;height: 35px;"/>
<input type="button" value="获取绘制的覆盖物个数" onclick="alert(overlays.length)"
style="background-color: #CA30A8;color: #fff; 150px;height: 35px;"/>
<input type="button" value="清除所有覆盖物" onclick="clearAll()"
style="background-color: #CA30A8;color: #fff; 120px;height: 35px;"/>
<input type="button" value="多边形的面积" onclick="getMianji()"
style="background-color: #CA30A8;color: #fff; 120px;height: 35px;"/>
<input type="button" value="复位" onclick="getDefault()"
style="background-color: #CA30A8;color: #fff; 100px;height: 35px;"/>
<input type="button" value="框选" onclick="kuanxuan()"
style="background-color: #CA30A8;color: #fff; 100px;height: 35px;"/>
右键获取任意点的经纬度
</td>
</tr>
</table>
<div id="win" class="easyui-window" title="框选" style="500px;height:400px;" closed="true"
data-options="iconCls:'icon-save',modal:true">
<div style="padding:10px 10px 20px 80px;">
<form id="ff" method="post">
<table cellpadding="10" cellspacing="10" border="0">
<tr>
<th>序号</th>
<th>位点名称
</th>
</tr>
<tbody id="tbody_add">
</tbody>
<tr>
<td><b>框选内容</b></td>
<td>
<span style="margin-left: 40px;">
<input class="easyui-textbox" name="kxContent" id="kxContent"
data-options="multiline:true"
style="200px;height:60px">
</span>
</td>
</tr>
</table>
</form>
</div>
<div style="text-align:center;padding:5px">
<a href="javascript:void(0)" class="easyui-linkbutton" style=" 100px;" onclick="submitForm()">提交</a>
</div>
</div>
</div>
<div id="l-map">正在加载地图...
</div>
<!--引用百度地图API-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=jYNU39RZ3k37NUz1QduizaYD"></script>
<!--加载鼠标绘制工具-->
<script type="text/javascript" src="mapImg/DrawingManager_min.js"></script>
<script type="text/javascript" src="mapImg/DistanceTool_min.js"></script>
<script type="text/javascript" src="mapImg/GeoUtils_min.js"></script>
<script type="text/javascript" src="mapImg/EventWrapper.min.js"></script>
<script type="text/javascript" src="mapImg/EventWrapper.min.js"></script>
<script type="text/javascript" src="mapImg/SearchInfoWindow_min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
<script language="JavaScript" type="text/javascript" src="jquery-easyui-1.4.4/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
var return_positionJsonArray =
${positionJsonArray}
// console.log(return_positionJsonArray);
//117.126617,36.656588 济南市
var map;
initMap();
function initMap() {
createMap();//创建地图
addMarker();
}
function createMap() {
// debugger
// 创建Map实例
map = new BMap.Map("l-map");
var point = new BMap.Point(117.1510815360, 36.6647373487); // 创建点坐标
map.centerAndZoom(point, 10); // 初始化地图，设置中心点坐标和地图级别
//开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
// 左下角，添加比例尺
var bottom_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
//左上角，添加缩放平移控件
var top_left_navigation = new BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 启用显示定位
enableGeolocation: false
});
map.addControl(bottom_left_control);
map.addControl(top_left_navigation);
//右上角，地图类型控件
var mapType = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]});
map.addControl(mapType);
//右下角，鹰眼
var overViewOpen = new BMap.OverviewMapControl({isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
map.addControl(overViewOpen);
// // 禁用 双击缩放功能
// map.disableDoubleClickZoom();
}
// 禁用 双击缩放功能
map.disableDoubleClickZoom();
function G(id) {
return document.getElementById(id);
}
// 创建点位
function addMarker() {
var myIcon = new BMap.Icon("mapImg/marker/point.png", new BMap.Size(24, 36));
for (var i = 0; i < return_positionJsonArray.length; i++) {
// console.log(return_positionJsonArray[i].name);
var points = new BMap.Point(return_positionJsonArray[i].longitude, return_positionJsonArray[i].latitude);
var markers = new BMap.Marker(points, {icon: myIcon});
map.addOverlay(markers); // 创建点位 图标
var label = new BMap.Label(return_positionJsonArray[i].name, {offset: new BMap.Size(10, -10)});
markers.setLabel(label); // 创建点位 标注
var content = "经度：" + return_positionJsonArray[i].longitude + "<br>纬度：" + return_positionJsonArray[i].latitude;
addClickHandler(content, markers); // 创建 信息窗口
}
}
function addClickHandler(content, markers) {
markers.addEventListener("click", function (e) {
openInfo(content, e)
}
);
}
function openInfo(content, e) {
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); //开启信息窗口
}
var opts = {
200, // 信息窗口宽度
height: 80, // 信息窗口高度
title: "信息窗口", // 信息窗口标题
enableMessage: true//设置允许信息窗发送短息
};
// 位点查询
function searchWeidian() {
var weidian = $('#weidian').val();
if (weidian == '' || weidian == null) {
alert("请输入要查询的位点");
} else {
var myIcon = new BMap.Icon("mapImg/marker/point.png", new BMap.Size(24, 36));
for (var i = 0; i < return_positionJsonArray.length; i++) {
// console.log(return_positionJsonArray[i].name);
if (return_positionJsonArray[i].name == weidian) {
var point = new BMap.Point(return_positionJsonArray[i].longitude, return_positionJsonArray[i].latitude);
map.centerAndZoom(point, 11);
break;
}
}
addDrawingManager();
}
}
function ceju() {
var myDis = new BMapLib.DistanceTool(map);
// map.addEventListener("click", function () {
// myDis.open(); //开启鼠标测距
// //myDis.close(); //关闭鼠标测距大
// });
map.addEventListener("dblclick", function () {
myDis.open(); //开启鼠标测距
// myDis.close(); //关闭鼠标测距大
});
}
var kxName = "";
var drawingManagers;
function kuanxuan() {
//实例化鼠标绘制工具
drawingManagers = new BMapLib.DrawingManager(map, {
isOpen: false, //是否开启绘制模式
//enableDrawingTool: true, //是否显示工具栏
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(5, 5), //偏离值
},
rectangleOptions: styleOptions //矩形的样式
});
drawingManagers.open();
drawingManagers.setDrawingMode(BMAP_DRAWING_RECTANGLE);
//添加鼠标绘制工具监听事件，用于获取绘制结果
// drawingManagers.addEventListener('overlaycomplete', overlaycompletess(e));
drawingManagers.addEventListener('overlaycomplete', function (e) {
var overlays = e.overlay;
var overlay = overlays.getPath();
var lngA = overlay[0].lng;
var latA = overlay[0].lat;
var lngB = overlay[1].lng;
var latB = overlay[1].lat;
var lngC = overlay[2].lng;
var latC = overlay[2].lat;
var lngD = overlay[3].lng;
var latD = overlay[3].lat;
//alert("lngA："+lngA+"//lngB"+lngB+"///lngC"+lngC+"///lngD"+lngD);
//alert("latA："+latA+"//latB"+latB+"///latC"+latC+"///latD"+latD);
//注意：lng 比较a 和b ,lat 比较 a 和 c ;
var lngE;
var lngW;
if (lngA <= lngB) {
lngE = lngB;
lngW = lngA;
} else {
lngE = lngA;
lngW = lngB;
}
var latN;
var latS;
if (latA <= latC) {
latN = latC;
latS = latA;
} else {
latN = latA;
latS = latC;
}
var nameMarker = [];
for (var i = 0; i < return_positionJsonArray.length; i++) {
if ((lngW <= return_positionJsonArray[i].longitude) && (return_positionJsonArray[i].longitude <= lngE)
&& (latS <= return_positionJsonArray[i].latitude ) && (return_positionJsonArray[i].latitude <= latN)) {
nameMarker.push(return_positionJsonArray[i].name);
}
}
kxName = unique1(nameMarker);
if(kxName.length < 1){
alert("请框选位点");
}else{
$('#win').window('open');
kuanxuanAdd(kxName);
}
});
// var overlay;
//
// overlay = overlays[i].getPath();
// var resultShape = "";
// for (var j = 0; j < overlay.length; j++) {
// var grid = overlay[j];
// resultShape += "第" + (j + 1) + "个点:" + grid.lng + "," + grid.lat + '
';
// }
}
//传入数组
function unique1(arr) {
var tmpArr = [];
for (var i = 0; i < arr.length; i++) {
//如果当前数组的第i已经保存进了临时数组，那么跳过，
//否则把当前项push到临时数组里面
if (tmpArr.indexOf(arr[i]) == -1) {
tmpArr.push(arr[i]);
}
}
return tmpArr;
}
function kuanxuanAdd(kxName) {
var name = kxName;
var divHtml = "";
for (var i = 0; i < name.length; i++) {
divHtml += "<tr>";
divHtml += "<td><span style='margin-left: 20px;'>" + (1 + i) + "</span></td>";
divHtml += "<td><span style='margin-left: 60px;'>" + name[i] + "</span></td>";
divHtml += "</tr>";
}
$("#tbody_add").html(divHtml);
}
// 框选提交
function submitForm() {
// kxName = kxName;
// debugger
// console.log(typeof(kxName));
var kxContent = $('#kxContent').val();
// alert(typeof(kxContent));
$.ajax({
// async: false,
// cache: true,
type: "POST",
url: "MapBaiduBasicServlet",
data: {
"action": "addKuangXuanContent",
"kxName": JSON.stringify(kxName),
"kxContent": kxContent
},// 你的formid
dataType: 'json',
success: function (data) {
alert(data.message);
$('#win').window('close');
drawingManagers.close();
},
error: function (data) {
alert(data.message);
drawingManagers.close();
}
});
}
//右键坐标
map.addEventListener("rightclick", function (e) {
if (confirm(e.point.lng + "," + e.point.lat)) {
$("shape").innerHTML = $("shape").innerHTML + " <br/>(" + e.point.lng + "," + e.point.lat + ")";
}
});
// 鼠标绘制 s
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);
function draw(type) {
drawingManager.open();
drawingManager.setDrawingMode(type);
}
function Editing(state) {
for (var i = 0; i < overlays.length; i++) {
state == 'enable' ? overlays[i].enableEditing() : overlays[i].disableEditing();
}
}
// 清除标记
function clearAll() {
/*for (var i = 0; i < overlays.length; i++) {
map.removeOverlay(overlays[i]);
}
overlays.length = 0
*/
map.clearOverlays(); // 清除地图 覆盖物
addMarker();
}
//鼠标绘制 e
//复位
function getDefault() {
drawingManager.close();
drawingManagers.close();
}
/* // 显示框选内的点位
function reSearchWeidian() {
var showMianLay = "";
var overlay;
for (var i = 0; i < overlays.length; i++) {
overlay = overlays[i].getPath();
var resultShape = "";
for (var j = 0; j < overlay.length; j++) {
var grid = overlay[j];
resultShape += "第" + (j + 1) + "个点:" + grid.lng + "," + grid.lat + '
';
}
}
if (overlay.length == 4) {
// alert("显示当前矩形区域内的点");
// map.clearOverlays(); // 清除地图 覆盖物
var overlay = overlays[0].getPath();
var lngA = overlay[0].lng;
var latA = overlay[0].lat;
var lngB = overlay[1].lng;
var latB = overlay[1].lat;
var lngC = overlay[2].lng;
var latC = overlay[2].lat;
var lngD = overlay[3].lng;
var latD = overlay[3].lat;
//alert("lngA："+lngA+"//lngB"+lngB+"///lngC"+lngC+"///lngD"+lngD);
//alert("latA："+latA+"//latB"+latB+"///latC"+latC+"///latD"+latD);
//注意：lng 比较a 和b ,lat 比较 a 和 c ;
var lngE;
var lngW;
if (lngA <= lngB) {
lngE = lngB;
lngW = lngA;
} else {
lngE = lngA;
lngW = lngB;
}
var latN;
var latS;
if (latA <= latC) {
latN = latC;
latS = latA;
} else {
latN = latA;
latS = latC;
}
map.clearOverlays(); // 清除地图 覆盖物
var myIcon = new BMap.Icon("mapImg/marker/point.png", new BMap.Size(24, 36));
for (var i = 0; i < return_positionJsonArray.length; i++) {
if ((lngW <= return_positionJsonArray[i].longitude) && (return_positionJsonArray[i].longitude <= lngE)
&& (latS <= return_positionJsonArray[i].latitude ) && (return_positionJsonArray[i].latitude <= latN)) {
var points = new BMap.Point(return_positionJsonArray[i].longitude, return_positionJsonArray[i].latitude);
var markers = new BMap.Marker(points, {icon: myIcon});
map.addOverlay(markers); // 创建点位 图标
var label = new BMap.Label(return_positionJsonArray[i].name, {offset: new BMap.Size(10, -10)});
markers.setLabel(label); // 创建点位 标注
var content = "经度：" + return_positionJsonArray[i].longitude + "<br>纬度：" + return_positionJsonArray[i].latitude;
addClickHandler(content, markers); // 创建 信息窗口
}
}
} else {
alert("请清除覆盖物，重新画矩形");
}
// alert(overlay.length+"//////"+resultShape);
}*/
// 获取面积
function getMianji() {
/* for (var i = 0; i < overlays.length; i++) {
var overlay = overlays[i].getPath();
var resultShape = "";
for (var j = 0; j < overlay.length; j++) {
var grid = overlay[j];
resultShape += "第" + (j + 1) + "个点:" + grid.lng + "," + grid.lat + '
';
}
alert(overlay.length + '边形' + '
' + resultShape);
}*/
// if (overlays.length == 1) {
var showMianLay = "";
for (var i = 0; i < overlays.length; i++) {
var cemainpoint = "";
var overlay = overlays[i].getPath();
var resultShape = "";
for (var j = 0; j < overlay.length; j++) {
var grid = overlay[j];
// resultShape += "第" + (j + 1) + "个点:" + grid.lng + "," + grid.lat + '
';
cemainpoint += "new BMap.Point(" + grid.lng + "," + grid.lat + "),";
showMianLay = grid.lng + "," + grid.lat;
}
//
}
fun(overlays.length, showMianLay, cemainpoint, '', 'green');
}
//变量名,标签坐标,多边形坐标,文本,边框颜色
function fun(i, xy, arr, wb, ys) {
// map.removeOverlay();
// map.clearOverlays();
//创建经纬度数组
eval("var secRingCenter" + i + " = new BMap.Point(" + xy + ")");
eval("var secRing" + i + " = [" + arr + "]");
//创建多边形
eval("var secRingPolygon" + i + "= new BMap.Polygon(secRing" + i + ", { strokeColor: "" + ys + "", strokeWeight: 4})");
//eval("var secRingPolygon" + i + "= new BMap.Polygon(secRing" + i + ", { FillColor:"red", strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.3 })");
//添加多边形到地图上
map.addOverlay(eval("secRingPolygon" + i));
var resultArea = BMapLib.GeoUtils.getPolygonArea(eval("secRingPolygon" + i)); //计算多边形的面积（单位米）
//给多边形添加鼠标事件
eval("secRingPolygon" + i).addEventListener("mouseover", function () {//鼠标经过时
eval("secRingPolygon" + i).setStrokeColor("red"); //多边形边框为红色
//eval("secRingPolygon" + i).setFillColor(ys);
map.addOverlay(eval("secRingLabel" + i)); //添加多边形遮照
//map.panTo(eval("secRingCenter"+i)); //将地图移动到指定点
});
eval("secRingPolygon" + i).addEventListener("mouseout", function () {
eval("secRingPolygon" + i).setStrokeColor(ys);
//eval("secRingPolygon" + i).setFillColor("");
map.removeOverlay(eval("secRingLabel" + i));
});
/* eval("secRingPolygon" + i).addEventListener("click", function () {
map.zoomIn();
eval("secRingPolygon" + i).setStrokeColor(ys);
//eval("secRingPolygon" + i).setFillColor("");
map.setCenter(eval("secRingCenter" + i));
});*/
//创建标签
eval("var secRingLabel" + i + "= new BMap.Label("<b>" + wb + " 面积(㎡)：" + Math.floor(resultArea) + "</b>", { offset: new BMap.Size(0, 0), position: secRingCenter" + i + "})");
eval("secRingLabel" + i).setStyle({"z-index": "999999", "padding": "2px", "border": "1px solid #ccff00"});
}
//测面e
function query() {
var startime = $('#startime').datebox('getValue');
var endtime = $('#endtime').datebox('getValue');
var imsi = $('#imsi').val();
debugger
var content = "";
$.ajax({
type: "POST",
url: "MapBaiduBasicServlet",
data: {"action": "query", "startime": startime, "endtime": endtime, "imsi": imsi},
async: false,
cache: false,
error: function (request) {
// alert("Connection error");
},
success: function (data) {
console.log(typeof(data));
var weidianObj = data.plist;
var wdImsiObj = data.simlistObj;
console.dir("weidianObj==" + weidianObj);
console.dir("wdImsiObj==" + wdImsiObj);
map.clearOverlays(); // 清除地图 覆盖物
var myIcon = new BMap.Icon("mapImg/marker/point.png", new BMap.Size(24, 36));
for (var i = 0; i < weidianObj.length; i++) {
for (var j = 0; j < wdImsiObj.length; j++) {
if (wdImsiObj[j] != "" || wdImsiObj[j] != null) {
for (var k = 0; k < wdImsiObj[j].length; k++) {
if (weidianObj[i].number == wdImsiObj[j][k].number) {
var points = new BMap.Point(weidianObj[i].longitude, weidianObj[i].latitude);
var markers = new BMap.Marker(points, {icon: myIcon});
map.addOverlay(markers); // 创建点位 图标
var label = new BMap.Label(weidianObj[i].name, {offset: new BMap.Size(10, -10)});
markers.setLabel(label); // 创建点位 标注
content = "经度：" + weidianObj[i].longitude + "<br>纬度：" + weidianObj[i].latitude;
// content += "经度：" + weidianObj[i].longitude + ",纬度：" + weidianObj[i].latitude + ",时间：" + wdImsiObj[j][k].datetime + "<br>";
}
}
}
}
addClickHandler(content, markers); // 创建 信息窗口
}
alert("查询完成");
}
});
}
</script>
</body>
</html>