ユーザーが州または市を選択すると、対応する地域が強調表示されます。
図に示すように:
前のユーザーが江蘇省を選択したため、江蘇省のマップ セクションが現在強調表示されています。前のユーザーが成都市を選択した場合、マップは次のように四川省の領土に変更され、成都市が強調表示されます。
引き続きドリルダウンして、強調表示された領域を選択できます。
共有ツールは次のとおりです: DataV.GeoAtlas 地理ガジェット シリーズ
Adcode コードを使用して、全国の地図セクションを表示できます。
知らせ！知らせ！具体的な手順はこちら！
1. マップを保存するコンテナを作成します
<div id="charts"></div>2. コンテナを入手する
myChart = echarts.init(document.getElementById("charts"));3. Amap を使用して adcode コードを取得します。ここでは axios を使用して取得します。
axios
.get(
`https://restapi.amap.com/v3/geocode/geo?address=${
district?city:!district && city?province:!district && !city?'中国':'中国'
}&output=JSON&key=af092dccf*********cf19ade46`
)
.then((res) => {
adcode = res.data.geocodes[0].adcode;
})ここで注意すべき点がいくつかあります。
${district?city:!district && city?province:!district && !city?'中国':'中国'}上記のコードの意味は、地区名 (晋江区) を取得した場合は都市名 (成都市) を使用して地図を生成する必要があり、都市名 (成都市) を取得した場合は省名を取得することです。ここでは (四川省) を使用する必要があります。) を使用して地図を生成するなど、省名 (四川省) を取得した場合は、国全体 (中国) を使用して地図を生成します。(もちろんこれらのパラメータはバックエンドから取得したデータです)
key=af092dccf1***********9ade46このキーは Amap で申請したキーです。申請方法は Baidu で確認できます。
adcode = res.data.geocodes[0].adcode;次に、現在選択されているエリアのアドコードを取得しました。
4. アドコード コードを通じて地域地図を取得します。これは、上で共有したDataV.GeoAtlas 地理ガジェット シリーズです。
開封後はこんな感じです。
こちらが地図を入手できるリクエストアドレスです。アドレスの 100000 は中国語のアドコードです。別のアドコード コードを入力してみると、左側にさまざまな地域の地図が表示されます。
具体操作:
myChart.showLoading();
axios
.get(
`https://geo.datav.aliyun.com/areas_v3/bound/${
adcode == 0 ? 100000 : adcode
}_full.json`
)
.then((geoJson) => {
console.log(geoJson);
//获取所有省、市
// console.log(geoJson.data.features);
let allData = geoJson.data.features;
let seriesData = [];
allData.forEach((item) => {
// console.log(item.properties.name);
// console.log(item);
let obj;
if (item.properties.name) {
if (
item.properties.name == province ||
item.properties.name == city ||
item.properties.name == district
) {
// console.log(item.properties.center);
setLongitudeLatitude(item.properties.center);
obj = {
name: item.properties.name,
value: measure,
selected: true,
};
} else {
obj = {
name: item.properties.name,
selected: false,
};
}
seriesData.push(obj);
}
});
myChart.hideLoading();
echarts.registerMap("ZG", geoJson.data);
myChart.setOption(
(option = {
title: {},
tooltip: {
trigger: "item",
},
series: [
{
type: "map",
map: "ZG",
silent: true, //禁用地图的hover事件
label: {
show: true,
},
data: seriesData,
zoom: 1, //当前视角的缩放比例
roam: true, //是否开启平游或缩放
scaleLimit: {
//滚轮缩放的极限控制
min: 1,
max: 3,
},
},
],
})
);
});コードの次の部分は、強調表示された領域を見つけて、series.data をロードすることです。
次に完全なコードを見てみましょう。
let myChart;
let option;
const renderChart = (province, city, district, measure) => {
myChart = echarts.init(document.getElementById("charts"));
let adcode;
axios
.get(
`https://restapi.amap.com/v3/geocode/geo?address=${
district?city:!district && city?province:!district && !city?'中国':'中国'
}&output=JSON&key=af092dc********cf19ade46`
)
.then((res) => {
adcode = res.data.geocodes[0].adcode;
myChart.showLoading();
axios
.get(
`https://geo.datav.aliyun.com/areas_v3/bound/${
adcode == 0 ? 100000 : adcode
}_full.json`
)
.then((geoJson) => {
console.log(geoJson);
//获取所有省、市
let allData = geoJson.data.features;
let seriesData = [];
allData.forEach((item) => {
// console.log(item.properties.name);
// console.log(item);
let obj;
if (item.properties.name) {
if (
item.properties.name == province ||
item.properties.name == city ||
item.properties.name == district
) {
// console.log(item.properties.center);
setLongitudeLatitude(item.properties.center);
obj = {
name: item.properties.name,
value: measure,
selected: true,
};
} else {
obj = {
name: item.properties.name,
selected: false,
};
}
seriesData.push(obj);
}
});
myChart.hideLoading();
echarts.registerMap("ZG", geoJson.data);
myChart.setOption(
(option = {
title: {},
tooltip: {
trigger: "item",
},
series: [
{
type: "map",
map: "ZG",
silent: true, //禁用地图的hover事件
label: {
show: true,
},
data: seriesData,
zoom: 1, //当前视角的缩放比例
roam: true, //是否开启平游或缩放
scaleLimit: {
//滚轮缩放的极限控制
min: 1,
max: 3,
},
},
],
})
);
});
});
option && myChart.setOption(option);
};質問がある場合はチャットしましょう。ただし、返信は少し遅れます。ハハハッハッハ