From c28a59f270e3711a498f7dc5adf7d7b9aa119985 Mon Sep 17 00:00:00 2001
From: zengh <123456>
Date: Thu, 27 May 2021 11:27:27 +0800
Subject: [PATCH] 路线导航修改
---
/dev/null | 9 -
xcxjingqingmap/lxdhmap.html | 70 +++++++
xcxjingqingmap/img/sous.png | 0
xcxjingqingmap/css/lxdhmap.css | 249 +++++++++++++++++++++++++++
pages/investigation/investigation.vue | 2
xcxjingqingmap/js/lxdhmap.js | 189 +++++++++++++++++++++
6 files changed, 509 insertions(+), 10 deletions(-)
diff --git a/pages/investigation/investigation.vue b/pages/investigation/investigation.vue
index 8a37d8a..18e71ff 100644
--- a/pages/investigation/investigation.vue
+++ b/pages/investigation/investigation.vue
@@ -30,7 +30,7 @@
}else{
data = options.data;
}
- this.urls = "https://web.byisf.com/xcxjingqingmap/xcxmap.html?data=" + data;
+ this.urls = "https://web.byisf.com/xcxjingqingmap/lxdhmap.html?data=" + data;
// this.dataList = data;
// console.log(this.urls);
},
diff --git a/xcxjingqingmap/.idea/.gitignore b/xcxjingqingmap/.idea/.gitignore
deleted file mode 100644
index 1296681..0000000
--- a/xcxjingqingmap/.idea/.gitignore
+++ /dev/null
@@ -1,8 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Datasource local storage ignored files
-/dataSources/
-/dataSources.local.xml
-# 基于编辑器的 HTTP 客户端请求
-/httpRequests/
diff --git a/xcxjingqingmap/.idea/misc.xml b/xcxjingqingmap/.idea/misc.xml
deleted file mode 100644
index d4b854b..0000000
--- a/xcxjingqingmap/.idea/misc.xml
+++ /dev/null
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
- <component name="JavaScriptSettings">
- <option name="languageLevel" value="ES6" />
- </component>
- <component name="ProjectRootManager" version="2" languageLevel="JDK_1_8" project-jdk-name="1.8" project-jdk-type="JavaSDK">
- <output url="file://$PROJECT_DIR$/out" />
- </component>
-</project>
\ No newline at end of file
diff --git a/xcxjingqingmap/.idea/modules.xml b/xcxjingqingmap/.idea/modules.xml
deleted file mode 100644
index b3df244..0000000
--- a/xcxjingqingmap/.idea/modules.xml
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
- <component name="ProjectModuleManager">
- <modules>
- <module fileurl="file://$PROJECT_DIR$/.idea/xcxjingqingmap.iml" filepath="$PROJECT_DIR$/.idea/xcxjingqingmap.iml" />
- </modules>
- </component>
-</project>
\ No newline at end of file
diff --git a/xcxjingqingmap/.idea/xcxjingqingmap.iml b/xcxjingqingmap/.idea/xcxjingqingmap.iml
deleted file mode 100644
index d6ebd48..0000000
--- a/xcxjingqingmap/.idea/xcxjingqingmap.iml
+++ /dev/null
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="JAVA_MODULE" version="4">
- <component name="NewModuleRootManager" inherit-compiler-output="true">
- <exclude-output />
- <content url="file://$MODULE_DIR$" />
- <orderEntry type="inheritedJdk" />
- <orderEntry type="sourceFolder" forTests="false" />
- </component>
-</module>
\ No newline at end of file
diff --git a/xcxjingqingmap/css/lxdhmap.css b/xcxjingqingmap/css/lxdhmap.css
new file mode 100644
index 0000000..3c0fe55
--- /dev/null
+++ b/xcxjingqingmap/css/lxdhmap.css
@@ -0,0 +1,249 @@
+body {
+ padding: 0;
+ margin: 0;
+}
+
+html,
+body,
+#mapVue {
+ width: 100%;
+ height: 100%;
+}
+
+#map {
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+}
+
+#mapVue {
+ overflow: hidden;
+ /* border: solid 1px springgreen; */
+}
+
+.lxdh_input_div {
+ position: fixed;
+ z-index: 999;
+ top: 30px;
+ left: 0;
+ right: 0;
+ margin: auto;
+ width: 250px;
+ height: 36px;
+}
+
+#lxdh_input {
+ outline-style: none;
+ border: 1px solid #ccc;
+ border-radius: 3px;
+ padding: 5px 5px;
+ width: 200px;
+ font-size: 14px;
+ font-weight: 500;
+ font-family: "Microsoft soft";
+}
+}
+
+#lxdh_input_ss {
+ width: 30px;
+ height: 30px;
+ vertical-align: middle;
+}
+
+
+
+
+.title {
+ width: 100%;
+ height: 14%;
+ /* border: 1px solid springgreen; */
+ border-radius: 60px 60px 0 0;
+ position: relative;
+ /* top: -3%; */
+ background-color: #fff;
+ z-index: 101;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+}
+
+.title-span {
+ height: 15%;
+}
+
+/* .title::after {
+ content: '';
+ display: block;
+ width: 40px;
+ height: 40px;
+ border: springgreen solid 1px;
+} */
+
+.main {
+ width: 95%;
+ margin: 0 auto;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ border-top: 1px solid rgb(138, 138, 138);
+}
+
+.f-m-once {
+ /* border: 1px solid rgb(194, 142, 0); */
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 8px 0 8px 0
+}
+
+.f-m-o-title {
+ display: flex;
+ align-items: center;
+ width: 40%;
+}
+
+.f-m-o-t-img {
+ width: 30px;
+ height: 30px;
+ padding-right: 10px;
+}
+
+.f-m-o-center {
+ width: 60%;
+}
+
+.el-divider {
+ margin: 0 auto;
+ width: 90%;
+}
+
+.but {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ padding-top: 5px;
+}
+
+.buta {
+ /* border: 1px solid #4D7CEE; */
+}
+
+.shipingPopup {
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 200;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.s-p-main {
+ width: 90%;
+ height: 90%;
+ /* background-color: #fff; */
+}
+
+.s-p-gaunbi {
+ position: relative;
+ left: 90%;
+ width: 50px;
+ height: 50px;
+}
+
+/* video::-webkit-media-controls-timeline {
+ display: none;
+} */
+
+.butb {
+ width: 80px;
+ height: 80px;
+ border: 1px solid rgb(46, 118, 228);
+ border-radius: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #fff;
+ background-image: linear-gradient(to bottom, #3CA7F4, #4D7CEE);
+}
+
+/* .resultFeedback {
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 201;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+} */
+
+/* .b-r-main {
+ width: 90%;
+ height: 90%;
+}
+
+.b-r-gaunbi {
+ position: relative;
+ left: 90%;
+ width: 50px;
+ height: 50px;
+}
+
+.b-r-main-in {
+ width: 100%;
+ height: auto;
+ padding-bottom: 20px;
+ background-color: #fff;
+ border-radius: 10px;
+}
+
+.b-r-m-i-once {
+ padding: 10px 0 10px 10px;
+ display: flex;
+ justify-content: space-around;
+}
+
+.b-r-m-i-o-title {
+ width: 30%;
+ position: relative;
+ top: 10px;
+}
+
+.b-r-m-i-o-center {
+ width: 70%;
+}
+.b-r-i-o-ups{
+ /* align-items: center; */
+}
+
+.b-r-m-i-o-c-img {
+ width: 50px;
+ height: 50px;
+}
+
+.b-r-m-but {
+ position: relative;
+ left: calc(50% - 40px);
+}
+
+*/ .butc {
+ /* border: 1px solid #4D7CEE; */
+}
+
+.b-b-img {
+ width: 40px;
+ height: 40px;
+ display: block;
+ /* border: 1px solid #4D7CEE; */
+}
diff --git a/xcxjingqingmap/img/sous.png b/xcxjingqingmap/img/sous.png
new file mode 100644
index 0000000..d6e903c
--- /dev/null
+++ b/xcxjingqingmap/img/sous.png
Binary files differ
diff --git a/xcxjingqingmap/js/lxdhmap.js b/xcxjingqingmap/js/lxdhmap.js
new file mode 100644
index 0000000..972007d
--- /dev/null
+++ b/xcxjingqingmap/js/lxdhmap.js
@@ -0,0 +1,189 @@
+var me = new Vue({
+ el: '#mapVue',
+ data: {
+ map: null,//map
+ getdata: null,
+ marker: null,
+ layuiLayer: null,
+ nowIndex: null,
+
+ activeName: 'first',
+
+ move: null,//存放移动实例
+
+ seedata: '',
+
+ nowPosition: '',
+
+ shipingPopupShow: false,
+ shipingM3u8Url: '',
+ resultFeedbackPopupShow: false,
+ popupDisplay: "none",
+ },
+ methods: {
+ getDataList() {
+ var that = this;
+ // var url = 'https://web.byisf.com/api/blade-jfpts/equipment/equipment/listAll';
+ // axios.get(url).then((res) => {
+ // that.getdata = res.data.data;
+ that.beginCome();
+ // })
+ },
+ beginCome() {
+ this.getdata = this.getQueryVariable('data');//url解码
+ // console.log(this.getdata)
+ // this.getdata = [{
+ // jd: 115.91042800000002,
+ // wd: 28.68094757898212,
+ // state: 0,
+ // dtype: 0,
+ // size: 300,
+ // title: '第一个'
+ // }];//url解码
+ this.map = this.beginMap(this.map, this.getdata);//创建并接受map
+ this.move = new myDomMove('#seedata', '.title', '#map');
+ // var dy = document.documentElement.clientHeight - 50;
+ // $('#seedata').animate({ top: dy + "px" }, 10);
+ // $('#map').css("height", (index, value) => {//改变地图高度
+ // return '100%';
+ // // })
+ this.map.invalidateSize(true);//应用地图高度
+ this.move.followFinger(this.map, 'down');
+ },
+ 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 JSON.parse(decodeURI(pair[1])); }//解码url 和 JSON
+ }
+ return (false);
+ },
+ beginMap(map, data) {
+ var that = this,
+ center = [data[0].wd, data[0].jd],
+ url = `/api/blade-jfpts/alarm/alarm/APP-getAlarm?id=${data[0].id}`;
+ this.nowPosition = center;
+ axios.post(url).then((res) => {
+ // console.log(res)
+ if (res.data.data.length != 0) {
+ var dat = res.data.data[0];
+ for (var key in dat) {
+ if (dat[key] == null || dat[key] == '') {
+ dat[key] = '暂无'
+ }
+ }
+ this.seedata = dat;
+
+ } else {
+ this.seedata = data[0];
+ }
+ // console.log(this.seedata, 1524545453)
+ })
+
+
+ var createMap = () => {
+ map = L.map('map', { //初始化地图
+ center: center,
+ zoom: 12,
+ minZoom: 2,
+ maxZoom: 17,
+ attributionControl: false, //去掉右下角
+ zoomControl: false, //去掉缩放
+ });
+ L.tileLayer( //添加切片图层
+ // "https://webmap-tile.sf-express.com/MapTileService/rt?x={x}&y={y}&z={z}", {//顺丰地图
+ "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", {//顺丰地图
+ // "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);
+ }
+ createMap();
+ 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.wd, a.jd], {
+ icon: a.dtype == 0 ? carIcon : a.dtype == 1 ? planeIcon : a.dtype == 2 ? busIcon : '',
+ // title: title,
+ myData: {//自定义数据
+ ...a
+ }
+ });
+ }
+ for (var i = 0; i < data.length; i++) {
+ var a = data[i];
+ // var title = a.title;
+ if (a.dtype == 0) {
+ setData(a);
+ } else if (a.dtype == 1) {
+ setData(a);
+ } else if (a.dtype == 2) {
+ setData(a);
+ }
+ // marker.bindPopup(title);
+ markers.addLayer(marker);
+ }
+ map.addLayer(markers);
+
+ markers.on('click', function (a) {
+ // that.drawer = true;
+ // that.seedata = a.layer.options.myData;
+ $('#seedata').css('top', '');
+ $('#map').css("height", (index, value) => {//改变地图高度
+ return '50%';
+ })
+ map.invalidateSize(true);//应用地图高度
+ // console.log(a.layer.options.myData);
+ that.move.destruction();
+ that.move.followFinger(map, 'down');
+
+ });
+ that.seedata = data[0];
+ // map.on('mousemove', (e) => {//实时显示坐标
+ // let latlng = e.latlng;
+ // console.log(latlng);// {lat: 30.59, lng: 114.32}
+ // });
+ return map;//抛出map
+ },
+ handleClick(tab, event) {
+ // console.log(tab, event);
+ },
+
+ gotoxcx(routs) {
+ wx.miniProgram.navigateTo({
+ url:`../poput/workbench/policeDetails/${routs}?id=${this.seedata.id}`, //指定跳转至小程序页面的门路
+ success: function(){
+ console.log('success'); //页面跳转胜利的回调函数
+ }
+ });
+ }
+
+ },
+ created() {
+ },
+ mounted() {
+ this.getDataList();
+ },
+ wacth: {
+ }
+})
\ No newline at end of file
diff --git a/xcxjingqingmap/lxdhmap.html b/xcxjingqingmap/lxdhmap.html
new file mode 100644
index 0000000..44a9e8b
--- /dev/null
+++ b/xcxjingqingmap/lxdhmap.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+ <title>map</title>
+ <!-- vue -->
+ <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+
+ <!-- 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> -->
+
+ <!-- axios支持 -->
+ <script src="../map/lib/axios.js"></script>
+
+ <!-- elementui -->
+ <script src="../map/lib/elementUi.js"></script>
+ <!-- <link rel="stylesheet" href="../map/lib/elementUi.css"> -->
+ <link rel="stylesheet" href="./css/elementUI.css">
+ <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
+
+ <!-- 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/lxdhmap.css" />
+
+ <!-- myDomMove -->
+ <!-- <script src="./js/move.js"></script> -->
+ <!-- sha1加密 -->
+ <!-- <script src="./js/sha1.js"></script> -->
+
+</head>
+
+<body>
+ <div id="mapVue">
+
+ <div id="map"></div>
+
+ <div class="lxdh_input_div">
+ <input id="lxdh_input" type="text">
+ <input style="width: 30px;
+ height: 30px;vertical-align: middle;" id="lxdh_input_ss" name="submit" type="image" value="ee" src="img/sous.png" />
+ </div>
+
+ </div>
+
+
+
+ <!-- vue渲染 -->
+ <script src="./js/lxdhmap.js"></script>
+</body>
+
+</html>
\ No newline at end of file
--
Gitblit v1.9.3