From f27799628498508c296d2c5d95ef66e2be2ca4dd Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Tue, 20 Apr 2021 15:28:00 +0800
Subject: [PATCH] 地图详情搭建，小窗跟随 input传值
---
src/views/realTimePolice/real.vue | 4
src/components/liu-legend/Legend.vue | 19
public/map/lib/layui/css/modules/layer/myskin/FlareClusterLayer.css | 19 +
public/map/popup/html/FlareClusterLayer_v3 copy.html | 318 ++++++++++++++++++++++
public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js | 236 +++++++++++-----
public/map/popup/html/FlareClusterLayer_v3.html | 88 +++++-
public/map/widgets/supervisoryMap/SupervisoryMap.js | 125 +++++++-
src/views/clientManagement/clientManagement.vue | 4
8 files changed, 685 insertions(+), 128 deletions(-)
diff --git a/public/map/lib/layui/css/modules/layer/myskin/FlareClusterLayer.css b/public/map/lib/layui/css/modules/layer/myskin/FlareClusterLayer.css
new file mode 100644
index 0000000..1f69535
--- /dev/null
+++ b/public/map/lib/layui/css/modules/layer/myskin/FlareClusterLayer.css
@@ -0,0 +1,19 @@
+.flare {
+ background: transparent;
+ border-radius: 10px;
+}
+
+/* .flare .layui-layer-title {
+ padding: 0 80px;
+ text-align: center;
+ background: rgb(63, 184, 33);
+ border: none;
+ color: #677788;
+ font-size: 20px;
+ border-radius: 10px 10px 0 0;
+} */
+
+.flare .layui-layer-content {
+ background: rgb(255, 255, 255);
+ border-radius: 5px 5px 5px 5px;
+}
\ No newline at end of file
diff --git a/public/map/popup/html/FlareClusterLayer_v3 copy.html b/public/map/popup/html/FlareClusterLayer_v3 copy.html
new file mode 100644
index 0000000..1993ef2
--- /dev/null
+++ b/public/map/popup/html/FlareClusterLayer_v3 copy.html
@@ -0,0 +1,318 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Document</title>
+ <link rel="stylesheet" href="../style/FlareClusterLayer_v3.css">
+ <script src='../../lib/jquery.js'></script>
+ <script src='../js/FlareClusterLayer_v3.js'></script>
+ <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+ <!-- layui -->
+ <link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
+ <style>
+ a:hover {
+ color: white;
+ }
+body{
+ width: 360px;
+ height: 484px;
+ overflow: hidden;
+}
+ #appliutwo {
+ width: 330px;
+ height: 484px;
+ border-radius: 10px;
+ margin: 16px 15px 16px 15px;
+
+ /* border: springgreen solid 0.5px; */
+ }
+
+ .flare-liu-top {
+ width: 330px;
+ height: 90px;
+ /* border: rgb(211, 154, 31) solid 0.5px; */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ color: white;
+ border-radius: 5px 5px 5px 5px;
+ }
+
+ .f-l-t-heard {
+ width: 300px;
+ height: 30px;
+ font-size: 18px;
+ font-family: PingFangSC-Regular;
+ }
+
+ .f-l-t-right {
+ width: 300px;
+ height: 28px;
+ display: flex;
+ align-items: center;
+ color: white;
+ justify-content: space-around;
+ }
+
+ .f-l-t-r-msg {
+ width: 200px;
+ height: 28px;
+ }
+
+ .f-l-t-r-but {
+ width: 72.531px;
+ height: 28px;
+ line-height: 28px;
+ text-align: center;
+ background: rgba(255, 255, 255, .2);
+ color: white;
+ /* border: wheat 1px solid; */
+ }
+
+ .f-l-t-r-but a {
+ color: white;
+ width: 48.52px;
+ height: 16px;
+ }
+
+ .flare-liu-body {
+ width: 330px;
+ height: 361px;
+ /* border: rgb(106, 20, 187) solid 0.5px; */
+
+ }
+
+ .r-b-top {
+ height: 200px;
+ display: flex;
+
+ display: flex;
+ flex-direction: column;
+ }
+
+ .r-b-t-main {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ padding: 10px 0 10px 0;
+ margin-bottom: 5px;
+ }
+
+ .r-b-t-left {
+ display: block;
+ width: 27%;
+
+ }
+
+ .r-b-t-right {
+ display: block;
+ width: 70%;
+ color: #5d5d5d;
+ font-size: 12px;
+
+ }
+
+ .r-b-t-r-label {
+ float: left;
+ margin-right: 10px;
+ padding: 0 10px 0 10px;
+ border: 1px solid rgba(0, 0, 0, 0.5);
+ border-radius: 5px;
+ }
+
+ .r-b-t-r-imgsl {
+
+ float: left;
+ padding: 0 3px 0 3px;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="appliutwo" class='police-details-box' class="layui-anim" data-anim="layui-anim-down">
+ <!-- 从layui传值给iframe 的占位input -->
+ <input type="text" id="sidIput" ref="sidIput" style="display:none">
+ <div class="flare-liu-top">
+ <div class="f-l-t-heard">{{name}}</div>
+ <div class="f-l-t-right">
+ <div class="f-l-t-r-msg"></div>
+ <div class="f-l-t-r-but"> <a href="#">查看详情</a> </div>
+ </div>
+ </div>
+ <div class="flare-liu-body">
+ <!-- layui -->
+ <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
+ <ul class="layui-tab-title">
+ <li class="layui-this">基本信息</li>
+ <li>other</li>
+ <!-- <li>权限分配</li>
+ <li>商品管理</li>
+ <li>订单管理</li> -->
+ </ul>
+ <div class="layui-tab-content" style="height: 100px;">
+ <div class="layui-tab-item layui-show">
+ <div class="r-b-top">
+ <div class="r-b-t-main">
+ <span class="r-b-t-left">设备名称</span>
+ <span class="r-b-t-right">{{ name }}</span>
+ </div>
+ <div class="r-b-t-main">
+ <span class="r-b-t-left">设备联系人</span>
+ <span class="r-b-t-right">{{ contacts }}: {{ calls }}</span>
+ </div>
+ <!-- 设备标签待定 -->
+ <!-- <div class="r-b-t-main">
+ <span class="r-b-t-left">设备标签</span>
+ <span class="r-b-t-right">
+ <div
+ class="r-b-t-r-label"
+ v-for="(value,index) in labels"
+ :key="index"
+ >
+ {{value}}
+ </div>
+ </span>
+ </div> -->
+ <!-- 图暂时没有 -->
+ <div class="r-b-t-main">
+ <span class="r-b-t-left" style="position: relative; top: -27px">部署图片</span>
+ <span class="r-b-t-right">
+ <div class="r-b-t-r-imgsl" v-for="(value, index) in imgsl" :key="index">
+ <el-image style="width: 68px; height: 68px" :src="value"
+ :preview-src-list="imgsl" v-show="value != 'no'">
+ </el-image>
+ <div v-show="value == 'no'" style="
+ width: 68px;
+ height: 68px;
+ text-algin: center;
+ color: rgba(0, 0, 0, 0.5);
+ ">
+ 无图片
+ </div>
+ </div>
+ </span>
+ </div>
+ <div class="r-b-t-main">
+ <span class="r-b-t-left">部署时间</span>
+ <span class="r-b-t-right">{{ deploymentTime }}</span>
+ </div>
+ </div>
+ </div>
+ <div class="layui-tab-item">
+
+ </div>
+ <!-- <div class="layui-tab-item">内容3</div>
+ <div class="layui-tab-item">内容4</div>
+ <div class="layui-tab-item">内容5</div> -->
+ </div>
+ </div>
+ </div>
+ <script src="../../lib/layui/layui.js" charset="utf-8"></script>
+ <script>
+ // var index = parent.layer.getFrameIndex(window.name);
+
+ </script>
+ <script>
+ var me = new Vue({
+ el: '#appliutwo',
+ data: {
+ num: '',
+ name: '',
+ //详细信息data
+ ourData: '',
+ // names: '',
+ contacts: '',
+ calls: '',
+ imgsl: [],
+ deploymentTime: '',
+ oldtime: '',
+ newtime: ''
+ },
+ methods: {
+ getdatas(dat) {
+ this.name = dat.deviceName;
+ me.num = dat.deviceNumber;
+ this.evaluate = "空气质量";
+ this.machineCode = "无数据" && dat.deviceNumber;
+ this.smoke = "烟雾";
+ this.proportion = "电量";
+ this.ReportTime = "最近上报：" + dat.heartbeat;
+ this.contacts = "无数据" && dat.oneContacts;
+ this.calls = "无数据" && dat.onePhone;
+ this.labels = ["无数据"] && [dat.deviceType];
+ var imgD = ["no"];
+ this.imgsl = ["no"] && imgD;
+ this.deploymentTime = "无数据" && dat.stime;
+
+ var ct = document.getElementsByClassName('flare-liu-top')[0];
+ if (dat.onlineStatus == 1) {
+ ct.style.backgroundImage = 'linear-gradient(to right, #3DDEA8 , #1FBD9A';
+ } else {
+ ct.style.backgroundImage = 'linear-gradient(to right, #787878 , #5F5F5F';
+
+ }
+ }
+ },
+ mounted() {
+ this.oldtime = setTimeout(() => {//需要同步数据处理，input中value在mounted中没有直接传值
+ clearTimeout(this.oldtime);
+ this.ourData = JSON.parse(this.$refs.sidIput.value);//json对象转js对象
+ // console.log(this.ourData);
+ this.getdatas(this.ourData);
+ }, 20);
+
+ window.onload = () => {
+ layui.use('element', function () {
+ var $ = layui.jquery
+ , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
+
+ //触发事件
+ var active = {
+ // tabAdd: function () {
+ // //新增一个Tab项
+ // element.tabAdd('demo', {
+ // title: '新选项' + (Math.random() * 1000 | 0) //用于演示
+ // , content: '内容' + (Math.random() * 1000 | 0)
+ // , id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
+ // })
+ // }
+ // , tabDelete: function (othis) {
+ // //删除指定Tab项
+ // element.tabDelete('demo', '44'); //删除：“商品管理”
+
+
+ // othis.addClass('layui-btn-disabled');
+ // }
+ // ,
+ tabChange: function () {
+ //切换到指定Tab项
+ element.tabChange('demo', '22'); //切换到：用户管理
+ }
+ };
+
+ $('.site-demo-active').on('click', function () {
+ var othis = $(this), type = othis.data('type');
+ active[type] ? active[type].call(this, othis) : '';
+ });
+
+ //Hash地址的定位
+ var layid = location.hash.replace(/^#test=/, '');
+ element.tabChange('test', layid);
+
+ element.on('tab(test)', function (elem) {
+ location.hash = 'test=' + $(this).attr('lay-id');
+ });
+
+ });
+
+ }
+ }
+ })
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/public/map/popup/html/FlareClusterLayer_v3.html b/public/map/popup/html/FlareClusterLayer_v3.html
index c696572..6944d37 100644
--- a/public/map/popup/html/FlareClusterLayer_v3.html
+++ b/public/map/popup/html/FlareClusterLayer_v3.html
@@ -12,19 +12,51 @@
<!-- layui -->
<link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
<style>
-
+ body {
+ /* border: 1px solid rgb(48, 170, 48); */
+ }
+
+ #appliu {
+ /* border: 1px solid #000; */
+ border-radius: 5px 5px 5px 5px;
+ }
+
+ .names {
+ width: 200px;
+ height: 45px;
+ color: #fff;
+ border-radius: 5px 5px 5px 5px;
+ line-height: 45px;
+ padding-left: 8px;
+ background-color: #fff;
+ /* border: 1px solid rgb(223, 52, 52); */
+ /* background-4356765795678953423465989-9=\][;'\.,/.,1i123ge: linear-gradient(to right, #FFC031, #F49055);
+ background-image: linear-gradient(to right, #3DDEA8, #1FBD9A);
+ background-image: linear-gradient(to right, #787878, #5F5F5F); */
+ }
+
+ .msgs {
+ width: 200px;
+ height: 30px;
+ line-height: 30px;
+ padding-left: 8px;
+ /* border: 1px solid rgb(30, 160, 192); */
+ }
</style>
</head>
<body>
<div id="appliu" class='police-details-box' class="layui-anim" data-anim="layui-anim-down">
- <div>{{name}}</div>
- <div>{{num}}</div>
- <div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
+ <!-- 从layui传值给iframe 的占位#input1 -->
+ <input type="text" id="input1" ref="sidIputoine" style="display:none">
+ <!-- 从layui传值给iframe 的占位#input2
+ <input type="text" id="input2" ref="ip2" style="display:none" v-model='ip2'> -->
+ <div class="names">{{name}}</div>
+ <div class="msgs">{{num}}</div>
<script src="../../lib/layui/layui.js" charset="utf-8"></script>
<script>
// var index = parent.layer.getFrameIndex(window.name);
-
+
</script>
<script>
var me = new Vue({
@@ -33,26 +65,46 @@
num: '',
name: ''
},
+ ourData: '',
+ // ip2: '',
+ // computed: {
+ // ip2s() {
+ // // var a = JSON.parse(this.$refs.ip2.value);
+ // var a = me.ip2;
+ // console.log(a, 'computed');
+ // return a;
+ // }
+ // },
methods: {
- GetQueryString(useName) {
- var reg = new RegExp("(^|&)" + useName + "=([^&]*)(&|$)", "i");
- var r = window.location.search.substr(1).match(reg);
- if (r != null) {
- return decodeURI(r[2]);
+ getdatas(dat) {
+ me.name = dat.deviceName.length >= 13 ? dat.deviceName.substring(0, 13) + '···' : dat.deviceName;
+ this.num = "无数据" && dat.deviceNumber;
+ var ct = document.getElementsByClassName('names')[0];
+ if (dat.onlineStatus == 1) {
+ ct.style.backgroundImage = 'linear-gradient(to right, #3DDEA8 , #1FBD9A';
} else {
- return null;
+ ct.style.backgroundImage = 'linear-gradient(to right, #787878 , #5F5F5F';
+
}
}
},
mounted() {
- window.onload = () => {
- // console.log(me);
- // console.log(window.location.href)
- me.num = me.GetQueryString("num");
- me.name = me.GetQueryString("name");
- // console.log(me.num,me.name);
- }
+ this.oldtime = setTimeout(() => {//需要同步数据处理，input中value在mounted中没有直接传值
+ clearTimeout(this.oldtime);
+ this.ourData = JSON.parse(this.$refs.sidIputoine.value);//json对象转js对象
+ // console.log(this.ourData);
+ this.getdatas(this.ourData);
+ }, 20);
+ // window.onload = () => {
+
+ // }
+
+ },
+ watch: {
+ ip2s() {
+ console.log(this.ip2s)
+ }
}
})
</script>
diff --git a/public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js b/public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js
index 2199920..f56d68e 100644
--- a/public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js
+++ b/public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js
@@ -169,7 +169,7 @@
},
_mapClick: function (e) {//地图全局点击事件 标记不能点击
// console.log('地图全局点击事件');
-
+
if (!e.target) {
return;
}
@@ -189,62 +189,144 @@
onClick: function (evt) { //标志以及聚合表示点击事件
var eour = evt.graphic.attributes.clusterCount;
- if(eour == undefined){
- var dataO = evt
+ if (eour == undefined) {
+ var dataO = evt;
+ var aa = evt.graphic.screenX;
+ var bb = evt.graphic.screenX;
var data = {
- nums : evt.graphic.attributes.deviceNumber,
- nams : evt.graphic.attributes.deviceName,
+ nums: evt.graphic.attributes.deviceNumber,
+ nams: evt.graphic.attributes.deviceName,
+ type: evt.graphic.attributes.jtype,
}
- console.log(dataO);
-
- var rightCard = (num,name,posi)=>{
- var that = this;
- var url = './popup/html/FlareClusterLayer_v3.html?num=' + num + '&name=' + name;
- layui.use('layer', function () {
- that.layuiLayer = layui.layer;
- // that.layuiLayer.config({
- // extend: 'myskin/police-details.css'
- // });
- that.layuiLayer.close(that.layuiLayer.index);
- that.layuiLayer.open({
- title: '',
- type: 2,
- shadeClose: true,
- shade: false,
- skin: 'demo-class',
- id: 'onelyOne',
- maxmin: false, //开启最大化最小化按钮
- // area: ['500px', '400px'],
- offset: posi,
- skin: 'police-details',
- content: [url,'no'],
- resize: false,
- closeBtn: 1,
- success: function(layero, index){//成功后添加全局点击关闭
- console.log(layero, index);
-
- // var a = window.onmousedown = ()=>{
- // // parent[0].layer.close(index);
- // // begins();
- // }
- var d = document.onclick = ()=>{
- parent[0].layer.close(index);
- d = '';
- }
- },
- });
+ // console.log(dataO);
+ // console.log(aa - bb);
+
+ var fCard = (posi) => {
+ var that = this,
+ url = './popup/html/FlareClusterLayer_v3.html',
+ clickD = null,
+ downs = null,
+ moves = null,
+ ups = null;
+ layui.use('layer', function () {
+ that.layuiLayer = layui.layer;
+ that.layuiLayer.config({
+ extend: 'myskin/FlareClusterLayer.css'
+ });
+ // layer.alert('layer 新皮肤');
+ that.layuiLayer.close(that.layuiLayer.index);
+ that.layuiLayer.open({
+ title: '',
+ type: 2,
+ shadeClose: false,
+ shade: false,
+ skin: 'demo-class',
+ id: 'onelyOne',
+ maxmin: false, //开启最大化最小化按钮
+ area: ['200px', '75px'],
+ // area: 'auto',
+ offset: posi,
+ skin: 'flare',
+ closeBtn: 0,//关闭按钮，可通过配置1和2来展示,0关闭
+ content: [url, 'no'],
+ resize: false,
+ scrollbar: false,
+ tipsMore: true, //允许多个tipe
+ // content: num,
+ success: function (layero, index) {//成功后添加全局点击关闭
+ $("#layui-layer-iframe" + index).contents().find("#input1").val(JSON.stringify(evt.graphic.attributes));
+ // console.log(layero, index);
+ layero[0].style.position = 'absolute';
+ downs = document.onmousedown = () => {
+ // console.log('down');//start
+ // downs = document.onmousedown = null;
+ var mx = window.event.clientX//鼠标初始位置
+ , my = window.event.clientY
+ , cx = this.offset[1].replace("px","")//初始位置
+ , cy = this.offset[0].replace("px","");
+ moves = document.onmousemove = () => {
+ // console.log('move');//move
+ // console.log(this.offset)
+ var ux = window.event.clientX//记录实时位置
+ , uy = window.event.clientY;
+ var endx = +cx + (ux - mx)// 初始位置+（鼠标初始位置-实时位置）
+ , endy = +cy + (uy - my);
+ layero[0].style.left = endx + 'px';
+ layero[0].style.top = endy + 'px';
+ // console.log(+cx, +cy,'初始位置');
+ // console.log(mx, my,'鼠标初始位置');
+ // console.log(ux, uy,'记录实时位置');
+ // console.log(ux, uy,'最后位置');
+
+ ups = document.onmouseup = () => {
+ // console.log('up');//end
+ downs = document.onmousedown = null;
+ moves = document.onmousemove = null;
+ ups = document.onmouseup = null;
+ }
+ }
+ }
+
+ clickD = document.onclick = () => {
+ parent[0].layer.close(index);
+ parent[0].layer.close(+index + 1);
+ // parent[0].layer.closeAll();
+ // console.log(111111111111)
+ clickD = document.onclick = null;
+ }
+
+ },
+ end: function () {//关闭事件
+
+ }
+ });
+ that.layuiLayer.open({//第二个iframe
+ title: '',
+ type: 2,
+ shadeClose: true,
+ shade: false,
+ skin: 'demo-class',
+ id: 'onelyTwo',
+ maxmin: false, //开启最大化最小化按钮
+ area: ['360px', '484px'],
+ // area: 'auto',
+ offset: 'r',
+ skin: 'flare',
+ isOutAnim: false,
+ closeBtn: 0,//关闭按钮，可通过配置1和2来展示,0关闭
+ content: ['./popup/html/FlareClusterLayer_v3 copy.html'],
+ resize: false,
+ scrollbar: false,
+ // tipsMore: true, //允许多个tipe
+ // content: num,
+ success: function (layero, index) {//成功后添加全局点击关闭
+ // var z = document.onclick = ()=>{
+ // parent[0].layer.close(index);
+ // // // parent[0].layer.close(+index + 1);
+ // z = null;
+ // }
+ //尝试传值
+ //js对象转json对象
+ $("#layui-layer-iframe" + index).contents().find("input").val(JSON.stringify(evt.graphic.attributes));
+ },
})
+ })
}
- var offsetMy = [+evt.screenY - 370 + 'px',+evt.screenX - 370 + 'px'];
- rightCard (data.nums,data.nams,offsetMy);
- var begins = ()=>{
- var offsetMy = [+evt.screenY - 370 + 'px',+evt.screenX - 370 + 'px'];
- rightCard (data.nums,data.nams,offsetMy);
+ var offsetMy = [+evt.screenY - 300 + 'px', +evt.screenX - 172.5 + 'px'];
+ // var offsetMy = [+evt.graphic._shape.shape.y - 80 + 'px',+evt.graphic._shape.shape.x + 'px'];
+ fCard(offsetMy);
+ var begins = (xy) => {
+ var offsetMy = [xy.y + 'px', xy.x + 'px'];
+ fCard(offsetMy);
}
- }else {
- console.log(num,'zoom');
+ } else {
+ // var taxLotExtent = evt.graphic.geometry.getExtent();
+ // this.map.setExtent(evt.graphic._extent)
+ this.map.setZoom(this.map.getZoom() + 1)//地图中心缩放
+ // this.map.setZoom(18);
+ // console.log('111:', this.map.zoomToFullExtent(), '222:', evt, evt.graphic._extent, 'zoom');
}
- console.log(evt)
+ // console.log(evt)
this._restoreInfoWindowSettings();
if (evt.graphic.attributes.isCluster) {
@@ -444,7 +526,7 @@
dojo.query("g.cluster-group:empty", this.getNode()).forEach(dojo.destroy);
},
-
+
_graphicDraw: function (e) {
var g = e.graphic;
if (g.attributes.isCluster) {
@@ -810,11 +892,11 @@
//add a text element for the label to display the count and add to the group
var shapeCenter = this._getShapeCenter(cluster.graphicShape);
var textShape = groupShape.createText({
- x: shapeCenter.x,
- y: shapeCenter.y + (this.textSymbol.font.size / 2 - 2),
- text: cluster.clusterCount,
- align: 'middle'
- })
+ x: shapeCenter.x,
+ y: shapeCenter.y + (this.textSymbol.font.size / 2 - 2),
+ text: cluster.clusterCount,
+ align: 'middle'
+ })
.setFont({
size: this.textSymbol.font.size,
family: this.textSymbol.font.family,
@@ -938,10 +1020,10 @@
//create a transparent circle that contains the boundary of the flares, this is to make sure the mouse events don't fire moving in between flares
var conCircleRadius = (center.x - (bbox.x - radius - buffer)) + radius; //get the radius of the circle to contain everything
var containerCircle = groupShape.createCircle({
- cx: center.x,
- cy: center.y,
- r: conCircleRadius
- })
+ cx: center.x,
+ cy: center.y,
+ r: conCircleRadius
+ })
//.setStroke({ width: 1, color: "000" })
.setFill(new Color([0, 0, 0, 0]));
containerCircle.rawNode.setAttribute("class", "flare-object cluster-object");
@@ -1242,11 +1324,11 @@
var textShapes = [];
for (var i = 0, len = lines.length; i < len; i++) {
var textShape = tooltipGroup.createText({
- x: xPos,
- y: yPos + (i * 10),
- text: lines[i],
- align: 'middle'
- })
+ x: xPos,
+ y: yPos + (i * 10),
+ text: lines[i],
+ align: 'middle'
+ })
.setFill("#000")
.setFont({
size: 8,
@@ -1260,12 +1342,12 @@
var rectPadding = 2;
var textBox = tooltipGroup.getBoundingBox();
var rectShape = tooltipGroup.createRect({
- x: textBox.x - rectPadding,
- y: textBox.y - rectPadding,
- width: textBox.width + (rectPadding * 2),
- height: textBox.height + (rectPadding * 2),
- r: 0
- })
+ x: textBox.x - rectPadding,
+ y: textBox.y - rectPadding,
+ width: textBox.width + (rectPadding * 2),
+ height: textBox.height + (rectPadding * 2),
+ r: 0
+ })
.setFill(new Color([255, 255, 255, 0.9]))
.setStroke({
color: "#000",
@@ -1401,11 +1483,11 @@
//Have to add the flare text after the flare group animation otherwise Edge just reloads the page and dies for some reason?
if (this.shape.flareText) {
var flareText = this.shape.createText({
- x: this.shape.flareText.location.x,
- y: this.shape.flareText.location.y,
- text: this.shape.flareText.text,
- align: 'middle'
- })
+ x: this.shape.flareText.location.x,
+ y: this.shape.flareText.location.y,
+ text: this.shape.flareText.text,
+ align: 'middle'
+ })
.setFill(layer.textSymbol.color)
.setFont({
size: this.shape.flareText.textSize,
diff --git a/public/map/widgets/supervisoryMap/SupervisoryMap.js b/public/map/widgets/supervisoryMap/SupervisoryMap.js
index da07b11..4192bdc 100644
--- a/public/map/widgets/supervisoryMap/SupervisoryMap.js
+++ b/public/map/widgets/supervisoryMap/SupervisoryMap.js
@@ -126,7 +126,7 @@
layuiLayer: null,
layuiLadate: null,
tabIndex: 0,
-
+ heatmapfeatureLayer: null,//liu热力图
// 保留添加实体图层的变量
addEntitys: null,
entitysData: [],
@@ -190,7 +190,7 @@
getQueryStringByKey: function (key) {
return (document.location.search.match(new RegExp("(?:^\\?|&)" + key + "=(.*?)(?=&|$)")) || ['', null])[1];
},
-
+ entityData: [],
open: function () {
var that = this;
$.ajax({
@@ -198,18 +198,101 @@
type: 'get',
dataType: 'JSON',
success: function (res) {
-
+
var datas = res.data;
+
+
+ var heatmapRenderer = null;
+ that.entityData = [];
+
+
+
for (var i = 0; i < datas.length; i++) {
datas[i].x = Number(datas[i].jd);
datas[i].y = Number(datas[i].wd);
+ // that.entityData[i].lgtd = Number(datas[i].jd);
+ // that.entityData[i].lttd = Number(datas[i].wd);
+ that.entityData.push({
+ lgtd: Number(datas[i].jd),
+ lttd: Number(datas[i].wd)
+ })
}
+ // console.log(that.entityData, 444444444444444444444)
+ // console.log(datas,444444444444444444444)
that.flareClusterLayer(datas);
+
+ that.heatmapfeatureLayer = that.heatmFeaLayers();
+
+ // console.log(that.heatmapfeatureLayer);
+ that._map.addLayer(that.heatmapfeatureLayer);
+
+ that.checkBoxSelect();
+
+ // console.log(that.heatmapfeatureLayer);
}
})
},
+ heatmFeaLayers: function () {// liu 热力图渲染器，加载热力图
+
+ var layerDefinition = {
+ "geometryType": "esriGeometryPoint",
+ "fields": [{
+ "num": "num",
+ editable: true,
+ nullable: true,
+ "type": "esriFieldTypeInteger",
+ "alias": "数量"
+ }]
+ };
+ var featureCollection = {
+ layerDefinition: layerDefinition,
+ featureSet: null
+ };
+ //创建 FeatureLayer 图层
+ var featureLayer = new esri.layers.FeatureLayer(featureCollection, {
+ mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
+ outFields: ["*"],
+ opacity: .8
+ });
+ //设置渲染方式
+
+ return featureLayer;
+ },
+
+ checkBoxSelect: function (self) {
+ var that = this;
+ var heatmapRenderer = null;
+ // // return
+ // 选中
+ // if ($(self).prop('checked') == true) {
+ // if (1) {
+ heatmapRenderer = new HeatmapRenderer({
+ colorStops: [
+ { ratio: 0.45, color: "rgba(000,000,255,0)" },
+ { ratio: 0.55, color: "rgb(000,255,255)" },
+ { ratio: 0.65, color: "rgb(000,255,000)" },
+ { ratio: 0.75, color: "rgb(234,126,15)" },
+ { ratio: 1.00, color: "rgb(255,000,000)" },
+ ],
+ blurRadius: 42,
+ maxPixelIntensity: 184,
+ minPixelIntensity: 0
+ });
+ this.heatmapfeatureLayer.setRenderer(heatmapRenderer);
+ // 取消选中
+ var point = null;
+ for (var i = 0; i < that.entityData.length; i++) {
+ point = new esri.geometry.Point(this.entityData[i].lgtd, this.entityData[i].lttd, new esri.SpatialReference({ wkid: 4326 }));
+ this.heatmapfeatureLayer.add(new esri.Graphic(point));
+ }
+ // } else {
+ // this.heatmapfeatureLayer.clear();
+ // this.heatmapfeatureLayer.setRenderer();
+ // }
+ },
+
close: function () {
},
@@ -284,14 +367,16 @@
clickHand: function (e) {//top点击事件，导航
console.log(e);
- },
+ },
+
+
//聚合图层事件
flareClusterLayer: function (datas) { //top聚合事件，导航
var that = this;
var preClustered = false;
- var displaySingleFlaresAtCount = 10;
+ var displaySingleFlaresAtCount = 20;
var areaDisplayMode = "";
// var allData = JSON.parse(DATA);
// DataManager.setData(allData);
@@ -308,7 +393,7 @@
displaySingleFlaresAtCount: displaySingleFlaresAtCount,
flareShowMode: "mouse",
preClustered: preClustered,
- clusterRatio: 75,
+ clusterRatio: 120,
clusterAreaDisplay: areaDisplayMode,
clusteringBegin: function (e) {
console.log(e, "clustering begin");
@@ -336,20 +421,20 @@
var template = new PopupTemplate({
title: "{name}",
fieldInfos: [{
- fieldName: "facilityType",
- label: "Facility Type",
- visible: true
- },
- {
- fieldName: "postcode",
- label: "Post Code",
- visible: true
- },
- {
- fieldName: "isOpen",
- label: "Opening Hours",
- visible: true
- }
+ fieldName: "facilityType",
+ label: "Facility Type",
+ visible: true
+ },
+ {
+ fieldName: "postcode",
+ label: "Post Code",
+ visible: true
+ },
+ {
+ fieldName: "isOpen",
+ label: "Opening Hours",
+ visible: true
+ }
]
});
diff --git a/src/components/liu-legend/Legend.vue b/src/components/liu-legend/Legend.vue
index 72570c6..ed41264 100644
--- a/src/components/liu-legend/Legend.vue
+++ b/src/components/liu-legend/Legend.vue
@@ -16,11 +16,11 @@
return{
datalist:[//示例数据格式
{
- color: 'rgb(233, 39, 25)',
+ color: 'rgb(236, 83, 37)',
text: '掉线'
},
{
- color: 'black',
+ color: 'rgb(49, 49, 49)',
text: '在线'
}
]
@@ -34,21 +34,22 @@
position: absolute;
right: 0;
.l-l-o{
- color: rgba($color: #000000, $alpha: .5);
+ color: rgba($color: #000000, $alpha: .8);
+ color: rgb(49, 49, 49);
position: relative;
right: 150px;
margin-left: 10px;
- font-size: 12px;
- font-weight: 300;
+ font-size: 14px;
+ font-weight: 500;
font-family: 'Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol';
}
.l-l-Img{
display: inline-block;
- width: 7px;
- height: 7px;
+ width: 10px;
+ height: 10px;
// border: 1px solid rgb(17, 198, 253);
- border-radius: 7px;
- margin-right: 7px;
+ border-radius: 3px;
+ margin-right: 8px;
}
}
</style>
\ No newline at end of file
diff --git a/src/views/clientManagement/clientManagement.vue b/src/views/clientManagement/clientManagement.vue
index 3933876..8b27e59 100644
--- a/src/views/clientManagement/clientManagement.vue
+++ b/src/views/clientManagement/clientManagement.vue
@@ -210,11 +210,11 @@
//legend-liu数据
datalistLIU:[
{
- color: 'rgb(233, 39, 25)',
+ color: 'rgb(236, 83, 37)',
text: '掉线'
},
{
- color: 'black',
+ color: 'rgb(49, 49, 49)',
text: '在线'
}
],
diff --git a/src/views/realTimePolice/real.vue b/src/views/realTimePolice/real.vue
index aab76df..e3d22fa 100644
--- a/src/views/realTimePolice/real.vue
+++ b/src/views/realTimePolice/real.vue
@@ -439,7 +439,7 @@
//legend-liu数据
datalistLIU:[
{
- color: 'rgb(233, 39, 25)',
+ color: 'rgb(236, 83, 37)',
text: '未处理'
},
{
@@ -447,7 +447,7 @@
text: '处理中'
},
{
- color: 'black',
+ color: 'rgb(49, 49, 49)',
text: '已处理'
}
],
--
Gitblit v1.9.3