echarts 中国地图渲染加省市渲染查询

地图

<div class="map"

v-loading="dataLoading"

element-loading-background="rgba(255, 255, 255, 0.1)">

<div class="map4"

id="mapLocation"

style="height: 8rem;"></div>

</div>

import echarts from 'echarts/lib/echarts'

data数据定义

geoJson: [],

mapChart: null,

parentInfo: [{ cityName: '中国', code: '100000', level: 'all' }],

mapData: [],

specialProvince: {

内蒙古自治区: '内蒙古',

西藏自治区: '西藏',

新疆维吾尔自治区: '新疆',

宁夏回族自治区: '宁夏',

广西壮族自治区: '广西',

香港特别行政区: '香港',

澳门特别行政区: '澳门',

methods方法

// 查询地图入口

getDeviceLocationList() {

this.dataLoading = true

mapQuery(this.mapDatas)

.then((res) => {

this.mapLocationList = res.data.data.device_address

this.dataLoading = false

})

.then(() => {

// 如果没有选省就直接省市中国地图

if (

this.mapDatas.province_code != '' &&

this.mapDatas.province_code != undefined

) {

// 如果选省没有选市就直接请求省

if (

this.mapDatas.city_code != '' &&

this.mapDatas.city_code != undefined

) {

this.getGeoJson(this.mapDatas.city_code)

} else {

this.getGeoJson(this.mapDatas.province_code)

}

} else {

this.getGeoJson(this.mapDatas.geoCode)

}

})

// 条件查询省

getGeoJson(code) {

// let geoUrl = `https://geo.datav.aliyun.com/areas/bound/geojson?code=${code}_full`

// let geoUrl = `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${code}_full`

let geoUrl = `https://geo.datav.aliyun.com/areas_v2/bound/geojson?code=${code}_full`

fetch(geoUrl, {

method: 'get',

referrer: '',

referrerPolicy: 'no-referrer',

})

.then((res) => {

return res.json()

})

.then((data) => {

this.geoJson = data

this.setMapData(data.features)

})

.then(() => {

this.mapLocation('mapLocation')

})

// 设备位置在地图上渲染

setMapData(data) {

let allProvince = {}

if (this.mapLocationList.length != 0) {

if (

this.mapDatas.province_code != '' &&

this.mapDatas.province_code != undefined

) {

allProvince = this.mapLocationList.reduce((city, item) => {

if (item.city_code in city) {

city[item.city_code] += 1

} else {

city[item.city_code] = 1

}

return city

})

} else if (this.mapLocationList.length > 0) {

allProvince = this.mapLocationList.reduce((province, item) => {

if (item.province_code in province) {

province[item.province_code] += 1

} else {

province[item.province_code] = 1

}

return province

}, {})

}

let provinceLength = Object.keys(allProvince).length

data.forEach((item) => {

let value =

provinceLength > 0

? allProvince[item.properties.adcode]

: 0

this.mapData.push({

code: item.properties.adcode,

level: item.properties.level,

})

if (item.properties.adcode !== '100000') {

let center = item.properties.center

this.scatterDataList.push([center[0], center[1], value])

}

})

}

//设备地图位置

mapLocation(id) {

//初始化

if (this.mapChart) {

this.mapChart.dispose()

}

//注册地图

// if (this.parentInfo.length === 1) {

// this.$echarts.registerMap('china', this.geoJson)

// } else {

this.$echarts.registerMap('map', this.geoJson)

// }

this.mapChart = this.$echarts.init(document.getElementById(id))

let unit = this.$t('datav.number'),

statusMap = [this.$t('device.offline'), this.$t('device.online')],

visualMap = {

type: 'continuous',

show: false,

left: '5%',

bottom: '5%',

min: 0,

max: 1000,

text: ['40', '0'],

inRange: {

// color: ['#44FCF7','#08E4DE','#44FCF7','#08E4DE']

// color: ['#F5B16D', '#F09C42', '#EC870E', '#D0770B'],

//color: ['#41A7DE', '#eac736', '#fffc00', '#ff2600']

color: ['rgba(247, 218, 161, 0.66)', '#F95A2F', '#F95329'],

textStyle: {

color: '#FFFFFF',

fontSize: 12,

seriesIndex: 1,

heatMap = {

type: 'heatmap',

pointSize: 10, // 设置热力图点的大小

blurSize: 3, // 设置点的阴影半径

coordinateSystem: 'geo',

itemStyle: {

color: new this.$echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [

{ offset: 0, color: '#F95329' },

{ offset: 0.4, color: '#F95A2F' },

{ offset: 1, color: 'rgba(247, 218, 161, 0.66)' },

]),

silent: true,

effectScatter = {

type: 'effectScatter',

coordinateSystem: 'geo',

rippleEffect: { brushType: 'fill' },

itemStyle: {

color(p) {

if (p.data.status === 0) {

return {

type: 'radial',

x: 0.5,

y: 0.5,

r: 0.5,

colorStops: [

{ offset: 0, color: '#F0B01E' /* 0% 处的颜色*/ },

{ offset: 1, color: '#FFEBBC' /* 100% 处的颜色*/ },

global: false, // 缺省为 false

}

} else if (p.data.status === 1) {

return {

type: 'radial',

x: 0.5,

y: 0.5,

r: 0.5,

colorStops: [

{ offset: 0, color: '#05C552' /* 0% 处的颜色*/ },

{ offset: 1, color: '#ffffff' /* 100% 处的颜色*/ },

global: false, // 缺省为 false

}

shadowBlur: 10,

shadowColor: '#333',

tooltip: {

show: true,

trigger: 'item',

formatter: (params) => {

//${this.$t('common.address')}：${params.data.address ? params.data.number : ''}

let marker = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#40FFF9;"></span>`

return `${this.$t('device.type')}：${params.data.type}<br>

${this.$t('device.number')}：${

params.data.number

}<br>

${this.$t('device.status')}：${

statusMap[params.data.status]

encode: {

tooltip: ['lng', 'lat'],

symbolSize: 12,

showEffectOn: 'render', //加载完毕显示特效

scatterIcon1 = 'image:///static/img/statistics_low.png',

scatterIcon2 = 'image:///static/img/statistics_middle.png',

scatterIcon3 = 'image:///static/img/statistics_high.png',

scatter = {

type: 'scatter',

coordinateSystem: 'geo',

symbol(value) {

if (value[2] < 10) {

return scatterIcon1

} else if (value[2] < 100) {

return scatterIcon2

} else {

return scatterIcon3

}

symbolSize(val, params) {

return val[2] ? 40 : 0

label: {

show: true,

color: '#fff',

formatter(params) {

return params.value[2] ? params.value[2] : ''

itemStyle: { opacity: 1 },

data: this.scatterDataList,

tooltip: {

formatter(params) {

return `${params.seriesName}: <br>${params.marker} ${params.value[2]} ${unit}`

silent: true,

legend = {

itemWidth: 18,

itemHeight: 18,

orient: 'horizontal',

top: '8%',

left: '1%',

data: [

{

icon: 'image:///static/img/checkbox_circle.png',

{ name: '分布热图', icon: 'circle' },

textStyle: {

color: '#21FFFC',

selected: { 数量统计: false, 分布热图: true },

baseOption = {

backgroundColor: 'transparent',

title: { show: false },

tooltip: { trigger: 'item', axisPointer: { type: 'shadow' } },

grid: { show: false },

toolbox: { show: false },

geo: {

map: 'map',

zoom: 7,

roam: true,

left: '10%',

top: '15%',

// center: this.parentInfo.length === 1 ? ['113.191533', '28.250933'] : false,

layoutCenter: ['50%', '50%'],

layoutSize: 80,

label: {

normal: {

show: true,

color: '#003854', //省份标签字体颜色

formatter: (p) => {

return this.specialProvince[p.name]

? this.specialProvince[p.name]

: p.name

emphasis: { show: true, color: '#fff' },

itemStyle: {

areaColor: '#3EF8FF',

borderColor: '#0095AD',

borderWidth: 1.5,

shadowBlur: 6,

shadowColor: '#41cfcf',

shadowOffsetX: 5,

shadowOffsetY: 6,

opacity: 0.88,

emphasis: {

itemStyle: {

areaColor: '#0095AD',

// borderWidth: 1.6,

// shadowBlur: 25

series: [

{

type: 'map',

geoIndex: 0,

map: 'map',

roam: true,

zoom: 1.8,

tooltip: {

show: true,

formatter(params) {

if (params.data) {

return `${params.data.name}: ${params.data.count}台`

}

label: { show: false },

data: this.mapData,

dataset: {

dimensions: ['lng', 'lat'],

source: this.mapLocationList,

}

// 判断省选了没有

if (

this.mapDatas.province_code != '' &&

this.mapDatas.province_code != undefined

) {

// 如果选省没有选市就直接请求省

baseOption.series[0]['tooltip']['show'] = false

// if (

// this.mapDatas.city_code != '' &&

// this.mapDatas.city_code != undefined

// ) {

// baseOption.series[0]['tooltip']['show'] = false

// }

baseOption.series.push(effectScatter)

} else {

baseOption['legend'] = legend

baseOption['visualMap'] = visualMap

baseOption.series.push(heatMap)

baseOption.series.push(scatter)

}

this.mapChart.setOption(baseOption)

window.addEventListener('resize', () => {

this.mapChart.resize()

})

this.dataLoading = false

echarts 中国地图渲染加省市渲染查询相关推荐

HTML中地图根据数据变色,echarts中国地图根据数据对省份渲染不同的颜色
echarts中国地图 .centerItem { width: 856px; height: 640px; background-color: #fff; margin: 110px auto 0 ...
echarts 中国地图散点图渲染
准备 echarts 中国地图的json(在最后) GitHub的demo地址,可以直接拉下来先注册地图 import * as echarts from 'echarts'; import { d ...
echarts 中国地图世界地图
最近项目中用到了echarts 中国地图世界地图,特在这记录一下. world.js 下载链接(world_new.js带有中国地区名称,另一个只是用来显示中国地图) 链接:https://pan. ...
Echarts中国地图三级钻取
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站:https://www.captainai.net/dongkelun 前言最近其实一直在用Echa ...
VUE 中实现echarts中国地图人口迁徙
VUE 中实现echarts中国地图人口迁徙效果图: 安装Echarts依赖要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echa ...
Echarts中国地图各省份区域设置不同的颜色
摘要: 接着<Echarts引入中国地图>续写,我们的项目需求是要求地图的背景颜色要各省份不同.看了文档同时也看了相关官网例子,写出来总结下吧,以便以后需要. 实现: 1.在series中 ...
【echarts 中国地图射线版本】vue实现中国地图航线动画效果，地图上添加散点效果【详细注释，通俗易懂】
先上效果图前置条件,必看首先你需要安装echarts并引入然后你需要下载china.json文件并注册引入,不然不生效当然很多新手可能不知道china.json在哪里下载,因为官方已经没有了, ...
Echarts中国地图背景颜色渐变
摘要:关于Echarts地图的问题,在第一篇就说过引入等相关问题(如还有疑惑请先看之前的文章传送门).地图的背景颜色如何实现渐变呢?主要利用的是Echarts中的geo和visualMap结合实现.v ...
【echarts 中国地图增加南海九段线】
echarts 中国地图增加南海九段线最近在开发echarts 中国地图时,客户提出中国地图要完整,需要增加南海九段线. 这是个政治任务,但是echarts里面的文档没有关于南海诸岛九段线的相关配置 ...
Echarts中国地图修改
前言在使用Echarts图表时需要修改中国地图中的样式以及内容,在网上查找了一些资料并且整理了一下. Echarts中国地图地图样式修改标题修改数值功能删除,但保留数据计算按钮功能去除地图 ...

echarts 中国地图渲染加省市渲染查询

echarts 中国地图渲染加省市渲染查询相关推荐

最新文章

热门文章

echarts 中国地图渲染 加省市渲染查询

echarts 中国地图渲染 加省市渲染查询相关推荐

最新文章

热门文章

echarts 中国地图渲染加省市渲染查询

echarts 中国地图渲染加省市渲染查询相关推荐