高德地圖只顯示部分區域

直接上代碼吧
高德地圖只能到最大到市級,也就是如果只顯示一個縣或者區的話只有想其他的辦法

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

支持一下

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章