地图创建代码
url = mapParm.mapNames.mapUrl;
url = host+url;
lonlat_x = mapParm.mapNames.longitude; //经度
lonlat_y = mapParm.mapNames.latitude; //纬度
map_zoom = mapParm.mapNames.zoom;
level = "1";
vecotrLayer = new SuperMap.Layer.Vector("vectorLayer");
var crs = L.Proj.CRS("WGS84", {
origin: [238354.12,4028108.24 ],
bounds: L.bounds([234119.7 , 4022197.83] , [243282.63 , 4033298.93])
});
map = L.map('map', {
crs: crs,
center:[ lonlat_y,lonlat_x ],
dragging:true,
doubleClickZoom:true,
logoControl:false,
attributionControl:false,
scrollWheelZoom : true, // 滚轮缩放
zoomControl : true, // 缩放控件
zoom:3,
maxZoom:5
});
L.supermap.tiledMapLayer(url, {
transparent: true
}).addTo(map);
//加载涟漪点
loadEffectScator(areaId, mapId);
散点加载方法
var datas = [];
var j = 0;
for (var i = 0; i < centroids.length - 1; i += 2) {
// data格式value中：经度，纬度，显示颜色程度
var count = nums[j];//态势值
var l = conversion(centroids[i], centroids[i + 1]);
console.log(l);
var parm = {
name : areaNames[j],
value : [l.x, l.y, count]
};
addMarker(l.x, l.y, areaNames[j],areaIds[j], count, nums[j]);
j +=1;
datas.push(parm);
}
option = {
tooltip : {
trigger : 'item',
formatter : "",
show : "false"
},
visualMap : {
min : 0,
max : 100,
calculable : true,
bottom : '3%',
left : '1%',
show : false,
textStyle : {
color : '#fff'
}
},
legend : {
orient : 'vertical',
y : 'bottom',
x : 'right',
data : [ 'pm2.5' ],
textStyle : {
color : '#fff'
}
},
geo : {
map : 'qdjc',
label : {
emphasis : {
show : false
}
},
// silent:true,
roam : false,
// left:'8%',
aspectScale : 1.5,
itemStyle : {
normal : {
areaColor : '#082856',
borderType : 'solid',
borderWidth : 1,
shadowColor : 'rgba(111, 122, 255, 1)',
shadowBlur : 100,
shadowOffsetX : 5,
adowOffsetY : 5,
borderColor : '#04EBFC',
opacity : 0
},
emphasis : {
areaColor : '#082856',
borderType : 'solid',
borderWidth : 1,
shadowColor : 'rgba(111, 122, 255, 1)',
shadowBlur : 100,
shadowOffsetX : 100,
shadowOffsetY : 50,
borderColor : '#04EBFC',
opacity : 0
}
},
regions : []
},
// 色彩选择器
visualMap:{
type: 'piecewise',
pieces: [
{min: 60,color:'lime'},
{min: 30, max: 60,color:'yellow'},
{max: 30,color:'red'}
],
//color : [ 'red','yellow', 'lime'],
textStyle : {
color : '#fff'
},
show : false
},
series : [ {
type : 'effectScatter',
coordinateSystem : 'leaflet',
rippleEffect : {
period : 4,
scale : 10,
brushType : 'fill'
},
symbol : 'circle',
symbolSize : 15,
data : datas,
label : {
emphasis : {
formatter : '{b}',
position : 'left',
show : true
}
},
itemStyle : {
normal : {
borderType : 'solid',
borderWidth : 2,
borderColor : '#04EBFC',
opacity : 0
},
emphasis : {
show : false,
borderType : 'solid',
borderWidth : 0,
borderColor : '#04EBFC',
opacity : 0
}
},
} ]
};
L.supermap.echartsLayer(option).addTo(map);
坐标转换方法
function conversion(lon,lat) {
proj4.defs("EPSG:4326","+proj=longlat +datum=WGS84 +no_defs");
proj4.defs("EPSG:32651","+proj=utm +zone=51 +datum=WGS84 +units=m +no_defs");
var sourceProj = new Proj4js.Proj("EPSG:4326");
var destProj = new Proj4js.Proj("EPSG:32651");
var p = new Proj4js.Point(lon,lat);
Proj4js.transform(sourceProj,destProj,p);
return p;
}
无论使用的是经纬度还是转换后的平面坐标都显示不了echarts图 如果换EPSG:4326坐标系的地图是可以正常显示
