图层的叠加（上传shp文件有bug)

DAPlatform-front/src/components/ReleaseTask.vue

@@ -963,7 +963,7 @@
                 //添加图层分片
                 else if(ptype == 3){
                     this.dynamicValidateForm.layerDomains.push({
-                        fileList:new Array(),
+                        fileList:[{name:"默认文件",url:"默认",size:2333}],
                         description:'',
                         key: Date.now()
                     });

DAPlatform-front/src/components/imageAnnotation/layerAnnotation.vue

@@ -110,7 +110,7 @@
         </div>
       </div>
 
-      <div class="sidebar" style="position: absolute;margin-top: 140px;height: 170px;width: 300px">
+      <div class="sidebar" style="position: absolute;margin-top: 140px;height: 120px;width: 300px">
         <div class="sidebar-box" style="height: 235px">
           <div>
             <div class="img-list-title" style="font-size: 14px;height: 30px;line-height: 30px">标注描述</div>
@@ -120,10 +120,47 @@
         </div>
       </div>
 
+      <div class="sidebar" style="position: absolute;margin-top: 245px;height: 200px;width: 300px">
+        <div class="sidebar-box" style="height: 235px">
+          <div>
+            <div class="img-list-title" style="font-size: 14px;height: 30px;line-height: 30px">图层</div>
+            <div style="font-size:14px;margin: 5px;text-align: left">
+              <el-table
+              :data="tableData"
+              id="Layer"
+              height="150"
+              border
+              style="width: 100%">
+              <el-table-column
+                fixed
+                prop="id"
+                label="序号"
+                width="50">
+              </el-table-column>
+              <el-table-column
+                fixed
+                prop="name"
+                label="名称"
+                width="150">
+              </el-table-column>
+              <el-table-column
+                fixed="right"
+                label="显示"
+                width="50">
+                <template slot-scope="scope">
+                  <input type="checkbox" @click="handleShowClick(scope.$index)" checked />
+                </template>
+              </el-table-column>
+            </el-table>
+            </div>
+
+          </div>
+        </div>
+      </div>
       <!--      <div class="sidebar"  style="border-radius:0px;position: absolute;margin-top: 264px;height: 1px;width: 300px;background-color: #409eff">-->
       <!--      </div>-->
 
-      <div class="sidebar" style="position: absolute;margin-top: 295px;width:300px;height: calc(100vh - 71px - 345px);">
+      <div class="sidebar" style="position: absolute;margin-top: 445px;width:300px;height: calc(100vh - 71px - 345px - 150px);">
         <div class="sidebar-box">
           <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
             <el-tab-pane label="地标列表" name="first">
@@ -214,7 +251,15 @@
         defaultProps: {
           children: 'children',
           label: 'label'
-        }
+        },
+        tableData: [],
+        layerEventMap: [],
+        layerList: [],
+        colorList: ['blue','pink', 'purple', 'red',
+          'salmon', 'orchid', 'darkblue','orange',
+          'green', 'gray', 'darkred', 'darkgreen',
+          'cadetblue', 'black', 'white', 'lightblue', 'beige'],
+        colorIndex: 0,
       }
     },
     async mounted() {
@@ -245,69 +290,125 @@
         this.landmarkData = []
       }
       // console.log(this.landmarkData)
-
       if (res.geoJSON != null) {
         //不能直接加载，因为map此时还是Null
         this.axios({
           method: 'get',
           url: 'https://a.amap.com/jsapi_demos/static/geojson/chongqing.json',
         }).then(geoJSON => {
-          console.log(res.geoJSON);
-          // console.log(res.geoJSON.features[0].geometry.coordinates[0][0]);
-          //分析geojson结构
-          if ((typeof res.geoJSON.features[0].geometry.coordinates[0]) === 'number') {
-            //一般为点
-            // console.log("1");
-
-            //判断是否是墨卡托坐标系，如果是转化为经纬度
-            if (res.geoJSON.features[0].geometry.coordinates[0] > 180) {
-              gcoord.transform(res.geoJSON, gcoord.WebMercator, gcoord.AMap);
-            }
-            //判断经度是否已经小于我国的最小经度，如果是，就将经度+105（中央经线），纬度+4（有问题，为解决）
-            if (res.geoJSON.features[0].geometry.coordinates[0] < 73) {
-              for (var x = 0; x < res.geoJSON.features.length; x++) {
-                var lnglats = res.geoJSON.features[x].geometry.coordinates;
-                lnglats[0] += 105
-                lnglats[1] += 4
+          for (var index = 0; index < res.geoJSON.length; index++){
+            var resItem = res.geoJSON[index]
+            var name = resItem.name
+            var geoItem = resItem.geojson
+            // console.log(geoItem)
+
+            this.tableData.push({id: index, name: name})
+            // console.log(geoItem.features[0].geometry.coordinates[0][0]);
+            //分析geojson结构
+            if ((typeof geoItem.features[0].geometry.coordinates[0]) === 'number') {
+              //一般为点
+              // console.log("1");
+
+              //判断是否是墨卡托坐标系，如果是转化为经纬度
+              if (geoItem.features[0].geometry.coordinates[0] > 180) {
+                gcoord.transform(geoItem, gcoord.WebMercator, gcoord.AMap);
               }
-            }
-          } else if ((typeof res.geoJSON.features[0].geometry.coordinates[0][0]) === 'number') {
-            //一般为线
-            // console.log("2");
-            if (res.geoJSON.features[0].geometry.coordinates[0][0] > 180) {
-              gcoord.transform(res.geoJSON, gcoord.WebMercator, gcoord.AMap);
-            }
-            if (res.geoJSON.features[0].geometry.coordinates[0][0] < 73) {
-              for (var x = 0; x < res.geoJSON.features.length; x++) {
-                var lnglats = res.geoJSON.features[x].geometry.coordinates;
-                for (var i = 0; i < lnglats.length; i++) {
-                  lnglats[i][0] += 105
-                  lnglats[i][1] += 4
+              //判断经度是否已经小于我国的最小经度，如果是，就将经度+105（中央经线），纬度+4（有问题，为解决）
+              if (geoItem.features[0].geometry.coordinates[0] < 73) {
+                for (var x = 0; x < geoItem.features.length; x++) {
+                  var lnglats = geoItem.features[x].geometry.coordinates;
+                  lnglats[0] += 105
+                  lnglats[1] += 4
                 }
               }
-            }
-          } else if ((typeof res.geoJSON.features[0].geometry.coordinates[0][0][0]) === 'number') {
-            //一般为多边形
-            // console.log("3");
-            if (res.geoJSON.features[0].geometry.coordinates[0][0][0] > 180) {
-              gcoord.transform(res.geoJSON, gcoord.WebMercator, gcoord.AMap);
-            }
-            if (res.geoJSON.features[0].geometry.coordinates[0][0][0] < 73) {
-              for (var x = 0; x < res.geoJSON.features.length; x++) {
-                var lnglats = res.geoJSON.features[x].geometry.coordinates;
-                for (var i = 0; i < lnglats.length; i++) {
-                  for (var j = 0; j < lnglats[i].length; j++) {
-                    lnglats[i][j][0] += 105
-                    lnglats[i][j][1] += 4
+            } else if ((typeof geoItem.features[0].geometry.coordinates[0][0]) === 'number') {
+              //一般为线
+              // console.log("2");
+              if (geoItem.features[0].geometry.coordinates[0][0] > 180) {
+                gcoord.transform(geoItem, gcoord.WebMercator, gcoord.AMap);
+              }
+              if (geoItem.features[0].geometry.coordinates[0][0] < 73) {
+                for (var x = 0; x < geoItem.features.length; x++) {
+                  var lnglats = geoItem.features[x].geometry.coordinates;
+                  for (var i = 0; i < lnglats.length; i++) {
+                    lnglats[i][0] += 105
+                    lnglats[i][1] += 4
                   }
                 }
               }
+            } else if ((typeof geoItem.features[0].geometry.coordinates[0][0][0]) === 'number') {
+              //一般为多边形
+              // console.log("3");
+              if (geoItem.features[0].geometry.coordinates[0][0][0] > 180) {
+                gcoord.transform(geoItem, gcoord.WebMercator, gcoord.AMap);
+              }
+              if (geoItem.features[0].geometry.coordinates[0][0][0] < 73) {
+                for (var x = 0; x < geoItem.features.length; x++) {
+                  var lnglats = geoItem.features[x].geometry.coordinates;
+                  for (var i = 0; i < lnglats.length; i++) {
+                    for (var j = 0; j < lnglats[i].length; j++) {
+                      lnglats[i][j][0] += 105
+                      lnglats[i][j][1] += 4
+                    }
+                  }
+                }
+              }
+            }
+            // Point、MultiPoint、LineString、MultiLineString、Polygon、MultiPolygon、GeometryCollection
+            var type = geoItem.features[0].geometry.type
+            var geojson;
+            if(type === "Point" || type === "MultiPoint"){
+              geojson = new AMap.GeoJSON({
+                geoJSON: geoItem,
+                getMarker: function(geojson, lnglats) {
+                  return new AMap.CircleMarker({
+                    center: lnglats, //圆心位置
+                    radius: 6, //半径
+                    strokeColor: 'white',
+                    fillColor: _this.colorList[_this.colorIndex],
+                  });
+                }
+              })
+              //colorList中有17个颜色
+              this.colorIndex = (this.colorIndex + 1) % 17;
+            }
+            else if(type === "LineString" || type === "MultiLineString"){
+              geojson = new AMap.GeoJSON({
+                geoJSON: geoItem,
+                getPolyline: function(geojson, lnglats) {
+                  return new AMap.Polyline({
+                    path: lnglats,
+                    strokeColor: _this.colorList[_this.colorIndex],
+                  });
+                }
+              })
+              this.colorIndex = (this.colorIndex + 1) % 17;
+            }
+            else if(type === "Polygon" || type === "MultiPolygon"){
+              geojson = new AMap.GeoJSON({
+                geoJSON: geoItem,
+                // 还可以自定义getMarker和getPolyline
+                getPolygon: function(geojson, lnglats) {
+                  return new AMap.Polygon({
+                    path: lnglats,
+                    strokeColor: 'white',
+                    fillColor: _this.colorList[_this.colorIndex],
+                  });
+                }
+              })
+              this.colorIndex = (this.colorIndex + 1) % 17;
+            }
+            else{
+              geojson = new AMap.GeoJSON({
+                geoJSON: geoItem,
+              })
             }
+
+            this.map.add(geojson)
+            this.layerEventMap.push(0)
+            this.layerList.push(geojson)
           }
-          var geojson = new AMap.GeoJSON({
-            geoJSON: res.geoJSON,
-          })
-          this.map.add(geojson)
+
         }).catch(e => {
           console.log(e.toString())
         })
@@ -426,6 +527,15 @@
           }
         })
       },
+      handleShowClick(index) {
+        this.layerEventMap[index]++
+        this.layerHide = index
+        if (this.layerEventMap[index] % 2 === 1) {
+          this.layerList[index].hide()
+        } else {
+          this.layerList[index].show()
+        }
+      },
       // 点标注&区域标注跳转
       handleClick(tab, event) {
         // console.log(tab, event)
@@ -999,7 +1109,7 @@
   .workbench {
     /*border: 2px solid #409eff;*/
     margin-left: 20px;
-    margin-right: 40px;
+    margin-right: 20px;
     border-radius: 5px;
     box-shadow: 0px 0px 10px #dbdbdb;
     background-color: white;

DAPlatform/dao/Image.py

@@ -483,7 +483,8 @@ def retURLList(relation_id):
     datalist = Data.find_data_by_slice(slice_id).data
     urlList = []
     for data in datalist:
-        urlList.append(data['url'])
+        name = data['name'].rsplit('.', 1)[0]
+        urlList.append({"name": name, "url": data['url']})
     return urlList
 
 # 获取图层

DAPlatform/upload/1604369046.txt

+前端：
+区分已被选择三次的分片和其他可选分片
+发布者终止任务按钮
+标注者我的任务界面区分被终止任务
+标注者主动删除任务
+
+后端：
+限制对已选择三次的分片的再选
+终止任务的后端删除

DAPlatform/upload/1604371960.txt

+前端：
+区分已被选择三次的分片和其他可选分片
+发布者终止任务按钮
+标注者我的任务界面区分被终止任务
+标注者主动删除任务
+
+后端：
+限制对已选择三次的分片的再选
+终止任务的后端删除

DAPlatform/upload/1604372125.txt

+前端：
+区分已被选择三次的分片和其他可选分片
+发布者终止任务按钮
+标注者我的任务界面区分被终止任务
+标注者主动删除任务
+
+后端：
+限制对已选择三次的分片的再选
+终止任务的后端删除

DAPlatform/upload/1604372546.txt

+前端：
+区分已被选择三次的分片和其他可选分片
+发布者终止任务按钮
+标注者我的任务界面区分被终止任务
+标注者主动删除任务
+
+后端：
+限制对已选择三次的分片的再选
+终止任务的后端删除

DAPlatform/upload/1604372685.txt

+前端：
+区分已被选择三次的分片和其他可选分片
+发布者终止任务按钮
+标注者我的任务界面区分被终止任务
+标注者主动删除任务
+
+后端：
+限制对已选择三次的分片的再选
+终止任务的后端删除

DAPlatform/upload/1604372721.txt

+前端：
+区分已被选择三次的分片和其他可选分片
+发布者终止任务按钮
+标注者我的任务界面区分被终止任务
+标注者主动删除任务
+
+后端：
+限制对已选择三次的分片的再选
+终止任务的后端删除

DAPlatform/upload/1604372826.txt

+前端：
+区分已被选择三次的分片和其他可选分片
+发布者终止任务按钮
+标注者我的任务界面区分被终止任务
+标注者主动删除任务
+
+后端：
+限制对已选择三次的分片的再选
+终止任务的后端删除

DAPlatform/views/imageAnnotation.py

@@ -8,6 +8,7 @@ from support import basedir
 from flask import Blueprint, request, make_response, send_file
 
 from dao import Image, Relation
+
 UPLOAD_FOLDER = 'upload'  # 用于保存上传文件的文件夹名称
 image = Blueprint("image", __name__, url_prefix="/api")
 
@@ -58,10 +59,36 @@ def save_image():
 
     return json.dumps(res, ensure_ascii=False)
 
+
 # 获取图层中的每一个shp文件
 def retGeoJson(relationId):
     urlList = Image.retURLList(relationId)
-    for url in urlList:
+    geoList = []
+    defaultList = [
+        {"name": "河流水系1-2级", "url": '1604321976.shp'},  # 河1-2
+        {"name": "河流水系3级", "url": '1604321548.shp'},  # 河3
+        # {"name": "河流水系4级", "url": '1604321993.shp'},  # 河4
+        # {"name": "河流水系5级", "url": '1604322005.shp'}, #河5，文件太大，全部叠加后前端无法显示
+        {"name": "活动断裂分布", "url": '1604042749.shp'},  # 活动断裂
+        {"name": "全国降雨量站降雨数据", "url": '1604042339.shp'},  # 降雨量
+    ]
+    allList = []
+    isExtended = False
+    for item in urlList:
+        url = item['url']
+        if url == "默认":
+            isExtended = True
+    if isExtended:
+        allList.extend(defaultList)
+    allList.extend(urlList)
+    for item in allList:
+        url = item['url']
+        if url == "默认":
+            if isExtended == False:
+                defaultList.extend(urlList)
+                isExtended = True
+            else:
+                continue
         file_dir = os.path.join(basedir, UPLOAD_FOLDER, url)
         print(file_dir)
         shp = shapefile.Reader(file_dir)
@@ -72,7 +99,9 @@ def retGeoJson(relationId):
             atr = dict(zip(field_names, sr.record))
             geom = sr.shape.__geo_interface__
             buffer.append(dict(type="Feature", geometry=geom, properties=atr))
-        return {"type": "FeatureCollection", "features": buffer}
+        geoList.append({"name": item['name'], "geojson": {"type": "FeatureCollection", "features": buffer}})
+    return geoList
+
 
 # 获取图层
 @image.route("/layer/getLayer", methods=["POST"])