【vue-baidu-map + mapv】结合实现动态水流动画

实现技术

引用

此方案对于电脑要求有点高，GPU直接就占满了，没想到好的解决方案，但功能实现了

实现技术

mapv
vue-baidu-map
百度地图
引用固定弹框封装插件

引用

index.html

<script src="https://api.map.baidu.com/api?v=3.0&ak=***"></script>
<script src="https://unpkg.com/vue-baidu-map"></script>
<script src="https://mapv.baidu.com/build/mapv.min.js"></script>

main.js

Vue.use(VueBaiduMap.default, {ak: '***'
})

MyOverlay.vue

<template><bm-overlayref="customOverlay":class="{sample: true, active}"pane="labelPane"@draw="draw"><div><div class="text">{{text}}</div><img v-if="img1!=''" :src="img1" height="13vh" width="13vh" alt="图像" /><img v-if="img2!=''" :src="img2" height="13vh" width="13vh" alt="图像" /></div> </bm-overlay>
</template><script>
export default { props: ['text','img1','img2', 'position', 'active'],watch: {position: { handler () { this.$refs.customOverlay.reload() },deep: true }},methods: {draw ({el, BMap, map}) {const {lng, lat} = this.positionconst pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))el.style.left = pixel.x +20 + 'px'el.style.top = pixel.y - 30 + 'px'}}
}
</script><style>
.text{padding: 2px;/* text-overflow: ellipsis;overflow: hidden;display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical; */
}
.sample {width: 80px;/* height: 30px; */background: rgba(255,255,255,0.5);overflow: hidden;box-shadow: 0 0 5px #fff;color: #323232;padding: 5px;position: absolute;font-size: 10px;}
</style>

使用

<template><div><div class="table-all-body"><!-- <div id="allmap" style="position:absolute;width: 100%;height: 100%;z-index:0;"></div> --><baidu-map style="width: 100%;height: 100%;z-index:0;" :center="center" :zoom="zoom" @ready="handler":scroll-wheel-zoom="true" :mapClick="false" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom"><!-- 图标+默认跳动+点击跳动 --><bm-marker v-for="item in maps" :key="item.id" :position="{lng: item.longitude, lat: item.latitude}":icon="{url: (item.qualityLevel==1?'static/img/stationAlarm.png':item.qualityLevel==2?'static/img/outLine.png':'static/img/stationNormal.png'), size: {width: 48, height: 48}}":animation="nowStationId==item.id?'BMAP_ANIMATION_BOUNCE':''" @click="clickStation(item)"></bm-marker><!-- 固定弹框内容 --><MyOverlay v-if="nameShow" v-for="item in maps" :key="item.id":position="{lng: item.longitude, lat: item.latitude}" :text="item.name":img1="item.deviceWarn?'static/img/alarm2.png':''" :img2="item.qualityWarn?'static/img/alarm1.png':''"></MyOverlay></baidu-map></div>
</template>
<script>import selectStation from "./children/selectStation"import RealTimeData from "./children/RealTimeData";import MyOverlay from '@/components/common/MyOverlay.vue'export default {components: {selectStation,RealTimeData,MyOverlay,},data() {return {map: "", // 地图bigOrSmall1: 0, //扩大的状态maps: [], // 站点信息数组nowStationId: '',timeId: "", //循环center: {lng: 0,lat: 0},zoom: 3,qianxiData: [],contentShow: false,nameShow: true,};},computed: {},//取消循环beforeDestroy() {clearTimeout(this.timeId);},mounted() {},methods: {handler({BMap,map}) {this.map = mapthis.getTreePath()this.getMapData()this.zoom = 15},draw({el,BMap,map}) {const pixel = map.pointToOverlayPixel(new BMap.Point(map.re.lng, map.re.lat))el.style.left = pixel.x - 60 + 'px'el.style.top = pixel.y - 20 + 'px'},//设置当前点+移动坐标clickStation(item) {this.nowStationId = item.idthis.center.lng = item.longitudethis.center.lat = item.latitude},//移动或缩放时syncCenterAndZoom(e) {let Zoom =  e.target.getZoom()if (this.contentShow) {this.mapvLine()}if (Zoom < 13) {this.nameShow = false} else {this.nameShow = true}},//获取路径getTreePath() {this.center.lng = 114.52785300795644this.center.lat = 38.14758574827796this.nowStationId = '1'},//获取数据getMapData() {this.maps = [{"id": "1","name": "站点名称站点名称站点名称站点名称站点名称","longitude": 114.52785300795644,"latitude": 38.14758574827796,"qualityLevel": 1,"deviceWarn": true,"qualityWarn": true,"upSiste": []},{"id": "2","name": "站点名称2","longitude": 114.54050114953694,"latitude": 38.13759635572114,"qualityLevel": 2,"deviceWarn": true,"qualityWarn": false,"upSiste": [ //上游站点信息{"id": "2-1", //上游站点id"name": "上游站点2-1", //上游站点名称"longitude": 114.52785300795644, //上游经度"latitude": 38.14758574827796 //上游维度}]},{"id": "3","name": "站点名称3","longitude": 114.56579743269792,"latitude": 38.12419932394176,"qualityLevel": 3,"deviceWarn": false,"qualityWarn": false,"upSiste": [ //上游站点信息{"id": "3-1", //上游站点id"name": "上游站点3-1", //上游站点名称"longitude": 114.54050114953694, //上游经度"latitude": 38.13759635572114 //上游维度}]},{"id": "4","name": "站点名称4","longitude": 114.5908781225365,"latitude": 38.12056580319661,"qualityLevel": 3,"deviceWarn": false,"qualityWarn": false,"upSiste": [ //上游站点信息{"id": "3-1", //上游站点id"name": "上游站点3-1", //上游站点名称"longitude": 114.56579743269792, //上游经度"latitude": 38.12419932394176 //上游维度}]},{"id": "5","name": "站点名称5","longitude": 114.6115750814864,"latitude": 38.11613720325717,"qualityLevel": 3,"deviceWarn": true,"qualityWarn": true,"upSiste": [ //上游站点信息{"id": "3-1", //上游站点id"name": "上游站点3-1", //上游站点名称"longitude": 114.5908781225365, //上游经度"latitude": 38.12056580319661 //上游维度}]},{"id": "6","name": "站点名称6","longitude": 114.63838051790414,"latitude": 38.11556941444744,"qualityLevel": 2,"deviceWarn": true,"qualityWarn": false,"upSiste": [ //上游站点信息{"id": "3-1", //上游站点id"name": "上游站点3-1", //上游站点名称"longitude": 114.6115750814864, //上游经度"latitude": 38.11613720325717 //上游维度}]},{"id": "6","name": "站点名称6","longitude": 114.68336765784383,"latitude": 38.10284977850926,"qualityLevel": 1,"deviceWarn": true,"qualityWarn": true,"upSiste": [ //上游站点信息{"id": "3-1", //上游站点id"name": "上游站点3-1", //上游站点名称"longitude": 114.63838051790414, //上游经度"latitude": 38.11556941444744 //上游维度}]}]this.timeData = []this.qianxiData = [] //弧线for (var i in this.maps) {for(var j in this.maps[i].upSiste){if(this.maps[i].upSiste.length!=0){this.curive({lng: this.maps[i].upSiste[j].longitude, lat: this.maps[i].upSiste[j].latitude}, {lng: this.maps[i].longitude, lat: this.maps[i].latitude}, 50)   var item = {geometry: {type: 'LineString',coordinates:[[this.maps[i].upSiste[j].longitude,this.maps[i].upSiste[j].latitude],[this.maps[i].longitude,this.maps[i].latitude]]},count: 100 * Math.random()} this.qianxiData.push(item)}  }}this.mapvLine()},curive(fromPoint, endPoint, n) {var delLng = (endPoint.lng - fromPoint.lng) / n;var delLat = (endPoint.lat - fromPoint.lat) / n;for (var i = 0; i < n; i++) {var pointNLng = fromPoint.lng + delLng * i;var pointNLat = fromPoint.lat + delLat * i;this.timeData.push({geometry: {type: 'Point',coordinates: [pointNLng, pointNLat]},count: 1,time: i});}},//动态河流mapvLine() {var datas = new mapv.DataSet(this.qianxiData)var options1 = {globalCompositeOperation: 'lighter',strokeStyle: 'rgba(64,158,255, 1)',shadowColor: 'rgba(64,158,255, 0.5)',gradient: {0: 'rgba(64,158,255, 1)',1: 'rgba(64,158,255, 1)'},lineWidth: 7,draw: 'intensity'}var mapvLineLayer = new mapv.baiduMapLayer(this.map, datas, options1);var dataSet = new mapv.DataSet(this.timeData);var options = {fillStyle: 'rgba(255, 250, 250, 1)',size: 2,animation: {type: 'time',stepsRange: {start: 0,end: 50},trails: 1,duration: 5,},draw: 'simple'}var mapvTimeLayer = new mapv.baiduMapLayer(this.map, dataSet, options);this.contentShow = true},}}</script><style scoped>.history-img-left {position: absolute;left: 0;right: 0;margin: auto;width: 50px;height: 50px;}.Map {-webkit-box-shadow: 0px 0px 2px 1px rgba(37, 37, 37, 0.39);box-shadow: 0px 0px 2px 1px rgba(37, 37, 37, 0.39);padding-left: 1%;margin-bottom: 1em;position: fixed;top: 15%;margin-left: 1%;width: 55%;height: 45%;background-color: white;}.enlarge {float: right;font-size: 20px;margin-top: -2.5vh;cursor: pointer;}.RadioParam {position: absolute;z-index: 1;right: 10px;margin-top: 10px;}.AroundTheFactory {position: absolute;z-index: 1;border-radius: 10px;right: 10px;margin-top: 10px;}</style>

【vue-baidu-map + mapv】结合实现动态水流动画相关推荐

vue baidu map之获取选中点的经纬度
需求:在vue项目中通过点击按钮,弹出百度地图的弹框,用户选择地图上的点或者通过搜索关键字选点,点击确认关闭弹窗得到经纬度效果: vue baidu map api链接 : https://da ...
Vue Baidu Map 实现Vue版本地图轨迹回放（App端）
Vue Baidu Map 地图轨迹回放 Vue Baidu Map 简介 Vue Baidu Map 安装 1.NPM 2.CDN Vue Baidu Map 引用 BmlLushu 引用 BmlL ...
Vue中用 Vue Baidu Map 绘制地图
1.先贴上官网案例 https://dafrok.github.io/vue-baidu-map/#/zh/guide/painting 官网的东西,没有百度地图开放平台上面的东西齐全,考虑到vue ...
Vue中使用百度地图Vue Baidu Map(vue-baidu-map)
最近负责的一个vue项目中需要调用百度地图api做标记打点的需求,记录一下: vue-baidu-map 官方地址一.插件的安装 1.npm 安装 $ npm install vue-baidu-m ...
Vue Baidu Map组件：点、线、多边形、圆形、撤销、返回
话不多说,直接上代码: 参考官网代码改编:https://dafrok.github.io/vue-baidu-map/#/zh/guide/painting 效果图 index.vue <te ...
Vue+Vuex+Axios+ECharts 画一个动态更新的中国地图
一.生成项目及安装插件 # 安装 Vue Cli npm install vue-cli -g# 初始化项目 vue init webpack vue-china-map# 切到目录下 cd vue- ...
七十三、Vue项目城市详细页的动态路由，Banner布局和公用图片画廊组件拆分
2020/11/04. 周四.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
pyecharts绘制省级地图（Map地图、Geo动态涟漪散点图、Geo动态轨迹图）
Ⅰ.原始数据第七次全国人口普查(广东人口数据) 数据来源:广东统计年鉴城市人口广州市 18676605 深圳市 17560061 珠海市 2439585 汕头市 5502031 佛山市 949 ...
前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录/注册页)
一.文章引导 #mermaid-svg-9sKRaMRBkdCcbAh2 {font-family:"trebuchet ms",verdana,arial,sans-serif; ...

【vue-baidu-map + mapv】结合实现动态水流动画

实现技术

引用

【vue-baidu-map + mapv】结合实现动态水流动画相关推荐

最新文章

热门文章