Question

地图创建代码

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);

经纬度转平面坐标方法

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 图层类

function loadEffectScator(areaId, mapId) {
	$.ajax({
		url : QDSODB_PATH + '/sec/home/ripplesFigure',
		async : false,
		dataType : "json",
		data : {
			areaId : areaId,
			areaLevel : level
		//	mapId : mapId
		},
		success : function(data) {
			areaNames = data.areaNames;
			areaIds = data.areaIds;
			scopes = data.scopes;
			nums = data.nums;
		}
	});
	// 调用getCentroid方法，取中心点数组
	var centroids = getCentroid(scopes);
	//拆中心点数组构造data,存放涟漪点数据
	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 addMarker(lon,lat,areaName,areaId,count,num){
	var icon = L.icon({
        iconUrl: '../../img/securityMonitoring/sec_lianyi_bg.jpg',
        iconSize:     [50,50]
    });
	var marker = L.marker([lat, lon], {icon: icon}).addTo(map);
	marker.on('mouseover', function(e) {
		mousemove(marker,count,areaName,num);
	});
	marker.on('mouseout', function (e) {
	    this.closePopup();
	});
}