echarts与map

版本

    "echarts": "^5.1.2","echarts-gl": "^2.0.9",

效果

在这里插入图片描述

基本方法

echarts中地图大多是以地理坐标为主，数据格式使用geojson数据格式。geojson是GIS数据格式中第二常用格式，使用GIS软件都能实现数据转换。

步骤

1数据准备

从上图中可以看出，地图包括深蓝色底图、青色厚度、地图定位坐标点、插图部分。插图的图框也是很绘制的包含插图的外包矩形，也是地理数据。

深蓝地图和青色厚度是相同的地图，只是渲染方式不一样。面类型数据
地图定位坐标点采用的经纬度，点类型数据
插图图框是边界矩形，插图内容是面状群岛分布
数据来源大部分来自阿里datav,一小部分数据自己制作。

https://datav.aliyun.com/portal/school/atlas/area_selector

2开发准备

地图部分单独写组件，新建vue组件，编写模板，样式等

  <div id="map" class="chartBox" />

组件引用等

3注册地图

import hainan from '@/api/gis/provinces_hn.json' //底图
import sansha from '@/api/gis/ss.json'  //插图
import boundry from '@/api/gis/chatuboundry.json' //插图框echarts.registerMap('hn', hainan)echarts.registerMap('ss', sansha)echarts.registerMap('boundry', boundry)

4 配置项

底图

底图是放了两个hn图层，上面hn图层设置了透明度，渲染填充和边界，并增加鼠标移入事件，可进行放大、缩小、移动。作为厚度的图层其缩放、移动跟随第一个图层变化。两个底图定位中心一样，长宽比一样。

          {map: 'hn', //注册底图zlevel: 5, //层次顺序roam: true,  //缩放平移aspectScale: 1.1, //长宽比center: [109.786246, 18.464193], //定位中心zoom: 0.8, //初始缩放级别scaleLimit: { //最大最小缩放级别min: 0.2,max: 50},label: {   //底图文字标注show: true,color: '#ffffff',shadowColor: '#134ae6',shadowOffsetX: 15,shadowOffsetY: 15,textBorderColor: '#134ae6',textBorderType: 'solid',textBorderWidth: 2},itemStyle: {  //不同市的渲染color: '#153294', // 背景opacity: 0.9,borderWidth: '1', // 边框宽度borderColor: 'rgba(255,255,255,0.3)' // 边框颜色},emphasis: { //鼠标移入后label: {  //底图文字标注show: true,color: '#ffffff',shadowColor: '#134ae6',shadowOffsetX: 15,shadowOffsetY: 15,textBorderColor: '#134ae6',textBorderType: 'solid',textBorderWidth: 2},itemStyle: { //不同市的渲染areaColor: '#0CBFFF',opacity: 0.9}}},{map: 'hn',top: '12%',silent: true,aspectScale: 1.1,zlevel: 4,center: [109.786246, 18.464193],zoom: 0.8,itemStyle: {color: '#01EAF8', // 背景opacity: 1,borderWidth: '1', // 边框宽度borderColor: '#3C5FA1' // 边框颜色}},

三沙群岛

 {map: 'ss',zlevel: 6,roam: false,aspectScale: 0.7,center: [14.87585417960884, 4.8374873458189995],zoom: 0.148,label: {show: true,color: '#ffffff',shadowColor: '#2074FF',shadowOffsetX: 15,shadowOffsetY: 15,textBorderColor: '#134ae6',textBorderType: 'solid',textBorderWidth: 2},itemStyle: {color: '#ffffff', // 背景opacity: 1,borderWidth: 1, // 边框宽度borderColor: 'rgba(255,255,255,0.3)' // 边框颜色// borderopacity: 0.6},emphasis: {itemStyle: {color: '#153294',opacity: 0.9},label: {show: true,color: '#ffffff',shadowColor: '#2074FF',shadowOffsetX: 15,shadowOffsetY: 15,textBorderColor: '#134ae6',textBorderType: 'solid',textBorderWidth: 2}}},

插图图框

 {map: 'boundry',zlevel: 6,roam: false,aspectScale: 0.7,center: [14.87585417960884, 4.8374873458189995],zoom: 0.148,label: {show: false},itemStyle: {color: '#153294', // 背景opacity: 0.2,borderWidth: 2, // 边框宽度borderColor: '#01EAF8' // 边框颜色},tooltip: {// show: false}}

定位点

定位点是自己采集的经纬度数据，格式如下

{"location" :[{"name": "某某某地方","X": "110.386274","Y": "20.026688"}]
}

定位点主要采用series方式添加到底图上

          {name: 'jcy',type: 'scatter',map: 'hn',zlevel: 10,coordinateSystem: 'geo',geoIndex: 0,symbolSize: [30, 60],symbol: `image://${that.images}`,data: that.cityInfo.location.map(d => {return {name: d.name,value: [parseFloat(d.X),parseFloat(d.Y)]}}),tooltip: {backgroundColor: 'rgba(0,0,0,0.5)',borderColor: 'rgba(0,0,0,0)',extraCssText: 'box-shadow: 0 0 0 rgba(255, 255, 255, 0.7);',zIndex: 400,formatter: function(params) {let html = ''var title = `<div style="color:#ffffff;margin-bottom: 12px; font-size: 14px">${params.name}</div>`html = titleconst item = that.jcyInfo.find(t => t.name === params.name)if (item) {const info = `<div style=" line-height: 30px;color:#7BE6FF;font-size:10px;"><span style="display:inline-block;margin-right:4px;width:8px;height:8px;border-radius:50%;"></span><span style="margin-right:30px;color:#7BE6FF">进行中的个案总数：</span><span style="float:right;color:#7BE6FF">${item.num}</span></div>`html += info}return html}}},

三沙群岛也有定位点，在插图上同样也可以添加

  {name: 'scjcy',type: 'scatter',map: 'ss',zlevel: 500,coordinateSystem: 'geo',geoIndex: 3,symbolSize: [30, 60],symbol: `image://${that.images}`,data: [{name: '三沙市三沙群岛某某',value: [114.375028, 10.547062]},{'name': '三沙市某某某',value: [112.345028, 16.837062]}],tooltip: {backgroundColor: 'rgba(0,0,0,0.5)',borderColor: 'rgba(0,0,0,0)',extraCssText: 'box-shadow: 0 0 0 rgba(255, 255, 255, 0.7);',zIndex: 500,formatter: function(params) {console.log(params)let html = ''var title = `<div style="color:#ffffff;margin-bottom: 12px; font-size: 14px">${params.name}</div>`html = titleconst item = that.jcyInfo.find(t => t.name === params.name)if (item) {const info = `<div style=" line-height: 30px;color:#7BE6FF;font-size:10px;"><span style="display:inline-block;margin-right:4px;width:8px;height:8px;border-radius:50%;"></span><span style="margin-right:30px;color:#7BE6FF">进行中的个案总数：</span><span style="float:right;color:#7BE6FF">${item.num}</span></div>`html += info}return html}}}

注意这里定位图标用本地图片没成功，看api说需要使用一个在线地址，或者base64 但是要加上image://${that.images}

5 底图移动事件

      this.myChart.on('georoam', function(params) {var option = that.myChart.getOption()// 获得option对象if (params.zoom != null && params.zoom !== undefined) { // 捕捉到缩放时option.geo[1].zoom = option.geo[0].zoom // 下层geo的缩放等级跟着上层的geo一起改变option.geo[1].center = option.geo[0].center// 下层的geo的中心位置随着上层geo一起改变} else { // 捕捉到拖曳时option.geo[1].center = option.geo[0].center// 下层的geo的中心位置随着上层geo一起改变// option.geo[2].center = option.geo[0].center// option.geo[3].center = option.geo[0].center}that.myChart.setOption(option)// 设置option})

6 初始化

      this.myChart = echarts.init(document.getElementById('map')) // 这里是为了获得容器所在位置this.myChart.setOption(option)

完整代码

<template><div class="grid-echarts__wrapper"><div id="map" class="chartBox" /></div>
</template>
<script>
import * as echarts from 'echarts'
import 'echarts-gl'
import hainan from '@/api/gis/provinces_hn.json'
import sansha from '@/api/gis/ss.json'
import boundry from '@/api/gis/chatuboundry.json'
import { getHelpMapData } from '@/api/bigScreenNew/help.js'export default {name: 'GL',data() {return {option: null,images: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAABQCAYAAACETVz/AAAAAXNSR0IArs4c6QAAFZNJREFUaEPNmnts3ed535/3/rucC8/hISnKlCzRijSTthNHXVK7UMImXtDYcUynof8o2mHbH8GK9o+hAbq1Wyqy6I0bOgwosBVFu2FD/wjCYAO2tEVXN6PjtLGdMo1jH9lSJJoyKd6OqHP/Xd7r8DuHpChLMqTUin3AAxKH5/z44fd5vs/zvs/vRfDePJC7xXVQ/7Vb/equ/urude7qM9mbb4Z6F8q9q/+o0HcM6QD6781g5mZv+NxCtYpgBrKv/ccCAMycm3wH+izAWXC7V8q+3ZHKdwR5S8BdsMVzNZRfb6PTGd7p01B9vo4mn1h2sATZF7QP593UxJCDjHoyg7570HeF7ME5gLk5QGdhFjLFzk3W0OfWTyKvXkei00FrIzES3RQdAYCtkkSHAWAdAEZC7lbXANJQuLG879LNyy4p+e4bh/NuojrkZiYn3RzMwtldZd9N1dtC7gHuh3aiiuD5ZVytj6PJDC7XwNe8LiaJRiN5gxrpOMJSoVaoUaFLneVtNyAa7vzVCuRPtm35cmjHDg3Y6uZlN1nyHTwxbmEvHc7O9lLgdqC3hOwD9iREmXpDkzU0VB3CtbCGT5RS1FwTpMN9HLg2YbHEMVW44BkUa7t/PZ9i16LE+YZZFcbWp4FJTdsWRdEkesCeSLft4uG8q00MuV7uZqCZI3uxu/FxE+RBBRcmqqj+fAn/VL2OWrBGQi+PY0tIXjYoB0qaJqIMFCGEYUIMRsYi8HbrjsLOMGIZ0oZjbjTSRmLP8KCmIxGYQq5sum7I1lDN3gB6C0VvhsyEn5vtKTheKmFvtI5arTVSWBsjKqzRIAXKRZd2EmBOJSwEQjQ3BGOKuQTgHECC7JEmDFsKxBhsTOqcyvlWSd/XkclrJrd1pmqzMGYmUc0uHFD0nWreAJmpODfbN8kiLOIsxK2xNVK+hKnMIeriFnM0ZAi6HAA408DytoPOLa/yDRqG3tj9BRwS5lSqoXatWXGqc/KBirKhsBpAKeQUYkgWPCwTUVSh29YXi0VTaI6ZTNEpmLI9M82CO5if+5D7ZWZ2Fu0DwhopwBixbIMFpMXilhWeJ7imEPhG01ff3s7Xxh955NjUxz4R2ujkYJEdEkRy5WJVW9/Y6sbpxUvfW3lxKOp+9/EPFZsptgZhlGIUpomN5WCuLJXb1l00rPdCn4H28vNA2G+EdAALz83g8dIyLophHDUMtUQy3LzGsRCCOuH7pXxokc29hAYePvKTj3/xvmTncX7+VZH+8AKkzRYgioD6BETJB364CF2O1MrV5ks/fKv1p2eOFb9bLjKpEUmR0ElRkPSqLCo/5GpEEL0ktu1yadzOzCzYW0Pu5uIcLOIvVodwcWyNJNuWWetz0HVhWDHIjR0uxn5xeKV87Inx40d+If+9v6y0z30bAElABINNHJg4MycGxBFghoH6FPIVDldVUn/pUvu/TBwd+V9Hh0msHE2QxxOiRSrKsSxrrKrNMfN1VLNnYdFmnWkvN/eURG72ullOi1Vc3YwZgpQ70NwyERRHR0v0yKn73q4c+9z9Y0P/VLz5P4VJLgBCKbhUAqQaINFguwpU3UISEwBOgXAEiBPwQwyxi+W3LnT+4+MP3f+1XIGkqXFxIFzMcyKVjqqh475aWj1il0t1O3NuwaHZXjnK8rPXQBHMziKoVlEVgGTlZogPMJAdgUjiuXyuUPjwY4fXh05+ZnTywS8V6t8p6PYboGtvg65tguvGPUiUgUoNSGowsYUYhQCeACIwIEHAz1G4Gl1rLb6Z/tr0Y8dfNErJGAVRiF3Cc7k00g011hwzMAmmV+hnZ3sGuhFyooou/rcOjSqGIhNxrFLBGQT+2Icq0cmPPsI/euZXjp28/8F05w1QF78J8q0lMLUr4LrRdcgMNHsqA4YIkLkiYI8C8giQgENuAMHSpSuvbF/N/+pnH81f7Ro/wgGO45ZOxX2BbFeIPtHJaZjp9fleyG+AzFwNi0BHxxUL25ZdMzbwhJ8rnHro0Nr4h585+fgjvxwM5Knp7kD6+v8GefFlsPUaoCgL+a6Su2paRMARBjoIAOX9HigJObABH6TbMX/+4vZXpk+Pf0MTlkiUxtBxcYcwKYaZWjkGempqyh6ERFkHzFwNAGSsF2rLgHORdiKfhGERHz41Fj/+2S8/OFr7tIx2wEUxyLd/AHZrBVyn0w/zgWfmQUs4WMrAMg64tAuZ50CLIYRFDS+9eun/os7gVyZO+G3pcIQsiTogU+8QVs1q05ybnDQHXA59yIUZPPN8Ca/VX6MJtyzCxOPtKBCVwcIlUjo++uRT//64+9bJuFED1+mCazXAdTsAsQSUmj6kVOAM9BS0tA+JOAVcFIBCDiQngJZ8CAcEvLl8bvncq+IXn/pYca3jUJSDQrSNbTpe6kqoNg1MThrYK0X7vXphBkO9hJeWllipXmI70PQ9C0EuNLk38qf+0aknP/EHldWvDqcZWJQAJJmj1a6KBiBR4LQDR+h1QMaAcAKoyAHlGJC8B7QUAM/50OiudF56sfWlJx+979UGuAQhGg2FNN6o19W19XE9OQlm7tyC63WfGyAXgCyVlul4vcTWoelzlgRejIIfVB546MPPfvoP/df/uGik7AFdD3GmogJQFrI8zMJrCQPoAVKgggDkWe9JCz7QUggs9KAjr6QvPF/7l1/4icOvNLsmlZx3GQwkA3JVVkvjunauZl+ARXsz5C2U9KHr/z0bOvnoMz/zR8Xqf68AseCSAybZzUUHu4CUgaMMcAbICVBBwRYYoEIGGQAZyAHLBdCWG/HLL3Z+6YkT4XdjrSOZoxHrDiSxXJWZklkvvwlyPyfD16hcC7nzIqETHRKaBi+eXxuZ/Gf//D8fv/yXp0BEAPE7jOLQfoizPMwUzMJMs3z0COgBDjQveoC0mAeRz8Fq7fLWW+eL/+rx8ahab3U6uSKLwhQlWbhH4bSCUt3u52Rv57ffs0tY1l+jPXdLLhTrBJSooPqD8/mhL/+b337g1W8/gdILWdPbdbMC0NB38Z5RWBbiPmQG63IEXMEDWi4CLZcB5wrg5Sm8+dbaa7J25N8+kL90ua1aLaR41I33jLNb0K/38Osdp1cnV4COYsVyWvHYIB/rJFDNHe/liZ/4wqeOl35D/fWfodwI6bXArGD34HpuzvKwD5gpSDgG8CmYIgc6UAA2fB/QwRFAogCYXoO/f7371QfLh/4k3XhlA1CzlTocs7CQVgottXShbU5/6WmzWyf7m8u9tphBjr3sk2jSULQecW67PsbU80ga/PXy1dFHfvFn/9PwN781oZubEHoaHMJgqNgF7Dt5T8UM0OYp4EIIPAM8dAxIfqj3+43N87Xa1rH/cLK09ZLc/LtNipKOrus0LQg59KivYC028I5iflPvTkrLFOolxrxtQUB7TJPAdev85ftPfW7q9KGz+s/+hiNqgQsAoASAZspRwIIAFhQgIAAhAxJ6QAfLwEaOAR08CtgvgUwuwRvn0dc/dOjoV3Htb5dbzUt1JHjEtU1L9bqC0rgGAHNTW8zUnJ2dxRO7W4a2vEAmu9s0LRS5SRtC8pyPURpcql4Jo6c+/ss/mdM/n3x/GRzLoHBvpYM93HM0ytpfQAGHDGguADo4BLR8P9DiYcCkBufevPqdQvjR/1rx3r7Q2fjeVhDFbSNtmg6EsnOtpbrhkD0HYLJVEOyu0G9c9B5YlZdLyzSuA7M5y4Fw4XHlgY787/zwatl/fOKXHuHyZ8W1FpbZCtrDQLzMyRkgBxKwPmToA86VQJSGQEELzr/V/TbCj/7phw5HF/X2uS0V7bRkghNhpIwrbdklw+bEK7GBs9f7dm8Hubd53NvfTEzMoJnnl/GKzJNuANQ6zXKqwR0WApz2ODXeG1da+e2i9+wjg+TnRn0YRZyB8zmAxwAFHFiOAwsYMD9b/GrYaHV3frjq/flI+R9/4+R96Wbaebuuu1sdCTgWkMrC0JgEqGnItw0sZ/vxBXerRW8/L/txR3OLi/iLQ/3V+eUmpiVkmR9tsqTseR5lXkiM13GafWslOlHi+smjg/SxMM9GC8Mi8AYF0hYgtjKKdLq9WrOvtOKRv/rYwycuDoYqMXK7rUnc1R2WchGkWmJdHm8oWBszMFSze4Y5uAe/abcIsxnsLCyt/x9SXB3GzSPbJKc9YlCDBabL3WBJKNB+kHc8Lzjb6FixvNUZ2ryWVB77pP/E/cfFM0vfj/5gdU2tFLzc5oPHi9tHR0PZNbEyxqaEQay1SoXtSkWOq3KRaiDawOoRu5CtyHfXkbfc4xwMe6Zmf9+9jE+PjqOljWWa0x1iUJcF5QJ33ImcB9xiJrwAOGIBo5hqfDz9DDLmXyfOe443UYsS4yJLtSVJSlMsDaUpYyoNIZLQ1gqGc+ZilofDRyx844KD3Z3iu+6792vm3nhvooqW6iVcfH0Ve/Q1fEV7rDhK2WCKmQbgJuQioIwb33GXEhNOuJ+h2v16Av4X1HbapIwYipRiIU3jDlLapjK1RN430JQbm22T8pP2mDxp+i2wvxK/1UzoXWZB/TlkNmqZOVdDVbeNryzvsPHxPPGKggrhOKU+18Rx7DhLUmvKp/BT2LjfsD5+iqzaRpsiR0FJi0FxwLIRI+UTpMocq4ubNXtCfMrCxgXXc/McQLbfvqNZ0A1hPzAwXYRZPLVzgmyJNh35yDHSDhxLa4ZTIjgWjkXa6eJR/DRW6DeN5z6jr5iGCEIbqWYPMAQqr+WsTo3W3beGzYmH/8JAbcZlCs7NvfsI8N1Hfz23912/UAU08wRg4EBq0QSNUZmVcy1GSiFLO44JghQeJc+gGP+WLsGn1QY0nMGOYyUDnMiGzmultnW3G+ljctBAacnCzKyDud2h6m0majfUydtNzfdKU39GNIUvln2SH7hCecwoHSIUi4ClyjKv7TQ5Tp5BCfodGMFT0QXXHPCt6XKizLVIFQ5jBevZSKhp4Nywhd0BwO3GfQd57nwc7QAW56bI2I5PTjy0TeCQR5oEUSIty+VCun3VmuJRmEYp/C5UzCfMFWi4nDEWQOsdogbGuYJr0kBt2/Ygzy6adxuc3jVkz/WZ7xZmcDY8mFxbI/DoGGmub7DED1ieONpuIj1wAqYhhd9Dw+pMexk1fKZsIIhqNEAPfDwvoasNfPOI3VvQ3sokt4roHSm5DwkzuLpwHRKgRjdjn1GlWQUrqUbEszbC82rInsEXbd0VmLVZpW60dRpwNTJO9I8FEhaAwK6S0I1YB1uaZJCMKjVCpm0H5lVFncFXRD0Y0Lbd3YM8okbGr/44IYHAo0D2IalmFU2VGmXTto3m1WDyAYMsBDTBKau0lFKj3rTtonlVUmdwHdUDvqck0WmQfx+VvAEymHYRnpfD9gzeUvWAC9vuUm0a8QcFUig1SqZdDPNySJ3BW6wecM+2u+n7BAlAsuEWBBHr7CsplBrj0y6CeZnl5AcHkrFOQdEEE1ZpmT5kjOdlWZ/BW+66khDrVO7mZPOIheX+xv+e1cleCdpX8iCkr9RRPe0iMi9L6Rm85deDAWvbCdemvf1BgnTTLqXzstD9gEEeFjQBxCqbTqnjtB/ufJaT5ICSUqdlo0aCqxrubbiz0fVzeD/cQ0CAMtYJ9yBDpY6raZfieRlmSn5gIB9gnXBrV8lQqQfUtEvovBxIz+BVUw8GPNtOtDbtH7uSEwSgRWAiJVAvsM6hLZq0Q1bpIKVGzLRL2bwsRmfwata7rW0zrc36+wZZIFBPWedQlybGsUqElCrAtEv4vMy3diF922ZWm3Wj0/KOGgkGNDTTe1mCspxcwLBQ3VVyDxLRxLRZhSClCJt2MZmXucYZvCPqAd+DzOu0fOmDAin6OVlqn8EbYT3gblfJDwQkZxUilSK2XycHGn3IkrNtGWqzDjoth2okEBqawsLy8/eq49wi3DZlHT8LN2eVSCo1ANNO03mZv3YGq7AeeM6266E2EegUv6+QBZqYlFWIUIpH006xeRk2zmBVqAce2HYd3QbyaxahW54eu2mbcxd7nF0lq1UCrRaBQoFAT8kDkF4y7SSfl8HO+wtZrVbJ5AHILecx6hQbDEOp/PRZJ73fA79xpt3KN3yBrEmVunW476GSPcgQYbgSsVZJMSyKVLqI64SqYklMI+3/riIbn8RJoe4EWJtKZTadLhYGJdxgnHsEubg4R8Zee5mcOFWh9UGfppHghZzP0CFEo21pCpWBz4MNf5vlL/801AuNWMTWrxPV7kYqLcayIo4q2Bk1fXffI0hYnCMQ7xDwN1lzkDG5w8VQOU9TRLnFXY2Lhz+P3cBvKrr8T8iOawhKTIwTZbpM5mx2BgIUeKMavv6ChbP/z7ynxtk//vC5dQKDkkCKWdv5nNbbnl8KWAqGC0V1Wjr0NEYDs1q99lm/xeqptdYJKj3rUrAure0g1YVIr7ywoqfuGeTZdbKxBMwDYCWsejewUx15AlneNsjwkaNPYVL5SpL84GnRZnWulUm5loIHCTiXXkWhrGxsq0VY0VMvTFk0O2tvNyi761lQbw4EswgWqhTGS/37IMWOiB0WfooEOMpl0rJ46OSTjg7/O5R89/O2gxtAlOGcpRCJFILNFICnQJmElRUNU4vZ2Z8bTlLdDviO6uQeZHWhSsvjJTqaQdKOABQIwGkfMtXOjRx7CtPKr5vWq8/ixFzj2OoszJnHwTRTyN9zSECw9CUCsk6Blzhk4c7uzVHjSSiECELuysUnES98GUdrP0cSvS1V3OWkG/VAux0FRSpXNqw6Bn0lEYL3ONxzgOCTUxjGHiYQNSjwMU9G8XDarZUdoQM8d3IQDR3+PBHmKWjD7yc7519D8cY1jHET54s7Igiugu8ruFbVcC67d/geb2lvOAIxXsKQe8BrtdcelBvf95HwCQtLoi6e/uLo+Mf/Bc8hqG+0I7n9F7/md5bOy7SZUsJcUPlIjW92LsFnBw3MgYWzZ917WoKuzyd7k34EK/cXovrrj7Xf+qs6Yz4Eww/4f/NG/tGVq/nnCBEllTYvfeoj7n8M8tX1pHU5IcGIlz/yKfCi0nf2Cnl2A+49Hw70QTMzzvXNtv3wsai19ZDprGMnO0pQhuJUs0Q7UshhCYmxRhCgfplZb7Qbsvzfzf3Jc43sTsHZu1Dxjgb7B8tC3+V9NRGatW71b33g8WFtuqNAXQ5ZIwxymGCitUWJsLgJVKxBhW0DmjLgsn/wbC977lTFu4a8rmb2U1/RDPZ6OnwNL8IQmlqoOfTcc+b663uH5+8e8EeD3D17fv2w/W74ezd7Jvr3fLLT+jMz2fHq3UBkcP0/dzcK7kXxjor5LTpB7wTMLUEPvrl3K+4fBvgjKflO4H6eHgS+uev+KOrdde++XU898Pqusje+8x8Kt3e1/w+Ju5sVJc1VnQAAAABJRU5ErkJggg==',cityInfo: require('@/api/gis/jcy.json'),jcyInfo: []}},mounted() {this.getData()},beforeDestroy() {},methods: {getData() {getHelpMapData().then(res => {if (res.code === 200) {this.jcyInfo = res.data}this.initCharts()})},initCharts() {const that = thisconst option = {animation: false,tooltip: {},series: [{name: 'jcy',type: 'scatter',map: 'hn',zlevel: 10,coordinateSystem: 'geo',geoIndex: 0,symbolSize: [30, 60],symbol: `image://${that.images}`,data: that.cityInfo.location.map(d => {return {name: d.name,value: [parseFloat(d.X),parseFloat(d.Y)]}}),tooltip: {backgroundColor: 'rgba(0,0,0,0.5)',borderColor: 'rgba(0,0,0,0)',extraCssText: 'box-shadow: 0 0 0 rgba(255, 255, 255, 0.7);',zIndex: 400,formatter: function(params) {let html = ''var title = `<div style="color:#ffffff;margin-bottom: 12px; font-size: 14px">${params.name}</div>`html = titleconst item = that.jcyInfo.find(t => t.name === params.name)if (item) {const info = `<div style=" line-height: 30px;color:#7BE6FF;font-size:10px;"><span style="display:inline-block;margin-right:4px;width:8px;height:8px;border-radius:50%;"></span><span style="margin-right:30px;color:#7BE6FF">进行中的个案总数：</span><span style="float:right;color:#7BE6FF">${item.num}</span></div>`html += info}return html}}},{name: 'scjcy',type: 'scatter',map: 'ss',zlevel: 500,coordinateSystem: 'geo',geoIndex: 3,symbolSize: [30, 60],symbol: `image://${that.images}`,data: [{name: '三沙市三沙群岛人民检察院',value: [114.375028, 10.547062]},{'name': '三沙市人民检察院',value: [112.345028, 16.837062]}],tooltip: {backgroundColor: 'rgba(0,0,0,0.5)',borderColor: 'rgba(0,0,0,0)',extraCssText: 'box-shadow: 0 0 0 rgba(255, 255, 255, 0.7);',zIndex: 500,formatter: function(params) {console.log(params)let html = ''var title = `<div style="color:#ffffff;margin-bottom: 12px; font-size: 14px">${params.name}</div>`html = titleconst item = that.jcyInfo.find(t => t.name === params.name)if (item) {const info = `<div style=" line-height: 30px;color:#7BE6FF;font-size:10px;"><span style="display:inline-block;margin-right:4px;width:8px;height:8px;border-radius:50%;"></span><span style="margin-right:30px;color:#7BE6FF">进行中的个案总数：</span><span style="float:right;color:#7BE6FF">${item.num}</span></div>`html += info}return html}}}],geo: [{map: 'hn',zlevel: 5,roam: true,aspectScale: 1.1,center: [109.786246, 18.464193],zoom: 0.8,scaleLimit: {min: 0.2,max: 50},label: {show: true,color: '#ffffff',shadowColor: '#134ae6',shadowOffsetX: 15,shadowOffsetY: 15,textBorderColor: '#134ae6',textBorderType: 'solid',textBorderWidth: 2},itemStyle: {color: '#153294', // 背景opacity: 0.9,borderWidth: '1', // 边框宽度borderColor: 'rgba(255,255,255,0.3)' // 边框颜色},emphasis: {label: {show: true,color: '#ffffff',shadowColor: '#134ae6',shadowOffsetX: 15,shadowOffsetY: 15,textBorderColor: '#134ae6',textBorderType: 'solid',textBorderWidth: 2},itemStyle: {areaColor: '#0CBFFF',opacity: 0.9}}},{map: 'hn',top: '12%',silent: true,aspectScale: 1.1,zlevel: 4,center: [109.786246, 18.464193],zoom: 0.8,itemStyle: {color: '#01EAF8', // 背景opacity: 1,borderWidth: '1', // 边框宽度borderColor: '#3C5FA1' // 边框颜色}},{map: 'ss',zlevel: 6,roam: false,aspectScale: 0.7,center: [14.87585417960884, 4.8374873458189995],zoom: 0.148,label: {show: true,color: '#ffffff',shadowColor: '#2074FF',shadowOffsetX: 15,shadowOffsetY: 15,textBorderColor: '#134ae6',textBorderType: 'solid',textBorderWidth: 2},itemStyle: {color: '#ffffff', // 背景opacity: 1,borderWidth: 1, // 边框宽度borderColor: 'rgba(255,255,255,0.3)' // 边框颜色// borderopacity: 0.6},emphasis: {itemStyle: {color: '#153294',opacity: 0.9},label: {show: true,color: '#ffffff',shadowColor: '#2074FF',shadowOffsetX: 15,shadowOffsetY: 15,textBorderColor: '#134ae6',textBorderType: 'solid',textBorderWidth: 2}}},{map: 'boundry',zlevel: 6,roam: false,aspectScale: 0.7,center: [14.87585417960884, 4.8374873458189995],zoom: 0.148,label: {show: false},itemStyle: {color: '#153294', // 背景opacity: 0.2,borderWidth: 2, // 边框宽度borderColor: '#01EAF8' // 边框颜色},tooltip: {// show: false}}]}this.myChart = echarts.init(document.getElementById('map')) // 这里是为了获得容器所在位置echarts.registerMap('hn', hainan)echarts.registerMap('ss', sansha)echarts.registerMap('boundry', boundry)this.myChart.setOption(option)this.myChart.on('georoam', function(params) {var option = that.myChart.getOption()// 获得option对象if (params.zoom != null && params.zoom !== undefined) { // 捕捉到缩放时option.geo[1].zoom = option.geo[0].zoom // 下层geo的缩放等级跟着上层的geo一起改变option.geo[1].center = option.geo[0].center// 下层的geo的中心位置随着上层geo一起改变} else { // 捕捉到拖曳时option.geo[1].center = option.geo[0].center// 下层的geo的中心位置随着上层geo一起改变// option.geo[2].center = option.geo[0].center// option.geo[3].center = option.geo[0].center}that.myChart.setOption(option)// 设置option})}}
}
</script>
<style lang="scss" scoped>
@import "@bigScreen/styles/mixins";.wrapper {height: 100%;overflow: hidden;
}.chartBox {width: 100%;height: 100%;
}
</style>

.geo[1].zoom = option.geo[0].zoom // 下层geo的缩放等级跟着上层的geo一起改变
option.geo[1].center = option.geo[0].center// 下层的geo的中心位置随着上层geo一起改变
} else { // 捕捉到拖曳时
option.geo[1].center = option.geo[0].center// 下层的geo的中心位置随着上层geo一起改变
// option.geo[2].center = option.geo[0].center
// option.geo[3].center = option.geo[0].center
}
that.myChart.setOption(option)// 设置option
})
}
}
}