@mapgis/webclient-vue-cesium 16.2.0 → 16.2.1

package/src/components/Layer/M3D/M3d.vue

@@ -11,7 +11,7 @@
     </mapgis-ui-popup-content>
   </Popup>
   <mapgis-3d-virtual-popup
-    v-else
+    v-else-if="popupShowType === 'default'"
     :enablePopup="enablePopup"
     :enableTips="enableTips"
     :enableIot="iEnableIot"
@@ -41,10 +41,19 @@ export default {
   mixins: [PopupMixin],
   props: {
     ...Tileset3dOptions,
+    // 右侧展示气泡框props
+    popupShowType: {
+      type: String,
+      default: "default"
+    },
+    popupOverlay: {
+      type: Object,
+      default: () => {}
+    }
   },
   components: {
     modelSwitchPopup,
-    Popup,
+    Popup
   },
   data() {
     return {
@@ -54,7 +63,7 @@ export default {
       modelSwitchVisible: false,
       tileIndex: undefined,
       tile: {},
-      iEnableIot: false,
+      iEnableIot: false
     };
   },
   created() {},
@@ -93,7 +102,7 @@ export default {
     },
     enableIot(next) {
       this.iEnableIot = next;
-    },
+    }
   },
   /* render(h) {
     return this.$_render(h);
@@ -110,17 +119,17 @@ export default {
       let version = this.parseCesiumVersion(url);
       if (version == "1.0") {
         return new Promise(
-          (resolve) => {
+          resolve => {
             let m3dLayer = new window.CesiumZondy.Layer.M3DLayer({
-              viewer: viewer,
+              viewer: viewer
             });
             resolve({ layer: m3dLayer });
           },
-          (reject) => {}
+          reject => {}
         );
       } else if (version == "2.0") {
         return new Promise(
-          (resolve) => {
+          resolve => {
             let layerIndex;
             // 判断服务类型，三维场景服务调用Cesium底层appendSceneLayer，本质是调用appendSceneServer方法
             if (url.indexOf("SceneServer") !== -1) {
@@ -138,7 +147,7 @@ export default {
               resolve({ layerIndex: layerIndex });
             }
           },
-          (reject) => {}
+          reject => {}
         );
       }
 
@@ -148,8 +157,8 @@ export default {
     getOptions() {
       const { $props } = this;
       let options = {};
-      Object.keys($props).forEach(function (key) {
-        if($props[key]) {
+      Object.keys($props).forEach(function(key) {
+        if ($props[key]) {
           options[key] = $props[key];
         }
       });
@@ -178,7 +187,7 @@ export default {
         vm.loopM3d(m3ds, "2.0");
         vueCesium.M3DIgsManager.addSource(vueKey, vueIndex, m3ds, {
           version: "2.0",
-          url: url,
+          url: url
         });
         console.log("vueCesium.M3DIgsManager", vueCesium.M3DIgsManager);
         vm.$emit("loaded", { tileset: tileset, m3ds: m3ds });
@@ -194,20 +203,20 @@ export default {
       if (viewer.isDestroyed()) return;
 
       let promise = this.createCesiumObject();
-      promise.then((payload) => {
+      promise.then(payload => {
         const { layer, layerIndex } = payload;
 
         if (layer) {
           // 0.0 1.0版本的处理方式
           let options = this.getOptions();
-          options.loaded = (tileset) => {
+          options.loaded = tileset => {
             if (vueKey && vueIndex) {
               vueCesium.M3DIgsManager.addSource(vueKey, vueIndex, m3ds, {
-                url: url,
+                url: url
               });
               vm.bindPopupEvent();
               if (!vm.show && m3ds) {
-                m3ds.forEach((m3d) => {
+                m3ds.forEach(m3d => {
                   m3d.show = vm.show;
                 });
               }
@@ -260,7 +269,7 @@ export default {
             vm.loopM3d(m3ds, "2.0");
             vueCesium.M3DIgsManager.addSource(vueKey, vueIndex, m3ds, {
               version: "2.0",
-              url: url,
+              url: url
             });
             vm.$emit("loaded", { tileset: m3dLayer, m3ds: m3ds });
             vm.bindPopupEvent();
@@ -283,15 +292,15 @@ export default {
         return;
       }
 
-      const layer =  viewer.scene.layers.getLayer(layerIndex)
-      if(!layer) return
+      const layer = viewer.scene.layers.getLayer(layerIndex);
+      if (!layer) return;
 
       if (url.indexOf("SceneServer") != -1) {
-        if(viewer.scene.layers.sceneLayerMap._length > 0){
+        if (viewer.scene.layers.sceneLayerMap._length > 0) {
           viewer.scene.layers.removeSceneLayerByID(layerIndex);
         }
       } else {
-        if(viewer.scene.layers.m3dLayersMap.length > 0) {
+        if (viewer.scene.layers.m3dLayersMap.length > 0) {
           viewer.scene.layers.removeM3DLayerByID(layerIndex);
         }
       }
@@ -303,7 +312,7 @@ export default {
         let m3ds = find.source;
         !viewer.isDestroyed() &&
           m3ds &&
-          m3ds.forEach((l) => {
+          m3ds.forEach(l => {
             l.destroy();
           });
       }
@@ -346,6 +355,8 @@ export default {
           find.options.hoverhandler.destroy();
         }
       }
+      // 关闭右侧气泡框
+      this.popupOverlay && this.popupOverlay.setContent(null);
     },
     pickFeature(payload) {
       const vm = this;
@@ -386,22 +397,44 @@ export default {
         let titlefield = popupOptions ? popupOptions.title : undefined;
         if (tileset._useRawSaveAtt && Cesium.defined(feature)) {
           let result = feature.content.getAttributeByOID(oid) || {};
-          vm.iClickFeatures = [
-            { properties: result, title: result[titlefield] },
-          ];
-        } else {
-          tileset.queryAttributes(oid).then(function (result) {
-            result = result || {};
+          if (this.popupShowType === "default") {
             vm.iClickFeatures = [
-              { properties: result, title: result[titlefield] },
+              { properties: result, title: result[titlefield] }
             ];
+          } else {
+            // title放在最前面
+            let popupContent = {};
+            popupContent = result[titlefield]
+              ? { title: result[titlefield], ...result }
+              : { ...result };
+            vm.popupOverlay && vm.popupOverlay.setContent(popupContent);
+          }
+        } else {
+          tileset.queryAttributes(oid).then(function(result) {
+            result = result || {};
+            if (this.popupShowType === "default") {
+              vm.iClickFeatures = [
+                { properties: result, title: result[titlefield] }
+              ];
+            } else {
+              // title放在最前面
+              let popupContent = {};
+              popupContent = result[titlefield]
+                ? { title: result[titlefield], ...result }
+                : { ...result };
+              vm.popupOverlay && vm.popupOverlay.setContent(popupContent);
+            }
           });
         }
-        if (vm.iClickFeatures && vm.iClickFeatures.length > 0) {
+        if (
+          this.popupShowType === "default" &&
+          vm.iClickFeatures &&
+          vm.iClickFeatures.length > 0
+        ) {
           let clickinfo = vm.iClickFeatures[0];
           const { properties } = clickinfo;
           if (properties) {
-            Object.keys(properties).forEach((k) => {
+            Object.keys(properties).forEach(k => {
               if (k.toLowerCase() == "euid") vm.iEnableIot = true;
             });
           }
@@ -420,13 +453,14 @@ export default {
           "rgba(255, 255, 0, 0.5)"
         );
       }
+      this.popupOverlay && this.popupOverlay.setContent(null);
     },
     changeShow(show) {
       const { vueKey, vueIndex } = this;
       let find = vueCesium.M3DIgsManager.findSource(vueKey, vueIndex);
       if (find) {
         let m3ds = find.source;
-        m3ds && m3ds.forEach((m3d) => (m3d.show = show));
+        m3ds && m3ds.forEach(m3d => (m3d.show = show));
       }
       this.layerList = this.parseLayers();
       this.changeLayerVisible(this.layerList);
@@ -438,12 +472,12 @@ export default {
       if (find) {
         let m3ds = find.source;
         if (!m3ds) return;
-        m3ds.forEach((m3d) => {
+        m3ds.forEach(m3d => {
           let type = vm.checkType(m3d);
           type = type == M3dType.UnKnow ? m3d.type : type;
           if (type == M3dType.Model || type == M3dType.Instance) {
             m3d.style = new Cesium.Cesium3DTileStyle({
-              color: `color('#FFFFFF', ${opacity})`,
+              color: `color('#FFFFFF', ${opacity})`
             });
           }
         });
@@ -459,13 +493,13 @@ export default {
       if (version == "0.0" || version == "1.0") {
         // m3d 0.x  1.x版本逻辑判断 type =0是模型 =1是示例化数据 =2是点云
         if (!children || children.length <= 0) return m3dType;
-        children.forEach((child) => {
+        children.forEach(child => {
           let tempType = vm.checkTypeNode(child, version, callback);
           m3dType = tempType || m3dType;
         });
       } else if (version == "2.0") {
         if (!children || children.length <= 0) return m3dType;
-        children.forEach((child) => {
+        children.forEach(child => {
           let tempType = vm.checkTypeNode(child, version, callback);
           m3dType = tempType ? tempType : m3dType;
         });
@@ -512,7 +546,7 @@ export default {
         }
       }
 
-      tileset.children.forEach((child) => {
+      tileset.children.forEach(child => {
         let tempType = vm.checkTypeNode(child, version, callback);
         m3dType = tempType ? tempType : m3dType;
       });
@@ -522,18 +556,18 @@ export default {
     loopM3d(m3ds, version) {
       const vm = this;
       const { vueKey, vueIndex, vueCesium, opacity, url } = this;
-      let dataCallback = (cbtype) => {
+      let dataCallback = cbtype => {
         if (loop) {
           window.clearInterval(loop);
           loop = undefined;
-          m3ds.forEach((m3d) => {
+          m3ds.forEach(m3d => {
             let type = vm.checkType(m3d);
             m3d.type = type || cbtype;
             switch (type) {
               case M3dType.Model:
               case M3dType.Instance:
                 m3d.style = new Cesium.Cesium3DTileStyle({
-                  color: `color('#FFFFFF', ${opacity})`,
+                  color: `color('#FFFFFF', ${opacity})`
                 });
                 break;
               case M3dType.CloudPoint:
@@ -549,12 +583,12 @@ export default {
             }
           });
           vueCesium.M3DIgsManager.addSource(vueKey, vueIndex, m3ds, {
-            url: url,
+            url: url
           });
         }
       };
       let loop = window.setInterval(() => {
-        m3ds.forEach((m3d) => {
+        m3ds.forEach(m3d => {
           vm.checkType(m3d, dataCallback);
         });
       }, 100);
@@ -568,7 +602,7 @@ export default {
       }
       let layerStr = layerString.replace(/layers=show:/i, "");
       let layerStrs = layerStr.split(",");
-      let layers = layerStrs.map((l) => parseInt(l));
+      let layers = layerStrs.map(l => parseInt(l));
       return layers;
     },
     changeLayerVisible(layers) {
@@ -578,7 +612,7 @@ export default {
       if (find) {
         let m3ds = find.source;
         if (!m3ds) return;
-        m3ds.forEach((m3d) => {
+        m3ds.forEach(m3d => {
           if (layers) {
             m3d.show = true;
             // @description cesium 1.84 (M3D 2.0)将layerIndex内部隐藏起来了
@@ -592,7 +626,7 @@ export default {
           }
         });
       }
-    },
-  },
+    }
+  }
 };
 </script>

package/src/components/Layer/Marker/DynamicMarkerLayer.vue

@@ -21,7 +21,7 @@
 import { Style } from "@mapgis/webclient-es6-service";
 import VueOptions from "../../Base/Vue/VueOptions";
 import Mapgis3dMarkerSetPro from "./Marker3dSetPro.vue";
-import * as turfjs from "@turf/turf";
+import * as Feature from "../../service/comprehensive-query/util/feature";
 
 const { MarkerStyle, LineStyle, PointStyle, FillStyle } = Style;
 const DefaultActiveImagePlotting =
@@ -194,7 +194,7 @@ export default {
         return;
       }
       let markers = geojson.features.map((f, i) => {
-        let coordinates = turfjs.center(f).geometry.coordinates;
+        let coordinates = Feature.getGeoJSONFeatureCenter(f);
         let id =
           f.properties && f.properties[idField] ? f.properties[idField] : i;
         let marker = {
@@ -257,9 +257,9 @@ export default {
         ymax: b_ymax
       } = this.getViewExtend();
       // 先查看是否在地图范围内
-      if (xmin > b_xmin && ymin > b_ymin && xmax < b_xmax && ymax < b_ymax) {
-        return;
-      }
+      // if (xmin > b_xmin && ymin > b_ymin && xmax < b_xmax && ymax < b_ymax) {
+      //   return;
+      // }
       // 然后查看两个矩形的范围大小，如果选择集的范围较当前大，需要做缩放
       if (xmax - xmin > b_xmax - b_xmin || ymax - ymin > b_ymax - b_ymin) {
         this.zoomTo({ xmin, ymin, xmax, ymax });
@@ -268,6 +268,8 @@ export default {
       }
     },
     mouseEnterEvent(e, id) {
+      const { highlight } = this;
+      if (!highlight) return;
       // 高亮要素
       const marker = this.getMarker(id);
       const { highlightStyle } = this;
@@ -282,6 +284,8 @@ export default {
       }
     },
     mouseLeaveEvent(e, id) {
+      const { highlight } = this;
+      if (!highlight) return;
       const marker = this.getMarker(id);
       if (marker) {
         this.clearHighlightFeature(marker);
@@ -395,7 +399,7 @@ export default {
       if (!find) return;
       for (let i = 0; i < find.source.entities.values.length; i++) {
         let entity = find.source.entities.values[i];
-        if (entity.properties[idField] == marker.feature.properties.fid) {
+        if (entity.properties[idField]._value == marker.fid) {
           if (entity.ellipse) {
             const style = hpoint.toCesiumStyle(Cesium);
             const { color, pixelSize, outlineColor } = style;
@@ -463,7 +467,7 @@ export default {
     clearHighlightFeature(marker) {
       const { vueCesium, vueKey, vueIndex, layerStyle } = this;
       let dataSource = vueCesium.GeojsonManager.findSource(vueKey, vueIndex);
-      if(!dataSource) return;
+      if (!dataSource) return;
       this.changeColor(dataSource.source);
     },
     highlightMarker(marker) {
@@ -481,15 +485,20 @@ export default {
     },
     onHighlightFeature(fid) {
       const marker = this.getMarker(fid);
-      let bbox = turfjs.bbox(marker.feature);
+      let bbox = Feature.getGeoJSONFeatureBound(marker.feature);
       let bound = {
-        xmin: bbox[0],
-        ymin: bbox[1],
-        xmax: bbox[2],
-        ymax: bbox[3]
+        xmin: bbox.xmin,
+        ymin: bbox.ymin,
+        xmax: bbox.xmax,
+        ymax: bbox.ymax
       };
-      this.zoomOrPanTo(bound);
+      if (marker.feature.geometry.type !== "Point") {
+        this.zoomTo(bound);
+      } else {
+        this.zoomOrPanTo(bound);
+      }
       this.highlightMarker(marker);
+      this.highlightFeature(marker);
     },
     showMarkerDetail(data) {
       this.$emit("show-popup", data);

package/src/components/Overlay/mapv/MapvBaseLayer.js

@@ -1,10 +1,10 @@
 import {
   baiduMapLayer,
   DataSet,
-  utilDataRangeIntensity as Intensity
+  utilDataRangeIntensity as Intensity,
 } from "mapv";
 
-import Supercluster from './SuperCluster'
+import Supercluster from "./SuperCluster";
 
 let BaseLayer = baiduMapLayer ? baiduMapLayer.__proto__ : Function;
 
@@ -56,7 +56,7 @@ export class MapvBaseLayer extends BaseLayer {
    * 公式表示就是：window.devicePixelRatio = 物理像素 / dips,该函数主要应用与移动设备
    */
   initDevicePixelRatio() {
-    this.devicePixelRatio = window.devicePixelRatio || 1;
+    this.devicePixelRatio = 1;
   }
 
   /**
@@ -175,7 +175,7 @@ export class MapvBaseLayer extends BaseLayer {
     if (!dataSet) {
       dataSet = this.dataSet;
     }
-    let lnglat2Mkt = poi => {
+    let lnglat2Mkt = (poi) => {
       let mercator = {};
       let earthRad = 6378137.0;
       mercator.x = ((poi.lng * Math.PI) / 180) * earthRad;
@@ -190,7 +190,7 @@ export class MapvBaseLayer extends BaseLayer {
       let data = dataSet.get();
       data = dataSet.transferCoordinate(
         data,
-        function(coordinates) {
+        function (coordinates) {
           if (
             coordinates[0] < -180 ||
             coordinates[0] > 180 ||
@@ -201,7 +201,7 @@ export class MapvBaseLayer extends BaseLayer {
           } else {
             let pixel = lnglat2Mkt({
               lng: coordinates[0],
-              lat: coordinates[1]
+              lat: coordinates[1],
             });
             return [pixel.x, pixel.y];
           }
@@ -216,15 +216,16 @@ export class MapvBaseLayer extends BaseLayer {
   dataOptions() {
     const self = this;
     return {
-      transferCoordinate: function(coordinate) {
+      transferCoordinate: function (coordinate) {
         let pointSphere = Cesium.Cartesian3.fromDegrees(
           coordinate[0],
           coordinate[1]
         );
         let position = self.map.camera.position;
-        let cameraHeight = self.map.scene.globe.ellipsoid.cartesianToCartographic(
-          position
-        ).height;
+        let cameraHeight =
+          self.map.scene.globe.ellipsoid.cartesianToCartographic(
+            position
+          ).height;
         cameraHeight += self.map.scene.globe.ellipsoid.maximumRadius * 1.2;
         let distance = Cesium.Cartesian3.distance(position, pointSphere);
         if (distance > cameraHeight) {
@@ -242,11 +243,11 @@ export class MapvBaseLayer extends BaseLayer {
         if (self.options.draw === "cluster") {
           return [
             point.x * self.devicePixelRatio,
-            point.y * self.devicePixelRatio
+            point.y * self.devicePixelRatio,
           ];
         }
         return [point.x, point.y];
-      }
+      },
     };
   }
 
@@ -278,7 +279,7 @@ export class MapvBaseLayer extends BaseLayer {
         max: this.pointCountMax,
         minSize: this.options.minSize || 8,
         maxSize: this.options.maxSize || 30,
-        gradient: this.options.gradient
+        gradient: this.options.gradient,
       });
     }
     for (let i = 0; i < clusterData.length; i++) {
@@ -301,26 +302,26 @@ export class MapvBaseLayer extends BaseLayer {
   refreshCluster(options) {
     options = options || this.options;
     this.supercluster = new Supercluster({
-        maxZoom: options.maxZoom || 19,
-        radius: options.clusterRadius || 100,
-        minPoints: options.minPoints || 2,
-        extent: options.extent || 512
+      maxZoom: options.maxZoom || 19,
+      radius: options.clusterRadius || 100,
+      minPoints: options.minPoints || 2,
+      extent: options.extent || 512,
     });
 
     this.supercluster.load(this.dataSet.get());
     // 拿到每个级别下的最大值最小值
-    this.supercluster.trees.forEach(item => {
-        let max = 0;
-        let min = Infinity;
-        item.points.forEach(point => {
-            max = Math.max(point.numPoints || 0, max);
-            min = Math.min(point.numPoints || Infinity, min);
-        });
-        item.max = max;
-        item.min = min;
+    this.supercluster.trees.forEach((item) => {
+      let max = 0;
+      let min = Infinity;
+      item.points.forEach((point) => {
+        max = Math.max(point.numPoints || 0, max);
+        min = Math.min(point.numPoints || Infinity, min);
+      });
+      item.max = max;
+      item.min = min;
     });
     this.clusterDataSet = new DataSet();
-}
+  }
 
   _canvasUpdate(time) {
     let map = this.map;
@@ -368,7 +369,7 @@ export class MapvBaseLayer extends BaseLayer {
     let dataGetOptions = this.dataOptions();
 
     if (time !== undefined) {
-      dataGetOptions.filter = function(item) {
+      dataGetOptions.filter = function (item) {
         let trails = animationOptions.trails || 10;
         if (time && item.time > time - trails && item.time < time) {
           return true;
@@ -414,7 +415,7 @@ export class MapvBaseLayer extends BaseLayer {
       _data = _data.get();
     }
     if (_data != undefined) {
-      let zoom = this.getZoom();  
+      let zoom = this.getZoom();
       if (
         this.options.draw === "cluster" &&
         (!this.options.maxClusterZoom || this.options.maxClusterZoom >= zoom)
@@ -429,7 +430,7 @@ export class MapvBaseLayer extends BaseLayer {
     }
 
     super.update({
-      options: options
+      options: options,
     });
   }
 
@@ -440,7 +441,7 @@ export class MapvBaseLayer extends BaseLayer {
     }
     this.dataSet.add(_data);
     this.update({
-      options: options
+      options: options,
     });
   }
 
@@ -453,11 +454,11 @@ export class MapvBaseLayer extends BaseLayer {
       return;
     }
     let newData = this.dataSet.get({
-      filter: function(data) {
+      filter: function (data) {
         return filter != null && typeof filter === "function"
           ? !filter(data)
           : true;
-      }
+      },
     });
     this.dataSet.set(newData);
     this.stopAniamation = true;