Merge branch 'master' of http://192.168.0.105:10010/r/jfpt-Vue

Administrator

2021-05-09 d9899f1fb0d130e792db6546f003f8dd33603442

Merge branch 'master' of http://192.168.0.105:10010/r/jfpt-Vue

 public/xcxh5map/css/body.css

New file
@@ -0,0 +1,11 @@
body {
    padding: 0;
    margin: 0;
}

html,
body,
#map {
    height: 100%;
    width: 100%;
}

 public/xcxh5map/js/createMap.js

New file
@@ -0,0 +1,95 @@
function beginJuheMap(map, data) {
    map = L.map('map', { //初始化地图
        center: [31.87, 120.54],
        zoom: 12,
        // crs: L.CRS.EPSG4326, //设置坐标系4326
        attributionControl: false, //去掉右下角
        zoomControl: false, //去掉缩放
    });
    L.tileLayer( //添加切片图层
        "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", {
        subdomains: ["1", "2", "3", "4"],
        attribution: "高德"
    }
    ).addTo(map);
    var markers = L.markerClusterGroup();

    var transportIcon = L.Icon.extend({ //图标初始化
        options: {
            iconSize: [30, 30], // 图标尺寸
            // iconAnchor: [30, 30], // 图标偏移量
            // popupAnchor: [-20, -20] // 弹出框偏移量
        }
    });
    var carIcon = new transportIcon({ //引入图标
        iconUrl: './img/gray.png'
    }),
        planeIcon = new transportIcon({
            iconUrl: './img/green.png'
        }),
        busIcon = new transportIcon({
            iconUrl: './img/red.png'
        });
    console.log(data, 43545343)
    var setData = (a) => {//定义图标
        marker = L.marker([a.jd, a.wd], {
            icon: a.state == 0 ? carIcon : a.state == 1 ? planeIcon : a.state == 2 ? busIcon : '',
            title: title,
            myData: {//自定义数据
                ...a
            }
        });
    }
    for (var i = 0; i < data.length; i++) {
        var a = data[i];
        var title = a.title;
        if (a.state == 0) {
            setData(a);
        } else if (a.state == 1) {
            setData(a);
        } else if (a.state == 2) {
            setData(a);
        }
        // marker.bindPopup(title);
        markers.addLayer(marker);
    }
    map.addLayer(markers);

    markers.on('click', function (a) {
        var data = JSON.stringify(a.layer.options.myData);
        layui.use('layer', function () {//弹窗
            layuiLayer = layui.layer;
            // layuiLayer.config({
            //   extend: 'myskin/FlareClusterLayer.css'
            // });
            // layuiLayer.close(layuiLayer.index);

            layuiLayer.open({
                title: '',
                type: 2,
                shadeClose: true,
                shade: false,
                skin: 'demo-class',
                id: 'onelyTwo',
                maxmin: false, //开启最大化最小化按钮
                area: ['250px', '250px'],
                // area: 'auto',
                //   offset: winSize,
                offset: 'b',
                skin: 'flare',
                isOutAnim: false,
                closeBtn: 2, //关闭按钮，可通过配置1和2来展示,0关闭
                content: ['./popup/user.html'],
                resize: false,
                scrollbar: false,
                // tipsMore: true, //允许多个tipe
                // content: num,
                success: function (layero, index) { //成功后添加全局点击关闭
                    console.log(data, 53413541)
                    $("#layui-layer-iframe" + index).contents().find("#user").val(data);
                    // layuiLayer.close(index)
                },
            })
        })
    });
}

 public/xcxh5map/js/def.js

New file
@@ -0,0 +1,4 @@
var map = null,
    getdata = null,
    marker = null,
    layuiLayer = null;

 public/xcxh5map/js/getUrlData.js

New file
@@ -0,0 +1,10 @@
function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

 public/xcxh5map/js/startMap.js

New file
@@ -0,0 +1,7 @@
window.onload = () => {
    getdata = JSON.parse(decodeURI(getQueryVariable('data')));
    beginJuheMap(map, getdata);
    wx.miniProgram.getEnv(function (res) {
        console.log(res.miniprogram) // true
    })
}

 public/xcxh5map/js/wx.js

 public/xcxh5map/lid/MarkerCluster.Default.css

 public/xcxh5map/lid/MarkerCluster.css

 public/xcxh5map/lid/leaflet.css

 public/xcxh5map/lid/leaflet.js

 public/xcxh5map/lid/leaflet.markercluster-src.js

 public/xcxh5map/map.html

@@ -4,97 +4,36 @@
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./leaflet.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <script src="./leaflet.js"></script>
    <script src="./moni.js"></script>
    <link rel="stylesheet" href="./MarkerCluster.css" />
    <link rel="stylesheet" href="./MarkerCluster.Default.css" />
    <script src="./leaflet.markercluster-src.js"></script>
    <title>map</title>
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
        }

        html,
        body,
        #map {
            height: 100%;
            width: 100%;
        }
    </style>
    <!-- leaflet支持 -->
    <script src="./lid/leaflet.js"></script>
    <link rel="stylesheet" href="./lid/leaflet.css" />
    <!-- leaflet聚合支持 -->
    <link rel="stylesheet" href="./lid/MarkerCluster.css" />
    <link rel="stylesheet" href="./lid/MarkerCluster.Default.css" />
    <script src="./lid/leaflet.markercluster-src.js"></script>
    <!-- layui支持 -->
    <link rel="stylesheet" href="../map/lib/layui/css/layui.css" media="all">
    <script src="../map/lib/layui/layui.js" charset="utf-8"></script>
    <!-- jqurey -->
    <script src="../map/lib/jquery.js" charset="utf-8"></script>
    <!-- 微信支持 -->
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script src="./js/wx.js"></script>
    <!-- omyself支持 -->
    <link rel="stylesheet" href="./css/body.css" />
    <!-- 获取urlData -->
    <script src="./js/getUrlData.js"></script>
    <!-- 初始化地图 -->
    <script src="./js/createMap.js"></script>
    <!-- 初始化属性 -->
    <script src="./js/def.js"></script>
    <!-- window.onlond -->
    <script src="./js/startMap.js"></script>
</head>

<body>
    <div id="map"></div>
    <script type="text/javascript">
        var map = null;
        function beginJuheMap(map) {
            map = L.map('map', { //初始化地图
                center: [31.87, 120.54],
                zoom: 12,
                // crs: L.CRS.EPSG4326, //设置坐标系4326
                attributionControl: false, //去掉右下角
                zoomControl: false, //去掉缩放
            });
            L.tileLayer( //添加切片图层
                "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", {
                subdomains: ["1", "2", "3", "4"],
                attribution: "高德"
            }
            ).addTo(map);
            var markers = L.markerClusterGroup();

            var transportIcon = L.Icon.extend({ //图标初始化
                options: {
                    iconSize: [30, 30], // 图标尺寸
                    // iconAnchor: [30, 30], // 图标偏移量
                    // popupAnchor: [-20, -20] // 弹出框偏移量
                }
            });
            var carIcon = new transportIcon({ //引入图标
                iconUrl: './img/gray.png'
            }),
                planeIcon = new transportIcon({
                    iconUrl: './img/green.png'
                }),
                busIcon = new transportIcon({
                    iconUrl: './img/red.png'
                });
            console.log(datalist, 43545343)
            for (var i = 0; i < datalist.length; i++) {
                var a = datalist[i];
                var title = a.title;
                if (a.state == 0) {
                    var marker = L.marker([a.jd, a.wd], {
                        icon: carIcon,
                        title: title
                    });
                } else if (a.state == 1) {
                    var marker = L.marker([a.jd, a.wd], {
                        icon: planeIcon,
                        title: title
                    });
                } else if (a.state == 2) {
                    var marker = L.marker([a.jd, a.wd], {
                        icon: busIcon,
                        title: title
                    });
                }
                marker.bindPopup(title);
                markers.addLayer(marker);
            }
            map.addLayer(markers);

            markers.on('click', function (a) {
                console.log(a.layer, 11111111111);
            });
        }
        beginJuheMap(map);

    </script>
</body>

</html>

 public/xcxh5map/moni.js

File was deleted

 public/xcxh5map/popup/user.html

New file
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>popup</title>
    <!-- Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>

<body>
    <div id="popup">
        <!-- 从layui传值给iframe 的占位input -->
        <input type="text" id="user" ref="user" style="display:none">
        46476978---{{ourData}}
    </div>
    <script>
        var me = new Vue({
            el: '#popup',
            data: {
                ourData: '',
                oldtime: '',
            },
            mounted() {
                this.oldtime = setTimeout(() => {//需要同步数据处理，input中value在mounted中没有直接传值
                    clearTimeout(this.oldtime);
                    this.ourData = JSON.parse(this.$refs.user.value);//json对象转js对象
                    console.log(this.ourData,2)

                    // this.getUser(this.ourData.id);
                    // console.log(this.ourData);
                    // this.getdatas(this.ourData);
                }, 100);
            }
        })

    </script>
</body>

</html>

 src/router/page/index.js

@@ -118,17 +118,17 @@
      isAuth: false
    }
  },
  {
    path: '/xcxMap',
    name: '地图',
    component: () =>
      import( /* webpackChunkName: "page" */ '@/views/dataL/xcxmap'),
    meta: {
      keepAlive: true,
      isTab: false,
      isAuth: false
    }
  },
  // {
  //   path: '/xcxMap',
  //   name: '地图',
  //   component: () =>
  //     import( /* webpackChunkName: "page" */ '@/views/dataL/xcxh5map/map.html'),
  //   meta: {
  //     keepAlive: true,
  //     isTab: false,
  //     isAuth: false
  //   }
  // },
  {
    path: '*',
    redirect: '/404'