高德地图只显示部分区域

直接上代码吧
高德地图只能到最大到市级,也就是如果只显示一个县或者区的话只有想其他的办法

<div id="mountNode"></div>
<script>
			$('#mountNode').html('<div style="position: relative;">' +
				'<div id="china" style="display:none;position: absolute;left: 0;top: 0;"></div>' +
				'<div id="province" style="width: 50%;height:400px;position: absolute;right: 0;top: 0;"></div>' + 
				'</div>');

			// 调用高德 api 绘制底图以及获取 geo 数据
			var map = new AMap.Map('china', {
				zoom: 4
			});
			var colors = ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#316395", "#994499",
                "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707", "#651067", "#329262", "#5574a6", "#3b3eac"];
			// 当前聚焦的区域
			var currentAreaNode = void 0;

			AMapUI.load(['ui/geo/DistrictExplorer', 'lib/$'], function(DistrictExplorer) {
				// 创建一个实例
				var districtExplorer = window.districtExplorer = new DistrictExplorer({
					eventSupport: true, //打开事件支持
					map: map
				});

			
				//绘制某个区域的边界
				function renderAreaPolygons(areaNode) {
					var node = _.cloneDeep(areaNode);
					districtExplorer.clearFeaturePolygons();
					districtExplorer.renderSubFeatures(node, function(feature, i) {
						var fillColor = colors[i % colors.length];
						var strokeColor = colors[colors.length - 1 - i % colors.length];

						return {
							cursor: 'default',
							bubble: true,
							strokeColor: strokeColor, //线颜色
							strokeOpacity: 1, //线透明度
							strokeWeight: 1, //线宽
							fillColor: fillColor, //填充色
							fillOpacity: 0.35 //填充透明度
						};
					});

					//绘制父区域
					districtExplorer.renderParentFeature(node, {
						cursor: 'default',
						bubble: true,
						strokeColor: 'black', //线颜色
						strokeOpacity: 1, //线透明度
						strokeWeight: 1, //线宽
						fillColor: null, //填充色
						fillOpacity: 0.35 //填充透明度
					});
				}

				//切换区域后刷新显示内容
				function refreshAreaNode(areaNode) {
					districtExplorer.setHoverFeature(null);
					renderAreaPolygons(areaNode);
				}

				//切换区域
				function switch2AreaNode(adcode, callback) {
					if(currentAreaNode && '' + currentAreaNode.getAdcode() === '' + adcode) {
						return;
					}

					loadAreaNode(adcode, function(error, areaNode) {
						if(error) {
							if(callback) {
								callback(error);
							}
							return;
						}
						currentAreaNode = window.currentAreaNode = areaNode;
						refreshAreaNode(areaNode);
						if(callback) {
							callback(null, areaNode);
						}
					});
				}

				//加载区域
				function loadAreaNode(adcode, callback) {
					districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
						if(error) {
							if(callback) {
								callback(error);
							}
							return;
						}
						renderG2Map(areaNode); // 使用 G2 绘制地图

						if(callback) {
							callback(null, areaNode);
						}
					});
				}

				// 重庆,这里使用的是高德区域代码
				switch2AreaNode(500000);
			});

			// 开始使用 G2 绘制地图
			var provinceChart = void 0;

			function renderG2Map(areaNode) {
				var adcode = areaNode.getAdcode();
				var geoJSON = areaNode.getSubFeatures(); // 获取 geoJSON 数据
				var name = areaNode.getName();

				provinceChart && provinceChart.destroy();
				provinceChart = null;
				if(!geoJSON || currentAreaNode && '' + currentAreaNode.getAdcode() === '' + adcode) {
					return;
				}
				var dv = processData(geoJSON);
			    // start: 计算地图的最佳宽高
				debugger;
				var longitudeRange = dv.range('longitude');
				var lantitudeRange = dv.range('latitude');
				var ratio = (longitudeRange[1] - longitudeRange[0]) / (lantitudeRange[1] - lantitudeRange[0]);
				var width = void 0;
				var height = void 0;
				if(ratio > 1) {
					width = $('#province').width();
					height = width / ratio;
				} else {
					width = 300 * ratio;
					height = $('#province').height();
				}
				// end: 计算地图的最佳宽高
				provinceChart = new G2.Chart({
					container: 'province',
					width: width,
					height: height,
					padding: 0
				});
				provinceChart.source(dv);
				provinceChart.axis(false);
				//provinceChart.tooltip({
				//	showTitle: false
			    //});
				provinceChart.tooltip(false);

				provinceChart.polygon().position('longitude*latitude').style({
					stroke: '#fff',
					lineWidth: 1
				}).color('value', '#FF8C00');

				
				provinceChart.guide().text({
					position: ['min', 'max'],
					offsetY: 20,
					content: name,
					style: {
						fontSize: 14,
						fontWeight: 'bold'
					}
				});
				provinceChart.render();
			}

			function processData(geoJSON) {
				var mapData = {
					type: 'FeatureCollection',
					features: geoJSON
				};
				// 构造虚拟数据
				var userData = [];
				for(var i = 0; i < geoJSON.length; i++) {
					var name = geoJSON[i].properties.name;
					userData.push({
						name: name,
						value: Math.round(Math.random() * 1000)
					});
				}
				var ds = new DataSet();
				var geoDataView = ds.createView().source(mapData, {
					type: 'GeoJSON'
				}); // geoJSON 经纬度数据

				// 用户数据
				var dvData = ds.createView().source(userData);
				dvData.transform({
					type: 'geo.region',
					field: 'name',
					geoDataView: geoDataView,
					as: ['longitude', 'latitude']
				});

			    return dvData;
			}
		</script>

支持一下

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值