高德地图API的开发与代码编写
高德地图底层源码
/** 高德autonavi 地图API Define:begin */
var AutoNaviMap = function(mapOption){
this.map = null; //高德autonavi地图对象
this.mapWrap = mapOption.mapWrap; //地图容器
this.mapRange = mapOption.mapRange; //地图范围
this.centerPoint = mapOption.centerPoint; //中心点
this.GeoServerLayers = mapOption.GeoServerLayers; //GeoServer 图层参数
this.GeoServerlayerEntities = null; //GeoServer 图层实例对象
this.zoom = mapOption.zoom==undefined ? 15 : mapOption.zoom;
this.contextMenuPositon; //右键菜单位置
this.mapLayer;//管线图层
this.heatmap;
this.toolBar = null; // 地图oolBar插件
this.markers = [];
this.infoWindow = {}; //global infoWindow
this.polygon;
this.init = function(){
debugger;
var self = this;
if(!self.map){
var option = {resizeEnable : true, //监控地图容器尺寸变化,默认为false
zoom : self.zoom, //显示级别
mapStyle: "amap://styles/darkblue", //地图样式主题
features:['bg', 'point', 'building'], //地图展示元素
logo : false};
if(self.centerPoint && !$.isEmptyObject(self.centerPoint)){ //设置中心点
var transCoordinate = {
'lng':self.centerPoint.x,
'lat':self.centerPoint.y
};
if(!mapOption.noTransAmap) {
self.centerPoint.lng = self.centerPoint.x;
self.centerPoint.lat = self.centerPoint.y;
transCoordinate = self.get_GCJLngLat(self.centerPoint);
}
option['center'] = new AMap.LngLat(transCoordinate.lng, transCoordinate.lat);
}
self.map = new AMap.Map(self.mapWrap, option);
//地图单击事件
if(mapOption.click && $.isFunction(mapOption.click)) {
debugger;
self.map.on('click',function(e){
var mapPoint = getMapPoint(e); //经纬度
var screenPoint = getScreenPoint(e);
mapOption.click(mapPoint, screenPoint);
}); //点事件的获取
}
//地图缩放结束事件
if(mapOption.zoomend && $.isFunction(mapOption.zoomend)) {
self.map.on('zoomend',function(e){
mapOption.zoomend();
}); //点事件的获取
}
self.map.plugin(["AMap.ToolBar"], function() {
toolBarOption = {
offset:new AMap.Pixel(10,50)
}
toolBar = new AMap.ToolBar(toolBarOption);
self.map.addControl(toolBar);
});
//添加比例尺控件
self.map.plugin(["AMap.Scale"],function(){
self.map.addControl(new AMap.Scale());
});
//地图类型切换
self.map.plugin(["AMap.MapType"],function(){
var type= new AMap.MapType({
defaultType:0 //使用2D地图
});
self.map.addControl(type);
});
$(".amap-maptype-wrap").bind('click',function(){
if(self.mapLayer && self.map){
self.mapLayer.setMap(self.map);
}
}); // 绑定地图切换插件单击事件
}
//在高德地图上 叠加 标准wms图层
setTimeout(function(){
if(self.GeoServerLayers && self.GeoServerLayers.length>0){
self.GeoServerlayerEntities = {};
for(var i=0,len=self.GeoServerLayers.length; i<len; i++){
var geoItem = self.GeoServerLayers[i];
// 创建 WMS 标准图层
var version = geoItem.GeoServerVersion || '1.1.0';
var wms = new AMap.TileLayer.WMS({
url: geoItem.GeoServerLayerUrl,
blend: true,
tileSize: 256,
visible: false,
params: {'LAYERS': geoItem.GeoServerLayerName,VERSION:version}
});
self.GeoServerlayerEntities[geoItem.GeoServerLayerCode] = wms;
//wms.show();
wms.setMap(self.map);
}
}
}, 1000);
if(mapOption.openSatelliteLayer){
var satelliteLayer = new AMap.TileLayer.Satellite();
var roadNetLayer = new AMap.TileLayer.RoadNet();
var layers = [
satelliteLayer
]
// 添加到地图上
self.map.add(layers);
}
};
/**
* checkType : 选中还是取消选中
*/
this.geoAllLayerVisibleOrHide = function(checkType){
var self = this;
var _GeoServerlayerEntities = self.GeoServerlayerEntities;
for(var o in _GeoServerlayerEntities){
if(checkType){
_GeoServerlayerEntities[o].show();
}else{
_GeoServerlayerEntities[o].hide();
}
}
}
/**
* 控制geoServer图层 显示与隐藏
* pipeCode : 管线压力级制编码
* checkType : 选中还是取消选中
*/
this.geoServerLayerVisibleOrHide = function(pipeCode, checkType){
var self = this;
var _GeoServerlayerEntities = self.GeoServerlayerEntities;
var glayer = _GeoServerlayerEntities[pipeCode];
if(checkType){
glayer.show();
}else{
glayer.hide();
}
};
this.drawPolygon = function(mPolygon){
var _self = this;
var coordinatesList = [];
if (mPolygon.points.length > 0) {
$.each(mPolygon.points, function(coordinateIndex, coordinateEntry) {
if(coordinateEntry.lng && coordinateEntry.lat && Number(coordinateEntry.lng)>0 && Number(coordinateEntry.lat)>0){
var transCoordinate = {
'lng':coordinateEntry.lng,
'lat':coordinateEntry.lat
}
//若不是从天地图转换为高德地图,则不用转换坐标系
if(!mPolygon.noTransAmap) {
var transCoordinate = _self.get_GCJLngLat(coordinateEntry);
}
coordinatesList.push(new AMap.LngLat(transCoordinate.lng, transCoordinate.lat));
}
});
if(coordinatesList.length>0) {
polygon = new AMap.Polygon({
map:_self.map,
path: coordinatesList,//设置多边形边界路径
strokeColor: mPolygon.color?mPolygon.color:"#FF33FF", //线颜色
strokeOpacity: mPolygon.opacity?mPolygon.opacity:0.2, //线透明度
strokeWeight: mPolygon.width?mPolygon.width:3, //线宽
fillColor: mPolygon.fillColor?mPolygon.fillColor:"#1791fc", //填充色
fillOpacity: mPolygon.fillOpacity?mPolygon.fillOpacity:0.35,//填充透明度
zIndex:mPolygon.zIndex
});
}
}
return polygon;
};
this.drawLine = function(mLine){
var _self = this;
var polyLine;
var coordinatesList = [];
if (mLine.pionts.length > 0) {
$.each(mLine.pionts, function(coordinateIndex, coordinateEntry) {
if(coordinateEntry.lng && coordinateEntry.lat && Number(coordinateEntry.lng)>0 && Number(coordinateEntry.lat)>0){
var transCoordinate = {
'lng':coordinateEntry.lng,
'lat':coordinateEntry.lat
}
//若不是从天地图转换为高德地图,则不用转换坐标系
if(!mLine.noTransAmap) {
var transCoordinate = _self.get_GCJLngLat(coordinateEntry);
}
coordinatesList.push(new AMap.LngLat(transCoordinate.lng, transCoordinate.lat));
}
});
if(coordinatesList.length>0) {
polyLine = new AMap.Polyline({
id : mLine.id,
map:_self.map,
path: coordinatesList, //设置线覆盖物路径
strokeColor: mLine.color, //线颜色
strokeOpacity: mLine.opacity, //线透明度
strokeWeight: mLine.width, //线宽
strokeStyle: mLine.style, //线样式
strokeDasharray: mLine.dasharray //补充线样式
});
}
if(mLine.infowindow && !$.isEmptyObject(mLine.infowindow)) {
if(!$('body').find('#infowindow').length>0) {
var html = '<div id="infowindow" style="position:absolute;display:none" class="box_wraper"><div class="box_con"><p></p></div><div class="box_img"><img src="/HRSmartGas/platform/images/box_img.png"/></div></div>';
$('body').append(html);
}
polyLine.on('mouseover',function(e) {
$('body').find('#infowindow p').html(mLine.infowindow.content);
$('#infowindow').show();
$('#infowindow').css("left",e.pixel.x-$('#infowindow').width()/2);
$('#infowindow').css("top",e.pixel.y-$('#infowindow').height());
});
polyLine.on('mouseout',function(e) {
$('#infowindow').hide();
});
}
if(mLine.onClick){
polyLine.on('click',function(e) {
mLine.onClick(e);
});
}
}
return polyLine;
};
/**
* 删除点
* point 为map地图对象, drawPoint时返回
*/
this.removePoint = function(point){
this.map.remove(point);
};
this.removeLine = function(mLine){
var _self = this;
_self.map.remove(mLine);
};
this.removePolygon = function(polygon){
var _self = this;
_self.map.remove(polygon);
};
this.drawPoint = function(mPoint){
debugger;
var _self = this;
var transCoordinate = {
'lng':mPoint.lng,
'lat':mPoint.lat
};
var marker;
if(mPoint.lng && mPoint.lat && Number(mPoint.lng)>0 && Number(mPoint.lat)>0){
//若不是从天地图转换为高德地图,则不用转换坐标系
if(!mPoint.noTransAmap) {
transCoordinate = _self.get_GCJLngLat(mPoint);
}
var icon;
if(mPoint.type.imgUrl == "") {
icon = new AMap.Icon({
imageSize:new AMap.Size(mPoint.type.width,mPoint.type.height),
size: new AMap.Size(mPoint.type.width,mPoint.type.height), //图标大小
});
} else {
icon = new AMap.Icon({
imageSize:new AMap.Size(mPoint.type.width,mPoint.type.height),
size: new AMap.Size(mPoint.type.width,mPoint.type.height), //图标大小
image:mPoint.type.imgUrl
});
}
var pointOpitons = {
map:_self.map,
icon:icon,
position:[transCoordinate.lng,transCoordinate.lat],
offset:new AMap.Pixel(mPoint.type.xoffset, mPoint.type.yoffset), //偏移量
title:mPoint.type.title, //点的文字提示
extData:mPoint
};
marker = new AMap.Marker(pointOpitons);
mPoint.marker = marker;
if(mPoint.type.onClick && $.isFunction(mPoint.type.onClick)) {
marker.on('click',function(e){
debugger;
mPoint.type.onClick(e.target.getExtData(),null);
}); //点事件的获取
}
if(null != mPoint.labelContent && '' != mPoint.labelContent && 'undefined' != mPoint.labelContent){
marker.setLabel({
offset: new AMap.Pixel(20, -10), //显示位置
content: mPoint.labelContent //显示内容
});
}
_self.markers.push(mPoint);
}
if(mPoint.type.showInfo && mPoint.type.infowindow && !$.isEmptyObject(mPoint.type.infowindow)) {
debugger;
if(marker != undefined) {
var position = {
'lng':mPoint.lng,
'lat':mPoint.lat
};
if(!mapOption.noTransAmap) {
position = _self.get_GCJLngLat({'lng':mPoint.lng,'lat':mPoint.lat});
}
var infowindow = mPoint.type.infowindow;
var infoMouseOverWin = new AMap.InfoWindow({
isCustom:true,
content: infowindow.content,
offset: new AMap.Pixel(infowindow.xoffset,infowindow.yoffset)
});
infoMouseOverWin.open(_self.map, new AMap.LngLat(position.lng,position.lat));
_self.infoWindow.uniqueCode = mPoint.busiKey;
}
}
};
/**
* 展示自定义弹出框
*/
this.showInfoWindow = function(mPoint){
debugger;
var _self = this;
if(mPoint.type.infowindow && !$.isEmptyObject(mPoint.type.infowindow)) {
var position = {
'lng':mPoint.lng,
'lat':mPoint.lat
};
if(!mapOption.noTransAmap) {
position = _self.get_GCJLngLat({'lng':mPoint.lng,'lat':mPoint.lat});
}
var infowindow = mPoint.type.infowindow;
var infoMouseOverWin = new AMap.InfoWindow({
isCustom:true,
content: infowindow.content,
offset: new AMap.Pixel(infowindow.xoffset,infowindow.yoffset)
});
infoMouseOverWin.open(_self.map, new AMap.LngLat(position.lng,position.lat));
_self.infoWindow.uniqueCode = mPoint.busiKey;
}
}
this.getInfoWindowUnique = function(){
var _self = this;
return _self.infoWindow.uniqueCode;
}
this.clearGraphics = function(type) {
var _self = this;
for(var i =0; i<_self.markers.length; i++){
if(type){
if((_self.markers[i].node == type))
_self.map.remove(_self.markers[i].marker);
}else{
_self.map.remove(_self.markers[i].marker);
}
}
};
/**
* e 鼠标事件对象
*/
function getScreenPoint(e){
return new SreenPoint({x:e.pixel.x, y:e.pixel.y});
};
/**
* e 鼠标事件对象
*/
function getMapPoint(e){
return new MapPoint({'lng' : e.lnglat.lng, 'lat' : e.lnglat.lat});
};
//绘制管线图层
this.drawArcgisTile = function(url,token,callback) {
var _self = this;
if(_self.mapLayer){
mapLayer.setTileUrl(callback);
} else {
_self.mapLayer = new AMap.TileLayer({
zIndex:20,
getTileUrl: function(x,y,z){
return url+'/'+ z +'/'+ y +'/'+ x+'?token='+token;
}
});
_self.mapLayer.setMap(_self.map);
}
return _self.mapLayer;
};
//重新加载arcgis管线图层
this.reloadArcgisTile = function(){
if(_self.mapLayer && _self.map){
_self.mapLayer.setMap(_self.map);
}
}
//画热力图
this.drawHeatMap = function(heatMap) {
var _self = this;
var coordinatesList = [];
if (heatMap.data.length > 0) {
$.each(heatMap.data, function(coordinateIndex, coordinateEntry) {
if(coordinateEntry.lng && coordinateEntry.lat && Number(coordinateEntry.lng)>0 && Number(coordinateEntry.lat)>0){
var transCoordinate = {
'lng':coordinateEntry.lng,
'lat':coordinateEntry.lat
}
//若不是从天地图转换为高德地图,则不用转换坐标系
if(!heatMap.noTransAmap) {
transCoordinate = _self.get_GCJLngLat(coordinateEntry);
}
coordinatesList.push(new AMap.LngLat(transCoordinate.lng, transCoordinate.lat));
}
});
}
if(coordinatesList.length>0) {
_self.map.plugin(["AMap.Heatmap"], function() {
//初始化heatmap对象
_self.heatmap = new AMap.Heatmap(_self.map, {
radius: 80, //给定半径
opacity: [0, 0.8]
});
//设置数据集
_self.heatmap.setDataSet({
data: coordinatesList,
max: 2
});
});
}
}
/**
*画圆 获取中心点及半径
*20180122
*/
this.draw =function (){
var _self = this;
var mouseTool = new AMap.MouseTool(_self.map);
//自定义图形样式
mouseTool.polyline({
strokeColor:"#f50", // 线条颜色,十六进制
strokeOpacity:0.5, // 线条透明度
strokeWeight:10, // 线条宽度
strokeStyle:"dashed" // 线条样式 solid || dashed
});
//在地图中添加MouseTool插件
mouseTool.circle(); //用鼠标工具画圆
AMap.event.addListener( mouseTool,'draw',function(e){ //添加事件
console.log(e.obj.getRadius());//获取半径
console.log(e.obj.getCenter());//获取中心点
showChoseDevice(e.obj.getRadius(),e.obj.getCenter());
mouseTool.close(true);//关闭当前鼠标操作
});
} ;
//画圆
this.drawCircle = function(circle){
var _self = this;
var center = new AMap.LngLat(circle.center.lng,circle.center.lat);
var circleOptions = {
center:center,
zIndex:1000,
radius:circle.radius, //半径1公里
strokeColor: "#F33", //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 3, //线粗细度
fillColor: "#ee2200", //填充颜色
fillOpacity: 0.35//填充透明度
};
var _circle = new AMap.Circle(circleOptions);
_circle.setMap(_self.map);
circle.marker = _circle;
}
this.circleContains = function(circle,point) {
var _self = this;
var transCoordinate = {
'lng':point.lng,
'lat':point.lat
}
//若不是从天地图转换为高德地图,则不用转换坐标系
if(!point.noTransAmap) {
transCoordinate = _self.get_GCJLngLat(point);
}
var _point = new AMap.LngLat(transCoordinate.lng,transCoordinate.lat);
var isContains = circle.marker.contains(_point);
return isContains;
}
//绑定地图缩放事件
this.bindZoomChange = function(callBack) {
var _self = this;
_self.map.on('zoomchange', function(e) {
callBack(_self.map.getZoom());
});
}
//绑定地图单击事件
this.bindClick = function(callBack) {
var _self = this;
_self.map.on('click', function(e) {
callBack(e.lnglat.getLng(),e.lnglat.getLat(),_self.map.getZoom());
});
}
/**
* 获取缩放等级
*/
this.getZoom = function(){
var _self = this;
return _self.map.getZoom();
}
//显示或隐藏热力图
this.showHeatMap = function(isShow) {
var _self = this;
if(_self.heatmap) {
if(isShow) {
_self.heatmap.show();
} else {
_self.heatmap.hide();
}
}
}
//添加右键菜单获取坐标
this.addGetLnglatMenu = function() {
var _self = this;
var menu = new AMap.ContextMenu();
//添加菜单项
menu.addItem("发送任务",function() {
debugger;
mapDbClick(contextMenuPositon.getLat(),contextMenuPositon.getLng());
//alert(contextMenuPositon.getLng() + "," + contextMenuPositon.getLat());
},0);
//为地图注册rightclick事件获取鼠标点击出的经纬度坐标
var clickEventListener = _self.map.on('rightclick', function(e) {
menu.open(_self.map,e.lnglat);
contextMenuPositon = e.lnglat;
});
};
this.setCenter = function(lnt,lat) {
var transCoordinate = {
'lng':lnt,
'lat':lat
};
var _self = this;
if(!mapOption.noTransAmap) {
_self.centerPoint.lng = lnt;
_self.centerPoint.lat = lat;
transCoordinate = _self.get_GCJLngLat(_self.centerPoint);
}
_self.map.setCenter(new AMap.LngLat(transCoordinate.lng, transCoordinate.lat));
};
this.closeInfoWindow = function(infoWindow) {
var _self = this;
_self.map.clearInfoWindow();
};
this.fromLngLatToContainerPixel = function(mPoint) {
var _self = this;
var retObj = _self.map.lnglatToPixel(new AMap.LngLat(mPoint.lng,mPoint.lat));
return new SreenPoint(retObj);
};
this.fromContainerPixelToLngLat = function(mPoint) {
var _self = this;
var retObj = _self.map.pixelToLngLat(new AMap.Pixel(mPoint.x,mPoint.y));
return new MapPoint(retObj);
};
this.setFitView = function() {
var _self = this;
_self.map.setFitView();
};
this.zoomOut = function() {
var _self = this;
_self.map.zoomOut();
}
this.get_GCJLngLat = function(mPoint) {
var retObj = {};
var CT = new CoordinateTransform(mPoint.lat, mPoint.lng, CoordinateSys.WGS84);//CoordinateSys.WGS84 是转换前的坐标系
var retValue = new Object();
if (CT.WGS84ToGCJ02()== false)//WGS84ToBD09()方法 WGS84转BD坐标,如果是转成火星坐标改调用WGS84ToGCJ02()
console.info(CT.get_ErrMsg());
retObj.lat = CT.get_GCJLat() == 0 ? mPoint.lat : CT.get_GCJLat();//获取转换后的高德坐标纬度
retObj.lng = CT.get_GCJLng() == 0 ? mPoint.lng : CT.get_GCJLng();//获取转换后的高德坐标精度
return retObj;
};
};
function openWindowTask(tltle,url){
var options = {
modal : true,
title : tltle,
collapsible : false,
minimizable : false,
maximizable : false,
closable : true,
closed : false
};
var uid = "self_card_";
options["id"] = uid;
winFormDesigner = UIFactory.getUI(uid);
if(!winFormDesigner){
winFormDesigner = UIFactory.create(xpad.ui.Window, options);
}
var root = jQuery("body");
var offset = root.offset();
var winleft = 0;
var wintop = 0;
var newSize = {};
newSize["left"] = (jQuery("body").width()-450)/2;
newSize["top"] = 20;
newSize["width"] = 450;//jQuery("body").width();
newSize["height"] = 500;//jQuery("body").height();
winFormDesigner.window("resize", newSize);
setTimeout(function(){
winFormDesigner.loadURL(url);
}, 0);
}
AutoNaviMap.CLASS_NAME = "AutoNaviMap";
/**高德autonavi 地图API Define:end */
引入高德地图
var MyMap = function(mapOption){
this.map = new mapOption.mapClass(mapOption); //地图对象
this.map.init(); //初始化地图组件
/**
* 画线
*/
this.drawLine = function(line){
return this.map.drawLine(line);
};
/**
* 画点
*/
this.drawPoint = function(point){
return this.map.drawPoint(point);
};
};
MyMap.CLASS_NAME = "MyMap";
$(function(){
var mapOption = {
'mapWrap' : 'pipeMap', //地图容器
/*'mapRange' : {'xmin':70.45193,'ymin':15.14801,
'xmax':137.424587,'ymax':53.976474}, //坐标范围
*/ 'centerPoint' : {'x':116.383105, 'y':39.974672}, //中心点
'mapClass' : AutoNaviMap, //地图组件
'isAddNavigationControl':true, //工具条
'isAddControl':false, //类别切换
'zoom': 10,
'zoomend': function(mapPoint, screenPoint){
controlLayers(cntenMap.getZoom());
},
openSatelliteLayer:false
};
myMap = new MyMap(mapOption);
})
实现自己业务的代码,画点画线与信息框
$(function(){
var mapOption = {
'mapWrap' : 'leakMap', //地图容器
/*'mapRange' : {'xmin':70.45193,'ymin':15.14801,
'xmax':137.424587,'ymax':53.976474}, //坐标范围
*/ 'centerPoint' : {'x':116.383105, 'y':39.974672}, //中心点
'mapClass' : AutoNaviMap, //地图组件
'isAddNavigationControl':true, //工具条
'isAddControl':false, //类别切换
'zoom': 10,
'zoomend': function(mapPoint, screenPoint){
controlLayers(cntenMap.getZoom());
},
'click' : function(mapPoint, screenPoint){ //地图点击事件
console.log('地图坐标:(' + mapPoint.lng + ', ' + mapPoint.lat +');屏幕坐标:(' + screenPoint.x + ',' + screenPoint.y + ')');
},
openSatelliteLayer:false
};
myMap = new MyMap(mapOption);
})
//所有已绘制的线和点
var lines = [],drawPoints = [];
var pipe= {
/**
* 画线
*/
drawLine:function(points){
if(!$.isEmptyArray(lines)){
myMap.removeLine(lines[0]);
}
//画线
var line = {
'color' : '#FF0033',
'width' : 3,
pionts:points,
};
lineObj = myMap.drawLine(line);
lines.push(lineObj);
},
/**
* 画点
*/
drawPoint:function(point){
myMap.drawPoint(point);
drawPoints.push(point);
},
/**
* 删除点
*/
removePoint:function(){
if(!$.isEmptyArray(drawPoints)){
for(var i=0;i<drawPoints.length;i++){
myMap.removePoint(drawPoints[i].marker );
}
}
}
}
实现画点业务
var points = [];
var data = retData.data;
if(!$.isEmptyArray(data)){
pipe.removePoint();
for(var i=0;i<data.length;i++){
if($.isEmptyStr(data[i].lng) || $.isEmptyStr(data[i].lat)){
continue;
}
var point = {
"lng":data[i].lng,
"lat":data[i].lat,
};
points.push(point)
var drawPoint = {
"lng":data[i].lng,
"lat":data[i].lat,
"type":pointType[1]
}
if(0 == i){
drawPoint.type = pointType[3]
}
else if((data.length - 1) == i){
drawPoint.type = pointType[4]
}
var info = [];
info.push("<div class='input-card content-window-card'>");
info.push("<div style=\"padding:7px 0px 0px 0px;\">");
info.push("<p class='input-item'>开始时间:"+ data[i].startTime +"</p>");
info.push("<p class='input-item'>结束时间:"+ data[i].endTime +"</p>");
info.push("<p class='input-item'>检测人 :"+data[i].checkUser +"</p></div></div>");
drawPoint.type["infowindow"] ={
content: info.join(""),
xoffset: 0,
yoffset:-31,
width:360,
height:100
};
drawPoint.type["onClick"] = function(point, e,i){
debugger;
pipe.showInfoWindow(point);
}
pipe.drawPoint(drawPoint);
}
pipe.drawLine(points);
}
其他方式使用
高德地图API
var AutoNaviMap = function(mapOption){
this.map = null; //高德autonavi地图对象
var mapWrap = mapOption.mapWrap; //地图容器
var mapRange = mapOption.mapRange; //地图范围
var centerPoint = mapOption.centerPoint; //中心点
var mousetool = null;
this.init = function(){
var _self = this;
if(!_self.map){
var option = {resizeEnable : true, //监控地图容器尺寸变化,默认为false
zoom : 14, //显示级别
logo : false};
if(centerPoint && !$.isEmptyObject(centerPoint)){ //设置中心点
var transCoordinate = {};
transCoordinate.lng = centerPoint.x;
transCoordinate.lat = centerPoint.y;
if(!mapOption.noTransAmap) {
centerPoint.lng = centerPoint.x;
centerPoint.lat = centerPoint.y;
transCoordinate = _self.get_GCJLngLat(centerPoint);
}
option['center'] = new AMap.LngLat(transCoordinate.lng, transCoordinate.lat);
}
_self.map = new AMap.Map(mapWrap, option);
var title = new AMap.TileLayer({
getTileUrl: function (x, y, z) {
var x0 = -400;
var y0 = 400;
var resolution = 1.1943;
var col = Math.floor((x - x0) / (256 * resolution));
var row = Math.floor((y - y0) / (256 * resolution));
var url = mapOption.dynamicMapServiceUrl+'/tile/' + z + '/' + y + '/' + x;
// var url = 'https://114.115.205.250:6443/arcgis/rest/services/BeiJingGas/DemoPip/MapServer/tile/' + z + '/' + y + '/' + x;
return url+'?token=';
}, zIndex: 20
});
title.setMap(_self.map);
//地图单击事件
if(mapOption.click && $.isFunction(mapOption.click)) {
_self.map.on('click',function(e){
var mapPoint = getMapPoint(e); //经纬度
var screenPoint = getScreenPoint(e);
mapOption.click(mapPoint, screenPoint);
}); //点事件的获取
}
//设置地图范围
if(mapRange && !$.isEmptyObject(mapRange)){ //设置地图范围
var bounds = new AMap.Bounds([mapRange.xmin, mapRange.ymin],[mapRange.xmax, mapRange.ymax]);
_self.map.setBounds(bounds);
}
//工具条
if(mapOption.isAddNavigationControl) {
AMap.plugin(["AMap.ToolBar"], function() {
_self.map.addControl(new AMap.ToolBar());
});
}
if(mapOption.isAddControl) {
AMap.plugin(['AMap.MapType'],function(){
_self.map.addControl(new AMap.MapType());
});
}
}
};
this.drawLine = function(mLine){
debugger;
var _self = this;
var polyLine = {};
var coordinatesList = [];
if (mLine.pionts.length > 0) {
$.each(mLine.pionts, function(coordinateIndex, coordinateEntry) {
if(coordinateEntry.lng && coordinateEntry.lat && Number(coordinateEntry.lng)>0 && Number(coordinateEntry.lat)>0){
//若不是从天地图转换为高德地图,则不用转换坐标系
var transCoordinate = coordinateEntry;
if(!mLine.noTransAmap) {
transCoordinate = _self.get_GCJLngLat(coordinateEntry);
}
coordinatesList.push(new AMap.LngLat(transCoordinate.lng, transCoordinate.lat));
}
});
if(coordinatesList.length>0) {
polyLine = new AMap.Polyline({
map:_self.map,
path: coordinatesList, //设置线覆盖物路径
strokeColor: mLine.color, //线颜色
strokeOpacity: mLine.opacity, //线透明度
strokeWeight: mLine.width, //线宽
strokeStyle: mLine.style, //线样式
strokeDasharray: mLine.dasharray //补充线样式
});
}
if(mLine.infowindow && !$.isEmptyObject(mLine.infowindow)) {
/*var infowindow = new AMap.InfoWindow({
content:mLine.infowindow.content,
offset:new AMap.Pixel(mLine.infowindow.xoffset,mLine.infowindow.yoffset),
size:new AMap.Size(mLine.infowindow.width,mLine.infowindow.height)
});*/
if(!$('body').find('#infowindow').length>0) {
var html = '<div id="infowindow" style="position:absolute;display:none" class="box_wraper"><div class="box_con"><p></p></div><div class="box_img"><img src="/platform/images/box_img.png"/></div></div>';
$('body').append(html);
}
polyLine.on('mouseover',function(e) {
// infowindow.open(_self.map,e.target.getPosition());
$('body').find('#infowindow p').html(mLine.infowindow.content);
$('#infowindow').show();
//获取地图容器在浏览器中的偏移
var offset = $('#'+ mapWrap).offset();
$('#infowindow').css("left",e.pixel.x-$('#infowindow').width()/2 + offset.left);
$('#infowindow').css("top",e.pixel.y-$('#infowindow').height() + offset.top);
});
polyLine.on('mouseout',function(e) {
// infowindow.close();
$('#infowindow').hide();
});
}
}
return polyLine;
};
this.drawPoint = function(mPoint){
debugger;
var _self = this;
var transCoordinate = mPoint;
//若不是从天地图转换为高德地图,则不用转换坐标系
if(!mPoint.noTransAmap) {
transCoordinate = _self.get_GCJLngLat(mPoint);
}
var marker = {};
if(mPoint.lng && mPoint.lat && Number(mPoint.lng)>0 && Number(mPoint.lat)>0){
var icon = new AMap.Icon({
size : new AMap.Size(mPoint.type.width,mPoint.type.height),
imageSize:new AMap.Size(mPoint.type.width,mPoint.type.height),
image:mPoint.type.imgUrl
});
var pointOpitons = {
map:_self.map,
icon:icon,
position:[transCoordinate.lng,transCoordinate.lat],
offset:new AMap.Pixel(mPoint.type.xoffset, mPoint.type.yoffset), //偏移量
title:mPoint.type.title, //点的文字提示
extData:mPoint
};
marker = new AMap.Marker(pointOpitons);
if(mPoint.type.onClick && $.isFunction(mPoint.type.onClick)) {
marker.on('click',function(e){
debugger;
mPoint.type.onClick(e.target.getExtData(),e);
}); //点事件的获取
}
}
if(mPoint.type.infowindow && !$.isEmptyObject(mPoint.type.infowindow)) {
/*var infowindow = new AMap.InfoWindow({
content:mPoint.type.infowindow.content,
offset:new AMap.Pixel(mPoint.type.infowindow.xoffset,mPoint.type.infowindow.yoffset),
size:new AMap.Size(mPoint.type.infowindow.width,mPoint.type.infowindow.height)
});*/
if(!$('body').find('#infowindow').length>0) {
var html = '<div id="infowindow" style="position:absolute;display:none" class="box_wraper"><div class="box_con"><p></p></div><div class="box_img"><img src="/platform/images/box_img.png"/></div></div>';
$('body').append(html);
}
marker.on('mouseover',function(e) {
// infowindow.open(_self.map,e.target.getPosition());
$('body').find('#infowindow p').html(mPoint.type.infowindow.content);
var tmpPixel = _self.map.lngLatToContainer(e.target.getPosition());
$('#infowindow').show();
//获取地图容器在浏览器中的偏移
var offset = $('#'+ mapWrap).offset();
$('#infowindow').css("left",tmpPixel.x-$('#infowindow').width()/2 + offset.left);
$('#infowindow').css("top",tmpPixel.y-$('#infowindow').height() + offset.top - Math.abs(e.target.getOffset().y));
});
marker.on('mouseout',function(e) {
// infowindow.close();
$('#infowindow').hide();
});
}
return marker;
};
this.fromLngLatToContainerPixel = function(mPoint) {
var _self = this;
var retObj = _self.map.lnglatToPixel(new AMap.LngLat(mPoint.lng,mPoint.lat));
return new SreenPoint(retObj);
};
this.fromContainerPixelToLngLat = function(mPoint) {
var _self = this;
var retObj = _self.map.pixelToLngLat(new AMap.Pixel(mPoint.x,mPoint.y));
return new MapPoint(retObj);
};
this.setFitView = function() {
var _self = this;
_self.map.setFitView();
};
this.get_GCJLngLat = function(mPoint) {
var retObj = {};
var CT = new CoordinateTransform(mPoint.lat, mPoint.lng, CoordinateSys.WGS84);//CoordinateSys.WGS84 是转换前的坐标系
if (CT.WGS84ToBD09()== false)//WGS84ToBD09()方法 WGS84转BD坐标,如果是转成火星坐标改调用WGS84ToGCJ02()
console.info(CT.get_ErrMsg());
retObj.lat = CT.get_GCJLat() == 0 ? mPoint.lat : CT.get_GCJLat();//获取转换后的高德坐标纬度
retObj.lng = CT.get_GCJLng() == 0 ? mPoint.lng : CT.get_GCJLng();//获取转换后的高德坐标精度
return retObj;
};
/**
* 设置中心点
* lng 纬度
* lat 经度
*/
this.centerAt = function(lng, lat){
this.map.setCenter(new AMap.LngLat(lng, lat));
};
/**
* 设置标记
*/
this.markPoint = function(lng, lat){
// return this.map.Marker({
// position: new AMap.LngLat(lng, lat),
// map: _self.map
// });
return new AMap.Marker({
position: new AMap.LngLat(lng, lat),
map: _self.map
});
};
/**
* 删除点
* point 为map地图对象, drawPoint时返回
*/
this.removePoint = function(point){
this.map.remove(point);
};
/**
* 删除线
* line 为map地图对象, drawLine时返回
*/
this.removeLine = function(line){
this.map.remove(line);
};
/**
* 设置级别
* zoom Number
*/
this.setZoom = function(zoom){
this.map.setZoom(zoom);
};
/**
* 获取可视区域
*/
this.getBounds = function(){
//TODO 返回MapBounds 对象
var bounds = this.map.getBounds();
// alert('lng:' + bounds.xmin + ';lat:' + bounds.ymin); //左下角, 西南坐标
// alert('lng:' + bounds.xmax + ';lat:' + bounds.ymax); //右上角, 东北坐标
return new MapBounds(bounds.southwest.lng, bounds.southwest.lat, bounds.northeast.lng, bounds.northeast.lat);
}
/**
* e 鼠标事件对象
*/
function getScreenPoint(e){
return new SreenPoint({x:e.pixel.x, y:e.pixel.y});
};
/**
* e 鼠标事件对象
*/
function getMapPoint(e){
return new MapPoint({'lng' : e.lnglat.lng, 'lat' : e.lnglat.lat});
};
/**
* 显示弹框
*/
this.showInfoWindow = function(infoWindow){
var _self = this;
_self.infoWindow = new AMap.InfoWindow({
content: infoWindow.content //使用默认信息窗体框样式,显示信息内容
});
_self.infoWindow.open(this.map, [infoWindow.lng, infoWindow.lat]);
};
/**
* 圈选覆盖物
*/
this.selectOverlay = function(callBack){
var _self = this;
AMap.plugin(["AMap.MouseTool"], function() {
_self.map.setDefaultCursor("crosshair");
mousetool = new AMap.MouseTool(_self.map);
//通过rectOptions更改拉框放大时鼠标绘制的矩形框样式
var rectOptions = {
strokeStyle: "solid",
strokeColor: "#FF0000",
fillColor: "#C0C0C0",
fillOpacity: 0.5,
strokeOpacity: 1,
strokeWeight: 2
};
mousetool.rectangle(rectOptions);
AMap.event.addListener(mousetool ,"draw",function(e){
var curBounds = e.obj.getBounds();
var allPoints = _self.map.getAllOverlays("marker");
var resultMarker = [];
for(var i = 0; i<allPoints.length;i++) {
if(curBounds.contains(allPoints[i].getPosition())) {
resultMarker.push(allPoints[i].getExtData());
}
}
_self.map.remove(e.obj);
mousetool.close();
_self.map.setDefaultCursor("pointer");
if($.isFunction(callBack)) {
callBack(resultMarker);
}
});
});
};
};
AutoNaviMap.CLASS_NAME = "AutoNaviMap";
引入mapload.js 初始化js
var tiledMapServiceURL="";
var pipelineMapServiceURL = "http://1246:8080/arcgis/rest/services/gis/MercatorPip/MapServer";
var geometryServiceURL = "";
var companylat;
function mapLoad(){
if (companylat && companylat != "null" && companylat != "" && companylat != '""') {
} else {
companylng = 532000;
companylat = 358000;
}
var mapOption = {
'mapWrap' : 'map_con', //地图容器
'dynamicMapServiceUrl' : pipelineMapServiceURL,
'tiledMapServiceUrl' : tiledMapServiceURL,
'mapRange' : {
'xmin' : 409439.40635501774,
'ymin' : 328530.8110858157,
'xmax' : 630292.6726449793,
'ymax' : 394303.4774500003
},
'centerPoint' : {
'x' :companylng ,
'y' :companylat
}, //中心点
'mapClass' : AutoNaviMap, //地图组件
//地图点击事件
'click' : function(mapPoint, screenPoint){
//console.log('地图坐标:(' + mapPoint.lng + ', ' + mapPoint.lat +');屏幕坐标:(' + screenPoint.x + ',' + screenPoint.y + ')');
},
'wkid':4326
};
map = new Map(mapOption);
}
function loadMap() {
var mapOption = {
'mapClass' : ArcgisMap,
'mapWrap' : 'map_con',
'dynamicMapServiceUrl' : pipelineMapServiceURL,
'tiledMapServiceUrl' : tiledMapServiceURL,
'mapRange' : {
'xmin' : 409439.40635501774,
'ymin' : 328530.8110858157,
'xmax' : 630292.6726449793,
'ymax' : 394303.4774500003
},
'centerPoint' : {
'x' : 532000,
'y' : 358000
},
'wkid' : 21420
};
map = new Map(mapOption);
}
/*通过服务获取信息*/
function GetInfoByPost(url, params, isAsync,callback) {
//var params = {"companyID": companyid, "types": type, "name": name}
$.ajax({
type: "post",
url: url,
data: params,
async: isAsync, // 设置成同步
success: function(json) {
if (json.retStatus == 1) {
callback(json);
}else {
alert(json.message);
}
}
});
}
自定义地图API js
var Map = function(mapOption){
this.map = new mapOption.mapClass(mapOption); //地图对象
this.map.init(); //初始化地图组件
/**
* 画线
*/
this.drawLine = function(line){
return this.map.drawLine(line);
};
/**
* 画点
*/
this.drawPoint = function(point){
return this.map.drawPoint(point);
};
/**
* 地图经纬度坐标转换为平面地图像素坐标
*/
this.fromLngLatToContainerPixel = function(point) {
return this.map.fromLngLatToContainerPixel(point);
};
/**
* 平面地图像素坐标转换为地图经纬度坐标
*/
this.fromContainerPixelToLngLat = function(point) {
return this.map.fromContainerPixelToLngLat(point);
};
/**
* 根据覆盖物设置合适的视野
*/
this.setFitView = function() {
this.map.setFitView();
};
/**
* 删除点
* point 为map地图对象, drawPoint时返回
*/
this.removePoint = function(point){
this.map.removePoint(point);
}
/**
* 删除线
* line 为map地图对象, drawLine时返回
*/
this.removeLine = function(line){
this.map.removeLine(line);
}
/**
* 设置中心点
* lng 经度
* lat 纬度
*/
this.centerAt = function(lat, lng){
this.map.centerAt(lat, lng);
}
/**
* 设置级别
* zoom Number
*/
this.setZoom = function(zoom){
this.map.setZoom(zoom);
}
/**
* 地图可视区域
* 返回对象: MapBounds
*/
this.getBounds = function(){
return this.map.getBounds();
}
/**
* 圈选要素
* layer : 子图层索引
* strWhere : 查询条件
* callBack : 回调函数, 返回feature列表
*/
this.selectFeature = function(layer, strWhere, callBack){
this.map.selectFeature(layer, strWhere,callBack);
}
/**
* 获取圈选覆盖物
*/
this.selectOverlay = function(callBack){
this.map.selectOverlay(callBack);
}
this.showInfoWindow = function(infoWindow){
this.map.showInfoWindow(infoWindow);
}
};
Map.CLASS_NAME = "Map";
加载地图组件
var root = null;
var Map;
var initZoom = 14;
window.onload=function(){
root = $("#root").val();
init();
}
function init(){
mapLoad();
Map.map.map.onZoomStart = function() {
}
Map.map.map.onUpdateStart = function() {
}
Map.centerAt('116.397477', '39.908692');
Map.setZoom(initZoom);
}
function drowLine(pionts, color){
var mLine = {
'pionts' : pionts,
'color' : color,
'width' : 3,
'onClick' : function(line, e) {
if($.isFunction(onclick)){
onclick(line, e);
}
}
};
return Map.drawLine(mLine);
}
function markPoint(x, y, markData, flag){
Map.markPoint(x, y);
}
function getAll(){
$.ajax({
type : "POST",
url : root + "/getAllInfo",
data : {},
success : function(illegalPlaceData){
for(var i=0; i < illegalPlaceData.GL_ILLEGAL_PLACE.length; i++){
x = Data.PLACE[i].data.PLACE_X;
y = Data.PLACE[i].data.PLACE_Y;
illegalPlacePoints.push(drowPoint(x, y, 'wzzy.png', PLACE[i], 'ZY', function(point,e){
var screenPoint = {x:e.clientX, y:e.clientY};
var content = infoWindowStrategy(point);
var infoWindow = {content:content.html, lng:e.lnglat.lng, lat:e.lnglat.lat};
Map.showInfoWindow(infoWindow);
}));
}
}
});
}
function getExceptionInfo(){
$.ajax({
type : "POST",
url : root + "/getExceptionInfo",
data : {},
success : function(exceptionData){
for(var i=0; i < exceptionData.POINT.length; i++){
x = exceptionData.POINT[i].data.LEAKPOINT_X;
y = exceptionData.POINT[i].data.LEAKPOINT_Y;
exceptionPoints.push(drowPoint(x, y, 'psd.png', exceptionData.GL_LEAKPOINT[i], 'PSD', function(point,e){
var screenPoint = {x:e.clientX, y:e.clientY};
var content = infoWindowStrategy(point);
var infoWindow = {content:content.html, lng:e.lnglat.lng, lat:e.lnglat.lat};
Map.showInfoWindow(infoWindow);
}));
}
}
});
}
function drowPoint(zbx, zby, img, pdata, flag, onclick) {
var point = {
'lng' : zbx,
'lat' : zby,
"flag":flag,
"data":pdata,
"onclick":onclick,
'type' : {
'imgUrl' : root + "/platform/cusviews/complex/images/" + img,
"height" : 25,
"width" : 25,
"xoffset" : 0,
"yoffset" : 1,
'onClick' : function(p,e) {
if($.isFunction(p.onclick)){
p.onclick(p,e);
}
}
}
};
return Map.drawPoint(point);
}
function infoWindowStrategy(point){
var html = null;
var width = 0;
if(point.flag == "WZZY"){
var html = "<div class=\"tip_con\" style=\"width:260px;height:auto\">"+
" <div class=\"tip_tab tab_tipb\">"+
" 档案 "+
" <div class=\"turn\" style=\"display: block; opacity: 1;\">"+
" <div class=\"tip_table\">"+
"<table cellspacing='0' cellpadding='0' border='0'>" +
"<tr><td width='50'>名称:</td><td width='*'>"+(point.data.data.NAME||"")+"</td></tr>"+
"<tr><td width='50'>单位:</td><td width='*'>"+(point.data.data.ORG||"")+"</td></tr>" +
"<tr><td width='50'>地址:</td><td width='*'>"+(point.data.data.ADDRESS||"")+"</td></tr>" +
"<tr><td width='80'>坐标X(经度):</td><td width='*'>"+(point.data.data.PLACE_X||"")+"</td></tr>" +
"<tr><td width='80'>坐标Y(纬度):</td><td width='*'>"+(point.data.data.PLACE_Y||"")+"</td></tr>" +
"</table>"+
" </div>"+
" </div>"+
"</div>" +
"</div>";
}
return {"html":html,"width":280};
}
function openBasic(id){
var href = root + '/platform/views/StdListView.jsp?func=WELL&extWhere=and GL_GATEWELL_ID='+id;
showWindow("档案", href);
}
function clearMap(){
removePoint(gateWellPoints);
removePoint(illegalPlacePoints);
removePoint(exceptionPoints);
removePoint(userPoints);
removePoint(anodePilePoints);
removePoint(mashroomPoints);
cMap.removeLine(trajectoryLine);
$("#userCheckbox").attr("checked",false);
}
function removePoint(points){
for(var i=0; i < points.length; i++){
Map.removePoint(points[i]);
}
}
function showWindow(title,url){
windowView(title);
setTimeout(function(){
winFormDesigner.loadURL(url);
}, 0);
}
function windowView(title){
var options = {
modal : true,
title : title,
collapsible : false,
minimizable : false,
maximizable : false,
closable : true,
closed : false
};
var uid = "self_card_";
options["id"] = uid;
winFormDesigner = UIFactory.getUI(uid);
winFormDesigner = UIFactory.create(xpad.ui.Window, options);
var root = jQuery("body");
var offset = root.offset();
var winleft = 0;
var wintop = 0;
var newSize = {};
newSize["left"] = 0;
newSize["top"] = 0;
newSize["width"] = jQuery("body").width();
newSize["height"] = jQuery("body").height();
winFormDesigner.window("resize", newSize);
}
具体使用
初始化地图组件
var point1 = {
'lng' : zbx,
'lat' : zby,
"flag":flag1,
"data":pdata,
'type' : {
'imgUrl' : root + "/platform/cusviews/complex/images/" + img,
"height" : 25,
"width" : 25,
"xoffset" : 0,
"yoffset" : 1
}
};
var content1 = infoWindowStrategy(point1);
var even={};
even.target={};
even.target.getPosition = function(){
return {lng:zbx, lat:zby,O:parseFloat(zbx)+(116.23146639084285-116.22542672247853),P:parseFloat(zby)+(39.815803909704194 - 39.81458279123017)};
}
var infoWindow1 = {content:content1.html, even:even};
Map.centerAt(zbx, zby);
Map.showInfoWindow(infoWindow1);
}
function playLine(){
var lineArr = [];
$.ajax({
type : "POST",
url : "/queryLine",
data : {'userId' : userId},
success : function(retData){
for(var i=0; i < retData[1].pointsKey.length; i++){
for(var j=0;j<retData[0][retData[1].pointsKey[i]].length;j++){
lineArr.push({'lng':retData[0][retData[1].pointsKey[i]][j].data.POINT_LNT, 'lat':retData[0][retData[1].pointsKey[i]][j].data.POINT_LAT});
}
Line.push(drowGjs(lineArr));
lineArr.length=0;
}
}
});
}
function drowGjs(dataList){
startPoints.push(drowPoint1(dataList[0].lng,dataList[0].lat,'qdzb.png',dataList[0],"",""));
endPoints.push(drowPoint1(dataList[dataList.length-1].lng,dataList[dataList.length-1].lat,"zb.png",dataList[dataList.length-1],"",""));
return drowLine(dataList, '#ff00cc');
}
画点
function showPoints(_this) {
var sbItems = $(_this);
if (sbItems.attr("checked")) {// 选中发送请求话点
var param = $(sbItems).val();
doAjax(param, function(list) {
var ps = new Array();
for(var i=0;i<list.length;i++){
var map = list[i];
var y = '513659.98';//map.Ypoint;
var x = '304492.51';//map.XPoint;
var point = drowPoint(x,y,"",function(piont,e){
alert(11);
});
ps.push(point);
}
points[param] = ps;
});
} else {// 删除点
var ps = points[$(sbItems).val()];
if(ps){
for(var i=0;i<ps.length;i++){
cntenMap.removePoint(ps[i]);
}
}
points[$(sbItems).val()] = null;
}
}
//画点
function drowPoint(pointx, pointy, pointImg, onclick) {
var point = {
'lng' : pointy,
'lat' : pointx,
'type' : {
'imgUrl' : root + "/static/images/qshg.png",
"height" : 18,
"width" : 18,
"xoffset" : 0,
"yoffset" : 9,
'onClick' : function(point, e) {
if($.isFunction(onclick)){
onclick(point,e);
}
}
}
};
return Map.drawPoint(point);
}
画线
$.ajax({
type : "POST",
url : getContextPath() + "/getChilds",
data : {"ids" : ids},
success : function(data) {
if (data) {
$.each(data,function(id,list){
var points = [];
for(var i=0;i < list.length; i++){
x = list[i].data.XLJCXX_DETAIL_ZBX;
y = list[i].data.XLJCXX_DETAIL_ZBY;
points.push({'lng' : y, 'lat' : x});
var mPoint = drowPoints(x, y, "QIU",id,list[i].data, function(point,e){
lineClick(point,e);
});
}
drowLine(points, lineClick);
});
}
}
});