|
|
@@ -0,0 +1,253 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="mapBg">
|
|
|
+ <div class="worldMap" id="worldMap" ref="worldMap" height="300"></div>
|
|
|
+ </div>
|
|
|
+ <div v-if="dialogVisible" style="background:#fff;left:50%;top:30%;
|
|
|
+ position:absolute;z-index:10000;border:1px oslid red;width:50%;height:300px;">
|
|
|
+ <h1 align="center">这里是国家地图</h1>
|
|
|
+ <button style="margin-top:30%;" @click="dialogVisible=false">关闭</button>
|
|
|
+ </diV>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import * as echarts from 'echarts'
|
|
|
+ import mapData from '../utils/map.js'
|
|
|
+
|
|
|
+ var cityData = [{
|
|
|
+ name: '长春',
|
|
|
+ value: [125.299633, 43.914039, 10],
|
|
|
+ }, ]
|
|
|
+ var szPoinUrl = "";
|
|
|
+
|
|
|
+ let imgBase64 = ''
|
|
|
+ let tempData1 = [{
|
|
|
+ name: '环境监测',
|
|
|
+ value: [-73.97622, 40.757498],
|
|
|
+ ph: 200,
|
|
|
+ offset: [70, -58],
|
|
|
+ padding: [12, 25, 56, 80],
|
|
|
+ imgurl: '',
|
|
|
+ }];
|
|
|
+ export default {
|
|
|
+ mounted() {
|
|
|
+ var worldChart = echarts.init(this.$refs["worldMap"]);
|
|
|
+ echarts.registerMap('world', mapData.registerMapData);
|
|
|
+ worldChart.setOption(this.option);
|
|
|
+
|
|
|
+ worldChart.on("georoam", function (params) {
|
|
|
+ var option = worldChart.getOption(); //获得option对象
|
|
|
+ if (params.zoom != null && params.zoom != undefined) {
|
|
|
+ //捕捉到缩放时
|
|
|
+ let mo = option.geo[0].zoom
|
|
|
+ option.geo[0].zoom = option.series[0].zoom; //下层geo的缩放等级跟着上层的geo一起改变
|
|
|
+ option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
|
|
|
+ // // 改变标记点随地图放大缩小
|
|
|
+ // // console.log(option.series)
|
|
|
+ // let size = option.series[0].zoom/mo
|
|
|
+ // if(option.series[0].zoom>mo){
|
|
|
+ // // console.log(option.series)
|
|
|
+ // option.series[2].symbolSize = [option.series[2].symbolSize[0]*size,option.series[2].symbolSize[1]*size]
|
|
|
+ // option.series[1].symbolSize=option.series[1].symbolSize*size
|
|
|
+ // option.series[1].label.fontSize=option.series[1].label.fontSize*size
|
|
|
+ // }else{
|
|
|
+ // option.series[2].symbolSize = [option.series[2].symbolSize[0]*size,option.series[2].symbolSize[1]*size]
|
|
|
+ // option.series[1].symbolSize = option.series[1].symbolSize*size
|
|
|
+ // option.series[1].label.fontSize = option.series[1].label.fontSize*size
|
|
|
+ // }
|
|
|
+ // // 改变标记点end
|
|
|
+ } else {
|
|
|
+ //捕捉到拖曳时
|
|
|
+ option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
|
|
|
+ }
|
|
|
+ // myChart.dispatchAction({ //来用程序主动渲染选框
|
|
|
+ // type: "restore",
|
|
|
+ // });
|
|
|
+ worldChart.setOption(option); //设置option
|
|
|
+ });
|
|
|
+
|
|
|
+ //
|
|
|
+ worldChart.on('click', params => {
|
|
|
+ console.log(111111111111)
|
|
|
+ this.dialogVisible = true;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ series() {
|
|
|
+ let res = [{
|
|
|
+ type: "map",
|
|
|
+ roam: true,
|
|
|
+ animationDurationUpdate: true,
|
|
|
+ label: {
|
|
|
+ show: !1,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: !1,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ borderColor: "#0F6DAC",
|
|
|
+ borderWidth: 0.2,
|
|
|
+ areaColor: {
|
|
|
+ type: "radial",
|
|
|
+ x: 0.5,
|
|
|
+ y: 0.5,
|
|
|
+ r: 0.8,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0,
|
|
|
+ color: "#061D35", // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#061D35", // 100% 处的颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ globalCoord: true, // 缺省为 false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ // show: !1,
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ areaColor: "#05223D",
|
|
|
+ // shadowColor: 'rgb(12,25,50)',
|
|
|
+ borderWidth: 0.2,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ aspectScale: 0.65, //长宽比
|
|
|
+ zoom: 1.12,
|
|
|
+ // roam: false,
|
|
|
+ map: "world", //使用
|
|
|
+ // data: this.difficultData //热力图数据 不同区域 不同的底色
|
|
|
+ }]
|
|
|
+ tempData1.forEach(item => {
|
|
|
+ res.push({
|
|
|
+ type: 'scatter',
|
|
|
+ coordinateSystem: 'geo',
|
|
|
+ symbol: szPoinUrl,
|
|
|
+ symbolSize: [20, 20],
|
|
|
+ legendHoverLink: true,
|
|
|
+ z: 99999,
|
|
|
+ index: 99999,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ offset: item.offset, //偏移设置
|
|
|
+ fontSize: 14,
|
|
|
+ lineHeight: 23,
|
|
|
+ backgroundColor: {
|
|
|
+ image: item.imgurl,
|
|
|
+ },
|
|
|
+ borderColor: '#106EAD',
|
|
|
+ padding: item.padding,
|
|
|
+ formatter(value) {
|
|
|
+ return `{name|${value.data.name}\nPH值：${value.data.ph}}`;
|
|
|
+ },
|
|
|
+
|
|
|
+ rich: {
|
|
|
+ name: {
|
|
|
+ fontWeight: 'bold',
|
|
|
+ fontSize: 16,
|
|
|
+ color: '#fff',
|
|
|
+ height: 100,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ data: [item],
|
|
|
+ showEffectOn: 'render',
|
|
|
+ rippleEffect: {
|
|
|
+ brushType: 'stroke',
|
|
|
+ },
|
|
|
+ hoverAnimation: true,
|
|
|
+ zlevel: 9999,
|
|
|
+ },
|
|
|
+
|
|
|
+ )
|
|
|
+ })
|
|
|
+ return res
|
|
|
+ },
|
|
|
+
|
|
|
+ option() {
|
|
|
+
|
|
|
+ return {
|
|
|
+ // backgroundColor: '#051421',
|
|
|
+ backgroundColor: 'transparent',
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ formatter: function (params, ticket, callback) {
|
|
|
+ if (params.seriesType == "effectScatter") {
|
|
|
+ return params.marker + params.data.name + "" + params.data.value[2];
|
|
|
+ } else if (params.seriesType == "lines") {
|
|
|
+ return params.data.fromName + " -> " + params.data.toName + "<br />" + params.data.value;
|
|
|
+ } else {
|
|
|
+ return params.name;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ right: '8%',
|
|
|
+ // top:'5%'
|
|
|
+ },
|
|
|
+ geo: {
|
|
|
+ map: 'world',
|
|
|
+ aspectScale: 0.65, //长宽比
|
|
|
+ zoom: 1.12,
|
|
|
+ show: true,
|
|
|
+ tooltip: {
|
|
|
+ show: !1,
|
|
|
+ },
|
|
|
+ scaleLimit: {
|
|
|
+ min: 1,
|
|
|
+ max: 5,
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: !1,
|
|
|
+ },
|
|
|
+ animationDurationUpdate: 0,
|
|
|
+ roam: true,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ shadowColor: "#164A7C",
|
|
|
+ shadowOffsetX: 5,
|
|
|
+ shadowOffsetY: 5,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ },
|
|
|
+ zlevel: 999,
|
|
|
+ series: this.series
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ dialogVisible: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .worldMap {
|
|
|
+ display: inline-block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+
|
|
|
+ background: #051421;
|
|
|
+ position: absolute;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mapBg {
|
|
|
+ /* background: #051421;
|
|
|
+ position: absolute;
|
|
|
+ z-index: -1; */
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
Your Name
