Schauen Sie sich zunächst die Renderings an
Online-Erlebnisadresse: https://geojson.hxkj.vip , und bietet Echtzeit-Download von GeoJson-Datendateien
Zu den herunterladbaren Daten gehören Geojson-Verwaltungsgrenzdaten auf Provinzebene, Geojson-Verwaltungsgrenzdaten auf Gemeindeebene, Geojson-Verwaltungsgrenzdaten auf Bezirks-/Kreisebene sowie vierstufige Verknüpfungsdaten von Provinz-, Stadt-, Kreis- und Straßenverwaltungscodes (genau für Gemeinde/Kreis). (Straßenebene), provinzielle fünfstufige Verwaltungsgesetze für städtische Gebiete, Kreise, Straßen und Dörfer.
Vor einiger Zeit habe ich für das Unternehmen eine Reihe von Kartendaten-Anzeigeplattformen basierend auf Echarts-Karten erworben. Während des Entwicklungsprozesses stellte ich fest, dass Baidu offiziell keine Karten-Downloads bereitstellt, sodass ich nur hoffen kann, dass ich die gesammelten JSON-Dateien finden kann von einigen großen Leuten im Internet. Ich habe es gefunden, aber ich habe festgestellt, dass die meisten davon alt sind und viele Bereiche tatsächlich in Verwaltungsabteilungen unterteilt wurden.
Daher fallen mir nur andere Möglichkeiten ein. Wenn ich mich daran erinnere, dass es, wenn ich normalerweise die Gaode-Karte verwende, um nach einem Ortsnamen zu suchen, so aussieht, als ob ein Grenzbereich für uns eingezeichnet wird, denke ich, dass es so sein sollte, da es eingezeichnet werden kann Es kann eine Möglichkeit sein, es von bestimmten Kanälen zu erhalten, oder Gaode Map stellt die entsprechende API bereit. Also ging ich zur offenen Gaode-Plattform und überprüfte sorgfältig die von ihm bereitgestellte API, haha, tatsächlich! Bei der Schnittstelle besteht der nächste Schritt im Codieren.
Der erste Schritt besteht darin, Grenzdaten über die Gaode-API abzurufen
Wenn Sie die API-Dokumentation konsultieren, können Sie erkennen, dass die Schnittstelle zum Abrufen von Grenzdaten der Verwaltungsregionsabfragedienst ( AMap.DistrictSearch) ist. Denken Sie daran, vor der Nutzung dieses Dienstes einen Schlüssel zu beantragen, der zum Aufruf der Gaode-Schnittstelle verwendet wird, und eine direkte Zugadresse zu beantragen: https://lbs.amap.com/dev/key/app .
1. Fügen Sie der Seite das Eingabeskript-Tag der JS-API 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 können Sie AMapUI.loadUI eine DistrictExplorerInstanz erstellen, um eine Instanz zu erstellen, und dann DistrictExplorerdie Instanz verwenden, um die Daten areaCodeder Stadt entsprechend den aktuellen Anforderungen zu ladengeo
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, die Grenzdaten mit Echarts zu rendern
Die hier verwendete Echarts-Version ist die neueste Version 4.2.0. Zugehörige Dokumente finden Sie im Adressportal: https://echarts.baidu.com/option.html#series-map . Lesen Sie das Dokument nicht falsch. Es besteht aus mehreren Versionen. Der Schlüssel liegt darin, dass einige Attribute jeder Version unterschiedlich sind. Achten Sie daher besonders darauf, dass die Version des Dokuments mit der importierten Echarts-Version übereinstimmt.
1. Stellen Sie die JS-Datei auf der Seite vor, bootstrap cdndie von mir hier vorgestellte 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 soeben über die Gaode-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 es nach diesem Schritt kein Problem gibt, liegt die Karte von China still auf Ihrem Bildschirm!
Der dritte Schritt besteht darin, die Erkennungsfunktion von Provinzen, Städten und Kreisen zu realisieren
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 auf VUEEntwicklung. Wenn Sie nach dem Lesen etwas nicht verstehen, können Sie eine Nachricht zur Erklärung hinterlassen.
GitHub-Adresse des Projekts: https://github.com/TangSY/echarts-map-demo
Download-Adresse der Geojson-Grenzdaten von Provinzen, Städten und Landkreisen: https://geojson.hxkj.vip/
Township Street Geojson-Download-Adresse: https: //map .hxkj.vip