Werfen wir zunächst einen Blick auf die Renderings
Adresse des Online-Erlebnisses:https://geojson.hxkj.vip und Bereitstellung des Echtzeit-Downloads von GeoJson-Datendateien
Zu den herunterladbaren Daten gehören Geojson-Verwaltungsgrenzdaten auf Provinzebene, Geojson-Verwaltungsgrenzdaten auf Gemeindeebene, Geojson-Verwaltungsgrenzdaten auf Distrikt-/Kreisebene, vierstufige Verknüpfungsdaten nach Provinz-, Stadt- und Kreisstraßenverwaltungscodes (genau für die Gemeinde/Kreis). (Straßenebene), provinzielle fünfstufige Verwaltungsgesetze für Städte, Kreise, Straßen und Dörfer.
Vor einiger Zeit habe ich für mein Unternehmen eine Plattform zur Anzeige von Kartendaten basierend auf Echarts Map erstellt. Während des Entwicklungsprozesses stellte ich fest, dass die offizielle Website von Baidu keine Kartendownloads mehr anbietet, sodass ich nur hoffen kann, jemanden zu finden Das Internet, wer mir helfen kann. Gesammelte JSON-Dateien. Nach der Suche fand ich es, stellte jedoch fest, dass die meisten davon sehr alt waren und viele Gebiete tatsächlich administrativ neu aufgeteilt worden waren.
Daher fallen mir nur andere Möglichkeiten ein. Wenn ich mich daran erinnere, dass, wenn ich Amap normalerweise verwende, um nach einem bestimmten Ortsnamen zu suchen, scheinbar ein Grenzbereich für uns eingezeichnet ist, und dann spüre ich das da es Wenn Sie es zeichnen können, sollte es eine Möglichkeit geben, es von einigen Kanälen abzurufen, oder Amap stellt die entsprechende API bereit. Also bin ich zur offenen Amap-Plattform gegangen und habe die bereitgestellten APIs sorgfältig überprüft, haha, es gibt sie wirklich! Sobald die Schnittstelle eingerichtet ist, ist der nächste Schritt die Codierung.
Der erste Schritt besteht darin, Grenzdaten über die Amap-API abzurufen.
Anhand der API-Dokumentation können wir erkennen, dass die Schnittstelle zum Abrufen von Grenzdaten der Abfragedienst für den Verwaltungsbereich ist (AMap.DistrictSearch). Denken Sie vor der Nutzung dieses Dienstes daran, einen Schlüssel zu beantragen, der zum Aufrufen der AMAP-Schnittstelle und zum Beantragen der Adresse über den Zug verwendet wird: https://lbs.amap.com/dev/key /app .
1. Fügen Sie der Seite das JS-API-Eingabeskript-Tag hinzu und ersetzen Sie den „Schlüsselwert, den Sie beantragt haben“ durch den Schlüssel, den Sie gerade beantragt haben.
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=「您申请的key值」&plugin=AMap.DistrictSearch"></script>
2. Erhalten Sie Daten mit den folgenden Methoden, am Beispiel der Karte von China;
this.opts = {
subdistrict: 1, //返回下一级行政区
showbiz: false //最后一级返回街道信息
};
this.district = new AMap.DistrictSearch(this.opts);//注意：需要使用插件同步下发功能才能这样直接使用
this.district.search('中国', (status, result) => {
if (status == 'complete') {
this.getData(result.districtList[0], '', 100000);
}
});
getData(data, level, adcode) {//处理获取出来的边界数据
var subList = data.districtList;
if (subList) {
var curlevel = subList[0].level;
if (curlevel === 'street') {//为了配合echarts地图区县名称显示正常，这边街道级别数据需要特殊处理
let mapJsonList = this.geoJsonData.features;
let mapJson = {};
for (let i in mapJsonList) {
if (mapJsonList[i].properties.name == this.cityName) {
mapJson.features = [].concat(mapJsonList[i]);
}
}
this.mapData = [];
//这个mapData里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
this.mapData.push({name: this.cityName, value: Math.random() * 100, level: curlevel});
this.loadMap(this.cityName, mapJson);
this.geoJsonData = mapJson;
return;
}
//街道级以上的数据处理方式
this.mapData = [];
for (var i = 0, l = subList.length; i < l; i++) {
var name = subList[i].name;
var cityCode = subList[i].adcode;
//这个mapData里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
this.mapData.push({
name: name,
value: Math.random() * 100,
cityCode: cityCode,
level: curlevel
});
}
this.loadMapData(adcode);
}
},
3. Als nächstes verwenden Sie AMapUI.loadUI , um eine Instanz von DistrictExplorer zu erstellen, und verwenden Sie dann DistrictExplorer, um eine Instanz zu erstellen . Sie können die areaCode der Stadt entsprechend dem aktuellen Bedarf laden, um die geo Daten der Stadt zu erhalten
loadMapData(areaCode) {
AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
//创建一个实例
var districtExplorer = window.districtExplorer = new DistrictExplorer({
eventSupport: true, //打开事件支持
map: this.map
});
districtExplorer.loadAreaNode(areaCode, (error, areaNode) => {
if (error) {
console.error(error);
return;
}
let mapJson = {};
//特别注意这里哦，如果查看过正常的geojson文件，都会发现，文件都是以features 字段开头的，所以这里要记得加上
mapJson.features = areaNode.getSubFeatures();
this.loadMap(this.cityName, mapJson);
});
});
},
Der zweite Schritt besteht darin, Echarts zum Rendern der Grenzdaten zu verwenden.
Die Version von Echarts, die ich hier verwende, ist die neueste Version4.2.0. Das relevante Dokumentenzugriffsportal ist:https://echarts.baidu .com/option.html#series-map. Lesen Sie das Dokument nicht falsch. Es gibt mehrere Versionen davon. Der Schlüssel liegt darin, dass einige Eigenschaften jeder Version unterschiedlich sind. Daher sollte besonders darauf geachtet werden, dass die Version des Dokuments mit der importierten Echarts-Version konsistent bleibt.
1. Füge die JS-Datei in die Seite ein, die ich hier vorgestellt habebootstrap cdnDie bereitgestellte Datei
<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.min.js"></script>
2. Registrieren Sie Echarts und verwenden Sie die gerade über die Amap-API erhaltenen Daten, um sie in eine Karte zu rendern
//html
<div id="map"></div>
//注册并赋值给echartsMap
this.echartsMap = this.$echarts.init(document.getElementById('map'));
//通过loadMap函数加载地图
loadMap(mapName, data) {
if (data) {
this.$echarts.registerMap(mapName, data);//把geoJson数据注入echarts
//配置echarts的option
var option = {
visualMap: {
type: 'piecewise',
pieces: [
{max: 30, label: '安全', color: '#2c9a42'},
{min: 30, max: 60, label: '警告', color: '#d08a00'},
{min: 60, label: '危险', color: '#c23c33'},
],
color: '#fff',
textStyle: {
color: '#fff',
},
visibility: 'off'
},
series: [{
name: '数据名称',
type: 'map',
roam: false,
mapType: mapName,
selectedMode: 'single',
showLegendSymbol: false,
visibility: 'off',
itemStyle: {
normal: {
color: '#ccc',
areaColor: '#fff',
borderColor: '#fff',
borderWidth: 0.5,
label: {
show: true,
textStyle: {
color: "rgb(249, 249, 249)"
}
}
},
emphasis: {
areaColor: false,
borderColor: '#fff',
areaStyle: {
color: '#fff'
},
label: {
show: true,
textStyle: {
color: "rgb(249, 249, 249)"
}
}
}
},
data: this.mapData,//这个data里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
}]
};
this.echartsMap.setOption(option);
}
},
Wenn nach Abschluss dieses Schritts keine Probleme auftreten, liegt die Karte von China ruhig auf Ihrem Bildschirm!
Der dritte Schritt besteht darin, die Funktion der Erkundung von Provinzen, Städten und Landkreisen zu erkennen.
1. Klickereignis hinzufügen
this.echartsMap.on('click', this.echartsMapClick);
echartsMapClick(params) {//地图点击事件
if (params.data.level == 'street') return;//此处的params.data为this.mapData里的数据
this.cityCode = params.data.cityCode;
//行政区查询
//按照adcode进行查询可以保证数据返回的唯一性
this.district.search(this.cityCode, (status, result) => {
if (status === 'complete') {
this.getData(result.districtList[0], params.data.level, this.cityCode);//这个getData函数在前面已经定义过了
}
});
},
Dieses Projekt basiert aufVUE. Wenn Sie nach dem Lesen etwas nicht verstehen, können Sie eine Nachricht zur Erklärung hinterlassen.
Projekt-GitHub-Adresse: https://github.com/TangSY/echarts-map-demo
Download-Adresse für Provinz-, Stadt- und Landkreis-Geojson-Grenzdaten: https://geojson. hxkj .vip/
Gemeinde- und Straßen-Geojson-Download-Adresse: https://map.hxkj.vip