方法一
此方法需要使用百度ak码 index.html
<script src="https://api.map.baidu.com/getscript?v=3.0&ak=你的ak"></script>
import * as echarts from 'echarts'
import { mapDataArr } from './components/mapdata'
const initChart = () => {
let chartDom: any = document.getElementById('main')
let myChart = echarts.init(chartDom)
let option
mapDataArr.forEach(item => {
renderItem
})
function renderItem(params: any, api: any) {
var coords = [
[116.7, 39.53],
[103.73, 36.03],
[112.91, 27.87],
[120.65, 28.01],
[119.57, 39.95]
]
var points = []
for (var i = 0; i < coords.length; i++) {
points.push(api.coord(coords[i]))
}
var color = api.visual('color')
return {
type: 'polygon',
shape: {
points: echarts.graphic.clipPointsByRect(points, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
})
},
style: api.style({
fill: color,
stroke: echarts.color.lift(color, 0.5)
})
}
}
function renderItem2(params: any, api: any) {
var coords = [
[110.88, 21.68],
[116.35, 23.55],
[113.62, 24.84]
]
var points = []
for (var i = 0; i < coords.length; i++) {
points.push(api.coord(coords[i]))
}
var color = api.visual('color')
return {
type: 'polygon',
shape: {
points: echarts.graphic.clipPointsByRect(points, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
})
},
style: api.style({
fill: color,
stroke: echarts.color.lift(color, 0.5)
})
}
}
option = {
backgroundColor: 'transparent',
title: {
text: '',
subtext: '',
sublink: '',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item'
},
bmap: {
center: [104.114129, 37.550339],
zoom: 8,
roam: true,
mapStyle: {
styleJson: [
{
featureType: 'water',
elementType: 'all',
stylers: {
color: '#044161'
}
},
{
featureType: 'land',
elementType: 'all',
stylers: {
color: '#004981'
}
},
{
featureType: 'boundary',
elementType: 'geometry',
stylers: {
color: '#064f85'
}
},
{
featureType: 'railway',
elementType: 'all',
stylers: {
visibility: 'off'
}
},
{
featureType: 'highway',
elementType: 'geometry',
stylers: {
color: '#004981'
}
},
{
featureType: 'highway',
elementType: 'geometry.fill',
stylers: {
color: '#005b96',
lightness: 1
}
},
{
featureType: 'highway',
elementType: 'labels',
stylers: {
visibility: 'off'
}
},
{
featureType: 'arterial',
elementType: 'geometry',
stylers: {
color: '#004981'
}
},
{
featureType: 'arterial',
elementType: 'geometry.fill',
stylers: {
color: '#00508b'
}
},
{
featureType: 'poi',
elementType: 'all',
stylers: {
visibility: 'off'
}
},
{
featureType: 'green',
elementType: 'all',
stylers: {
color: '#056197',
visibility: 'off'
}
},
{
featureType: 'subway',
elementType: 'all',
stylers: {
visibility: 'off'
}
},
{
featureType: 'manmade',
elementType: 'all',
stylers: {
visibility: 'off'
}
},
{
featureType: 'local',
elementType: 'all',
stylers: {
visibility: 'off'
}
},
{
featureType: 'arterial',
elementType: 'labels',
stylers: {
visibility: 'off'
}
},
{
featureType: 'boundary',
elementType: 'geometry.fill',
stylers: {
color: '#029fd4'
}
},
{
featureType: 'building',
elementType: 'all',
stylers: {
color: '#1a5787'
}
},
{
featureType: 'label',
elementType: 'all',
stylers: {
visibility: 'off'
}
}
]
}
},
series: [
{
type: 'custom',
coordinateSystem: 'bmap',
renderItem: renderItem,
itemStyle: {
opacity: 0.5
},
animation: false,
silent: true,
data: [0],
z: -10
},
{
type: 'custom',
coordinateSystem: 'bmap',
renderItem: renderItem2,
itemStyle: {
opacity: 0.5
},
animation: false,
silent: true,
data: [0],
z: -10
}
]
}
option && myChart.setOption(option)
}
onMounted(() => {
initChart()
})renderItem可以封装成公用函数，用以渲染多个自定义多边形地图
官网实例：echarts https://echarts.apache.org/examples/zh/editor.html?c=map-polygon
方法二
json文件（经纬度可以通过http://geojson.io自定义绘画拿到，直接导出json可使用）
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"id": "147101",
"level": 4,
"name": "学府园区",
"cp": [112.55274381920367, 37.79419610146101],
"stroke": "#c85151",
"stroke-width": 2,
"stroke-opacity": 1,
"fill": "#f09dc2",
"fill-opacity": 0.9
},
"geometry": {
"coordinates": [
[
[
[112.53818889543498, 37.81723255207983],
[112.5367848302169, 37.80592693249572],
[112.53737806295572, 37.79481496685949],
[112.53509888824524, 37.7869562443608],
[112.53246708120007, 37.781064140625446],
[112.53166450977261, 37.774087710369585],
[112.564946063562, 37.77421595044177],
[112.56503724697095, 37.778115935061706],
[112.57420240256266, 37.77852498091606],
[112.57449399103444, 37.81833547191057],
[112.55634144323471, 37.8177840119952],
[112.53818889543498, 37.81723255207983]
],
[
[112.54666826937296, 37.81095184862406],
[112.54688153896666, 37.805679112144745],
[112.55035413499508, 37.805679112144745],
[112.55014086540137, 37.81095184862406],
[112.54666826937296, 37.81095184862406]
],
[
[112.56336881753492, 37.81546379660975],
[112.56388854487977, 37.806704851021195],
[112.56708210349001, 37.80811805367932],
[112.56866820894356, 37.809926512394554],
[112.57223865423629, 37.81071900692917],
[112.57307188897602, 37.81610580469092],
[112.56336881753492, 37.81546379660975]
],
[
[112.53536710040663, 37.782887782816175],
[112.53549749688506, 37.77979579252282],
[112.53863655192231, 37.77954123241052],
[112.53947622106352, 37.78325220250193],
[112.53536710040663, 37.782887782816175]
],
[
[112.56321890142755, 37.789144750413115],
[112.56329028414615, 37.78005829790041],
[112.57336843394893, 37.77997338745901],
[112.57346708154984, 37.78098704007894],
[112.56738645940544, 37.78102603297647],
[112.56736429745945, 37.78138860026458],
[112.56990319296881, 37.78136948777901],
[112.57316749130109, 37.78135036363712],
[112.57315871326591, 37.78806177928318],
[112.56555586845917, 37.788099999729084],
[112.56556657426557, 37.78909806069667],
[112.56321890142755, 37.789144750413115]
],
[
[112.54364245239469, 37.815955610894605],
[112.54364245239469, 37.81245256043924],
[112.54520721014677, 37.81245256043924],
[112.54520721014677, 37.815955610894605],
[112.54364245239469, 37.815955610894605]
],
[
[112.55202794333013, 37.78730482416309],
[112.55202794333013, 37.786208938371445],
[112.55300677379324, 37.786208938371445],
[112.55300677379324, 37.78730482416309],
[112.55202794333013, 37.78730482416309]
]
],
[
[
[112.5913244646863, 37.69837126443184],
[112.58899729014234, 37.69487603238758],
[112.5853698703794, 37.69554253561351],
[112.5861364811363, 37.69120052365611],
[112.5911456985304, 37.69038485750926],
[112.59589447902277, 37.698338021130766],
[112.5913244646863, 37.69837126443184]
]
],
[
[
[112.53939404769187, 37.772850867260004],
[112.53939404769187, 37.77221831756526],
[112.54059440960214, 37.77221831756526],
[112.54059440960214, 37.772850867260004],
[112.53939404769187, 37.772850867260004]
]
],
[
[
[112.57967285846496, 37.77316714007844],
[112.57967285846496, 37.771796614761854],
[112.58087322037517, 37.771796614761854],
[112.58087322037517, 37.77316714007844],
[112.57967285846496, 37.77316714007844]
]
]
],
"type": "MultiPolygon"
},
"id": 1
},
{
"type": "Feature",
"properties": {
"id": "147102",
"level": 4,
"name": "唐槐园区",
"cp": [112.55162900142085, 37.71575013063753],
"stroke": "#c85151",
"stroke-width": 2,
"stroke-opacity": 1,
"fill": "#f09d44",
"fill-opacity": 0.9
},
"geometry": {
"coordinates": [
[
[
[112.60152793493836, 37.758818490746336],
[112.60147239242582, 37.71865470253276],
[112.59427110389547, 37.71872190525566],
[112.58706981536511, 37.718789107978566],
[112.58656187072017, 37.698611596322166],
[112.60183001882393, 37.69840099616946],
[112.61709816692769, 37.698190396016756],
[112.60904842817854, 37.685126290375194],
[112.60187733800007, 37.69080203573304],
[112.59256133157322, 37.681025754021775],
[112.60202066763355, 37.67508793083738],
[112.592914930505, 37.6668388412552],
[112.63929893047549, 37.66576544692208],
[112.6383793053551, 37.67335071810136],
[112.64597969139919, 37.67299944278557],
[112.6457461404392, 37.679102036860186],
[112.63991963910905, 37.67929798980227],
[112.63966785444876, 37.684024029659184],
[112.6405564126049, 37.69369297474452],
[112.63759746704721, 37.712257054501904],
[112.63802533062199, 37.74161906508601],
[112.61520822550762, 37.74147632853047],
[112.61595047299613, 37.74545816679078],
[112.63810531715319, 37.7448816871936],
[112.64022547756935, 37.75865649106065],
[112.62421498776973, 37.75838473292343],
[112.62421498776973, 37.766663197184556],
[112.61414878601187, 37.75836831450586],
[112.60152793493836, 37.758818490746336]
],
[
[112.61774791910591, 37.751391158501875],
[112.61774791910591, 37.748333620105555],
[112.62382450645458, 37.748333620105555],
[112.62382450645458, 37.751391158501875],
[112.61774791910591, 37.751391158501875]
]
]
],
"type": "MultiPolygon"
},
"id": 5
},
{
"type": "Feature",
"properties": {
"id": "147103",
"level": 4,
"name": "武宿综合保税区",
"cp": [112.72777020832945, 37.743965000284774],
"stroke": "#c85151",
"stroke-width": 2,
"stroke-opacity": 1,
"fill": "#60c7da",
"fill-opacity": 0.9
},
"geometry": {
"coordinates": [
[
[
[112.63899228400965, 37.75005270857298],
[112.63818239858472, 37.74493298309142],
[112.61605018671605, 37.745435595879385],
[112.61520944068519, 37.74148925637415],
[112.6379881339958, 37.74165147823325],
[112.63782296539489, 37.733684965645935],
[112.64367961790481, 37.73374073695783],
[112.64375950362319, 37.737856215674086],
[112.6697287951676, 37.73777551162382],
[112.66978246703803, 37.74029096024201],
[112.65845553638314, 37.740553945151916],
[112.658520903551, 37.74648403017116],
[112.65002032840778, 37.746423081384634],
[112.65001001264375, 37.750114559450395],
[112.63899228400965, 37.75005270857298]
]
],
[
[
[112.61774791910591, 37.751391158501875],
[112.61774791910591, 37.748333620105555],
[112.62382450645458, 37.748333620105555],
[112.62382450645458, 37.751391158501875],
[112.61774791910591, 37.751391158501875]
]
]
],
"type": "MultiPolygon"
},
"id": 10
},
{
"type": "Feature",
"properties": {
"id": "147105",
"level": 4,
"name": "阳曲产业园区",
"cp": [112.69432567485222, 38.05537403000699],
"stroke": "#c85151",
"stroke-width": 2,
"stroke-opacity": 1,
"fill": "#ac99f0",
"fill-opacity": 0.7
},
"geometry": {
"coordinates": [
[
[
[112.71609727588259, 38.12596264612699],
[112.74704111341288, 38.130059165382505],
[112.74883902319652, 38.153259839634956],
[112.74976812304192, 38.17577782333419],
[112.74926734105298, 38.188788026564765],
[112.72165796119265, 38.194280102031115],
[112.70637261621022, 38.19483052006342],
[112.69178389304807, 38.19313920875712],
[112.68271760688486, 38.18949447857352],
[112.67712488652086, 38.184370544892715],
[112.67224448985525, 38.180708580389535],
[112.67304220098225, 38.178653973400856],
[112.6923151880901, 38.166666715596534],
[112.69606618895445, 38.165370831151186],
[112.69706413290092, 38.162631911145795],
[112.70341902758133, 38.15904802278493],
[112.70996642478877, 38.15478056613256],
[112.71168745508317, 38.1486289729491],
[112.71229012435492, 38.14003956057448],
[112.71181357301941, 38.12840950881312],
[112.71347571536529, 38.12586956008366],
[112.71609727588259, 38.12596264612699]
]
],
[
[
[112.60227836425116, 37.8715549993161],
[112.60214104285149, 37.860585813395616],
[112.6026939906177, 37.85539387024632],
[112.61511527928161, 37.85524585900549],
[112.61549298176396, 37.858283391302336],
[112.61822831996852, 37.85933827982423],
[112.62008311721934, 37.86435765797408],
[112.61549298176396, 37.86223259890697],
[112.61493719291246, 37.87188532664251],
[112.60227836425116, 37.8715549993161]
]
],
[
[
[112.63055015220817, 38.01909574888052],
[112.63339535548624, 38.01532805612598],
[112.62946983150897, 38.0102439552231],
[112.6340071784486, 38.008711805493505],
[112.65215656620296, 38.006668889377835],
[112.66447222217982, 38.00786059736356],
[112.68132522509643, 38.01535088971943],
[112.70012280527067, 38.01943618113435],
[112.70509228048957, 38.01909574888052],
[112.71330271780613, 38.02301062431607],
[112.72129709098408, 38.02658489313961],
[112.7314521055626, 38.029648413352135],
[112.74528021051793, 38.03458381534483],
[112.76580630381358, 38.042922187214316],
[112.76893854565708, 38.04301859589627],
[112.76898543134615, 38.04716473350197],
[112.76973873742918, 38.06129728687458],
[112.77131439734347, 38.07440091447887],
[112.7658689198301, 38.09795528661189],
[112.72561116060115, 38.09601349387921],
[112.70854071717781, 38.095110093603466],
[112.69925854871013, 38.08545011987471],
[112.6856465078954, 38.071673776824156],
[112.677868198856, 38.064869687237234],
[112.66749712013893, 38.05381169198469],
[112.6599348752402, 38.04411330569124],
[112.65345295104294, 38.035264534350375],
[112.64459432130633, 38.03645577738686],
[112.65121068719654, 38.041685905475205],
[112.65483116716257, 38.04691590161528],
[112.65426827589926, 38.05259787296467],
[112.64875582908951, 38.05765755758682],
[112.64416219302495, 38.05449223225048],
[112.63811239710691, 38.047856694757314],
[112.62777942278774, 38.03647009466536],
[112.62428429215146, 38.028797448365765],
[112.6257677290966, 38.02894480220874],
[112.63108403143661, 38.02567381285448],
[112.63055015220817, 38.01909574888052]
]
]
],
"type": "MultiPolygon"
},
"id": 11
},
{
"type": "Feature",
"properties": {
"id": "147107",
"level": 4,
"name": "科技创新城",
"cp": [112.76009992402538, 37.70340274570083],
"stroke": "#c85151",
"stroke-width": 2,
"stroke-opacity": 1,
"fill": "#f5f2a8",
"fill-opacity": 0.9
},
"geometry": {
"coordinates": [
[
[112.63769593138, 37.71869163419386],
[112.63765932825126, 37.71260814549731],
[112.64054801526815, 37.69376303387444],
[112.6396678329807, 37.68402555464603],
[112.63987789767184, 37.67932987961648],
[112.64574310660086, 37.67903882001367],
[112.6527057596499, 37.68324620023249],
[112.68075043010386, 37.683339300597055],
[112.69319598352621, 37.68631595495651],
[112.70500126729158, 37.694331263104765],
[112.71093272251102, 37.70198457712742],
[112.71490672618545, 37.70694307907549],
[112.71262470794426, 37.72579706275896],
[112.69153105281003, 37.725584629566725],
[112.68222154176436, 37.71687278661304],
[112.63769593138, 37.71869163419386]
]
],
"type": "Polygon"
},
"id": 0
},
{
"type": "Feature",
"properties": {
"id": "147109",
"level": 4,
"name": "潇河产业园区",
"cp": [112.50146220120422, 37.46310272674431],
"stroke": "#c85151",
"stroke-width": 2,
"stroke-opacity": 1,
"fill": "#a6e8b3",
"fill-opacity": 0.9
},
"geometry": {
"coordinates": [
[
[112.3763603077133, 37.599897023604626],
[112.31251227004816, 37.55748376028178],
[112.26839331658098, 37.51653362827534],
[112.24121921833188, 37.46502040360285],
[112.21120550660959, 37.389905665031236],
[112.40748506885916, 37.38520250137016],
[112.41990374089738, 37.41422599666791],
[112.48638764152832, 37.40900386687065],
[112.48383505435089, 37.38383134260411],
[112.51976456275214, 37.381930729693316],
[112.55569407115152, 37.38070000358415],
[112.60228961417204, 37.38292049279015],
[112.66878295221865, 37.39994038603014],
[112.72621648063463, 37.42994930986786],
[112.76020318029815, 37.453553613937174],
[112.79183066402834, 37.50934713155257],
[112.57228756294035, 37.51895306483641],
[112.57161144236818, 37.53529552815391],
[112.5528681680808, 37.53625936480901],
[112.54269496378203, 37.550269008802275],
[112.51171344071432, 37.54557575919428],
[112.4607891947939, 37.550415656417236],
[112.41566044934126, 37.564091717944265],
[112.3763603077133, 37.599897023604626]
]
],
"type": "Polygon"
},
"id": 6
}
]
}
import * as echarts from 'echarts'
import mapjson from './components/map.json'
onMounted(() => {
initMapData()
})
const initMapData = () => {
var chart = echarts.init(document.getElementById('main') as HTMLElement)
var mainBackgroundColor = '#fff'
var echartsTitleTextColor = '#000'
var echartsSubTitleTextColor = 'darkorange'
var mapLabelNormalColor = '#222'
var mapLabelEmphasisColor = '#666'
var mapItemNormalColor = '#d4e8ff'
var mapItemEmphasisColor = 'darkorange'
var mapItemBorderColor = 'dodgerblue'
var mapToolboxIconTitleColor = 'darkorange'
// var mapToolboxIconColor = 'darkorange'
var mapToolboxIconBorderColor = 'darkorange'
// chart.on('click', function (a) {
// const dom = window.document.querySelector('.n-data-table-wrapper')
// console.log('aaaaaa', a)
// if (a.componentType == 'series') {
// }
// })
let option: any = {
backgroundColor: mainBackgroundColor,
title: {
text: '',
link: '#',
left: 'center',
textStyle: {
color: echartsTitleTextColor,
fontSize: 24,
fontWeight: 'normal',
fontFamily: 'Microsoft YaHei'
},
subtextStyle: {
color: echartsSubTitleTextColor,
fontSize: 20,
fontWeight: 'normal',
fontFamily: 'Microsoft YaHei'
}
},
tooltip: { trigger: 'item', formatter: '{b}' },
toolbox: {
show: true,
orient: 'vertical',
top: 'center',
right: '40',
itemSize: 24,
itemGap: 20,
showTitle: true,
feature: {},
iconStyle: {
normal: {
color: mapToolboxIconBorderColor,
borderColor: mapToolboxIconBorderColor
}
},
emphasis: { iconStyle: { color: mapToolboxIconTitleColor } }
},
animationDuration: 1000,
animationEasing: 'cubicOut',
animationDurationUpdate: 1000
}
function renderMap(b: any, a: any) {
window.console.log('进来了。。。。。2')
option.series = [
{
name: b,
type: 'map',
mapType: b,
roam: false,
nameMap: { china: '中国' },
label: {
// 是否默认显示 name
normal: { show: true, textStyle: { color: mapLabelNormalColor, fontSize: 14 } },
emphasis: {
show: true,
textStyle: { color: mapLabelEmphasisColor, fontSize: 14 }
}
},
itemStyle: {
// 区块背景色
normal: { areaColor: mapItemNormalColor, borderColor: mapItemBorderColor },
emphasis: { areaColor: mapItemEmphasisColor }
},
data: a
}
]
chart.setOption(option)
}
function getExampleData() {
let d = []
for (var b = 0; b < mapjson.features.length; b++) {
d.push({
id: mapjson.features[b].properties.id,
level: mapjson.features[b].properties.level,
name: mapjson.features[b].properties.name
})
}
echarts.registerMap('综改区', JSON.stringify(mapjson))
renderMap('综改区', d)
}
getExampleData()
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
