添加区域描边

src/views/components/housecamer.vue

@@ -138,6 +138,7 @@ const currFlowType = ref('total');
 const eventFlowData = ref([]);
 const deptOptions = ref([]);
 const typeMapping={
+  "-1":"home",
   "0":"none",  
   "201":"smoke",
   "195":"fire",
@@ -278,6 +279,7 @@ const loadEvent=()=>{
     eventFlowData.value = res.flow;
     let vl=[];
     for (let k in typeMapping) {
+      if(k=="-1") continue;
       vl.push({id:k, code:typeMapping[k],name:alarm_type.value[typeMapping[k]].name,value:res.curr[k]*1});
     }
     alarm_curr.value = vl;

src/views/index.vue

@@ -102,7 +102,9 @@ const queryParams=ref({
 const total = ref(0);
 let infoWindow = null;
 let geocoder = null;
+let districtSearch = null;
 const typeMapping={
+  "-1":"home",
   "0":"none",  
   "201":"smoke",
   "195":"fire",
@@ -110,6 +112,11 @@ const typeMapping={
   "191":"temp"  
 }
 const alarm_type=ref({
+  "home":{
+    name:'',
+    bg:'#2488fe',
+    icon:'/images/ico_alarm_default.png'
+  },
   "none":{
     name:'行为合规',
     bg:'#2488fe',
@@ -252,7 +259,7 @@ const initMap = () => {
   AMapLoader.load({
     key: 'cf0ede1d8833ccb51fb6b084e23a7b5e', // 申请好的Web端开发者Key，首次调用 load 时必填
     version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-    plugins: ['AMap.Scale', 'AMap.ToolBar','AMap.Geocoder','AMap.LngLat'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+    plugins: ['AMap.Scale', 'AMap.ToolBar','AMap.Geocoder','AMap.LngLat','AMap.DistrictSearch'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
     Loca:{
       version:'2.0.0'
     }
@@ -264,7 +271,7 @@ const initMap = () => {
       map.value = new res.Map('containerMap', {
         //设置地图容器id
         viewMode: '2D', //是否为3D地图模式
-        zoom: 8, //初始化地图级别
+        zoom: 7, //初始化地图级别
         mapStyle:"amap://styles/dark",//深色模式
         center: lnglat, //初始化地图中心点位置
       })
@@ -279,12 +286,22 @@ const initMap = () => {
         autoMove:true,
         closewhenClickMap:true,
       });
+      // 初始化查询对象
+      districtSearch = new AMap.value.DistrictSearch({
+        extensions: 'all', // 返回行政区边界坐标
+        subdistrict: 0 // 不返回下级行政区
+      });
       map.value.clearMap() // 清除地图覆盖物
       // 地图是否可拖拽和缩放
       map.value.setStatus({
         dragEnable: true, // 是否可拖拽
         zoomEnable: true, // 是否可缩放
-      })      
+      })
+      let userinfo = sessionStorage.getItem("user");
+      if(userinfo!=null){
+        userinfo = JSON.parse(userinfo);
+        drawAreaBorder(userinfo.dept.deptName);
+      }
       initData();
     })
     .catch((e) => {
@@ -292,6 +309,31 @@ const initMap = () => {
     })
 }
 
+const drawAreaBorder=(areaname)=>{
+ // 查询指定区域，例如"成都市"
+ districtSearch.search(areaname, function(status, result) {
+    if (status === 'complete') {
+      var districts = result.districtList[0];
+      if (districts && districts.boundaries) {
+        // 遍历边界数组（一个区域可能由多个多边形组成，例如岛屿）
+        for (var i = 0; i < districts.boundaries.length; i++) {
+          var polygon = new AMap.value.Polygon({
+            path: districts.boundaries[i],
+            strokeColor: "#FF33FF", // 描边颜色
+            strokeWeight: 2,        // 描边宽度
+            strokeStyle: "solid",  // 描边样式，实线solid或虚线dashed
+            fillColor: "#1791fc",   // 填充颜色
+            fillOpacity: 0.2        // 填充透明度
+          });
+          map.value.add(polygon);
+        }
+        // 调整地图视野到合适的范围
+        //map.setFitView();
+      }
+    }
+  });
+}
+
 const initData = ()=>{
   //加载仓库列表
   request({
@@ -335,6 +377,7 @@ const loadStat=()=>{
   }).then(res=>{
     let vl=[];
     for (let k in typeMapping) {
+      if(k=="-1") continue;
       vl.push({id:k, code:typeMapping[k],name:alarm_type.value[typeMapping[k]].name,value:res.curr[k]*1});
     }
     alarm_curr.value = vl;
@@ -735,19 +778,19 @@ onMounted(() => {
 .custom-marker{
       display: grid;
       color: #fff;
-      font-size: 12px;
+      font-size: 11px;      
       .icon1,.icon2{
         display: none;
       }
       .housename{
+          text-overflow: hidden;
           width: 140px;
           margin-left: -55px;
           text-align: center;
           background: #484e58;
           margin-top: 42px;
-          padding: 3px 5px;
+          padding: 3px 4px;
           border-radius: 18px;
-          position: relative;
           position: absolute;
           z-index: 1;
           img{
@@ -778,6 +821,9 @@ onMounted(() => {
       .none{
         background-color: #2287fe;     
       }
+      .home{
+        background-color: #2287fe;     
+      }
       .fire{
         background-color: #dd4949;  
       }