scale监听

package.json

@@ -16,6 +16,7 @@
     "element-plus": "^2.3.12",
     "i": "^0.3.7",
     "jquery": "^3.7.0",
+    "lodash": "^4.17.21",
     "mitt": "^3.0.1",
     "node-sass": "^8.0.0",
     "sass": "^1.58.0",

src/components/mapJK.vue

@@ -26,6 +26,9 @@ import AddSingleLayer from "../units/map/AddSingleLayer.js";
 import WaterEffect from "../units/map/WaterEffect.js";
 import Measurement from "../units/map/Measurement.js";
 import SunshineAnalysis from "../units/map/SunshineAnalysis.js";
+import AddPointEvent from "../units/map/AddPointEvent.js";
+import SetPopupOptions from "../units/map/SetPopuopOptions";
+import AddScaleEvent from "../units/map/AddScaleEvent";
 export default {
   name: "mapJK",
   setup(){
@@ -39,6 +42,7 @@ export default {
     let m_map;
     let measureWidget = null;
     let sunshineWidget = null;
+    let m_handles = [];
     onMounted(() =>{
       bus.on('CreateMap',() =>{
         MapReady = $.Deferred();
@@ -61,11 +65,13 @@ export default {
         let setMapConfig = new SetMapConfig({
           m_spatialReference,
           m_fullExtent,
-          m_initialExtent
+          m_initialExtent,
+          m_handles
         })
         m_spatialReference = setMapConfig.m_spatialReference;
         m_fullExtent = setMapConfig.m_fullExtent;
         m_initialExtent = setMapConfig.m_initialExtent;
+        m_handles = setMapConfig.m_handles;
         let initMap = new InitMap({
           m_map,
           m_view,
@@ -102,6 +108,12 @@ export default {
           case "SunshineAnalysis":
             sunshineAnalysis(params);
             break
+          case "AccessFeaturesWithPointEvents":
+            accessFeaturesWithPointEvents(params);
+            break;
+          case "ShowLayersWithScaleEvents":
+            showLayersWithScaleEvents(params);
+            break;  
         }
       }
       function setBackground(params){
@@ -205,6 +217,83 @@ export default {
           m_view.ui.add(sunshineWidget,position);
         }
       }
+      function accessFeaturesWithPointEvents(params){
+        let status = params.status;
+        let mouse_handle_id = params.mouse_handle_id;
+        let highlight_handle_id = params.highlight_handle_id;
+        if(status === "hide"){
+          if(m_handles.has(mouse_handle_id)){
+            m_handles.remove(mouse_handle_id);
+          }
+          if(m_handles.has(highlight_handle_id)){
+            m_handles.remove(highlight_handle_id);
+          }
+          return
+        }
+        if(status === "show"){
+          let type = params.type;
+          let mouseTime = params.mouse_time;
+          let popupTitle = params.popup_title;
+          if(m_handles.has(mouse_handle_id)){
+            m_handles.remove(mouse_handle_id);
+          }
+          if(m_handles.has(highlight_handle_id)){
+            m_handles.remove(highlight_handle_id);
+          }
+          let addPointEvent = new AddPointEvent({
+            m_view,
+            type,
+            highlightHandleId:highlight_handle_id,
+            mouseTime,
+            popupTitle,
+            callbackFunction:accessFeaturesWithPointEventsReturn
+          });
+          m_handles.add(addPointEvent.mouseHandle,mouse_handle_id);
+        }
+      }
+      function accessFeaturesWithPointEventsReturn(screenPoint,handleId,popupTitle){
+        if(m_handles.has(handleId)){
+            m_handles.remove(handleId);
+        }
+        m_view.hitTest(screenPoint).then((response) =>{
+          if(response.results.length > 0){
+              let result = response.results[0];
+              m_view.whenLayerView(result.graphic.layer).then((lyrView) =>{
+                  let highlightHandle = lyrView.highlight(result.graphic);
+                  m_handles.add(highlightHandle,handleId);
+              })
+              let setPopupOptions = new SetPopupOptions({
+                title:popupTitle,
+                location:m_view.toMap(screenPoint),
+                content:result.graphic.attributes
+              })
+              m_view.popup.open(setPopupOptions.popupOptions());
+          }
+        })
+      }
+      function showLayersWithScaleEvents(params){
+        let status = params.status;
+        let scale_handle_id = params.scale_handle_id;
+        if(status === "hide"){
+          if(m_handles.has(scale_handle_id)){
+            m_handles.remove(scale_handle_id);
+          }
+          return
+        }
+        if(status === "show"){
+          if(m_handles.has(scale_handle_id)){
+            m_handles.remove(scale_handle_id);
+          }
+          let addScaleEvent = new AddScaleEvent({
+            m_view,
+            callBackFunction:showLayersWithScaleEventsReturn
+          });
+          m_handles.add(addScaleEvent.scaleHandle,scale_handle_id);
+        }
+      }
+      function showLayersWithScaleEventsReturn(scaleValue){
+        
+      }
     })
   }
 }

src/components/mapTest.vue

@@ -74,7 +74,7 @@ export default {
       //加载地图插件
       bridge = new CityGIS.Bridge({
         id:"i_map",
-        url:'http://127.0.0.1:5173/#/jk_map',
+        url:'http://localhost:5173/#/jk_map',
         //url:'https://10.90.11.49:2002/VUE-Map-Tool-Widget/#/jk_map',
         onReady:function (){
           // console.log("地图创建完成");

src/config/basicTool.json

@@ -54,7 +54,7 @@
           "ActionName": "WaterEffect",
           "Parameters": {
             "status":"show",
-            "url":"https://server2.geoscene.gis/server/rest/services/Hosted/%E5%85%A8%E5%B8%82%E6%B2%B3%E6%B5%81/FeatureServer",
+            "url":"https://10.81.73.31/server/rest/services/Hosted/%E5%85%A8%E5%B8%82%E6%B2%B3%E6%B5%81/FeatureServer",
             "token": ""
           }
         }
@@ -83,6 +83,22 @@
             "token": ""
           }
         }
+      },
+      {
+        "code": "1-7",
+        "title": "悬浮事件",
+        "data": {
+          "ActionName": "AccessFeaturesWithPointEvents",
+          "Parameters": {
+            "status":"show",
+            "type":"pointer-move",
+            "mouse_time":500,
+            "popup_title":"悬浮结果",
+            "mouse_handle_id":"mouse_handle_id",
+            "highlight_handle_id":"highlight_handle_id",
+            "token": ""
+          }
+        }
       }
     ]
   }

src/units/map/AddPointEvent.js

@@ -0,0 +1,42 @@
+
+class AddPointEvent {
+    constructor(options){
+        this.view = options.m_view;
+        this.type= options.type;
+        this.mouseHandle = null;
+        this.popupTitle = options.popupTitle;
+        this.highlightHandleId = options.highlightHandleId;
+        this.callbackFunction = options.callbackFunction;
+        this.mouseTime = options.mouseTime || null;
+        this.mouseTimeOut= null;
+        this.addPointEvent();
+    }
+    addPointEvent(){
+        switch(this.type){
+            case "click":
+
+                break;
+            case "pointer-move":
+                this.mouseHandle = this.view.on("pointer-move",(evt) =>{
+                    let screenPoint = {
+                        "x":evt.x,
+                        "y":evt.y
+                    }
+                    debugger
+                    if(this.mouseTime !== null){
+                        if(this.mouseTimeOut !== null){
+                            clearTimeout(this.mouseTimeOut);
+                            this.mouseTimeOut = null;
+                        }
+                        this.mouseTimeOut = setTimeout(()=>{
+                            this.callbackFunction(screenPoint,this.highlightHandleId); 
+                        },this.mouseTime)
+                    }else{
+                        this.callbackFunction(screenPoint,this.highlightHandleId,this.popupTitle); 
+                    }
+                })
+                break;
+        }
+    }
+}
+export default AddPointEvent

src/units/map/AddScaleEvent.js

@@ -0,0 +1,23 @@
+import throttle from "lodash/throttle";
+
+class AddScaleEvent {
+    constructor(options){
+        this.view = options.m_view;
+        this.scaleHandle = null;
+        this.callBackFunction = options.callBackFunction;
+        this.addScaleEvent();
+    }
+   
+    addScaleEvent(){
+        let currentScale = this.view.scale;  //缓存比例尺信息
+        this.scaleHandle = this.view.watch("scale",(newValue) =>{
+            if(newValue !== currentScale){
+                currentScale = newValue;
+                throttle(() =>{
+                    this.callBackFunction(newValue)
+                },500)
+            }
+        })
+    }
+}
+export default AddScaleEvent;

src/units/map/AddSingleLayer.js

@@ -1,4 +1,5 @@
 import SceneLayer from '@arcgis/core/layers/SceneLayer'
+import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
 class AddSingleLayer{
     constructor(options) {
         this.id = options.id;
@@ -7,8 +8,8 @@ class AddSingleLayer{
         this.opacity = options.opacity;
         this.url = options.url;
         this.type = options.type;
-        this.m_spatialReference = options.m_spatialReference;
-        this.m_fullExtent = options.m_fullExtent;
+        this.spatialReference = options.m_spatialReference;
+        this.fullExtent = options.m_fullExtent;
         this.size = options.size || [512,512];
         this.origin = options.origin || {
             "x": -66000,
@@ -40,6 +41,18 @@ class AddSingleLayer{
                             popupEnabled: true
                         })
                         break;
+                    case "feature":
+                        this.layer = new FeatureLayer({
+                            url:this.url,
+                            id:this.id,
+                            title:this.title,
+                            opacity:this.opacity,
+                            visible:this.visible,
+                            spatialReference:this.spatialReference,
+                            outFields:["*"],
+                            popupEnabled:true
+                        })
+                        break;    
                     default:
                         break;
                 }

src/units/map/QueryIn2D.js

@@ -0,0 +1,7 @@
+
+class QueryIn2D{
+    constructor(options){
+
+    }
+}
+export default QueryIn2D

src/units/map/QueryIn3D.js

@@ -0,0 +1,6 @@
+
+class QueryIn3D {
+    constructor(options){
+    }
+}
+export default QueryIn3D

src/units/map/SetMapConfig.js

@@ -1,11 +1,13 @@
 import SpatialReference from '@arcgis/core/geometry/SpatialReference'
 import Extent from '@arcgis/core/geometry/Extent'
+import Handles from '@arcgis/core/core/Handles'
 import dojoConfig from '../../config/tsconfig.json'
 class SetMapConfig{
     constructor(options) {
         this.m_spatialReference = options.m_spatialReference;
         this.m_fullExtent = options.m_fullExtent;
         this.m_initialExtent = options.m_initialExtent;
+        this.m_handles = options.m_handles;
         this.setMap()
     }
     setMap(){
@@ -14,6 +16,7 @@ class SetMapConfig{
         this.m_initialExtent =  new Extent(dojoConfig["initExtent"]);
         this.m_initialExtent.spatialReference = this.m_spatialReference;
         this.m_fullExtent.spatialReference = this.m_spatialReference;
+        this.m_handles = new Handles();
     }
 
 }

src/units/map/SetPopuopOptions.js

@@ -0,0 +1,24 @@
+class SetPopupOptions {
+    constructor(options){
+        this.title = options.title||"悬浮结果";
+        this.location = options.location;
+        this.content = options.content||"悬浮结果";
+    }
+    popupOptions(){
+        return {
+            title:this.title,
+            location:this.location,
+            content:this.setContent()
+        }
+    }
+    setContent(){
+        let options = [];
+        for(let key in this.content){
+            let value = this.content[key];
+            options.push('<tr><td>' + key + '</td><td>' + value + '</td></tr>'); 
+        }
+        return '<table><tbody><tr><th>属性</th><th>数值</th></tr>' + options.join('')+ '</tbody></table>';
+    }
+    
+}
+export default SetPopupOptions