EPSG:32651坐标系的地图怎么显示echarts散点图

0 投票

地图创建代码

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坐标系的地图是可以正常显示

8月 27, 2019 分类:  360次浏览 | 用户: 440981 才疏学浅 (12 分)

1个回答

0 投票
官网范例中用3857坐标系测试了一下是正常的,建议检查一下传入的数据是否正确
8月 27, 2019 用户: 于浩 登峰造极 (5,665 分)
数据没有问题 我用EPSG:4326坐标系的图也是正常的 但是使用EPSG:32651坐标系的就显示不出来 使用L.marker方法可以在地图上标点
你私信我一下你的qq号吧
给您发了
...