加载geojson图斑

src/views/siteselection/components/xzjg.vue

@@ -107,7 +107,6 @@
 </template>
 
 <script>
-import { test } from "shelljs";
 import drawData from "./draw.json";
 import ghjgData from "./规划结果.json";
 export default {
@@ -193,138 +192,13 @@ export default {
   mounted() {
     console.log(drawData, "drawData", ghjgData);
     this.init_hyqy();
-    // ghjgData.features.forEach((el,i) =>{
-    //   this.creatPolyGon(el)
-    // })
-    this.test();
+    this.addGeoJson();
   },
   methods: {
-    test() {
-      ghjgData.features.forEach((res) => {
-        let obj = {
-          // type: "cockpit",
-          type: "Feature",
-          name: res.properties.kzxxgydmc,
-          ydmj: res.properties.ydmj,
-          // centroid: res.properties.centroid,
-          // adcode: res.properties.adcode,
-        };
-        res.geometry.coordinates.forEach((item) => {
-          const twoDArray = item[0];
-          const oneDArray = twoDArray.reduce(
-            (accumulator, currentValue) => accumulator.concat(currentValue),
-            []
-          );
-
-          viewer.entities.add({
-            // position: Cesium.Cartesian3.fromDegrees(
-            //   obj.centroid[0],
-            //   res.properties.centroid[1],
-            //   100
-            // ),
-            text: obj.name,
-            label: {
-              scale: 1.5,
-              font: "bolder 16px sans-serif",
-              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-              text: res.properties.ydmj, //图标名称
-              fillColor: Cesium.Color.fromCssColorString("#ffffff"),
-              pixelOffset: new Cesium.Cartesian2(5, -15),
-              zIndex: 3,
-              // 设置远近裁条件
-              distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
-                20000,
-                9999999999.0
-              ),
-            },
-            // billboard: {
-            //   // 图像地址，URI或Canvas的属性
-            //   image: "./static/images/overview/htq-f.png",
-            //   height: 60,
-            //   // 宽度（以像素为单位）
-            //   width: 150,
-            //   // 相对于坐标的垂直位置
-            //   // verticalOrigin: Cesium.VerticalOrigin.CENTER,
-            //   // // 相对于坐标的水平位置
-            //   // horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-            //   scale: 1.0,
-            //   zIndex: 2,
-            //   // 设置远近裁条件
-            //   distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
-            //     20000,
-            //     9999999999.0
-            //   ),
-            //   show: true,
-            // },
-            properties: obj,
-            polygon: {
-              zIndex: 1,
-              hierarchy: {
-                positions: Cesium.Cartesian3.fromDegreesArray(oneDArray),
-              },
-              // outline: false,
-              // material: Cesium.Color.fromCssColorString(this.xzqh_color),
-              height: 100,
-              // extrudedHeight: res.properties.extrudedHeight,
-              material: Cesium.Color.WHITE.withAlpha(0.2),
-              outline: true,
-              outlineWidth: 3,
-              outlineColor: Cesium.Color.fromCssColorString("#4B93E0"), // 设置远近裁条件
-              // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
-              //   20000,
-              //   9999999999.0
-              // ),
-            },
-          });
-
-          // let polygon = new Cesium.GeometryInstance({
-          //     geometry: new Cesium.PolygonGeometry({
-          //         polygonHierarchy: new Cesium.PolygonHierarchy(
-          //             Cesium.Cartesian3.fromDegreesArray(oneDArray)
-          //         ),
-          //         height: 100,
-          //         extrudedHeight: res.properties.extrudedHeight,
-
-          //     })
-          // })
-
-          // let addPolygonGeometry = new Cesium.Primitive({
-          //     geometryInstances: polygon,
-          //     appearance: this.colorFun(Cesium.Color.fromCssColorString("rgba(254, 129, 6, 0.1)"))
-
-          // })
-
-          // viewer.scene.primitives.add(addPolygonGeometry)
-        });
-      });
-    },
-
-    creatPolyGon(item) {
-      let obj = {
-        type: item.type,
-        name: item.properties.kzxxgydmc || "ceshi",
-      };
-      const twoDArray = item.geometry.coordinates[0][0];
-      const oneDArray = twoDArray.reduce(
-        (accumulator, currentValue) => accumulator.concat(currentValue),
-        []
+    addGeoJson() {
+      viewer.dataSources.add(
+        Cesium.GeoJsonDataSource.load("static/data/规划结果.json")
       );
-
-      viewer.entities.add({
-        // position: Cesium.Cartesian3.fromDegrees(res.properties.centroid[0], res.properties.centroid[1], 500),
-        properties: obj,
-        name: item.properties.kzxxgydmc || "ceshi",
-        polygon: {
-          hierarchy: {
-            positions: Cesium.Cartesian3.fromDegreesArray(oneDArray),
-          },
-          material: Cesium.Color.WHITE.withAlpha(0.2),
-          height: 100,
-          outline: true,
-          outlineWidth: 3,
-          outlineColor: Cesium.Color.fromCssColorString("#4B93E0"),
-        },
-      });
     },
 
     init_hyqy() {

static/data/规划结果.json

@@ -0,0 +1,816 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {
+        "kzxxgydmc": "防护绿地",
+        "ydmj": 1148,
+        "sjxzqmc": "三亚市",
+        "xjxzqmc": "天涯区/吉阳区",
+        "xzmc": "天涯区/吉阳区"
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [
+                109.44286559417283,
+                18.299061738917835
+              ],
+              [
+                109.44271501676826,
+                18.298960793619102
+              ],
+              [
+                109.44234689255475,
+                18.298993056683543
+              ],
+              [
+                109.44197904681893,
+                18.299028077982427
+              ],
+              [
+                109.44187708803419,
+                18.29915184736835
+              ],
+              [
+                109.44220587502141,
+                18.29911963465388
+              ],
+              [
+                109.44253562679928,
+                18.299089574622457
+              ],
+              [
+                109.44286559417283,
+                18.299061738917835
+              ]
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "kzxxgydmc": "公园绿地",
+        "ydmj": 1066,
+        "sjxzqmc": "三亚市",
+        "xjxzqmc": "天涯区/吉阳区",
+        "xzmc": "天涯区/吉阳区"
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [
+                109.44909022918564,
+                18.299428494031602
+              ],
+              [
+                109.44899653040993,
+                18.299440832736266
+              ],
+              [
+                109.44908677516337,
+                18.300066000582767
+              ],
+              [
+                109.44912637469773,
+                18.30034033703543
+              ],
+              [
+                109.44914223535237,
+                18.300450200962203
+              ],
+              [
+                109.44921978601253,
+                18.30032599326969
+              ],
+              [
+                109.44909022918564,
+                18.299428494031602
+              ]
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "kzxxgydmc": "零售商业用地",
+        "ydmj": 1850,
+        "sjxzqmc": "三亚市",
+        "xjxzqmc": "天涯区/吉阳区",
+        "xzmc": "天涯区/吉阳区"
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [
+                109.44914223535237,
+                18.300450200962203
+              ],
+              [
+                109.44912637469773,
+                18.30034033703543
+              ],
+              [
+                109.44861922271926,
+                18.30048841515309
+              ],
+              [
+                109.44848796268656,
+                18.3005267393572
+              ],
+              [
+                109.44857675216925,
+                18.30079127208328
+              ],
+              [
+                109.449030635848,
+                18.30062894174201
+              ],
+              [
+                109.44914223535237,
+                18.300450200962203
+              ]
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "kzxxgydmc": "社会停车场用地",
+        "ydmj": 1828,
+        "sjxzqmc": "三亚市",
+        "xjxzqmc": "天涯区/吉阳区",
+        "xzmc": "天涯区/吉阳区"
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [
+                109.44280926171969,
+                18.302844279947273
+              ],
+              [
+                109.44279069174611,
+                18.30258705263516
+              ],
+              [
+                109.44263009902447,
+                18.302588312325124
+              ],
+              [
+                109.44209258309108,
+                18.30265569335967
+              ],
+              [
+                109.44209162997856,
+                18.302719476109417
+              ],
+              [
+                109.44223139436203,
+                18.30285012892559
+              ],
+              [
+                109.44223394378079,
+                18.3028500845764
+              ],
+              [
+                109.44225723979106,
+                18.302849471363317
+              ],
+              [
+                109.44242021304824,
+                18.302846957957204
+              ],
+              [
+                109.44243816857413,
+                18.302846656041442
+              ],
+              [
+                109.44280926171969,
+                18.302844279947273
+              ]
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "kzxxgydmc": "公园绿地",
+        "ydmj": 1117,
+        "sjxzqmc": "三亚市",
+        "xjxzqmc": "天涯区/吉阳区",
+        "xzmc": "天涯区/吉阳区"
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [
+                109.43815629038187,
+                18.303288969753453
+              ],
+              [
+                109.43831234840796,
+                18.30242733376336
+              ],
+              [
+                109.43826730328638,
+                18.302467975642607
+              ],
+              [
+                109.43822716476284,
+                18.3025130652349
+              ],
+              [
+                109.43819241074114,
+                18.302562065228148
+              ],
+              [
+                109.43816345893785,
+                18.302614392255528
+              ],
+              [
+                109.43814064981447,
+                18.302669422013054
+              ],
+              [
+                109.43812426005209,
+                18.302726502905436
+              ],
+              [
+                109.43811448009359,
+                18.302784944959075
+              ],
+              [
+                109.43809888444196,
+                18.3029278858629
+              ],
+              [
+                109.43809215516217,
+                18.302981713828775
+              ],
+              [
+                109.43807541865012,
+                18.303102353775447
+              ],
+              [
+                109.43805593958147,
+                18.303222614964906
+              ],
+              [
+                109.4380419105917,
+                18.303265204606607
+              ],
+              [
+                109.43807817737635,
+                18.30330049625362
+              ],
+              [
+                109.43815629038187,
+                18.303288969753453
+              ]
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "kzxxgydmc": "公园绿地",
+        "ydmj": 1838,
+        "sjxzqmc": "三亚市",
+        "xjxzqmc": "天涯区/吉阳区",
+        "xzmc": "天涯区/吉阳区"
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [
+                109.44957392615207,
+                18.30376641184373
+              ],
+              [
+                109.44956990529286,
+                18.30376753165529
+              ],
+              [
+                109.44956600121462,
+                18.30376899005421
+              ],
+              [
+                109.44956224805338,
+                18.303770771688903
+              ],
+              [
+                109.44955867455515,
+                18.303772863766365
+              ],
+              [
+                109.44955531036442,
+                18.30377525008219
+              ],
+              [
+                109.44955217973568,
+                18.303777911873308
+              ],
+              [
+                109.44954930782171,
+                18.303780826965234
+              ],
+              [
+                109.44954671708042,
+                18.303783974036325
+              ],
+              [
+                109.44954442907138,
+                18.303787328353508
+              ],
+              [
+                109.4495424608626,
+                18.3037908617722
+              ],
+              [
+                109.44954082682709,
+                18.303794547853624
+              ],
+              [
+                109.44953954223624,
+                18.30379835760035
+              ],
+              [
+                109.44953861517486,
+                18.303802262014983
+              ],
+              [
+                109.44949801222236,
+                18.303984055147044
+              ],
+              [
+                109.44944551916873,
+                18.30416304813935
+              ],
+              [
+                109.44938134711809,
+                18.30433853397793
+              ],
+              [
+                109.44937792633347,
+                18.304345998226488
+              ],
+              [
+                109.44937381474442,
+                18.304353136681456
+              ],
+              [
+                109.44936904828351,
+                18.304359893053963
+              ],
+              [
+                109.44936366288339,
+                18.30436621190804
+              ],
+              [
+                109.44935770256147,
+                18.304372042072035
+              ],
+              [
+                109.44935121762346,
+                18.30437733493286
+              ],
+              [
+                109.4493442619682,
+                18.30438204784746
+              ],
+              [
+                109.44933688679973,
+                18.30438614414286
+              ],
+              [
+                109.449329157695,
+                18.30438958799886
+              ],
+              [
+                109.44932113304458,
+                18.304392352976816
+              ],
+              [
+                109.4493128811204,
+                18.304394416902333
+              ],
+              [
+                109.44905410163987,
+                18.304447347202135
+              ],
+              [
+                109.44904622521146,
+                18.304448629053
+              ],
+              [
+                109.44903826164646,
+                18.30444927125772
+              ],
+              [
+                109.44903027113202,
+                18.30444926784628
+              ],
+              [
+                109.44902230936364,
+                18.30444862223012
+              ],
+              [
+                109.44901443203692,
+                18.30444733526207
+              ],
+              [
+                109.44900669664402,
+                18.304445418029374
+              ],
+              [
+                109.44899915888047,
+                18.304442884177746
+              ],
+              [
+                109.44899187174687,
+                18.30443975332299
+              ],
+              [
+                109.44820770987748,
+                18.304063867828994
+              ],
+              [
+                109.44820036525172,
+                18.304059948068737
+              ],
+              [
+                109.44819341498638,
+                18.304055420216724
+              ],
+              [
+                109.44818691298035,
+                18.304050319240353
+              ],
+              [
+                109.44818091133591,
+                18.304044686929874
+              ],
+              [
+                109.44817545766382,
+                18.304038569339838
+              ],
+              [
+                109.44817059508321,
+                18.304032010819157
+              ],
+              [
+                109.44816636132325,
+                18.30402506595099
+              ],
+              [
+                109.4481627896217,
+                18.30401779017145
+              ],
+              [
+                109.4481599096229,
+                18.30401023976952
+              ],
+              [
+                109.44815774378473,
+                18.30400247529847
+              ],
+              [
+                109.44815630917523,
+                18.3039945573116
+              ],
+              [
+                109.44815561567584,
+                18.303986548067925
+              ],
+              [
+                109.4481556713714,
+                18.303978509826525
+              ],
+              [
+                109.44816643498511,
+                18.303777197172597
+              ],
+              [
+                109.44816657781726,
+                18.303774525999955
+              ],
+              [
+                109.44816646283289,
+                18.303773192972205
+              ],
+              [
+                109.44816611877815,
+                18.30376920071184
+              ],
+              [
+                109.44816540731243,
+                18.303765252800346
+              ],
+              [
+                109.44816433113071,
+                18.303761381646623
+              ],
+              [
+                109.44816290101281,
+                18.30375761710093
+              ],
+              [
+                109.4481611268401,
+                18.303753988160654
+              ],
+              [
+                109.4481590229857,
+                18.303750522117532
+              ],
+              [
+                109.44815660741591,
+                18.303747248821818
+              ],
+              [
+                109.44815389540207,
+                18.303744193006604
+              ],
+              [
+                109.44815091299533,
+                18.30374137769927
+              ],
+              [
+                109.44814767995862,
+                18.303738827632923
+              ],
+              [
+                109.44814422324141,
+                18.303736559864838
+              ],
+              [
+                109.44814056979317,
+                18.303734593158094
+              ],
+              [
+                109.44813674835993,
+                18.303732945422848
+              ],
+              [
+                109.44813278858616,
+                18.303731625187748
+              ],
+              [
+                109.44812872101454,
+                18.30373064524581
+              ],
+              [
+                109.44812458157772,
+                18.303730013272816
+              ],
+              [
+                109.44812039902176,
+                18.303729735238804
+              ],
+              [
+                109.44804785467267,
+                18.30372798260111
+              ],
+              [
+                109.44792173030845,
+                18.30369133498545
+              ],
+              [
+                109.44790342443959,
+                18.30368686170721
+              ],
+              [
+                109.44786788169706,
+                18.303779882843894
+              ],
+              [
+                109.44793784428802,
+                18.30396483415447
+              ],
+              [
+                109.44915949468394,
+                18.30455042742633
+              ],
+              [
+                109.44934689313367,
+                18.304488671749336
+              ],
+              [
+                109.44939794618791,
+                18.304372476178745
+              ],
+              [
+                109.44944381416632,
+                18.304254322357945
+              ],
+              [
+                109.44948441532219,
+                18.304134426057367
+              ],
+              [
+                109.4495196732988,
+                18.304012995372034
+              ],
+              [
+                109.44954952790893,
+                18.303890252896338
+              ],
+              [
+                109.44957392615207,
+                18.30376641184373
+              ]
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "kzxxgydmc": "公园绿地",
+        "ydmj": 1286,
+        "sjxzqmc": "三亚市",
+        "xjxzqmc": "天涯区/吉阳区",
+        "xzmc": "天涯区/吉阳区"
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [
+                109.43961501516442,
+                18.30560215367195
+              ],
+              [
+                109.43862940339763,
+                18.30525592285416
+              ],
+              [
+                109.43831059669319,
+                18.305240192748986
+              ],
+              [
+                109.43960758519869,
+                18.305695803187255
+              ],
+              [
+                109.43961501516442,
+                18.30560215367195
+              ]
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "kzxxgydmc": "社会停车场用地",
+        "ydmj": 1481,
+        "sjxzqmc": "三亚市",
+        "xjxzqmc": "天涯区/吉阳区",
+        "xzmc": "天涯区/吉阳区"
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [
+                109.43956791829069,
+                18.306195893829056
+              ],
+              [
+                109.43936799642759,
+                18.30616679704386
+              ],
+              [
+                109.43929204027704,
+                18.306729921354187
+              ],
+              [
+                109.43953283189232,
+                18.306764483961217
+              ],
+              [
+                109.43953296574132,
+                18.30676450357675
+              ],
+              [
+                109.43956791829069,
+                18.306195893829056
+              ]
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "kzxxgydmc": "公园绿地",
+        "ydmj": 1771,
+        "sjxzqmc": "三亚市",
+        "xjxzqmc": "天涯区/吉阳区",
+        "xzmc": "天涯区/吉阳区"
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [
+                109.44443382628344,
+                18.30359658163097
+              ],
+              [
+                109.44448054855968,
+                18.303191743715395
+              ],
+              [
+                109.44454201668131,
+                18.30300283341605
+              ],
+              [
+                109.44454583362298,
+                18.302997081669872
+              ],
+              [
+                109.4444473809628,
+                18.302990536755633
+              ],
+              [
+                109.44434872528332,
+                18.302988065142145
+              ],
+              [
+                109.44429450476942,
+                18.303154690021184
+              ],
+              [
+                109.44420002266277,
+                18.303973359381782
+              ],
+              [
+                109.44420020142752,
+                18.303973043822143
+              ],
+              [
+                109.44423687964057,
+                18.303909252152526
+              ],
+              [
+                109.44427442921945,
+                18.303845925270547
+              ],
+              [
+                109.4443128420793,
+                18.30378307341111
+              ],
+              [
+                109.44435211822015,
+                18.303720705103363
+              ],
+              [
+                109.44439224416728,
+                18.303658835699448
+              ],
+              [
+                109.44443321273411,
+                18.303597472875627
+              ],
+              [
+                109.44443382628344,
+                18.30359658163097
+              ]
+            ]
+          ]
+        ]
+      }
+    }
+  ]
+}