feat(): 地图模块开发

App.vue

@@ -12,8 +12,8 @@
 				console.log(token.secretKey,'App Launch')
 			} else {
 				uni.reLaunch({
-					url: '/pages/login/login'
+					// url: '/pages/login/login'
-					// url:'/pages/spjk/index'
+					url:'/pages/zhjs/index'
 				})
 				console.log(token.secretKey,'App Launch2')
 			}
@@ -34,6 +34,7 @@
   @import "@/uni_modules/uview-ui/index.scss";
 	/* #ifndef APP-NVUE */
 	@import '@/static/customicons.css';
+	@import 'ol/ol.css';
 	// 设置整个项目的背景色
 	page {
 		// background: linear-gradient(-180deg, #64acf0 0%, #ffffff 62%,#EEF3F6 70%);
@@ -106,4 +107,11 @@
         // color: #3399ef;
       }
     }
+// 	.amap-logo {
+//   display: none !important;
+// }
+// .amap-copyright {
+//   display: none !important;
+// }
+
 </style>

manifest.json

@@ -10,6 +10,7 @@
         "usingComponents" : true,
         "nvueCompiler" : "uni-app",
         "nvueStyleCompiler" : "uni-app",
+        "runmode":"liberate",
         "splashscreen" : {
             "alwaysShowBeforeRender" : true,
             "waiting" : true,

package.json

@@ -6,6 +6,7 @@
     "echarts": "^4.9.0",
     "es6-promise": "^4.2.8",
     "flv.js": "^1.6.2",
-    "moment": "^2.30.1"
+    "moment": "^2.30.1",
+    "ol": "^10.2.1"
   }
 }

pages.json

@@ -77,6 +77,26 @@
       "style": {
         "navigationBarTitleText": ""
       }
+    },
+     {
+      "path": "pages/zhjs/index",
+      "style": {
+        "navigationBarTitleText": "",
+        "app-plus": {
+          "titleNView": false,
+          "subNVues": [
+            {
+              "id": "drawer",
+              "path": "pages/zhjs/subnvue/index.nvue",
+              "style": {
+                "position": "absolute",
+                "width": "100%",
+                "height": "100%"
+              }
+            }
+          ]
+        }
+      }
     },
     {
       "path": "pages/mypage/compents/wtcl/index",

pages/homeIndex/index.vue

@@ -88,6 +88,12 @@
 		computed: {
 			getNavList() {
 				return [
+					{
+						value: '综合监视',
+						key: 1,
+						icon: '../../static/tabs/yujing_icon@2x2.png',
+						url: '/pages/zhjs/index'
+					},
 					{
 						value: '预警',
 						key: 2,

pages/skInfo/detail/basicInfo.vue

@@ -1,22 +1,5 @@
 <template>
     <view class="project-cotent">
-      
-        <!-- <view class="project-basic">
-            <view class="project-loc">
-            <text style="opacity:0.5">工程位置：{{skInfo.resLoc}}</text>
-           </view>
-        </view> -->
-        <!-- <view class="project-des" >
-            <view v-for="(item,index) in tableData" :key="index" :style="index % 2 == 0 ? 'width:150px;':'width:197px;'">
-               <view style="display:flex;align-items:center;margin:15px 0px;">
-                 <view class="circle-dot"></view>
-                <view class="label-name">
-                    <text style="opacity:0.5">{{item.name}}</text>
-                    <text>{{item.value||"-"}}</text>
-                </view>
-               </view>
-            </view>
-        </view> -->
         <view class="total-des">
             <view style="opacity:0.5">工程概况：</view>
             <view>{{skInfo.projOverview}}</view>
@@ -27,27 +10,16 @@
             <view class="sk-location">
                 <image src='../../../static/images/loc.png' style="width:20px;height:20px"></image>
                 <text style="margin-left:10px">{{skInfo.resLoc}}</text>
-                
             </view>
            </view>
         </view>
-        <view class="sk-map"></view>
+        <view class="sk-map12">
+            <map style="width: 100%;height:500px; flex: 1" id="container" :latitude="lnglat[1]" :longitude="lnglat[0]"
+             :markers="markers" scale="13" ></map>
+        </view>
     </view>
 </template>
 <script>
-import moment from 'moment'
-const gmObj = {
-    "1":"大 (1)型",
-    "2":"大 (2)型",
-    "3":"中型",
-    "4":"小 (1)型",
-    "5":"小 (2)型",
-    "9":"其他",
-}
-const bxObj = {
-    1:"是",
-    0:"否",
-}
 export default {
     props:{
         skInfo:{
@@ -58,72 +30,26 @@ export default {
     },
     data() {
         return {
-            list:[
+            lnglat: [114.76,31.52],
-                {
+             markers: [{
-                name:"注册登记号",
+                    latitude: 31.52,
-                key:"regSn"
+                    longitude: 114.76,
-               },
+                    iconPath: '../../../static/tabs/add.png',
-                {
+                    width:25,
-                name:"所在河流(水系)名称",
+                    height:25
-                key:"rvName"
+                }]
-               },
-                {
-                name:"水库模型",
-                key:"engScal"
-               },
-               {
-                name:"设计灌溉面积(亩)",
-                key:'designIrrArea'
-               },
-               {
-                name:"受益人口(人)",
-                key:"feedPop"
-               },
-               {
-                name:"是否病险",
-                key:"isDanger"
-               },
-               {
-                name:"开工日期",
-                key:"startDate"
-               },
-               {
-                name:"竣工日期",
-                key:"compDate"
-               },
-            ]
         }
     },
-    computed:{
+    
-        tableData(){  
-            return this.list.map(item=>{
-                if(item.key == "engScal"){
-                    this.skInfo[item.key] = gmObj[this.skInfo[item.key]]
-                }
-                if(item.key == "isDanger"){
-                    this.skInfo[item.key] = bxObj[this.skInfo[item.key]]
-                }
-                if(item.key == "startDate"){
-                    this.skInfo[item.key] = moment(this.skInfo[item.key]).format("YYYY-MM-DD")
-                }
-                 if(item.key == "compDate"){
-                    this.skInfo[item.key] = moment(this.skInfo[item.key]).format("YYYY-MM-DD")
-                }
-                return {
-                    name:item.name,
-                    value:this.skInfo[item.key]
-                }
-            })
-        }
-    }
 }
 </script>
 <style lang="scss">
     .project-cotent{
+        position: relative;
         padding: 0px 3px;
         background-color: #f7f7f7;
-        max-height: calc(100vh - 40px);
+        // max-height: calc(100vh - 40px);
-        overflow-y: auto;
+        // overflow-y: auto;
         .project-basic{
             background-color: #ffffff;
             padding: 5px;
@@ -162,9 +88,11 @@ export default {
         align-items: center;
        
     }
-     .sk-map{
+    .sk-map12{
-            width: 100%;
+        //   height: 400px;
-            height: 400px;
+    } .amap-logo {
-            background-color: #ffffff;
+  opacity: 0 !important;
-        }
+} .amap-copyright {
+  opacity: 0 !important;
+}
 </style>

pages/zhjs/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <view class="zhjs-container">
+        <u-navbar title="综合监视" :autoBack="true" :titleStyle="{
+				fontSize:'18px'
+			}" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
+        </u-navbar>
+        <map style="width:100vw; height:100vh;margin-top:70px" id="map" :latitude="latitude" :longitude="longitude" :markers="markers"
+            :show-location="true" scale="13" :enable-satellite="enableSatellite" theme="satellite">
+                <cover-image src="/static/tabs/dingwei.png" class="location" @click="onControlTap"></cover-image>
+        </map>
+         
+    </view>
+  
+</template>
+<script>
+    export default {
+        data() {
+            return {
+                latitude: 31.52,
+                longitude: 114.76,
+                enableSatellite:true,
+                markers: [{
+                    latitude: 31.52,
+                    longitude: 114.76,
+                    iconPath: '../../static/tabs/add.png',
+                    width: "25",
+                    height: "25"
+                }],
+                dingwei: '../../static/tabs/dingwei.png'
+            }
+        },
+        methods: {
+          onControlTap(){
+            const map = uni.createMapContext("map");
+            map.moveToLocation()
+          },
+          nvueShow: function() {
+          			const subnvue = uni.getSubNVueById('drawer') // 获取nvue
+                console.log(subnvue);
+          			subnvue.show()  // 显示nvue
+          		}
+        },
+       mounted() {
+         this.nvueShow()
+       }
+    }
+</script>
+
+<style lang="scss">
+   .location{
+    position: absolute;
+    width: 35px;
+    height:35px;
+    bottom: 100px;
+    left:10px;
+    background-color: #fff;
+    padding: 5px;
+   }
+</style>

pages/zhjs/index1.vue

@@ -0,0 +1,62 @@
+<template>
+	<view class="container">
+        <u-navbar title="综合监视" :autoBack="true" :titleStyle="{
+				fontSize:'18px'
+			}" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
+		</u-navbar>
+		<view id="map" class="map"></view>
+	</view>
+</template>
+<script module="ol" lang="renderjs">
+	import ol from 'ol';
+	import {Source,Feature,Map,Overlay} from 'ol'
+	import {XYZ,Vector} from 'ol/source';
+	import {Group} from 'ol/layer'
+	import {geom,Point,LineString} from 'ol/geom'
+	import {Style,Circle,Fill,Stroke,Text} from 'ol/style'   
+	import View from 'ol/View';
+	import TileLayer from 'ol/layer/Tile';
+	import Lvector from 'ol/layer/Vector'
+	import OSM from 'ol/source/OSM';
+	import Gcircle from 'ol/geom/Circle'  
+	export default {
+			data() {
+				return {
+					map: null,
+				}
+			},
+			mounted() {
+			this.initMap();
+		},
+		methods: {
+			initMap() {
+				this.map = new Map({
+					target: 'map',
+					layers: [new TileLayer({
+							// source: new OSM()
+							source: new XYZ({
+							url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=efc861f25f96dc6e5f884f0403ebfefd",
+								projection: 'EPSG:3857',
+								// wrapX: false
+								crossOrigin: '*',
+							}),
+                            maxZoom: 20,
+						})],
+					view: new View({
+						center: [81.277857, 43.907986],
+						// center: [114.30, 30.50],
+						zoom: 12,
+						projection: 'EPSG:4326'
+					})
+				});
+			},
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	#map {
+		position: relative;
+		width: 100%;
+		height: 1400rpx;
+	}
+</style>

pages/zhjs/subnvue/index.nvue

@@ -0,0 +1,50 @@
+<template>
+    <view class="zhjs-container">
+        <u-navbar title="综合监视" :autoBack="true" :titleStyle="{
+				fontSize:'18px'
+			}" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
+        </u-navbar>
+        <map style="width:100vw; height:100vh;margin-top:70px" id="map" :latitude="latitude" :longitude="longitude" :markers="markers"
+            :show-location="true" scale="13" :enable-satellite="enableSatellite" theme="satellite">
+                <cover-image src="/static/tabs/dingwei.png" class="location" @click="onControlTap"></cover-image>
+        </map>
+         
+    </view>
+</template>
+<script>
+    export default {
+        data() {
+            return {
+                latitude: 31.52,
+                longitude: 114.76,
+                enableSatellite:true,
+                markers: [{
+                    latitude: 31.52,
+                    longitude: 114.76,
+                    iconPath: '../../static/tabs/add.png',
+                    width: "25",
+                    height: "25"
+                }],
+                dingwei: '../../static/tabs/dingwei.png'
+            }
+        },
+        methods: {
+          onControlTap(){
+            const map = uni.createMapContext("map");
+            map.moveToLocation()
+          }
+        },
+    }
+</script>
+
+<style lang="scss">
+   .location{
+    position: absolute;
+    width: 35px;
+    height:35px;
+    bottom: 100px;
+    left:10px;
+    background-color: #fff;
+    padding: 5px;
+   }
+</style>