资源目录、图层控制、个人收藏

package.json

@@ -1,76 +1,77 @@
-{
-    "name": "vue-iearth",
-    "version": "1.0.0",
-    "description": "A Vue.js project",
-    "author": "",
-    "private": true,
-    "scripts": {
-        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
-        "start": "npm run dev",
-        "build": "node build/build.js"
-    },
-    "dependencies": {
-        "axios": "^0.19.2",
-        "echarts": "^4.8.0",
-        "lodash": "^4.17.19",
-        "url-loader": "^4.1.0",
-        "view-design": "^4.3.2",
-        "vue": "^2.6.12",
-        "vue-lazyload": "^1.3.3"
-    },
-    "devDependencies": {
-        "autoprefixer": "^7.1.2",
-        "babel-core": "^6.22.1",
-        "babel-helper-vue-jsx-merge-props": "^2.0.3",
-        "babel-loader": "^7.1.1",
-        "babel-plugin-import": "1.13.0",
-        "babel-plugin-syntax-jsx": "^6.18.0",
-        "babel-plugin-transform-runtime": "^6.22.0",
-        "babel-plugin-transform-vue-jsx": "^3.5.0",
-        "babel-preset-env": "^1.3.2",
-        "babel-preset-stage-2": "^6.22.0",
-        "babel-preset-stage-3": "^6.24.1",
-        "chalk": "^2.0.1",
-        "compression-webpack-plugin": "^1.1.12",
-        "copy-webpack-plugin": "^4.0.1",
-        "cross-env": "^5.0.5",
-        "css-loader": "^0.28.0",
-        "extract-text-webpack-plugin": "^3.0.0",
-        "file-loader": "^1.1.4",
-        "friendly-errors-webpack-plugin": "^1.6.1",
-        "html-webpack-plugin": "^2.30.1",
-        "image-webpack-loader": "^6.0.0",
-        "iview": "3.5.4",
-        "node-notifier": "^5.1.2",
-        "node-sass": "^4.5.3",
-        "optimize-css-assets-webpack-plugin": "^3.2.0",
-        "ora": "^1.2.0",
-        "portfinder": "^1.0.13",
-        "postcss-import": "^11.0.0",
-        "postcss-loader": "^2.0.8",
-        "postcss-url": "^7.2.1",
-        "rimraf": "^2.6.0",
-        "sass-loader": "^6.0.6",
-        "semver": "^5.3.0",
-        "shelljs": "^0.7.6",
-        "uglifyjs-webpack-plugin": "^1.1.1",
-        "url-loader": "^0.5.8",
-        "vue-loader": "^13.3.0",
-        "vue-style-loader": "^3.0.1",
-        "vue-router": "3.4.9",
-        "vue-template-compiler": "^2.6.12",
-        "webpack": "^3.6.0",
-        "webpack-bundle-analyzer": "2.13.1",
-        "webpack-dev-server": "^2.9.1",
-        "webpack-merge": "^4.1.0"
-    },
-    "engines": {
-        "node": ">= 6.0.0",
-        "npm": ">= 3.0.0"
-    },
-    "browserslist": [
-        "> 1%",
-        "last 2 versions",
-        "not ie <= 8"
-    ]
+{
+    "name": "vue-iearth",
+    "version": "1.0.0",
+    "description": "A Vue.js project",
+    "author": "",
+    "private": true,
+    "scripts": {
+        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+        "start": "npm run dev",
+        "build": "node build/build.js"
+    },
+    "dependencies": {
+        "axios": "^0.19.2",
+        "echarts": "^4.8.0",
+        "element-ui": "^2.15.14",
+        "lodash": "^4.17.19",
+        "url-loader": "^4.1.0",
+        "view-design": "^4.3.2",
+        "vue": "^2.6.12",
+        "vue-lazyload": "^1.3.3"
+    },
+    "devDependencies": {
+        "autoprefixer": "^7.1.2",
+        "babel-core": "^6.22.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.3",
+        "babel-loader": "^7.1.1",
+        "babel-plugin-import": "1.13.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "babel-plugin-transform-runtime": "^6.22.0",
+        "babel-plugin-transform-vue-jsx": "^3.5.0",
+        "babel-preset-env": "^1.3.2",
+        "babel-preset-stage-2": "^6.22.0",
+        "babel-preset-stage-3": "^6.24.1",
+        "chalk": "^2.0.1",
+        "compression-webpack-plugin": "^1.1.12",
+        "copy-webpack-plugin": "^4.0.1",
+        "cross-env": "^5.0.5",
+        "css-loader": "^0.28.0",
+        "extract-text-webpack-plugin": "^3.0.0",
+        "file-loader": "^1.1.4",
+        "friendly-errors-webpack-plugin": "^1.6.1",
+        "html-webpack-plugin": "^2.30.1",
+        "image-webpack-loader": "^6.0.0",
+        "iview": "3.5.4",
+        "node-notifier": "^5.1.2",
+        "node-sass": "^4.5.3",
+        "optimize-css-assets-webpack-plugin": "^3.2.0",
+        "ora": "^1.2.0",
+        "portfinder": "^1.0.13",
+        "postcss-import": "^11.0.0",
+        "postcss-loader": "^2.0.8",
+        "postcss-url": "^7.2.1",
+        "rimraf": "^2.6.0",
+        "sass-loader": "^6.0.6",
+        "semver": "^5.3.0",
+        "shelljs": "^0.7.6",
+        "uglifyjs-webpack-plugin": "^1.1.1",
+        "url-loader": "^0.5.8",
+        "vue-loader": "^13.3.0",
+        "vue-style-loader": "^3.0.1",
+        "vue-router": "3.4.9",
+        "vue-template-compiler": "^2.6.12",
+        "webpack": "^3.6.0",
+        "webpack-bundle-analyzer": "2.13.1",
+        "webpack-dev-server": "^2.9.1",
+        "webpack-merge": "^4.1.0"
+    },
+    "engines": {
+        "node": ">= 6.0.0",
+        "npm": ">= 3.0.0"
+    },
+    "browserslist": [
+        "> 1%",
+        "last 2 versions",
+        "not ie <= 8"
+    ]
 }

src/common/scss/cover.scss

@@ -1,32 +1,43 @@
 /* 覆盖第三方库样式 */
 
 .ivu-color-picker-color {
-  width: 100%;
+    width: 100%;
 }
-.ivu-color-picker-picker{
-  overflow: auto;
+
+.ivu-color-picker-picker {
+    overflow: auto;
 }
+
 .ivu-color-picker .ivu-select-dropdown {
-  min-width: 265px;
+    min-width: 265px;
 }
+
 .ivu-input {
-  height: 25px;
-  padding: 1px 6px;
-  background-color: #333333; 
-  border: 1px solid #686363;
-  border-radius: 0;
+    height: 25px;
+    padding: 1px 6px;
+    // background-color: #333333; 
+    // border: 1px solid #686363;
+    border-radius: 0;
+}
+
+.ivu-input:focus {
+    border-color: #515a6e;
 }
-.ivu-input:focus {border-color: #515a6e;}
+
 // 图层管理
 .ivu-select-dropdown {
-  background-color: rgba(206, 204, 204, 0.9);
+    background-color: rgba(206, 204, 204, 0.9);
 }
-.ivu-tree-children .ivu-tree-title{
-  color: white;
+
+.ivu-tree-children .ivu-tree-title {
+    color: white;
 }
-.ivu-tree-children .ivu-tree-title:hover{
-  background-color: rgb(64, 89, 131);
+
+.ivu-tree-children .ivu-tree-title:hover {
+    background-color: rgb(64, 89, 131);
 }
-.ivu-tree-children .ivu-tree-title-selected, .ivu-tree-title-selected:hover{
-  background-color: rgb(64, 89, 131);
+
+.ivu-tree-children .ivu-tree-title-selected,
+.ivu-tree-title-selected:hover {
+    background-color: rgb(64, 89, 131);
 }

src/components/Combinations/LayerManage/LayerManage.scss

@@ -1,3 +1,12 @@
+.custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+}
+
 .layerBox {
     position: absolute;
     top: 50px;
@@ -38,14 +47,27 @@
     overflow: hidden;
 }
 
-.zyml,
-.tckz {
+.tckz,
+.collect {
     overflow-y: auto;
     overflow-x: hidden;
     height: 460px;
     padding: 0px 5px 0px 5px;
 }
 
+.zyml {
+    overflow-y: hidden;
+    overflow-x: hidden;
+    height: 460px;
+    padding: 0px 5px 0px 5px;
+}
+
+.treeDiv {
+    overflow-y: auto;
+    height: 420px;
+    padding: 0px 5px 0px 5px;
+}
+
 .listBtn {
     position: absolute;
     right: 10px;
@@ -95,4 +117,22 @@
 
 .ivu-list-large .ivu-list-item {
     padding-left: 5px;
+}
+
+.layerlist {
+    padding: 5px !important;
+}
+
+.el-tree {
+    background: transparent !important;
+    color: white !important;
+}
+
+.el-tree-node__content {
+    height: 33px;
+}
+
+.el-tree-node__content:hover,
+.el-tree-node:focus>.el-tree-node__content {
+    background: transparent !important;
 }

src/components/Combinations/LayerManage/LayerManage.vue

@@ -1,45 +1,46 @@
 <template>
   <div class="sm-panel layermanager" v-if="LayerManageShow">
     <Tabs value="">
-      <TabPane label="资源目录" name="zyml">
+      <TabPane :label="Resource.Resource" name="zyml">
         <div class="zyml">
-          <Tree
-            :data="TreeDatas"
-            show-checkbox
-            expand-node
-            @on-contextmenu="handleContextMenu"
-            @on-select-change="handleSelectChange"
-            @on-check-change="handleCheckChange"
-            :title="Resource.RightClickSetLayerProperties"
+          <el-input
+            placeholder="请输入内容"
+            prefix-icon="el-icon-search"
+            v-model="treeSearchText"
+            size="small"
           >
-            <template slot="contextMenu">
-              <DropdownItem
-                @click.native="handleContextMenuEdit"
-                v-show="hid"
-                >{{ Resource.layerOptions }}</DropdownItem
-              >
-              <DropdownItem @click.native="raise" v-show="ImgHid">{{
-                Resource.MoveUpOneLevel
-              }}</DropdownItem>
-              <DropdownItem @click.native="lower" v-show="ImgHid">{{
-                Resource.MoveDownOneLevel
-              }}</DropdownItem>
-              <DropdownItem @click.native="raiseToTop" v-show="ImgHid">{{
-                Resource.MoveToTheTop
-              }}</DropdownItem>
-              <DropdownItem @click.native="lowerToBottom" v-show="ImgHid">{{
-                Resource.MoveToTheBottom
-              }}</DropdownItem>
-              <DropdownItem
-                @click.native="handleContextMenuDelete"
-                style="color: #ed4014"
-                >{{ Resource.DelLayer }}</DropdownItem
-              >
-            </template>
-          </Tree>
+          </el-input>
+          <div class="treeDiv">
+            <el-tree
+              @check-change="handleCheckChange"
+              class="filter-tree"
+              :data="TreeDatas"
+              show-checkbox
+              :props="defaultProps"
+              :filter-node-method="filterNode"
+              ref="tree"
+            >
+              <span class="custom-tree-node" slot-scope="{ node, data }">
+                <span>{{ node.label }}</span>
+                <span>
+                  <Icon
+                    :type="!data.favorite ? 'ios-star-outline' : 'ios-star'"
+                    color="green"
+                    size="18"
+                    class="opBtn"
+                    :title="
+                      data.favorite ? Resource.DelCollect : Resource.AddCollect
+                    "
+                    @click="favoriteHandle(data)"
+                    v-if="data.url != ''"
+                  />
+                </span>
+              </span>
+            </el-tree>
+          </div>
         </div>
       </TabPane>
-      <TabPane label="图层控制" name="tckz">
+      <TabPane :label="Resource.LayerOptions" name="tckz">
         <div class="tckz">
           <List split size="large">
             <ListItem v-for="(item, index) in addlayerdata" :key="index">
@@ -89,7 +90,7 @@
                   @click="location(item)"
                 />
               </div>
-              <div class="sliderBtn">
+              <div class="sliderBtn" v-if="item.type != 'Terrain'">
                 <Slider
                   v-model="item.trans"
                   @on-change="transSliderChange(item, $event)"
@@ -99,6 +100,31 @@
           </List>
         </div>
       </TabPane>
+      <TabPane :label="Resource.Favorite" name="collect">
+        <div class="collect">
+          <List split>
+            <ListItem
+              v-for="(item, index) in favoriteLayerList"
+              :key="index"
+              class="layerlist"
+            >
+              <Checkbox @on-change="checkboxChange(item, $event)">{{
+                item.title
+              }}</Checkbox>
+              <div class="listBtn">
+                <Icon
+                  type="ios-star"
+                  color="green"
+                  size="18"
+                  class="opBtn"
+                  :title="Resource.DelCollect"
+                  @click="favoriteHandle(item)"
+                />
+              </div>
+            </ListItem>
+          </List>
+        </div>
+      </TabPane>
     </Tabs>
   </div>
 </template>
@@ -108,8 +134,15 @@ export default {
   name: "LayerManage",
   data() {
     return {
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      username: "admin",
+      treeSearchText: "",
       addlayerdata: [],
       sceneLayers: {},
+      favoriteLayerList: [],
       sharedState: store.state,
       //   flag: false,
       //   s3mLen: 0,
@@ -170,6 +203,48 @@ export default {
   },
 
   methods: {
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    favoriteHandle(data) {
+      if (data.favorite) {
+        data.favorite = null;
+        for (let i = 0; i < this.favoriteLayerList.length; i++) {
+          if (this.favoriteLayerList[i].id == data.id) {
+            this.favoriteLayerList.splice(i, 1);
+          }
+        }
+      } else {
+        data.favorite = this.username;
+        this.favoriteLayerList.push(data);
+      }
+      window
+        .axios({
+          url: "http://" + window.hostconfig + ":8080/apply/yzt/zyml/Collect",
+          method: "post",
+          data: {
+            username: this.username,
+            bsm: data.id,
+          },
+        })
+        .then((res) => {
+          this.$message({
+            message: "操作成功",
+            type: "success",
+          });
+        })
+        .catch((e) => {
+          this.$message.error(e);
+        });
+    },
+    favorite(data) {
+      console.log(data);
+    },
+    checkboxChange(obj, checked, a) {
+      obj.checked = checked;
+      this.handleCheckChange(obj, checked);
+    },
     visibleChange(obj, visible, a) {
       console.log(obj, visible, a);
       switch (obj.type) {
@@ -190,6 +265,17 @@ export default {
           this.layerparams[obj.id].show = visible;
           break;
         case "Terrain": //地形
+          if (visible) {
+            viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
+              url: obj.url,
+              isSct: true,
+              requestVertexNormals: true,
+            });
+          } else {
+            viewer.scene.terrainProvider = new Cesium.EllipsoidTerrainProvider(
+              {}
+            );
+          }
           break;
         default:
           null;
@@ -298,10 +384,11 @@ export default {
       obj ? (obj.expand = !obj.expand) : null;
     },
     // 复选框改变
-    handleCheckChange(node, obj) {
-      if (obj.children.length > 0) {
+    handleCheckChange(obj, checked) {
+      obj.checked = checked;
+      if (obj.children && obj.children.length > 0) {
         for (let i = 0; i < obj.children.length; i++) {
-          this.handleCheckChange(null, obj.children[i]);
+          this.handleCheckChange(obj.children[i], checked);
         }
       } else {
         let imageryLayers = viewer.imageryLayers;
@@ -422,6 +509,22 @@ export default {
         });
     },
 
+    //获取后台资源目录树结构
+    getFavoriteLayers() {
+      window
+        .axios({
+          url:
+            "http://" + window.hostconfig + ":8080/apply/yzt/zyml/GetMyCollect",
+          method: "get",
+        })
+        .then((res) => {
+          this.favoriteLayerList = res.data.data;
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    },
+
     //图层定位
     location(obj) {
       let imageryLayers = viewer.imageryLayers;
@@ -519,36 +622,13 @@ export default {
 
   mounted() {
     this.getResourceTree();
+    this.getFavoriteLayers();
   },
 
   watch: {
-    // LayerManageShow: function (val) {
-    //   let l = viewer.scene.layers.layerQueue.length;
-    //   if (
-    //     (val && this.TreeDatas[0].children.length === 0) ||
-    //     l !== this.S3MLayers
-    //   ) {
-    //     //只会第一次加载，避免重复更新
-    //     this.updataS3MLayer();
-    //     this.updataImgLayers();
-    //     this.updataTerrainLayers();
-    //   }
-    // },
-    // imgLayers: function (val) {
-    //   if (this.LayerManageShow) {
-    //     this.updataImgLayers();
-    //   }
-    // },
-    // terrainLayers: function (val) {
-    //   if (this.LayerManageShow) {
-    //     this.updataTerrainLayers();
-    //   }
-    // },
-    // S3MLayers: function (val) {
-    //   if (this.LayerManageShow) {
-    //     this.updataS3MLayer();
-    //   }
-    // },
+    treeSearchText(val) {
+      this.$refs.tree.filter(val);
+    },
   },
 };
 </script>

src/components/Combinations/toolBar/toolBar.vue

@@ -157,8 +157,6 @@ export default {
       this.show = !this.show;
     },
     choose(i) {
-      console.log(i);
-      console.log(store.state.toolBar);
       if (i == 9) {
         this.clickShow = !this.clickShow;
       } else if (i == 10) {

src/main.js

@@ -12,12 +12,14 @@ import App from './App.vue'
 // import echarts from 'echarts'
 // window.echarts = echarts //挂载到window上
 
-
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
 import VueLazyLoad from 'vue-lazyload'
 Vue.use(VueLazyLoad, {
     error: require('@/../static/images/thumbnail.jpg'),
     loading: require('@/../static/images/loading.jpg')
 })
+Vue.use(ElementUI);
 
 
 import router from './router'

src/resource/resourceCN.js

@@ -1,4 +1,9 @@
     var ResourceCN = {
+        DelCollect: "取消收藏",
+        AddCollect: "收藏",
+        Resource: "资源目录",
+        LayerOptions: "图层管理",
+        Favorite: "个人收藏",
         longitude: '经度(°)',
         latitude: '纬度(°)',
         altitude: '高程(米)',

static/Config/config.js

@@ -74,8 +74,20 @@ window.layersDataUrl = [{
  * datasources:['数据源:数据集','数据源:数据集']
  */
 window.MaplayersDataUrl = {
-    url: "http://192.168.1.26:8090/iserver/services/data-test1/rest/data/featureResults.rjson?returnContent=true",
-    datasources: ["test:PY_地面河流岸线面", "test:PY_地面河流岸线"]
+    url: "http://127.0.0.1:8090/iserver/services/data-v/rest/data/featureResults.rjson?returnContent=true",
+    datasources: [
+        "vector:海棠区土地利用现状",
+        "DataSourceBP:抱坡单元规划地块",
+        "DataSourceBP:抱坡单元控制单元",
+        "DataSourceBP:抱坡道路中线",
+        "DataSourceBP:抱坡建筑退让线",
+        "DataSourceBP:YJJBNTBHTB",
+        "DataSourceBP:CZKFBJ",
+        "DataSourceBP:GDBHMB",
+        "DataSourceBP:抱坡规划地块",
+        "DataSourceBP:抱坡禁止开口线",
+        "DataSourceBP:抱坡给水管线规划"
+    ]
 };
 
 window.POI = {