111111

 <template>
     <div class="home">
          <div id="cesiumContainer" style="width:100%;height:100%;"></div>
+         <!-- <el-button @click="testfun" class="testbtn"></el-button> -->
+         <el-select @change="selectChanged" class="testbtn">
+             <el-option v-for="item in devTypes" :key="item" :label="item" :value="item"></el-option>
+         </el-select>
     </div>
 </template>
 <script>
 
+    import tool from "../assets/js/map/tool";
+
     export default {
         components: {},
         data() {
             return {
                 viewer: undefined,
                 entity: undefined,
+                devTypes: ['point', 'polyline', 'polygon']
             }
         },
         mounted() {
+            // ***********************************初始化地图********************************************
             Cesium.Ion.defaultAccessToken = this.config.mapToken;
             this.viewer = new Cesium.Viewer('cesiumContainer', {
                 geocoder:true,
-                timeline:false
+                timeline:false, 
+                imageryProvider: new Cesium.UrlTemplateImageryProvider({
+                    url: 'https://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali'
+                })
             });
 
-            this.viewer.imageryLayers.addImageryProvider(
-                new Cesium.UrlTemplateImageryProvider({
-                url: "https://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"
-            }));
-
 
+            // ***********************************倾斜摄影加载********************************************
             let tileset = new Cesium.Cesium3DTileset({
                 url : 'http://localhost:9000/model/e44fe150d09b11eaabec1d24e8548b3a/tileset.json',
                 skipLevelOfDetail : true,
@@ -48,17 +55,64 @@
             });
 
 
+            // ***********************************水位********************************************
+            setTimeout(() => {
+                var positions = [
+                    101.67468055555556, 36.54803611111111, 101.66768055555556, 36.55503611111111,
+                    101.65068055555556, 36.56403611111111, 101.67468055555556, 36.54803611111111
+                ], waterHeight = 0, 
+                entity = this.viewer.entities.add({
+                    polygon: {
+                        // hierarchy: Cesium.Cartesian3.fromDegreesArray(positions),
+                        hierarchy: [
+                            new Cesium.Cartesian3(-1036931.6607544887,5024383.265188632,3776882.2179509313),
+                            new Cesium.Cartesian3(-1037689.1138430117,5023931.060901769,3777273.070930741),
+                            new Cesium.Cartesian3(-1038031.7922958151,5024211.372681549,3776809.176021656),
+                            new Cesium.Cartesian3(-1037502.0690553376,5024558.056853799,3776495.627250331)
+                        ], 
+                        material: Cesium.Color.RED.withAlpha(0.5),
+                        extrudedHeight: new Cesium.CallbackProperty(function () {
+                            return waterHeight;
+                        })
+                    }
+                });
+                // this.viewer.zoomTo(entity);
+                this.viewer.clock.onTick.addEventListener(function () {
+                    if (waterHeight > 250){
+                        waterHeight = 0;
+                    }
+                    waterHeight += 0.1;
+                })
 
+            }, 30000);
                 
 
+            // ********************************Draw********************************************
+            this.draw = new tool.attributes.drawPolt({
+                viewer: this.viewer
+            })
         },
         methods: {
+            selectChanged(e) {
+                this.draw.type[e] || (this.draw.type[e] = new tool.attributes[e]({viewer: this.viewer}));
+                this.draw.type[e].startCreate();
+                console.log(this.draw.type[e]);
+            },
+            drawShape() {
                 
             }
         }
+    }
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 
+    .testbtn {
+        position: absolute;
+        top: 100px;
+        left: 100px;
+        width: 100px;
+        height: 30px;
+    }
     
 </style>
\ No newline at end of file