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