完整版openlayer的例子及中文注释（完整中文版）
//@sourceURL=PersonLocation.js
var window_temp = {
onbeforeunload: null,
DEBUG_MODE: false,
MAPLIST: null,
MAPLIST_CACHE: {},
MAP: null,
MAP_LAYERS: null,
LAYER: ['basic', 'area', 'device', 'person', 'single', 'building'],
MAP_CTRLS: null,
CTRLS: ['scale'],
CURRID: null,
FOCUSONCE: false,
MAPINIT: false,
MAPMODE: 0,
HIGHLIGHT_LAYER: null,
CURRMAP_DATA: null,
CURRPERMAPID: null,
SCALE: 0,
UNIT: 0,
HISTORY_LAYER: null,
HISTORY_LAYER_CTL: null,
};
$(function () {
window_temp.onbeforeunload = function (event) {
cancelSocketHandler();
switchMapMode(0);// 还原到正常状态 避免切换页面后出问题
}
initOlPlugin();
//window_temp.DEBUG_MODE = false;
// 地图列表 用于切换地图使用
//window_temp.MAPLIST ;
//window_temp.MAPLIST_CACHE={};
//window_temp.MAP;// 地图变量
//window_temp.MAP_LAYERS;// 图层变量
//window_temp.LAYER=['basic','area','device','person','single'];// 基础 区域 设备 人员
// 图层
//window_temp.MAP_CTRLS;// 控制层
//window_temp.CTRLS=['scale'];// 'fullscr''overview','measure','mapselect'
//window_temp.CURRID;// 当前追踪人员id
//window_temp.FOCUSONCE = false;
//window_temp.MAPINIT = false; // 0-正常模式 1-单人实时追踪模式 2-历史轨迹播放模式
//window_temp.MAPMODE = 0;
switchMapMode(0);// 还原到正常状态 避免切换页面后出问题
// 注册socket处理事件
initSocketHandler();
// 获取地图列表
initMapList();
initAllMapList();
//initBuildingAndChildMapList();
initSerchMapData();
loadMapData(null, true);
//初始化隐藏tool
initToolAndList();
//realdebugList();
//echart
//initHighCharts();
//加x号
tool.searchInput('#searchIcon'); }); //进行人员和设备之间的的连线
function initPersonConnectDevice(personData) {
var datalist = personData.dataList
if (datalist.length > 0) {
for (var i = 0; i < datalist.length; i++) {
if (datalist[i].id == window_temp.CURRID) {
monitorPersonTrace(datalist[i]);
}
}
}
} function initDsss(dataList) {
$('#realdebugList').bootstrapTable({
height: parseInt(getClientHeight() - 93),
columns: [{
align: 'center',
valign: 'middle',
visible: false
}, {
field: 'fnSn',
title: '信号源',
align: 'center',
valign: 'middle',
}, {
field: 'rssi',
title: '信号强度',
align: 'center',
valign: 'middle',
}, {
field: 'areaType',
title: '区域类型',
align: 'center',
valign: 'middle',
}, {
field: 'areaName',
title: '区域名称',
align: 'center',
valign: 'middle',
}],
data: dataList,
clickToSelect: true,
pagination: false,
onClickRow: function (row, element) {
var feature = window_temp.MAP_LAYERS['line'].getSource().getFeatureById(row.fnSn);
feature.getStyle().getStroke().setColor("yellow");
feature.getStyle().getStroke().setWidth(5);
window_temp.MAP_LAYERS['line'].changed();
}
});
} function initToolAndList() {
$('.ol-control.layertool').hide();
$('.ol-control.person').hide();
} //右侧输入框显示查询列表
function realdebugList(data) {
if (data && data.rssis.length > 0) {
var dataList = [];
if (realdebugList != null || data != undefined) {
var deviesId = data.id;
var happenTime = data.happenTime;
$('#devisId').text(deviesId);
$('#happenTime').text(happenTime);
dataList = data.rssis;
}
initDsss(dataList);
}
} //echart
var chartObj;
var xMaxTime = 10000;
var maxSizePoint = 20; function putDataToCharts(data) {
if (data && data.rssis.length > 0) {
var x = (new Date(data.happenTime)).getTime();
var chartSeries = chartObj.series;
for (var i = 0; i < chartSeries.length; i++) {
if (chartSeries[i].data[chartSeries[i].data.length - 1].x >= x) {
return;
}
for (var j = 0; j < data.rssis.length; j++) {
if (chartSeries[i].name == data.rssis[j].fnSn) {
chartSeries[i].addPoint([x, data.rssis[j].rssi], false, true);
break;
}
}
if (chartSeries[i].data.length > 0 && (chartSeries[i].data[chartSeries[i].data.length - 1].x + xMaxTime < x)) {
chartSeries[i].remove();
i = i - 1;
}
} for (var i = 0; i < data.rssis.length; i++) {
find = false;
for (var j = 0; j < chartSeries.length; j++) {
if (data.rssis[i].fnSn == chartSeries[j].name) {
find = true;
break;
}
}
if (find == false) {
addSeries(x, data.rssis[i]);
}
}
chartObj.redraw(); }
}
function addSeries(x, series) {
chartObj.addSeries({
name: series.fnSn,
data: (function() {
// generate an array of random data
var data3 = []; for (var i = -1*(maxSizePoint -1); i < 0; i++) {
data3.push({
x: x + i * 1000,
y: null
});
}
data3.push({
x:x,
y:series.rssi
});
return data3;
})()
});
} function initHighCharts() {
Highcharts.setOptions({
global: {
useUTC: false
}
}); $('#container').highcharts({
chart: {
type: 'line',
animation: Highcharts.svg, // don't animate in old IE
events: {
load: function () {
chartObj = this;
}
}
},
title: {
text: '移动设备RSSI动态走势图'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 100
},
yAxis: {
title: {
text: 'RSSI信号强度(DBM)'
},
opposite: true,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 0);
}
},
legend: {
enabled: true
},
exporting: {
enabled: false
},
credits: {
enabled: false
}
}); //chartObj.setSize($("#container").width(), getHeight());
} //function getHeight() {
// return $(window).height() - $('h1').outerHeight(true) - 300;
//} function initOlPlugin() {
/**
* 图层控制控件
*/
ol.control.layerTool = function (opt) {
var options = opt || {};
var me = this;
me.closeClass = "unshow";
me.layer = opt.layer;
// me.element_ = goog.dom.createDom('DIV','layertool ol-unselectable ol-control tool' );
me.element_ = document.createElement('div');
me.element_.className = 'layertool ol-unselectable ol-control tool';
me.remove = function () {
$(me.element_).remove();
}
ol.control.Control.call(me, {
element: me.element_,
target: options.target
});
me.display = function (show) {
if (show) {
$(me.element_).find("button").removeClass(me.closeClass);
me.layer.setVisible(true);
} else {
$(me.element_).find("button").addClass(me.closeClass);
me.layer.setVisible(false);
window_temp.MAP.removeOverlay();
}
}
};
ol.inherits(ol.control.layerTool, ol.control.Control); /* ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 地图切换工具↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */
ol.control.mapSelectTool = function (opt_options) {
var options = opt_options || {};
var ele = document.createElement("div");
ele.className = "mapselectbutton";
ele.id = "mapselectbutton";
ele.title = '';
this.changeName = function (name) {
if (window_temp.MAPLIST && window_temp.MAPLIST.length > 1) {
$(ele).html(name + " <i class='glyphicon glyphicon-menu-down' style='margin-left:20px;'></i>")
.attr("title", name);
$("#mapquickSearch").val("");
$("#currentMapName").text(name);
} else {
$(ele).html(name).attr("title", name);
}
}
$(ele).on('click', function () {
if ($('#mapselect').is(":hidden")) {
$('#mapselect').slideDown({speed: 'fast'});
$('#showMap').show();
$(".hisqueclose").on('click', function () {
$(ele).click();
});//绑定关闭按钮事件
} else {
$('#mapselect').slideUp({speed: 'fast'});
$('#showMap').hide();
}
});
$(ele).on('blur', function () {
$('#mapselect').slideUp();
});
//var element = goog.dom.createDom('DIV','mapselecttool ol-unselectable' ,[ele]);
var element = document.createElement('div');
element.className = 'mapselecttool ol-unselectable';
element.appendChild(ele);
this.reelementmove = function () {
$(element).remove();
}
ol.control.Control.call(this, {
element: element,
target: options.target
});
};
ol.inherits(ol.control.mapSelectTool, ol.control.Control);
} // 模式切换处理函数
function switchMapMode(mode) {
var keyMode;
keyMode = window_temp.MAPMODE * 10 + mode * 1;
switch (keyMode) {
case 0:// 正常模式 到正常模式
hidePopup();
hidePopup('areapopup');
if (window_temp.HIGHLIGHT_LAYER) {// 高亮图层初始化
window_temp.HIGHLIGHT_LAYER.unlight();
}
break;
case 1:// 正常模式 进单人追踪模式
//window_temp.MAP_LAYERS['person'].display(true);
window_temp.FOCUSONCE = true;
if (window_temp.HIGHLIGHT_LAYER) {// 高亮图层初始化
window_temp.HIGHLIGHT_LAYER.unlight();
}
break;
case 11:// 切换追踪
window_temp.FOCUSONCE = true;
if (window_temp.HIGHLIGHT_LAYER) {// 高亮图层初始化
window_temp.HIGHLIGHT_LAYER.unlight();
}
break;
case 10:// 单人追踪 返回正常模式
window_temp.MAP_LAYERS['single'].layer.getSource().getSource().clear();
window_temp.CURRID = null;
hidePopup();
// pullEvent('{type:1010}');
if (window_temp.HIGHLIGHT_LAYER) {// 高亮图层初始化
window_temp.HIGHLIGHT_LAYER.unlight();
}
break;
case 2:// 正常模式进 轨迹播放模式
// pullEvent('{type:1002}');
break;
case 20:// 轨迹播放 返回正常模式
// pullEvent('{type:1001,param:'+$("#currentMapId").val()+'}');//'
// '{type:10012}'
break;
}
window_temp.MAPMODE = mode;
} /**
* 单个人员追踪
*/
var datamapid
function monitorPersonTrace(data) {
datamapid=data.mapId
var currMapId = $('#currentMapId').val();
if(data.mapId !=currMapId){
//window_temp.MAP_LAYERS['line'].getSource().clear();
switchMap(data.mapId);
$('#showEchartAndList').show()
$('.searchClear').show() }
window_temp.MAP_LAYERS['line'].getSource().clear();
var rersonDaX = data.x;
var rersonDaY = data.y;
var deviceData = data.rssis;
//画人员
var pointfeature = new ol.Feature(new ol.geom.Point([rersonDaX, rersonDaY]));
pointfeature.setStyle(
new ol.style.Style({
image: new ol.style.Circle({
radius: 4,
stroke: new ol.style.Stroke({
color: '#fff'
}),
fill: new ol.style.Fill({
color: '#12ff02'
})
})
})
)
window_temp.MAP_LAYERS['line'].getSource().addFeature(pointfeature);
//定义数组：不同信号强度显示不同的颜色
function getStyleByLevel(rssi) {
var colors = ["#00FF00", "#FFFF00", "#FF0000", "#0000EE"];//高 中 低 默认
var range = [-100, -50, 50, 100];//,-40,-20,0,20];
var ind = _.findIndex(range, function (item) {
return rssi <= item;
});
if (ind == -1) {
ind = 0;
}
//var width = Math.abs((100 + rssi)) / 25;
return new ol.style.Style({
stroke: new ol.style.Stroke({color: colors[ind], width: 3}),
text: new ol.style.Text({
text: rssi + "",
stroke: new ol.style.Stroke({width: 1, color: 'rgba(255, 255, 255, 1)'}),
font: "16px sans-serif",
fill: new ol.style.Fill({color: 'rgba(255, 255, 255, 1)'}),
stroke: new ol.style.Stroke({
color: "#fff",
width: 3
}),
})
});
} //循环划线
for (var i = 0; i < deviceData.length; i++) {
var feature = new ol.Feature({
geometry: new ol.geom.LineString([[deviceData[i].longitude, deviceData[i].latitude], [rersonDaX, rersonDaY]])
});
feature.set('featureType', 'line');
var rssiArr = [];
rssiArr.push(data.rssis[i].rssi)
feature.setStyle(getStyleByLevel(rssiArr))
feature.setId(data.rssis[i].fnSn);
//var lineName = data.rssis[i].rssi;
//feature.set('lineName', lineName);
window_temp.MAP_LAYERS['line'].getSource().addFeature(feature);
}
realdebugList(data);
putDataToCharts(data); } /**
* 处理后台推送消息 人员定位信息
*/
function monitorPositionData(data) {
if (window_temp.MAPMODE == 1) {
if (data.id == window_temp.CURRID) {
monitorPersonTrace(data);
}
}
if (!$(".layertool.person>button").hasClass("unshow")) {// 未隐藏
if (data && data.mapId == $("#currentMapId").val() && window_temp.MAP_LAYERS && window_temp.MAP_LAYERS['person']) {
var feature = window_temp.MAP_LAYERS['person'].layer.getSource().getSource().getFeatureById(data.id);
if (feature) {
window_temp.MAP_LAYERS['person'].layer.getSource().getSource().removeFeature(feature);
}
if (data.locationType == 2) {
return;
}
var person = new ol.Feature(new ol.geom.Point([data.x, data.y]));
person.setId(data.id);
// person.setStyle(new ol.style.Style({image:new
// ol.style.Icon({src:'../../../resources/image/phone_online.png'})}));
person.setProperties(data);
window_temp.MAP_LAYERS['person'].layer.getSource().getSource().addFeature(person);
}
}
} function clearPositionData(data) {
if (data && data.mapId == $("#currentMapId").val()) {
// 清除人员图层
if (window_temp.MAP_LAYERS && window_temp.MAP_LAYERS['person']) {
var feature = window_temp.MAP_LAYERS['person'].layer.getSource().getSource().getFeatureById(data.id);
if (feature) {
window_temp.MAP_LAYERS['person'].layer.getSource().getSource().removeFeature(feature);
}
}
// 清除单人跟踪图层
if (data.id == window_temp.CURRID) {
data.status = -1;
monitorPersonTrace(data);
}
}
} function mapStaticsInfo(data) {
if (data[$("#currentMapId").val()]) {
monitorTotalInfo(data[$("#currentMapId").val()].type);
mapAreaStaticsInfo(data[$("#currentMapId").val()].area);
}
} /**
* 处理后台推送消息 统计信息
*/
function monitorTotalInfo(data) {
if (data) {
$(".statistic .all").html(data.all.length).data("persons", data.all);
$(".statistic .normalArea").html(data.normalArea.length).data("persons", data.normalArea);
$(".statistic .powerArea").html(data.powerArea.length).data("persons", data.powerArea);
$(".statistic .restrictArea").html(data.restrictArea.length).data("persons", data.restrictArea);
}
} /**
* 区域人数统计实时响应函数
*/
function mapAreaStaticsInfo(data) {
if (window_temp.MAPMODE == 2) {// 历史轨迹播放 } else {
if (data) {// 区域统计信息
for (var key in data) {
var feature = getFeatureById('area', key);
//$(".statistic").data(key,data[key]);
if (feature) {// 存在指定的区域
var zoom = window_temp.MAP.getView().getZoom();// window_temp.MAP.get("suitzoom")
var disptxt = '';
// if( zoom >= window_temp.MAP.get("suitzoom")){
if (data[key]) {
disptxt = data[key].length + "人";
} else {
disptxt = "0人";
}
// }
feature.set('person', data[key]);
feature.getStyle().getText().text_ = disptxt;
}
}
if (window_temp.MAP_LAYERS && window_temp.MAP_LAYERS['area']) {
window_temp.MAP_LAYERS['area'].layer.changed();// 刷新区域图层
}
}
}
} /**
* 建筑人数统计实时响应函数
*/
function buildingInfo(data) {
if (window_temp.MAPMODE == 2) {// 历史轨迹播放 } else {
if (data && data[$("#currentMapId").val()]) {// 建筑统计信息
var buildingData = data[$("#currentMapId").val()];
for (var key in buildingData) {
var feature = getFeatureById('building', key);
//$(".statistic").data(key,data[key]);
if (feature) {// 存在指定的区域
var zoom = window_temp.MAP.getView().getZoom();// window_temp.MAP.get("suitzoom")
var disptxt = '';
if (zoom >= window_temp.MAP.get("suitzoom")) {
if (buildingData[key]) {
var buildMapData = buildingData[key];
var total = 0;
for (var ky in buildMapData) {
total = total + buildMapData[ky].count;
}
disptxt = total + "人";
} else {
disptxt = "0人";
}
}
feature.set('building', buildingData[key]);
//feature.getStyle().getText().text_ = disptxt;
}
}
if (window_temp.MAP_LAYERS && window_temp.MAP_LAYERS['building']) {
window_temp.MAP_LAYERS['building'].layer.changed();// 刷新区域图层
}
}
}
} /**
* 高亮元素
*/
var highLightLayer = function (opts) {
var me = this;
me.intval;
me.featureStyle;
me.opts_ = opts || {};
me.switchFlag = false;
me.style = me.opts_.style;
me.source = new ol.source.Vector({wrapX: false});
me.currid;
me.currFeature;
me.lightStyle = {
'stroke': '#FFFFFF',
'fill': 'rgba(255,255,255,0.4)'
}
me.layer = new ol.layer.Vector({// 图层引用
source: me.source
});
me.highLightFeature = function (feature, id, speed) {
if (me.currid != id) {
me.unlight();
me.currid = id;
} else {
if (me.intval) {
return;
}
}
if (feature) {
me.currFeature = feature;
me.featureStyle = {}
me.featureStyle['stroke'] = me.currFeature.getStyle().getStroke().getColor();
if (me.currFeature.getStyle().getFill()) {
me.featureStyle['fill'] = me.currFeature.getStyle().getFill().getColor();
}
me.layer.setVisible(true);
me.intval = setInterval(function () {
me.layer.getSource().clear();
if (me.switchFlag = !me.switchFlag) {
me.currFeature.getStyle().getStroke().setColor(me.lightStyle['stroke']);
if (me.currFeature.getStyle().getFill())
me.currFeature.getStyle().getFill().setColor(me.lightStyle['fill']);
} else {
me.currFeature.getStyle().getStroke().setColor(me.featureStyle['stroke']);
if (me.currFeature.getStyle().getFill())
me.currFeature.getStyle().getFill().setColor(me.featureStyle['fill']);
}
me.layer.getSource().addFeatures([me.currFeature]);
}, speed || 200);
}
}
me.unlight = function () {
if (me.currFeature) {
me.currFeature.getStyle().getStroke().setColor(me.featureStyle['stroke']);
if (me.currFeature.getStyle().getFill())
me.currFeature.getStyle().getFill().setColor(me.featureStyle['fill']);
}
me.currFeature = null;
me.featureStyle = null;
me.layer.setVisible(false);
me.layer.getSource().clear();
me.switchFlag = false;
clearInterval(me.intval);
me.intval = null;
}
} /**
* 高亮显示区域
*/
function highlight(type, id, speed) {
if (!window_temp.HIGHLIGHT_LAYER) {
window_temp.HIGHLIGHT_LAYER = new highLightLayer();
window_temp.MAP.addLayer(window_temp.HIGHLIGHT_LAYER.layer);
}
if (id) {
var feature = getFeatureById(type, id);
if (feature) {
window_temp.HIGHLIGHT_LAYER.highLightFeature(feature, id, speed);
if (window_temp.FOCUSONCE) {
window_temp.FOCUSONCE = !window_temp.FOCUSONCE;
focusTo(feature.getGeometry().getFirstCoordinate(), -1);
}
} else {
window_temp.HIGHLIGHT_LAYER.unlight();
}
} else {
window_temp.HIGHLIGHT_LAYER.unlight();
}
} /**
* 获取指定图层 指定id元素 layer 包括缓存的 area-设备图层 person-人员定位图层 device-设备图层 basic-基础图层
* val查询值 key查询键 返回openlayer 对象feature
*/
function getFeatureById(layer, val, key) {
if (window_temp.MAP_LAYERS && window_temp.MAP_LAYERS[layer]) {
var features = window_temp.MAP_LAYERS[layer].layer.getSource().getFeatures();
if (!val) {
return features;
} else {
for (var i in features) {
if (features[i].get(key || "id") == val) {
return features[i];
} else if (layer == 'person' && features[i].get("features")) {
var subFeatures = features[i].get("features");
for (var k in subFeatures) {
if (subFeatures[k].get(key || "id") == val) {
return subFeatures[k];
}
}
}
}
}
}
} /**
* 获取地图列表
*/
function initMapList() {
$.ajax({
url: getBaseURL() + 'personlocation/findAllMap',
async: false, // 同步
type: 'GET', // 请求类型
cache: false, // 不缓存
dataType: 'json',
success: function (data) {
if (data && data.length > 0) {
window_temp.MAPLIST = data;
var html = '';
var mapid, mapname;
var currentMapId = $("#currentMapId").val();
if (currentMapId && currentMapId != '' && currentMapId != 'null') {// 页面初始化指定显示mapid
mapid = currentMapId;
} else {// 未指定限制默认列表第一个地图
mapid = data[0].id;
mapname = data[0].name;
$("#currentMapId").val(mapid);
}
for (var i in data) {
if (data[i].id && data[i].id == mapid) {
mapname = data[i].name;
$("#currentMapName").text(mapname);
}
html += '<li class="selectmap " title="' + data[i].name
+ '" onclick="switchMap(\'' + data[i].id + '\',\'' + data[i].name + '\')">' + data[i].name + ' </li>';
}
$('#maplist').html(html);
} else {
/*BootstrapDialog.show({title: '系统提示',message: '未发现可加载的地图数据',
buttons: [{
label: '确定',
action: function(dialogItself){
dialogItself.close();
}
}]});*/
showInfo("未发现可加载的地图数据!", null, null);
}
},
error: function (e) {
/*BootstrapDialog.show({title: '系统提示',message: '数据加载异常',
buttons: [{
label: '确定',
action: function(dialogItself){
dialogItself.close();
}
}]});*/
showInfo("数据加载异常!", null, null);
}
});
// initMapSelect();
} /**
* 获取地图列表
*/
function initAllMapList() {
$.ajax({
url: getBaseURL() + 'personlocation/findAlldMapAndFirstWord',
async: false, // 同步
type: 'GET', // 请求类型
cache: false, // 不缓存
dataType: 'json',
success: function (data) {
if (data.message) {
var firstWordList = data.firstWordList;
var mapList = data.mapList; //拼接地图首字
if (firstWordList && firstWordList.length > 0) {
var firsthtml = '';
for (var i in firstWordList) {
firsthtml += '<a style="PADDING-BOTTOM: 1px; MARGIN: 4px 4px;display: inline-block;" href="javascript:scrollToLocation(\'' + firstWordList[i].toLocaleUpperCase() + '\')">' + firstWordList[i].toLocaleUpperCase() + '</a>';
}
$('#firstWord').html(firsthtml);
}
//拼接地图列表
if (mapList && mapList.length > 0) {
var maphtml = '<table>';
var lastFirstWord = '';
var lastBuildName = '';
for (var j in mapList) {
if (mapList[j].name.slice(0, 1).toLocaleUpperCase() != lastFirstWord) {
lastFirstWord = mapList[j].name.slice(0, 1).toLocaleUpperCase();
lastBuildName = mapList[j].name;
if (maphtml != '<table>') {
maphtml += "</td></tr>";
}
maphtml += "<tr><td style='vertical-align: top; padding: 0 14px 0 7px; font-size: 15px;'>" + lastFirstWord + "</td>";
maphtml += "<td style='white-space: nowrap;vertical-align: top; padding-top: 3px; padding-right: 8px;'>" + mapList[j].name + ":</td><td style='padding-top: 3px; vertical-align: top;'>";
maphtml += getMapHrefHtml(mapList[j]);
} else {
if (mapList[j].name != lastBuildName) {
lastBuildName = mapList[j].name;
maphtml += "</td></tr>";
maphtml += "<tr><td style='vertical-align: top; padding: 0 14px 0 7px; font-size: 15px;'></td>";
maphtml += "<td style='white-space: nowrap;vertical-align: top; padding-top: 3px; padding-right: 8px;'>" + mapList[j].name + ":</td><td style='padding-top: 3px; vertical-align: top;'>";
maphtml += getMapHrefHtml(mapList[j]);
} else {
maphtml += getMapHrefHtml(mapList[j]);
}
}
}
if (maphtml != '<table>') {
maphtml += "</td></tr></table>";
} else {
maphtml += "</table>";
}
$('#buildingMap').html(maphtml);
}
}
},
error: function (e) {
/*BootstrapDialog.show({title: '系统提示',message: '数据加载异常',
buttons: [{
label: '确定',
action: function(dialogItself){
dialogItself.close();
}
}]});*/
showInfo("数据加载异常!", null, null);
}
});
} function getMapHrefHtml(map) {
if (map.name) {
return "<a style='line-height: 18px;display: inline-block;margin-right: 9px;' href='javascript:switchMap(" + map.id + ","" + map.name + "")' >" + map.name + "</a>";
} else {
return '';
}
} /**
* 加载初始化指定地图
*/
function loadMapData(mapid) {
var mapid = mapid || $("#currentMapId").val();
if (!mapid || '' == mapid || 'null' == mapid) {
// alert("未发现地图数据!");
return false;
}
hidePopup('areapopup');
if (!window_temp.MAPLIST_CACHE[mapid]) {
var loadFlag = false;
// 请求所有地图数据Map、LAYER、ELEMENT
$.ajax({
url: getBaseURL() + 'personlocation/findMapData/' + mapid,
async: false, // 同步
type: 'GET', // 请求类型
cache: false, // 不缓存
dataType: 'json',
success: function (data) {
// 解析数据
if (data && data.data) {// 通过缓存表取得的数据
data = data.data;
}
window_temp.CURRMAP_DATA = data;
var currentMapName = data.map.name;
$("#currentMapName").text(currentMapName);
if (data && data['map'] && data['layer']) {
initMap(data);// 初始化地图
loadFlag = true;
window_temp.MAPLIST_CACHE[mapid] = data;
} else {
/*BootstrapDialog.show({title: '系统提示',message: '地图数据不存在或加载不完整',
buttons: [{
label: '确定',
action: function(dialogItself){
dialogItself.close();
}
}]});*/
showInfo("地图数据不存在或加载不完整!", null, null);
}
},
error: function (e) {
/*BootstrapDialog.show({title: '系统提示',message: '数据加载异常',
buttons: [{
label: '确定',
action: function(dialogItself){
dialogItself.close();
}
}]});*/
showInfo("数据加载异常!", null, null);
window_temp.CURRMAP_DATA = null;
}
});
} else {
initMap(window_temp.MAPLIST_CACHE[mapid]);// 初始化地图
loadFlag = true;
}
return loadFlag;
} function initMap(data) {
mapData = data['map'];// 基本信息
layerData = data['layer'];// 图层信息
fnsData = data['fns'];// 设备图层的FN信息 -单拎出来了
buildingData = data['building']; // 初始化openlayer地图
initOlMap(mapData); // 初始化业务图层LAYER,ELEMENT
// wxh
initPersonLayer();
initSingleLayer();
initAreaLayer(layerData);
initDeviceLayer(fnsData, mapData);
initBuildingLayer(buildingData);
//创建一个线图层
var lineLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: []
})
});
window_temp.MAP_LAYERS['line'] = lineLayer;
lineLayer.setZIndex(6);
window_temp.MAP.addLayer(lineLayer); // 初始化地图控件
initMapTool();
// toolRefresh();
window_temp.MAP_CTRLS['mapselect'].changeName(mapData.name);
if (window_temp.MAP_LAYERS['device'] != undefined) {
window_temp.MAP_LAYERS['device'].display(false);
}
$(".ol-attribution").remove();
} function initAreaLayer(layerData, map) {
if (layerData && layerData.length > 0) {
var pointLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: []
})
});
window_temp.MAP.addLayer(pointLayer);
for (var i = 0; i < layerData.length; i++) {
var ele = layerData[i];
var areaFeature;
if (ele.shapeType == "Circle") {
var center = JSON.parse(ele.coordinate.split("@")[0]);
var radius = ele.coordinate.split("@")[1] * 1;
areaFeature = new ol.Feature({
geometry: new ol.geom.Circle(center, radius, "XY")
});
} else {
areaFeature = new ol.Feature({
geometry: new ol.geom.Polygon([JSON.parse(ele.coordinate)])
});
}
areaFeature.setStyle(JDMapVar.getAreaStyle(ele.areaTypeId));
areaFeature.setProperties(ele);
areaFeature.set('featureType', 'area');
pointLayer.getSource().addFeature(areaFeature);
}
var tool = addLayer(pointLayer, {name: "区域图层"});// 将图层显示/隐藏热纳入控制
window_temp.MAP.addControl(tool);
} else {
console.log("device data is null");
}
} function initDeviceLayer(data, map) {
//var lineArr = [];
if (data && data.length > 0) {
var deviceLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: []
})
});
window_temp.MAP.addLayer(deviceLayer);
for (var i in data) {
var feature = new ol.Feature(new ol.geom.Point([data[i].longitude, data[i].latitude]));
feature.setStyle(
// new ol.style.Style({ image:new
// ol.style.Icon({src:'../resources/image/FN_btn.png'}) })
function (resolution) {
// var zoom =
// window_temp.SPIRIT_CURROMAP.getMap().getView().getZoom();//window_temp.MAP.get("suitzoom")
var zoom = window_temp.MAP.getView().getZoom();// window_temp.MAP.get("suitzoom")
if (zoom >= window_temp.MAP.get("suitzoom")) {// window_temp.SPIRIT_CURROMAP.getMap().get("suitzoom")){
return [new ol.style.Style({image: new ol.style.Icon({src: getBaseURL() + 'resources/image/mic_station_btn.png'})})];
} else {
return [new ol.style.Style({
image: new ol.style.Circle({
radius: 3,
stroke: new ol.style.Stroke({color: '#fff'}), fill: new ol.style.Fill({color: '#00f'})
})
})];
}
}
);
feature.setProperties(data[i]); feature.set('featureType', 'device');
deviceLayer.getSource().addFeature(feature);
// window_temp.SPIRIT_CURROMAP.getLayer('device').getSource().addFeature(feature);
}
//var feature1 = new ol.Feature({
// geometry:new ol.geom.LineString(lineArr)
//});
//deviceLayer.getSource().addFeature(feature1);
//var tool = addLayer(deviceLayer, {name: "设备图层"});// 将图层显示/隐藏热纳入控制
//window_temp.MAP.addControl(tool);
}
} function initBuildingLayer(data) {
if (data && data.length > 0) {
var buildingLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: []
})
});
window_temp.MAP.addLayer(buildingLayer);
for (var i in data) {
var feature = new ol.Feature(new ol.geom.Point([data[i].mapX, data[i].mapY]));
feature.setStyle(
// new ol.style.Style({image:new ol.style.Icon({src:getBaseURL()+'resources/image/building.png'}),
// text:new ol.style.Text({text:"0人", font: "16px sans-serif", stroke: new ol.style.Stroke({width: 1})})
// })
function (resolution) {
var zoom = window_temp.MAP.getView().getZoom();// window.MAP.get("suitzoom")
if (zoom >= window_temp.MAP.get("suitzoom")) {
return [new ol.style.Style({
image: new ol.style.Icon({src: getBaseURL() + 'resources/image/building.png'}),
text: new ol.style.Text({
text: /*"0人"*/"",
font: "16px sans-serif",
stroke: new ol.style.Stroke({width: 1})
})
})];
} else {
return [new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
stroke: new ol.style.Stroke({color: '#fff'}),
fill: new ol.style.Fill({color: '#ff0000'})
}),
text: new ol.style.Text({
text: "",
font: "16px sans-serif"
})
})];
}
}
);
feature.setProperties(data[i]);
feature.set('featureType', 'building');
buildingLayer.getSource().addFeature(feature);
// window_temp.SPIRIT_CURROMAP.getLayer('device').getSource().addFeature(feature);
}
var tool = addLayer(buildingLayer, {name: "建筑图层"});// 将图层显示/隐藏热纳入控制
window_temp.MAP.addControl(tool);
}
} /**
* 初始化地图核心组件
*/
function initOlMap(mapdata) {
var projection = new ol.proj.Projection({
code: 'EPSG:4326',// ||mapdata.code,
extent: [mapdata.minX, mapdata.minY, mapdata.maxX, mapdata.maxY],
units: mapdata.unit
}); var view = new ol.View({
center: [mapdata.cx, mapdata.cy],
projection: projection,
zoom: mapdata.zoom,
maxZoom: mapdata.maxZoom,
minZoom: mapdata.minZoom,
zoomFactor: 1.2
});
/* $("#map").html(''); */
window_temp.SCALE = mapdata.scale;
window_temp.UNIT = mapdata.unit;
if (window_temp.MAP) {
window_temp.MAPINIT = true;
// 已存在
clearMap();// 清空现有图层
window_temp.MAP.setView(view);
thisSvgResover(mapdata, view);
window_temp.MAP.changed();
} else {// 不存在新创建
window_temp.MAP = new ol.Map({
target: 'map',
view: view,
interactions: ol.interaction.defaults().extend([
new ol.interaction.DragRotateAndZoom()
]),
});
thisSvgResover(mapdata, view);
}
window_temp.MAP.setProperties({
"suitzoom": mapdata.zoom || 5,
"recenter": [mapdata.cx || mapdata.minX + ((mapdata.maxX - mapdata.minX) / 2),
mapdata.cy || mapdata.minY + ((mapdata.maxY - mapdata.minY) / 2)]
});
} function thisSvgResover(data, view) {
var layer = new ol.layer.Image({
source: new ol.source.ImageStatic({
url: getBaseURL() + "module/uploads/" + data.mapUrl,
projection: view.getProjection(),
imageExtent: [data.minX, data.minY, data.maxX, data.maxY]
})
});
layer.setZIndex(0);
// wxh
var tool = addLayer(layer, {name: "basic"});// 将图层显示/隐藏热纳入控制
window_temp.MAP.addLayer(layer);
} // 清除地图图层 控制器数据 停止定位信息处理
function clearMap() {
for (var i in window_temp.LAYER) {// 删除图层
if (window_temp.MAP_LAYERS[window_temp.LAYER[i]]) {
window_temp.MAP.removeLayer(window_temp.MAP_LAYERS[window_temp.LAYER[i]].layer);
window_temp.MAP_LAYERS[window_temp.LAYER[i]].remove();
}
}
for (var i in window_temp.CTRLS) {// 删除图层
window_temp.MAP.removeControl(window_temp.MAP_CTRLS[window_temp.CTRLS[i]]);
}
// window_temp.MAP_CTRLS['mapselect'].remove(); window_temp.MAP_LAYERS = null;// 图层置空
// window_temp.MAP_CTRLS = null;//地图控制器置空
} // 获取当前区域人员列表
function currSearchList(id) {
var datas = ['all'];
var array = [];
if (id) {
datas = [id];
} else {
var result = null;
$.ajax({
url: getBaseURL() + 'personlocation/onlinePerson',
async: false, // 同步
type: 'POST', // 请求类型
cache: false, // 缓存
dataType: 'json',
success: function (data) {
result = data;
window_temp.PERSON_DATA = data;
if (!data || data.length == 0) {
/*BootstrapDialog.show({
title: '系统提示',
message: '当前无在线人员!',
buttons: [{
label: '确定',
action: function(dialogItself){
dialogItself.close();
$(".quickSearch").removeClass("canclear");
hidePopup();
if(window_temp.MAPMODE!=0){
switchMapMode(0);
}
$("#personquickSearch").val(null);
}
}]
});*/ showInfo("当前无在线人员!", null, null);
$(".quickSearch").removeClass("canclear");
hidePopup();
if (window_temp.MAPMODE != 0) {
switchMapMode(0);
}
$("#personquickSearch").val(null);
}
},
error: function (e) {
console.error('在线人员信息加载失败-' + e.description);
}
});
return result;
// return data = $("#all").data("persons");
}
var content = '';
for (var k in datas) {
var data = $("#" + datas[k]).data("persons");
if (data && data.length > 0) {
for (var i in data) {
content += "<li class='" + datas[k] + "-front' x='" + data[i].x + "' y='" + data[i].y + "' nameAlphabet='" + data[i].nameAlphabet + "' id='" +
data[i].id + "'>" + "<i class='glyphicon glyphicon-map-marker'></i> " + data[i].name + "(" + data[i].id + ")" + data[i].officeName + "</li>";
}
}
}
return content;
} // 统计信息事件绑定
function listPersonArea(id) {
$(".personlist")
.val(id)
.removeClass("normal")
.removeClass("power")
.removeClass("restrict")
.addClass(id);
var data = $("#" + id).data("persons");
var content = "<ul >";
var data = currSearchList(id);
if (data != '') {
content += data;
} else {
content += '<span>此区域没有人员</span>';
}
content += '</ul>';
$(".personinfo").html(content);
} // 在指定位置显示popup提示信息
// location popup显示在地图的坐标位置
// content 内容
// popid 标识
// dispPos 显示在元素的相对位置
function showPopup(loc, content, popid, dispPos) {
popid = popid || "popup";
var popup = window_temp.MAP.getOverlayById(popid);
if (!popup) {
var ele = document.createElement("div");
ele.className = "popup";
ele.id = popid;
popup = new ol.Overlay({
element: ele,
positioning: dispPos || 'bottom-left',
stopEvent: true,
id: popid
});
window_temp.MAP.addOverlay(popup);
}
popup.setPosition(loc);
popup.setVisible(true);
var element = $('#' + popid)
if (content) {
$(element).html(content);
}
if ($(element).html()) {
$(element).show();// slideDown('fast');
}
}
// 隐藏指定的popup
function hidePopup(popid, keepContent) {
popid = popid || "popup";
if (window_temp.MAP) {
var popup = window_temp.MAP.getOverlayById(popid);
if (popup) {
popup.setVisible(false);
$("#" + popid).hide()
if (!keepContent) {
$("#" + popid).html(null);
}
}
}
} /**
* 聚焦地图指定位置 按指定缩放比例
*/
function focusTo(location, zoomTo) {
var zoom = zoomTo || (window_temp.MAP.get("suitzoom") * 1);
var duration = 500;
var pan = ol.animation.pan({
duration: duration,
source: /** @type {ol.Coordinate} */ (window_temp.MAP.getView().getCenter()),
});
var zooma = ol.animation.zoom({
duration: duration,
resolution: 1 * window_temp.MAP.getView().getResolution()
});
if (-1 == zoom) {
zoom = window_temp.MAP.get("suitzoom") * 1;
window_temp.MAP.beforeRender(pan);
} else {
window_temp.MAP.beforeRender(zooma, pan);
}
window_temp.MAP.getView().setCenter(location);
window_temp.MAP.getView().setZoom(zoom);
} // 工具条显示隐藏按钮
function toolToggle() {
if ($(this).hasClass("arrow_up")) {
$(this).removeClass("arrow_up");
$(this).addClass("arrow_down");
$(".ol-control, .maptool, .tool").each(function (e) {
if (!$(this).hasClass("arrow_down") && !$(this).hasClass("person") && !$(this).hasClass("area") && !$(this).hasClass("device") && !$(this).hasClass("building")) {
$(this).addClass("hide");
}
});
$('.ol-control.layertool').hide();
$('.ol-control.person').hide();
} else {
$(this).removeClass("arrow_down");
$(this).addClass("arrow_up");
$(".ol-control, .maptool, .tool").each(function (e) {
$(this).show().removeClass("hide");
});
window_temp.MAP_CTRLS.measure.renderOver = true;
}
} // 地图放大按钮事件
function toolMapZoomIn() {
var view = window_temp.MAP.getView();
var zoom = view.getZoom();
view.setZoom(zoom + 1);
}
// 地图缩小按钮事件
function toolMapZoomOut() {
var view = window_temp.MAP.getView();
var zoom = view.getZoom();
view.setZoom(zoom - 1);
} // 还原地图位置和缩放比例
function toolRefresh() {
var center = window_temp.MAP.get("recenter");
var zoom = window_temp.MAP.get("suitzoom");
var duration = 1500;
var start = +new Date();
var pan = ol.animation.pan({
duration: duration,
source: /** @type {ol.Coordinate} */ (window_temp.MAP.getView().getCenter()),
start: start
});
var bounce = ol.animation.bounce({
duration: duration,
resolution: 1.1 * window_temp.MAP.getView().getResolution(),
start: start
});
var zooma = ol.animation.zoom({
duration: duration,
resolution: 1 * window_temp.MAP.getView().getResolution(),
start: start
});
window_temp.MAP.beforeRender(bounce, pan, zooma);
window_temp.MAP.getView().setCenter(center);
window_temp.MAP.getView().setZoom(zoom);
} // 保存地图缩放比例和中心位置布局
function toolLayout() {
var params = {
mapid: $("#currentMapId").val(),
zoom: window_temp.MAP.getView().getZoom(),
center: window_temp.MAP.getView().getCenter()
};
$.ajax({
url: getBaseURL() + 'personlocation/maplayout',
async: true, // 异步
type: 'POST', // 请求类型
cache: false, // 缓存
contentType: 'application/json',
data: JSON.stringify(params),
success: function (data) {
// BootstrapDialog.show({title: '系统提示',message: '数据已保存'});
if (window_temp.MAPLIST_CACHE && window_temp.MAPLIST_CACHE[$("#currentMapId").val()]) {
var center = window_temp.MAP.getView().getCenter();
var zoom = window_temp.MAP.getView().getZoom();
window_temp.MAPLIST_CACHE[$("#currentMapId").val()].map.cx = center[0];
window_temp.MAPLIST_CACHE[$("#currentMapId").val()].map.cy = center[1];
window_temp.MAPLIST_CACHE[$("#currentMapId").val()].map.zoom = zoom;
}
/*BootstrapDialog.show({
title: '系统提示',
message: '数据已保存!',
buttons: [{
label: '确定',
action: function(dialogItself){
dialogItself.close();
}
}]
});*/
showInfo("数据已保存!", null, null);
return;
},
error: function (e) {
// BootstrapDialog.show({title: '系统提示',message: '数据保存失败'});
/*BootstrapDialog.show({
title: '系统提示',
message: '数据保存失败!',
buttons: [{
label: '确定',
action: function(dialogItself){
dialogItself.close();
}
}]
});*/
showInfo("数据保存失败!", null, null);
return;
}
});
window_temp.MAP.setProperties({"suitzoom": params.zoom || 10});
window_temp.MAP.setProperties({"recenter": params.center || [0, 0]});
} //初始化所查询的所有地图数据
function initSerchMapData() {
mapQuickSearch('mapquickSearch', '/sncp/mapManager/selectAllMap', {}, mapNameSearchSelected);
} function mapNameSearchSelected(item) {
var id = item.split('(')[0];
var name = item.split("(")[1].split(")")[0];
switchMap(id, name);
} function mapQuickSearch(controlerId, url, params, callback) {
mapSearch = new QuickSearch({
initEle: false,
input: $("#" + controlerId)[0],
dataurl: url,
dataparams: params,
hintSize: 20,
hintUpdater: function (item) {// 选中后输入框内容
item = JSON.parse(item);
var data = item.id + "(" + item.name + ")";
return data;
},
hintDisplayText: function (item) {// 列表显示格式
try {
item = JSON.parse(item);
var modal = "(" + item.name + ")";
return modal;
} catch (e) {
return item;
}
},
hintAfterSelect: function (item) {// 选择项目后回调函数
callback(item);
}
}).show();
} function scrollToLocation(id) {
var mainContainer = $('#buildingMap'),
scrollToContainer = mainContainer.find('td:contains("' + id + '")');//滚动到<div id="buildingMap">中Id名为id的最后一个span处
mainContainer.animate({
scrollTop: scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
}, 1000);//2秒滑动到指定位置
} function quickSearch() {
$(".statistic >span").removeClass("active");
$(".personlist").hide().val('');
$(".perlistclose").unbind('click');
$("#personquickSearch").typeahead({// 姓名手机号姓名拼音自动提示
source: function (query, process) {
var results = _.map(currSearchList(), function (item) {
return JSON.stringify(item);
});
process(results);
},
autoSelect: true,
items: 10,// 选择列表最多显示条目数
updater: function (item) {// 选中后输入框内容
item = JSON.parse(item);
return item.name + "(" + item.id + ")";
},
displayText: function (item) {// 列表显示格式
try {
item = JSON.parse(item);
return item.name + "(" + item.id + "," + item.nameAlphabet + ")";
} catch (e) {
return item;
}
},
afterSelect: function (item) {// 选择项目后回调函数
if (item) {
var val = item.split('(')[1].replace(")", '');
window_temp.CURRID = val;
/*if (val != window_temp.CURRID) {// 追踪换人
window_temp.CURRID = val;
switchMapMode(1);
}*/
}
}
});
$("#personquickSearch").on('click', function (e) {// 清除追踪 if (e.offsetX > 180) {
$(".quickSearch").removeClass("canclear");
e.preventDefault();
hidePopup();
if (window_temp.MAPMODE != 0) {
switchMapMode(0);
}
$(this).val(null);
}
}).on('change', function (e) { if ($(this).val() == '' || $(this).val() == null) {
e.preventDefault();
hidePopup();
if (window_temp.MAPMODE != 0) {
switchMapMode(0);
}
window_temp.CURRID = null;
window_temp.MAP_LAYERS['line'].getSource().clear();
$('#devisId').text("");
$('#happenTime').text("");
$(".quickSearch").removeClass("canclear");
$('#showEchartAndList').hide();
$('#realdebugList').bootstrapTable('destroy');
} else {
$(".quickSearch").addClass("canclear");
$('#showEchartAndList').show();
initHighCharts();
$('.searchClear').show()
} }).on('mousemove', function (e) {
if (e.offsetX > 180) {
$(this).css("cursor", "pointer");
} else {
$(this).css("cursor", "auto");
}
}).on('blur', function () {
//$('#showEchartAndList').hide();
});
$('.searchImg').on('click', function () {
$('#showEchartAndList').hide(); })
} function initMapTool() {
if (!window_temp.MAPINIT) {
// 添加自定义业务操作工具栏
var btns = [
// 工具条显示隐藏控制钮
{
id: "toolbar-tool",
tagName: 'li',
className: 'arrow_down ctl',
title: "工具栏",
trigger: 'click',
callback: toolToggle
},
// 地图放大按钮
{id: "toolbar-zoomin", className: 'zoomin tool', title: '放大', trigger: 'click', callback: toolMapZoomIn},
// 地图缩小按钮
{id: "toolbar-zoomout", className: 'zoomout tool', title: '缩小', trigger: 'click', callback: toolMapZoomOut},
// 地图还原位置和缩放比例
{id: "toobar-refresh", className: 'refresh tool', title: '还原', trigger: 'click', callback: toolRefresh},
/*// 地图位置和缩放比例保存
{id:"toobar-layout",className:'layout tool',title:'地图视图保存',trigger:'click',callback:toolLayout},*/
// 历史轨迹控制按钮
{
id: "toolbar-history",
className: 'history tool',
title: '轨迹回放',
trigger: 'click',
callback: toolHistoryPlay
}
];
for (var i in btns) {
addBusinessTool({btns: btns[i]});// btns:btns
}
// 统计信息点击事件绑定
$(".statistic >span").each(function () {
$(this).on("click", function () {
var id = $(this).attr("id");
var listid = $(".personlist").val();
var active = $(this).hasClass("active");
if (id == listid) {
if (active) {
$(this).removeClass("active");
$(".personlist").hide().val('');
$(".perlistclose").unbind('click');
hidePopup();
}
} else {// 不同区域
$(".searchBtn").removeClass("active");
/* $("#personquickSearch").animate({width:'-180px'}, "300"); */
/* $(".quickSearch").hide(); */ var data = $(this).data("persons");
if (!active) {
$(this).addClass("active");
}
$(".personlist").show();
$(".perlistclose").on('click', function () {
$(".personlist").hide();
$(".personlist >.personinfo").html('');
})
listPersonArea(id);
}
});
})
// 快速搜索按钮绑定事件
$(".quickSearch").on('mouseover', quickSearch);
} // 添加地图操作控件：导航、比例、测距、鹰眼
addControls(); $(".maptool.overview.tool>button").attr("title", "缩略图");
$(".maptool.measure.tool>button").attr("title", "测距"); if (!window_temp.MAPINIT) {
$(".maptool>button").each(function () {
if (!$(this).hasClass("zoomin")
&& !$(this).hasClass("zoomout")
&& !$(this).hasClass("layout")
&& !$(this).hasClass("refresh")) {
$(this).on('click', function () {
if ($(this).hasClass("active")) {
$(this).removeClass("active");
} else {
$(this).addClass("active");
}
});
}
});
$(".maptool.tool").each(function (e) {
$(this).hide();
}); $(".ol-zoom, .ol-zoomslider").remove();
// 添加地图元素事件
addMapElementEvent();
}
} /**
* 初始化基础图层和基础业务图层
*/
function initOneLayer(data) {// 绘制一个图层
if (data.type === 'fns') {
var features = convertToFeature(data);
if (window_temp.MAP_LAYERS['device']) {
if (features) {
window_temp.MAP_LAYERS['device'].layer.getSource().addFeatures(features);
}
}
} else {
var features = convertToFeature(data);
var layer = new ol.layer.Vector({source: new ol.source.Vector({})});
layer.getSource().addFeatures(features);
// layer.setProperties({"layerType":data})
window_temp.MAP.addLayer(layer);
var tool = addLayer(layer, data);// 将图层显示/隐藏热纳入控制
window_temp.MAP.addControl(tool);
/*
* if(data.type==2){//业务图层 if(data.name!='校正图层'){ var tool =
* addLayer(layer, data);//将图层显示/隐藏热纳入控制 window_temp.MAP.addControl(tool); }
* }else if(data.type==1){//基础图层 var tool = addLayer(layer,
* {name:"basic"});//将图层显示/隐藏热纳入控制 }
*/
}
} /**
* 初始化人员定位图层
*/
function initPersonLayer() {
var styleCache = {};
var personlayer = new ol.layer.Vector({
source: new ol.source.Cluster({
distance: 10,
source: new ol.source.Vector({})
}),
style: function (feature, resolution) {
var size = feature.get('features').length;
var style = styleCache[size];
if (!style) {
if (size == 1) {
style = [new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: '#fff'
}),
fill: new ol.style.Fill({
color: '#7FFF00'
})
})
})];
} else {
style = [new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: '#fff'
}),
fill: new ol.style.Fill({
color: '#3399CC'
})
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: '#fff'
})
})
})];
}
} else {
if (size == 1) {
var zoom = window_temp.MAP.getView().getZoom();// window_temp.MAP.get("suitzoom")
if (zoom >= window_temp.MAP.get("suitzoom")) {
style = [new ol.style.Style({image: new ol.style.Icon({src: '/sncp/resources/image/person_single.png'})})];
} else {
style = [new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
stroke: new ol.style.Stroke({
color: '#fff'
}),
fill: new ol.style.Fill({
color: '#7FFF00'
})
})
})];
}
}
}
styleCache[size] = style;
return style;
}
});
window_temp.MAP.addLayer(personlayer);
var tool = addLayer(personlayer, {name: '人员图层'});// 将图层显示/隐藏热纳入控制
window_temp.MAP.addControl(tool);
} /**
* 初始化单人跟踪图层
*/
function initSingleLayer() {
var styleCache = {};
var singlelayer = new ol.layer.Vector({
source: new ol.source.Cluster({
distance: 10,
source: new ol.source.Vector({})
}),
style: function (feature, resolution) {
var size = feature.get('features').length;
var style = styleCache[size];
if (!style) {
if (size == 1) {
style = [new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: '#fff'
}),
fill: new ol.style.Fill({
color: '#7FFF00'
})
})
})];
} else {
style = [new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: '#fff'
}),
fill: new ol.style.Fill({
color: '#3399CC'
})
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: '#fff'
})
})
})];
}
} else {
if (size == 1) {
var zoom = window_temp.MAP.getView().getZoom();// window_temp.MAP.get("suitzoom")
if (zoom >= window_temp.MAP.get("suitzoom")) {
style = [new ol.style.Style({image: new ol.style.Icon({src: '/sncp/resources/image/person_single.png'})})];
} else {
style = [new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
stroke: new ol.style.Stroke({
color: '#fff'
}),
fill: new ol.style.Fill({
color: '#7FFF00'
})
})
})];
}
}
}
styleCache[size] = style;
return style;
}
});
window_temp.MAP.addLayer(singlelayer);
addLayer(singlelayer, {name: 'single'});
} /**
* 私有处理元素数据为openlayers元素
*/
function convertToFeature(data) {
var features = new Array();
var busiType = data.type;// 图层业务类型
if (busiType === 'fns') {
/*
* data = data.data; if(data){ var feature ;//元素临时变量 for(var i in data){
* feature = new ol.Feature(new ol.geom.Point([data[i].x,data[i].y]));
* feature.setStyle( //new ol.style.Style({ image:new
* ol.style.Icon({src:'../resources/image/FN_btn.png'}) })
* function(resolution){ var zoom =
* window_temp.MAP.getView().getZoom();//window_temp.MAP.get("suitzoom") if( zoom >=
* window_temp.MAP.get("suitzoom")){ return [new ol.style.Style({image:new
* ol.style.Icon({src:'../resources/image/FN_btn.png'})})]; }else{
* return [new ol.style.Style({ image: new ol.style.Circle({ radius: 3,
* stroke: new ol.style.Stroke({color: '#fff'}),fill: new
* ol.style.Fill({color: '#00f'}) }) })]; } } );
* feature.setProperties(data[i]); feature.set('type','fn');
* features.push(feature); } }
*/
return features;
} else {
if (data.elements && data.elements.length > 0) {
for (var i in data.elements) {
var ele = data.elements[i];
var feature = new ol.Feature({
geometry: new ol.geom.Polygon([JSON.parse(ele.coordinate)])
});
// daFeature.setStyle(JDMapVar.getAreaStyle(data.areaTypeId,"0"));
// daFeature.set("name",data.name);
features.push(feature); /*
* var ele = data.elements[i]; var eleType ;
* if(busiType==2){//业务图层元素
* if(ele.busiObj&&ele.busiObj.busiType){ eleType =
* ele.busiObj.busiType; }else{ console.log("data error"); }
* }else if(busiType==1){//基础图层元素 eleType =ele.type;//1-点 } var
* type = busiType*10+eleType;//业务图层类型和元素类型 var feature
* ;//元素临时变量 switch(type){ //业务元素类 case 21://区域 feature = new
* ol.Feature(new
* ol.geom.Polygon(convert(ele.coordinate,'Polygon'))); var
* colors = ['#f35958','#eeb559','#53cda8']; var rgbcor =
* ['rgba(243,89,88,0.3)','rgba(238,181,89,0.3)','rgba(83,205,168,0.3)'];//限制区,功率区,非限制区
* feature.setStyle( new ol.style.Style({ stroke: new
* ol.style.Stroke({color:colors[ele.busiObj.type*1-1],
* width:2}), fill: new ol.style.Fill({color:
* rgbcor[ele.busiObj.type*1-1]}), text: new ol.style.Text({
* text:"0人", offsetY:28, scale:1.4, fill: new ol.style.Fill({
* color: "#fff"//colors[ele.busiObj.type*1-1] }), stroke: new
* ol.style.Stroke({color:"#fff",//colors[ele.busiObj.type*1-1]
* width:1}), }) })); break; case 22://标志物 feature = new
* ol.Feature(new
* ol.geom.Point(convert(ele.coordinate,'Point'))); break; case
* 23://CC feature = new ol.Feature(new
* ol.geom.Point(convert(ele.coordinate,'Point')));
* //feature.setStyle(new ol.style.Style({image:new
* ol.style.Icon({src:'../resources/image/cc.png'})}));
* feature.setStyle(function(resolution){ var zoom =
* window_temp.MAP.getView().getZoom();//window_temp.MAP.get("suitzoom")
* if( zoom >= window_temp.MAP.get("suitzoom")){ return [new
* ol.style.Style({image:new
* ol.style.Icon({src:'../resources/image/CC_btn.png'})})];
* }else{ return [new ol.style.Style({ image: new
* ol.style.Circle({ radius: 6, stroke: new
* ol.style.Stroke({color: '#fff'}),fill: new
* ol.style.Fill({color: '#fff'}) }) })]; } }); break; case
* 24://LINE feature = new ol.Feature(new
* ol.geom.LineString(convert(ele.coordinate,'LineString'),'XY')) ;
* feature.setStyle(new ol.style.Style({ stroke: new
* ol.style.Stroke({ color: '#FFFFFF',//'rgba(220,200,220,0.8)'
* width:2 }) })); break; case 25://微基站 feature = new
* ol.Feature(new
* ol.geom.Point(convert(ele.coordinate,'Point')));
* feature.setStyle(function(resolution){ var zoom =
* window_temp.MAP.getView().getZoom();//window_temp.MAP.get("suitzoom")
* if( zoom >= window_temp.MAP.get("suitzoom")){ return [new
* ol.style.Style({image:new
* ol.style.Icon({src:'../resources/image/mic_station_btn.png'})})];
* }else{ return [new ol.style.Style({ image: new
* ol.style.Circle({ radius: 4, stroke: new
* ol.style.Stroke({color: '#fff',width:2}),fill: new
* ol.style.Fill({color: '#0ff'}) }) })]; } }); break; //基础图层元素
* case 11://点 feature = new ol.Feature(new
* ol.geom.Point(convert(ele.coordinate,'Point'))); break; case
* 12://线 feature = new ol.Feature(new
* ol.geom.LineString(convert(ele.coordinate,'LineString'),'XY'));
* feature.setStyle(new ol.style.Style({ stroke: new
* ol.style.Stroke({ color: '#5e9ce2'//'rgba(220,200,220,0.8)' })
* })); break; case 13://多边形 break;
*
* default: break; } if(feature){ if(busiType==2){//业务元素 添加业务属性
* feature.setProperties(ele.busiObj); } features.push(feature); }
*/
}
}
return features;
}
} /**
* 转换坐标
*/
function convert(coodinates, type) {
var result = [];
for (var pos in coodinates) {
result.push([coodinates[pos].x, coodinates[pos].y]);
}
if (type == 'Polygon') {
return [result];
} else if (type == "LineString") {
return result;
} else if (type == "Point") {
return result[0];
}
} /**
* 添加地图基础控件
*/
function addControls() { if (!window_temp.MAP_CTRLS) {
window_temp.MAP_CTRLS = {};
}
/*
* //缩放滑块控制器 var zoomslider = new ol.control.ZoomSlider();
* window_temp.MAP.addControl(zoomslider);
*/ // 比例尺控制器
var scaleControl = new ol.control.Scale({scale: window_temp.SCALE, unit: window_temp.UNIT});
window_temp.MAP.addControl(scaleControl);
window_temp.MAP_CTRLS['scale'] = scaleControl; if (!window_temp.MAPINIT) {
// 地图选择控制器
mapselectControl = new ol.control.mapSelectTool();
window_temp.MAP.addControl(mapselectControl);
window_temp.MAP_CTRLS['mapselect'] = mapselectControl;
//window_temp.MAP.getLayers()[0].
//url: getBaseURL()+"module/uploads/"+data.mapUrl,
//imageExtent: [data.minX,data.minY,data.maxX,data.maxY]
/*var layer_temp = new ol.layer.Layer({
source:new ol.source.ImageStatic({
projection:window_temp.MAP.getView().getProjection(),
url: getBaseURL()+"module/uploads/",
imageExtent: [1,1,1,1]
}),
zIndex:1
});*/
// 缩略图控制器（1.1开放）
// console.log(window_temp.MAP_LAYERS['basic'].layer);
// var overviewmapControl =new ol.control.OverviewMap({
// className: 'maptool overview tool ol-overviewmap ol-custom-overviewmap',// '',
// layers: [window_temp.MAP_LAYERS['area'].layer],//[window_temp.MAP_LAYERS['basic'].layer],// window_temp.MAP.getLayers(),
// collapseLabel: ' ',// '\u00BB',
// label: ' ',// '\u00AB',
// collapsed: true
// });
// window_temp.MAP.addControl(overviewmapControl);
// window_temp.MAP_CTRLS['overview']=overviewmapControl;
// 测量控制器
var measureControl = new ol.control.Measure({
tipLabel: '测距',
scale: window_temp.SCALE,
unit: window_temp.UNIT,
className: 'maptool measure tool',
label: ' ',
collapseLabel: ' ',
openLabel: ' ',
zIndex: 6
});
window_temp.MAP.addControl(measureControl);
window_temp.MAP_CTRLS.measure = measureControl;
measureControl.renderOver = false;
} else {
window_temp.MAP_CTRLS.measure.scale_ = window_temp.SCALE;
window_temp.MAP_CTRLS.measure.unit_ = window_temp.UNIT;
window_temp.MAP_CTRLS.measure.renderOver = false;
// window_temp.MAP_CTRLS.overview.ovmap_.getLayers().forEach(function(e,a,i){
// window_temp.MAP_CTRLS.overview.ovmap_.removeLayer(e);
// })
// window_temp.MAP_CTRLS.overview.ovmap_.addLayer(window_temp.MAP_LAYERS['basic'].layer);
// window_temp.MAP_CTRLS.overview.changed();
} /*
* var drawControl = new ol.control.Draw({tipLabel: '区域查询',
* callback:areaSearch,className:'maptool area tool',label:'
* ',collapseLabel:' ',openLabel:' '}); window_temp.MAP.addControl(drawControl);
*/ /*
* //全屏控制器 var fullscreenControl = new ol.control.FullScreen({tipLabel:
* '全屏',className:'maptool fullscr tool',label:' ',collapseLabel:'
* ',openLabel:' '}); window_temp.MAP.addControl(fullscreenControl);
*/ if (window_temp.DEBUG_MODE) {
if (!window_temp.MOUSE_CTRL) {
window_temp.MOUSE_CTRL = new ol.control.MousePosition({
coordinateFormat: function (coordinate) {
return ol.coordinate.format(coordinate,
"X:{x},Y:{y},Zoom:" + window_temp.MAP.getView().getZoom()
, 2);
},
className: 'custom-mouse-position',
target: document.getElementById("locinfo"),
undefinedHTML: ''
});
window_temp.MAP.addControl(window_temp.MOUSE_CTRL);
}
} } /**
* 切换地图
*/
function switchMap(id, value) {
if (id != $('#currentMapId').val()) {
$('#currentMapId').val(id);
window_temp.LOCAL_MAP_LAYERS = {};
if (window_temp.MAPMODE == 1) {
$(".quickSearch").removeClass("canclear");
switchMapMode(0);
$("#personquickSearch").val("");
}
hidePopup();
window_temp.MAP_LAYERS['person'].layer.getSource().getSource().clear();
//切换地图隐藏线
window_temp.MAP_LAYERS['line'].getSource().clear();
window_temp.CURRID = null;
$('#showEchartAndList').hide()
$('#devisId').text("");
$('#happenTime').text("");
$('#realdebugList').bootstrapTable('destroy');
if($('#personquickSearch').val() !=undefined){
$('.searchImg').show()
}else {
$('.searchImg').hide()
}
if (!$('#currentMapId').val() || id!=datamapid) { $('#personquickSearch').val(null)
$('#showEchartAndList').hide()
$('.searchImg').hide()
}
loadMapData(id, true);
/*initOlPlugin();
initMapTool();*/
}
$("#mapquickSearch").val("");
$('#mapselect').hide();
$('.ol-control.layertool').hide()
}
/* ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 地图选择工具↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ */ /* ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 地图业务控制工具↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */
/**
* 添加地图业务工具栏
*/
function addBusinessTool(opt) {
businessTool = function (opt_options) {
var options = opt_options || {};
// var element = goog.dom.createDom('DIV',
// 'maptool ol-unselectable ol-control '+opt_options.btns.className);
var element = document.createElement('div');
element.className = 'maptool ol-unselectable ol-control ' + opt_options.btns.className;
var button = createToolbarBtn(options.btns);
element.appendChild(button);
ol.control.Control.call(this, {
element: element,
target: options.target
}); };
ol.inherits(businessTool, ol.control.Control);
window_temp.MAP.addControl(new businessTool(opt));
} function createToolbarBtn(data) {
var ele = document.createElement("button");
ele.className = data.className;
ele.id = data.id;
ele.title = data.title;
// ele.innerHTML='';
$(ele).on(data.trigger, data.callback);
return ele;
}
/* ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 地图业务控制工具↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ */
/**
* 添加地图元素tip
*/
function addMapElementEvent() {
window_temp.MAP.on('pointermove', function (evt) {
if (evt.dragging || evt.type == 'click') {
$("#mousepopup").hide();
return;
}
var feature = window_temp.MAP.forEachFeatureAtPixel(evt.pixel,
function (feature, layer) {
return feature;
});
if (feature) {
var content = ''
if (feature.get("features")) {
item = feature.get("features");
for (var i in item) {
content += item[i].get("id") + "-" + item[i].get("name") + " ";
if (i > 0 && ((i * 1) + 1) % 5 == 0) {
content += "</br>";
}
}
} else {
if ('area' == feature.get("featureType")) {
content = feature.get("name");
} else if ('line' == feature.get("featureType")) {
content = feature.get("lineName");
} else if ('device' == feature.get("featureType")) {
content = feature.get("ip") + '-' + feature.get("deviceId") + '-' + feature.get("wtpSerialNum");
} else if ('building' == feature.get("featureType")) {
var data = feature.get("building");
var count = 0;
if (data) {
for (var i in data) {
count = count + data[i].count;
}
}
content = feature.get("name") + '-' + count + '人';
}
} if (content != '') {
var coordinate = evt.coordinate;
coordinate[0] = coordinate[0] + 5;
coordinate[1] = coordinate[1] + 5;
showPopup(coordinate, content, 'mousepopup');
} else {
hidePopup('mousepopup');
}
} else {
$("#mousepopup").hide().html(null);
}
});
window_temp.MAP.on('click', function (e) {
if (e.dragging) {
return;
}
var feature = window_temp.MAP.forEachFeatureAtPixel(e.pixel,
function (feature, layer) {
return feature;
});
if (feature) {
if (feature.get("featureType") == 'area') {
hidePopup('buildpopup');
var data = feature.get("person");//$(".statistic").data(feature.get("id"));
if (data) {
var item = data;
var content = '';
for (var i in item) {
content += item[i].name + '(' + item[i].id + ') ';
if (i > 0 && ((i * 1) + 1) % 5 == 0) {
content += "</br>";
}
}
if (content) {
var coordinate = e.coordinate;
coordinate[0] = coordinate[0] + 5;
coordinate[1] = coordinate[1] + 5;
showPopup(coordinate, content, 'mousepopup');
//showPopup(feature.getGeometry().getInteriorPoint().getCoordinates(),content,'areapopup');
}
}
} else if (feature.get("featureType") == 'building') {
hidePopup('areapopup');
var data = feature.get("building");
if (data) {
var content = '';
for (var i in data) {
content += '<a style="cursor: pointer;" onclick="selectBuildingFloor(' + data[i].id + ')">' + data[i].name + '：' + data[i].count + '人</a></br>';
}
content = '<div>' + content + '</div>';
if (content) {
showPopup(e.coordinate, content, 'buildpopup');
}
}
}
} else {
hidePopup('areapopup');
hidePopup('buildpopup');
}
});
} function selectBuildingFloor(mapid) {
hidePopup('buildpopup');
switchMap(mapid);
} /* ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 图层显示控制工具↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */ function addLayer(layer, data, layertype) {
var typeClass = '';
var tool = new ol.control.layerTool({layer: layer});
if (data.name) {
if (data.name == '设备图层') {
typeClass = 'device';
layer.setZIndex(2);
} else if (data.name == '区域图层') {
typeClass = 'area'
layer.setZIndex(1);
} else if (data.name == '人员图层') {
typeClass = 'person'
layer.setZIndex(4);
} else if (data.name == '建筑图层') {
typeClass = 'building'
layer.setZIndex(3);
} else if (data.name == 'basic') {
typeClass = "basic";
layer.setZIndex(0);
} else if (data.name == 'single') {
typeClass = "single";
layer.setZIndex(5);
}
if (typeClass != 'basic') {// 基础图层不进行显示控制
$(tool.element_).addClass(typeClass);
// var button = goog.dom.createDom('button',{'type': 'button','title': data.name,className:'layertool '+typeClass} , ' ');
var button = document.createElement('button');//goog.dom.createDom('button',{'type': 'button','title': data.name,className:'layertool '+typeClass} , ' ');
button.className = 'layertool ' + typeClass;
button.type = "button";
button.title = data.name;
button.addEventListener('click', function () {
tool.display($(this).hasClass(tool.closeClass));
}, false);
$(tool.element_).append(button);
}
if (!window_temp.MAP_LAYERS) {
window_temp.MAP_LAYERS = {};
}
}
window_temp.MAP_LAYERS[typeClass] = tool;
return tool;
}; /* ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 定位数据接收及处理 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */
// 初始化handler注册
function initSocketHandler() {
window.parent.JDMC.subscribe('NUCLEAR', window.parent.JDMC.MessageType.JD_REQUEST_RSSI, initPersonConnectDevice);
window.parent.JDMC.subscribe('NUCLEAR', window.parent.JDMC.MessageType.JD_REQUEST_LOCATION_OFF, clearPositionData);
}
function cancelSocketHandler() {
window.parent.JDMC.unsubscribe('NUCLEAR', window.parent.JDMC.MessageType.JD_REQUEST_RSSI);
window.parent.JDMC.unsubscribe('NUCLEAR', window.parent.JDMC.MessageType.JD_REQUEST_LOCATION_OFF);
}
/* ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 定位接收及处理 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ */
var segmentLen = 1;
function splitTrace(startx, starty, endx, endy) {
var points = [];
var distance = Math.sqrt((startx - endx) * (startx - endx) + (starty - endy) * (starty - endy));
var segmentCount = Math.floor(distance / segmentLen);
if (segmentCount < 1) {
return points;
}
var segmentX = segmentLen * Math.abs(startx - endx) / distance;
var segmentY = segmentLen * Math.abs(starty - endy) / distance;
for (var i = 1; i < segmentCount + 1; i++) {
var point = {};
(startx < endx) ? point.x = startx + segmentX * i : point.x = startx - segmentX * i;
(starty < endy) ? point.y = starty + segmentY * i : point.y = starty - segmentY * i;
points.push(point);
}
return points;
} //重新计算表格高度
$(window).resize(function () {
$('#realdebugList').bootstrapTable('resetView', {height: parseInt(getClientHeight() - 93)});
})
完整版openlayer的例子及中文注释（完整中文版）的更多相关文章
- HTML5程序开发范例宝典 完整版 (韩旭等著) 中文pdf扫描版
HTML5程序开发范例宝典紧密围绕编程者在编程中遇到的实际问题和开发中应该掌握的技术,全面介绍了利用HTML进行程序开发的各方面技术和技巧.全书共16章,内容包括HTML网页布局.HTML基本元素.H ...
- 爱拼图游戏android源码完整版
这个是一款爱拼图游戏源码完整版,该游戏源码比较完整的,可以支持音乐的播放在游戏的玩的过程中,还可以控制系统的声音等,可以支持多种图片的选择来进行玩的,还可以根据自己的爱好选择不同的难度来的,级别分为: ...
- Java编程思想(第4版) 中文清晰PDF完整版
Java编程思想(第4版) 中文清晰PDF完整版 [日期:2014-08-11] 来源:Linux社区 作者:Linux [字体:大 中 小] <Java编程思想>这本书赢得了全 ...
- HTML5+JavaScript动画基础 完整版 中文pdf扫描版
<HTML5+JavaScript动画基础>包括了基础知识.基础动画.高级动画.3D动画和其他技术5大部分,分别介绍了动画的基本概念.动画的JavaScript基础.动画中的三角学.渲染技 ...
- Visual Studio 2010 SP1 中文升级补丁ISO完整版下载 (含多国语言)
最近事情比较多,差点忘记了这个VS2010 SP1的升级补丁更新了,程序员们赶快更新吧!这次发布的SP1包含了下列语言:英文,简体中文,繁体中文,法语,德语,印度语,日语,韩语,俄语以及西班牙语. V ...
- Python入门教程完整版（懂中文就能学会）
前几天给大家分享<从零学会Photoshop经典教程300集>的教程受到了广泛的关注,有人不知道怎么领取,居然称小编为"骗子". 不过小编的内心是强大的,网友虐我千百遍 ...
- JAVA帮助文档全系列 JDK1.5 JDK1.6 JDK1.7 官方中英完整版下载
JAVA帮助文档全系列 JDK1.5 JDK1.6 JDK1.7 官方中英完整版下载JDK(Java Development Kit,Java开发包,Java开发工具)是一个写Java的applet和 ...
- sed实例精解－－例说sed完整版
原文地址:sed实例精解--例说sed完整版 作者:xiaozhenggang 最近在学习shell,怕学了后面忘了前面的就把学习和实验的过程记录下来了.这里是关于sed的,前面有三四篇分开的,现在都 ...
- flexbox-CSS3弹性盒模型flexbox完整版教程
原文链接:http://caibaojian.com/flexbox-guide.html flexbox-CSS3弹性盒模型flexbox完整版教程 A-A+ 前端博客•2014-05-08•前端开 ...
随机推荐
- UTF-8编码占几个字节?
占2个字节的:带有附加符号的拉丁文.希腊文.西里尔字母.亚美尼亚语.希伯来文.阿拉伯文.叙利亚文及它拿字母则需要二个字节编码 占3个字节的:基本等同于GBK,含21000多个汉字 占4个字节的:中日韩 ...
- day 2Linux软件从主机安装到服务器和安装JDK软件
软件安装 1.如何上传安装包到服务器**可以使用图形化工具,如: filezilla**可以使用sftp工具: alt+p 调出后,用put命令上传上传(如果不cd指定目录,则上传到当前用户的主目录) ...
- 磁盘 -> 硬盘 -> c盘 && 内存
磁盘是计算机的外部存储器,分为两类,一类是硬盘,一类是软盘. (附:计算机的存储器有两类,一类是内部存储器(内存条是用半导体材料做成的),断电不会保存当前工作:一类是外部存储器,断了电也能可以保存.) ...
- day36 python学习gevent io 多路复用 socketserver *****
---恢复内容开始--- gevent 1.切换+保存状态 2.检测单线程下任务的IO,实现遇到IO自动切换 Gevent 是一个第三方库,可以轻松通过gevent实现并发同步或异步编程,在geven ...
- MFC信号量使用指南
DEMO程序:TestSemaphore_DEMO.rar 源代码:TestSemaphore_SRC.rar ---关键代码如下--- void CTestSemaphoreDlg::OnBnCli ...
- 微信JS-SDK官方示例程序
示例地址:http://203.195.235.76/jssdk/ /* * 注意: * 1. 所有的JS接口只能在公众号绑定的域名下调用,公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能 ...
- Android自动化测试中AccessibilityService获取控件信息（1）
Android自动化测试中AccessibilityService获取控件信息(1) 分类: android自动化测试2014-03-24 15:31 3455人阅读 评论(16) 收藏 举报 and ...
- css transition transform animation例子讲解
1.transition属性: transition属性是一个速记属性有四个属性:transition-property , transition-duration, transition-timin ...
- Discuz论坛管理的问题汇总
Discuz论坛在Linux上搭建成功了, 不得不说, 其功能是非常强大的, 可以满足已知的绝大多数的需求. 搭建完成后也有一些问题, 在这里汇总一下, 以便将来查阅. 1. 显示未处理用户信息, 但 ...
- scrapy 抓取拉勾网数据
其实很简单,却因为一些小问题,折腾不少时间,简要记录一下,以备后需. >> scrapy startproject lagou >> cd lagou >> scr ...