Всем привет, я фронтенд маленький невезучий вангли.
В последнее время я был занят развитием бизнеса и проверкой знаний, поэтому статью не обновлял. Я только недавно сделал детализацию и карту происхождения карты в моем бизнесе. Просто сделайте это статьей. Поделиться с тобой. Конечно, если эту фичу нужно сделать в недавнем проекте. Вы также можете клонировать код напрямую. Реализуйте соответствующие функции в соответствии с вашими потребностями.
Карта ECharts
jsonфайлы можно найти наGithubнайти в. Вы также можете скопировать прямо с адреса проекта.
На этот раз с省市区下钻Займемся делом. Я также написал это в моем новом проекте. Благоустройство еще не проводилось. Проект разработан с помощью Vue, React, JQuery... и т.д. можно ссылаться по идеям. Национальная карта должна иметь дело только с еще одним уровнем конфигурации. Прочитать статью. Я думаю, я должен быть в состоянии понять
Блок-схема и основные эффекты (не развернуто)
Блок-схема выглядит так. Когда контейнер ECharts инициализируется, карта регистрируется. Загрузите и зарегистрируйте различные компоненты в соответствии с вашими потребностями. затем установитеOptionConfig. Таким образом, карта будет отображаться в определенном вами DOM-контейнере.
Инициализировать контейнер
В шаблон добавьте идентификатор с именемmapтег div какEChartsконтейнер инициализатора.
<template>
<div class="home">
<a-breadcrumb>
<a-breadcrumb-item
v-for="[key, value] in hashMap" :key="key">
<span @click="readyMap(key, value)">{{value.name}}</span>
</a-breadcrumb-item>
</a-breadcrumb>
<!-- map容器 -->
<div id="map" style="width: 500px;height: 500px;"></div>
</div>
</template>
Впоследствии, вmountedинициализация во время цикла объявленияmapконтейнер, используется ли он здесьrefещеdocumentПолучите это в своем собственном стилеDOM
mounted () {
this.$nextTick(() => {
this.cityMap = echarts.init(document.getElementById('map'))
this.registerMap()
})
}
После первого знакомства последовалоregisterMapЭтот метод в основном используется для регистрации и рисования карты. Итак, давайте посмотрим, что он делает.
карта
registerMapПохоже, что имя немного недоразумение. Это также то, что я не задумчив, на самом деле это эквивалентноmain, который эквивалентен контейнеру методов, как показано на рисунке ниже, разделение серии карт на модуль на самом деле проще для понимания. а такжеregisterMapроль этихmodule methodsЗагрузите его, вы можете видетьrendHEADметод, на самом деле это метод рисования основной карты, в этой статье используется определенная провинция в качествеHEADГоловной слой, то их взаимосвязь выглядит как односвязный список, а города нижнего уровня выводятся по секциям. Итак, давайте посмотрим, как они нарисованы, не так ли?
-
rendHEADрисовать карты провинций -
rendCityКарта городской территории - Huizhi
registerMap () {
console.log('开始注册地图')
// 加载头部地图
this.rendHEAD()
// 点击事件
this.cityMap.on('click', $mod => {
const { name, value } = $mod.data
switch ($mod.data.zoom) {
case 1:
this.rendCity(name, value)
this.setHashMap($mod.data.zoom + 1, name, value)
break
case 2: {
const oneMap = {
type: 'FeatureCollection',
features: [$mod.data.data],
parent: value,
zoom: 3
}
echarts.registerMap(name, oneMap)
this.renderMap(name, [{
name: name,
parent: value,
zoom: 3
}])
this.setHashMap($mod.data.zoom + 1, name, value)
} break
case 3:
this.rendHEAD()
this.clearHashMap()
break
}
})
}
Нарисуйте города под уровнем головы (провинция)
JiangxiMapчто мы проходимrequireпринес вJSON, это можно решить с помощью ajax-запроса или загрузки модуля в соответствии с вашими предпочтениями. просто нужноjsonСодержимое файла в формате .JSONсерединаfeaturesНеобходимая информация о городе более низкого уровня записывается, и в цикле содержимое названия города собирается в массив, который в конечном итоге будет использоваться какEChartsизdataдля отображения, вы можете настроить данные, которые вам нужны. Обрабатывать будущие события кликов. потомECharts.registerMapзарегистрировать информацию о карте и, наконец, передатьrenderMapспособ отображения карты.
rendHEAD () {
const mapName = []
JiangxiMap.features.forEach(city => {
// 城市名称信息
mapName.push({
// 名称
name: city.properties.name,
// 城市编码，对应文件名
value: city.id,
// 层级
zoom: 1
})
})
// 注册
echarts.registerMap('江西省', JiangxiMap)
// 加载
this.renderMap('江西省', mapName)
}
Нарисуйте контент на уровне города
При рисовании провинциального содержанияmapNameМассив объектов конфигурации. При нажатии на область карты ECharts будет возвращен объект текущего города. Как показано$mod.dataэто входящие данные. Ссылаясь на вышеизложенное, быстро становится понятно, что это за данные. согласно сvalueЧтобы импортировать или запросить файл конфигурации номера для текущего города, структура аналогична нарисованной провинции. тот же поток. траверсfeaturesНа этот раз я получил все данные округа и района под текущим городом. Обратите внимание, что вся пройденная коробка будет помещена вcountyName[data], пусть это будет доставлено в их соответствующие графства. Почему это делается Следующие графики округов объяснят. Как тыква, рисующая совок.
// 绘制市级别地图
rendCity (name, value) {
// name代表的是该地区中文名称
// value 代表行政编号，如：3600000
const fileName = value
const cityData = require(`@/plugin/map/city/${fileName}.json`)
echarts.registerMap(name, cityData)
// 县区名称配置
const countyName = []
cityData.features.forEach(county => {
countyName.push({
name: county.properties.name,
value: null,
data: county,
parent: value,
zoom: 2
})
})
// 加载地图
this.renderMap(name, countyName)
},
Нарисуйте контент округа
Из-за независимости графства содержания. Это означает, что подчиненных в округе нет. Поэтому нет необходимости в файле конфигурации для отображения подчиненных. Когда был нарисован последний городской район, вEcharts的 dataпрямо в城市数据. Таким образом, его можно использовать для подделки блока и отображения его отдельно. То есть по признаку города отбрасываются карты, не входящие в округ.
Когда вы нажимаете на графство карты, верхний слой будет введенdataЭто конфигурация карты текущего округа. Но поскольку узлов нет, его нельзя использовать какjsonИспользуя регистрацию напрямую, Z вместо этого создал слой маски. можно увидетьoneMap, что эквивалентно надеванию на него оболочки, когда оно равно:
- Содержимое, отображаемое на карте уровня города: ['Округ 1', 'Округ 2', 'Район 1']
- Содержимое, отображаемое после установки шаблона: ['текущий округ']
Через упаковку отображение карты округа можно получить с помощью метода рендеринга.
// 生成单独的县区数据，
const oneMap = {
type: 'FeatureCollection',
features: [$mod.data.data],
value: null,
parent: value,
zoom: 3
}
// 注册
echarts.registerMap(name, oneMap)
// 加载
this.renderMap(name, [{
name: name,
parent: value,
zoom: 3
}])
метод загрузки рендмап
По умолчаниюoption, является фиксированным содержанием. В основном функция рисования. а такжеrendMapявляется представлением графа. Например, текстовое содержимое, стили, некоторые вещи, которые нужно показать. входящийmapName,cityNameListдва параметра. Через входящий контент генерируется различные фрагменты карты. Таким образом, предварительный процесс рисования завершен. Следующее, чтобы сделать некоторые функции для эффекта щелчка.
- mapName: отображаемое имя зарегистрированной карты.
- cityNameList: Зарегистрируйте данные карты, дайте
optionsDataзначение
// 运行地图
renderMap(mapName, cityNameList) {
option.series = [{
name: mapName,
// 地图类型
type: 'map',
mapType: mapName,
nameMap: mapName,
label: {
normal: {
show: true,
textStyle: {
color: '#303753',
fontSize: 13
}
},
emphasis: {
show: true,
textStyle: {
color: '#2a8ab3',
fontSize: 16
}
}
},
// 加载值
data: cityNameList,
itemStyle: {
normal: {
areaColor: 'rgb(78, 163, 151)',
borderWidth: 2,
borderColor: 'rgb(34, 195, 170)',
label: {
show: true,
textStyle: {
color: 'rgb(0, 152, 217)',
fontSize: 12
}
}
},
emphasis: {
areaColor: '#0f6471',
label: {
show: true,
textStyle: {
color: '#fff',
fontSize: 15
}
}
}
}
}]
this.cityMap.setOption(option)
}
Нажмите, чтобы сменить город
Не забудьте добавить в пользовательскийdataв данных. я держуzoom. Ниже я прохожуzoomСделано различие событий щелчка. пройти черезzoomя используюswitchВыбираются различные уровни действий по событию клика. Если по всей стране, то от1->2->3стал1->2->3->4уровень. Теоретически они все нарисованы по тыкве.
this.cityMap.on('click', $mod => {
const {
name,
value
} = $mod.data
switch ($mod.data.zoom) {
case 1:
this.rendCity(name, value)
this.setHashMap($mod.data.zoom + 1, name, value)
break
case 2: {
const oneMap = {
type: 'FeatureCollection',
features: [$mod.data.data],
value: null,
parent: value,
zoom: 3
}
echarts.registerMap(name, oneMap)
this.renderMap(name, [{
name: name,
parent: value,
zoom: 3
}])
this.setHashMap($mod.data.zoom + 1, name, value)
}
break
case 3:
this.rendHEAD()
this.clearHashMap()
break
}
})
информация о стеке
Здесь есть все, кроме крошек сверху. Это также соответствует бизнес-функциям. Я не буду вдаваться в подробности. Принцип прост.MapЗначение не может повторяться, тогдаkeyдля уровня.valueдля содержания. БудуzoomИерархическая информация составляет стек. Очистите следующие элементы при возврате. Когда вы открываете карту слой за слоем, стек выглядит так, как показано на рисунке ниже. Когда уровень в стеке извлекается, элемент, который выходит первым, будет удален. Достигнут необратимый прогресс. Дополнительные сведения см. в следующих двух методах в исходном коде. очень простой.
Адрес, связанный с исходным кодом
Исходный код Vue:Нажмите, чтобы перейти
файл карты:Нажмите, чтобы перейти
Библиотека компонентов пользовательского интерфейса ищет звезду
адрес проекта Elegant-UI:Нажмите, чтобы перейти
Суммировать
Написав эту статью поздно ночью, я вдруг почувствовал сонливость. Глядя на мелкий дождь за окном. думал о себе. Разве это не дрейфует без корней, как капли дождя в небе? Может быть, только написав несколько статей, вы сможете добавить немного веселья в свою унылую жизнь. В последнее время я немного устал от учебы. Если вы хотите провести национальную развертку, это та же идея, не болееHEADЭто просто национальная карта. Добавлен еще один узел.整体的逻辑是不变的.
Если эта статья была вам полезна, пожалуйста, поставьте мне лайк и подарите мне трехуровневый апгрейд.