From 5eb7aba333a0f6700b096cafc9062aee8a913e4a Mon Sep 17 00:00:00 2001
From: zouzhibing <zouzhibing@anthead.cn>
Date: Fri, 10 Jun 2022 17:40:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=B0=B4=E5=8D=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   2 +-
 src/router/modules/other.ts                   |   6 +
 src/views/charts/components/js/data.js        |  40 ++++++
 .../charts/components/migration/index.vue     |  47 ++++++-
 src/views/charts/migration.vue                |  15 ++-
 src/views/other/water-marker.vue              | 123 ++++++++++++++++++
 6 files changed, 227 insertions(+), 6 deletions(-)
 create mode 100644 src/views/charts/components/js/data.js
 create mode 100644 src/views/other/water-marker.vue

diff --git a/package.json b/package.json
index 2a221c9..da47ea6 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "ad",
+  "name": "vue-admin-perfect",
   "version": "0.1.0",
   "private": true,
   "scripts": {
diff --git a/src/router/modules/other.ts b/src/router/modules/other.ts
index 85af372..05b29e1 100644
--- a/src/router/modules/other.ts
+++ b/src/router/modules/other.ts
@@ -54,6 +54,12 @@ const othersRouter = {
       name: 'qrcode',
       meta: { title: '生成二维码' }
     },
+    // {
+    //   path: 'water-marker',
+    //   component: () => import('@/views/other/water-marker.vue'),
+    //   name: 'water-marker',
+    //   meta: { title: '生成水印' }
+    // },
     {
       path: 'right-menu',
       component: () => import('@/views/other/right-menu.vue'),
diff --git a/src/views/charts/components/js/data.js b/src/views/charts/components/js/data.js
new file mode 100644
index 0000000..b1a5eaf
--- /dev/null
+++ b/src/views/charts/components/js/data.js
@@ -0,0 +1,40 @@
+export const cityIconData = [
+    {
+        adcode: 650000,
+        name: "新疆维吾尔自治区",
+        value:[88.999903,43.607078]
+    },{
+        adcode: 150000,
+        name: "内蒙古自治区",
+        value:[119.24787,42.205741]
+    },
+    ,{
+        adcode: 150000,
+        name: "内蒙古自治区",
+        value:[110.627161,41.16628]
+    },
+    {
+        adcode: 540000,
+        name: "西藏自治区",
+        value:[89.483714,30.251951]
+    },
+    {
+        adcode: 630000,
+        name: "青海省",
+        value:[102.064693,37.084008]
+    },
+    {
+        adcode: 530000,
+        name: "云南省",
+        value:[102.187665,25.083688]
+    },
+    {
+        adcode: 610000,
+        name: "陕西省",
+        value:[109.20663,35.018625]
+    },
+
+]
+
+
+
diff --git a/src/views/charts/components/migration/index.vue b/src/views/charts/components/migration/index.vue
index ba3ef8e..9b5b765 100644
--- a/src/views/charts/components/migration/index.vue
+++ b/src/views/charts/components/migration/index.vue
@@ -1,4 +1,3 @@
-
 <template>
   <div :id="id" :class="className" :style="{height:height,width:width}" />
 </template>
@@ -7,7 +6,8 @@ import { geoJson } from './get.js'
 import * as echarts from 'echarts'
 import { EChartsType } from 'echarts/core'
 import { onMounted } from 'vue'
-
+import {cityIconData} from '../js/data.js'
+import logo from '@/assets/logo.png'
 const props = defineProps({
   className: {
     type: String,
@@ -132,6 +132,12 @@ var convertToLineData = function (data, gps) {
 }
 
 const options = {
+  tooltip:{
+    trigger: 'item',
+    formatter(val){
+      // console.log('val==========',val)
+    }
+  },
   backgroundColor: '#001540',
   geo: {
     show: true,
@@ -194,6 +200,7 @@ const options = {
           }
         }
       },
+
       roam: true,
       itemStyle: {
         normal: {
@@ -258,7 +265,41 @@ const options = {
         }
       },
       data: convertToLineData(mapData, geoGpsMap)
-    }
+    },
+    {
+      type:'scatter',
+      zlevel: 16,
+      coordinateSystem: 'geo',
+      symbolSize:30,
+      symbol:`image://${logo}`,
+      data:cityIconData,
+      rippleEffect: {
+        period: 4, brushType: 'stroke', scale: 4
+      },
+      tooltip:{
+        trigger:'item',
+        padding:0,
+        borderColor:'black',
+        background:'rgba(0,0,0,0.7)',
+        textStyle: {
+          fontSize:20
+        },
+        formatter(val){
+          console.log('val=======',val)
+          let tipHtml = `
+                     <div class="m-info" style=" opacity: 0.95;background: rgba(25,27,29,1);" >
+                         <div class="title" style="padding-left: 12px;
+                         padding-top: 10px;
+                         padding-bottom: 10px;
+                         background: rgba(25,27,29,1);font-size: 20px;color: white;padding-right: 20px">${val.name}</div>
+<!--                         <div class="content" style=" padding: 12px; background: rgba(0,2,4,1);">-->
+          <!--                               <div style=" font-size: 22px; color: #ff0000;">258944</div>-->
+          <!--                        </div>-->
+          </div>`
+          return tipHtml
+          }
+      }
+    },
   ]
 }
 let chart:EChartsType
diff --git a/src/views/charts/migration.vue b/src/views/charts/migration.vue
index 5002896..3a68bf8 100644
--- a/src/views/charts/migration.vue
+++ b/src/views/charts/migration.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="echarts-map">
+    <el-card class="info">Echarts 实现飞线图、地图增加图标、高亮</el-card>
     <migration-charts height="100%" width="100%" id="migration"/>
   </div>
-
 </template>
 
 <script setup lang="ts">
@@ -10,8 +10,19 @@ import MigrationCharts from './components/migration/index.vue'
 
 </script>
 
-<style>
+<style lang="scss" scoped>
 .echarts-map{
   height: calc(100vh - 93px);
+  position: relative;
+  .info{
+    position: absolute;
+    left: 0;
+    width: 100%;
+    font-weight: bold;
+    z-index: 999;
+  }
+  ::v-deep(.el-card){
+    border-radius: 0;
+  }
 }
 </style>
diff --git a/src/views/other/water-marker.vue b/src/views/other/water-marker.vue
new file mode 100644
index 0000000..51462c9
--- /dev/null
+++ b/src/views/other/water-marker.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="m-water-marker"></div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, onMounted } from 'vue'
+
+function watermark (options) {
+  const {
+    container = document.body, // 容器
+    width = '100', // canvas元素宽
+    height = '100', // canvas元素高
+    textAlign = 'left', // 文字对齐
+    textBaseline = 'bottom', // 基准线
+    font = '16px Microsoft Yahei', // 字体大小及样式
+    fillStyle = '#000', // 自定义水印的颜色
+    content = '内部文档，请勿外传', // 水印内容
+    globalAlpha = 0.1, // 设置图形和图像透明度的值
+    rotate = 16, // 文字旋转角度
+    zIndex = 1000, // 元素堆叠顺序
+  } = options;
+
+  let canvas = document.createElement('canvas');
+  canvas.setAttribute('width', width);
+  canvas.setAttribute('height', height);
+  let ctx = canvas.getContext('2d'); // 获取 canvas2d 上下文
+  ctx.globalAlpha = globalAlpha;
+  ctx.textAlign = textAlign;
+  ctx.textBaseline = textBaseline;
+  ctx.font = font;
+  ctx.fillStyle = fillStyle;
+  ctx.rotate((Math.PI * rotate) / 180);
+  ctx.fillText(content, 50, 50);
+
+  const base64Url = canvas.toDataURL(); // 返回一个包含图片展示的 data URI
+
+  const __wm = document.querySelector('.__wm');//选择器
+  const watermarkDiv = __wm || document.createElement("div");
+  const styleStr = `
+    position:absolute;
+    top:0px;
+    left:0px;
+    width:100%;
+    height:100%;
+    z-index:${zIndex};
+    pointer-events:none;
+    background-repeat:repeat;
+    background-image:url('${base64Url}')`;
+
+  watermarkDiv.setAttribute('style', styleStr);
+  watermarkDiv.classList.add('__wm'); // 为元素添加“__wm”类名
+
+  document.body.style.position = 'relative';
+  if (!__wm) {
+    document.body.appendChild(watermarkDiv); // 添加元素
+  }
+
+  const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
+  // 检查浏览器是否支持这个API
+  if (MutationObserver) {
+    const args = arguments[0];
+    let mo = new MutationObserver(function () {
+      const __wm = document.querySelector('.__wm');
+      // 只在__wm元素变动才重新调用
+      if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm || document.body.style.position !== 'relative') {
+        // 避免一直触发
+        mo.disconnect();
+        mo = null;
+        watermark(args);
+      }
+    });
+    mo.observe(document.body, {
+      attributes: true, // 观察目标节点的属性节点
+      subtree: true, // 观察目标节点的所有后代节点
+      childList: true, // 观察目标节点的子节点
+    })
+  }
+}
+  onMounted(()=>{
+    nextTick(()=>{
+      const canvas = document.createElement('canvas')
+      const width = 100
+      const height = 100
+      canvas.width = width
+      canvas.height = height
+      const context = canvas.getContext('2d')
+      context.font = "normal small-caps lighter 16px sans-serif";
+      context.fillStyle = "#666";
+      context.textAlign = "center";
+      context.textBaseline = "Middle";
+      context.rotate(-10 * Math.PI / 140);
+      context.fillText('content', parseFloat(width) / 2, parseFloat(height) / 2);
+      context.fillText('content', 60, 100);
+      var base64Url = canvas.toDataURL();
+      const watermarkDiv = document.getElementsByClassName('m-water-marker')[0]
+      watermarkDiv.style.backgroundAttachment = "fixed";
+      watermarkDiv.style.backgroundPosition = "center";
+      watermarkDiv.style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")";
+      // const options = {
+      //   container : document.body, // 容器
+      //   width : '100', // canvas元素宽
+      //   height : '100', // canvas元素高
+      //   textAlign : 'left', // 文字对齐
+      //   textBaseline : 'bottom', // 基准线
+      //   font : '16px Microsoft Yahei', // 字体大小及样式
+      //   fillStyle : '#000', // 自定义水印的颜色
+      //   content : '内部文档，请勿外传', // 水印内容
+      //   globalAlpha : 0.1, // 设置图形和图像透明度的值
+      //   rotate : 16, // 文字旋转角度
+      //   zIndex : 1000, // 元素堆叠顺序
+      // }
+      watermark(options)
+    })
+
+  })
+</script>
+
+<style>
+.m-water-marker{
+  width: 1000px;
+  height: 500px;
+}
+</style>