图斑加载

guoshilong

2023-11-08 cad194dedbb5a0d9b376c1fe6053969d2098554e

图斑加载

 package.json

@@ -12,6 +12,7 @@
    "lint": "eslint --fix"
  },
  "dependencies": {
    "@turf/turf": "^6.5.0",
    "@amap/amap-jsapi-loader": "^1.0.1",
    "@ant-design/icons-vue": "^6.0.1",
    "@vitejs/plugin-legacy": "^1.6.2",

 src/assets/jsonData/图斑_FeaturesToJSON(1).json

New file
@@ -0,0 +1 @@
{"type":"FeatureCollection","crs":{"type":"name","properties":{"name":"EPSG:4326"}},"features":[{"type":"Feature","id":0,"geometry":{"type":"Polygon","coordinates":[[[115.86646556494736,28.634450296554235],[115.86425430209033,28.635738328540754],[115.86455173471609,28.633120921432976],[115.86697714906381,28.633843533997606],[115.86646556494736,28.634450296554235]]]},"properties":{"FID":0,"Id":0}},{"type":"Feature","id":1,"geometry":{"type":"Polygon","coordinates":[[[115.87471426513127,28.603615164328573],[115.8707286679462,28.599546286008433],[115.87708182883227,28.597547538763365],[115.87661961853189,28.6005438750351],[115.87471426513127,28.603615164328573]]]},"properties":{"FID":1,"Id":0}},{"type":"Feature","id":2,"geometry":{"type":"Polygon","coordinates":[[[115.81700000000001,28.602637003999973],[115.81892155601372,28.602521432416381],[115.8185646368629,28.60459156349151],[115.81578066748614,28.605091250302735],[115.81700000000001,28.602637003999973]]]},"properties":{"FID":2,"Id":0}},{"type":"Feature","id":3,"geometry":{"type":"Polygon","coordinates":[[[115.81799999999998,28.652296152000076],[115.81961010540385,28.650053326558464],[115.82417867053516,28.650434040319453],[115.82265581549132,28.652908679765517],[115.81799999999998,28.652296152000076]]]},"properties":{"FID":3,"Id":0}}]}

 src/components/cesiumMap/cesium.vue

@@ -85,7 +85,7 @@
  }
}
const searchLocation = _.debounce(search, 500)
const { flyTo, addPoint, removeById, switchModel, dimension, zoonIn, zoonOut, roadPattern, patternMap } = cesiumOperation()
const { flyTo, addPoint, removeById, switchModel, dimension, zoonIn, zoonOut, roadPattern, patternMap, loadGeoJson } = cesiumOperation()
const enter = (e: string) => {
  removeById('key')
  const filterItem = resultList.value.find(v => v.value === e)

 src/hooks/use-cesium-tsa.ts

@@ -140,6 +140,10 @@
    }
  }

  function removeAllDataSource() {
    viewer.dataSources.removeAll();
  }

  // 清除所有标记点
  function removeAllPoint () {
    if (viewer) {
@@ -249,6 +253,22 @@
      viewer?.imageryLayers.addImageryProvider(annotation)
    }
  }

  //加载json文件
  const loadGeoJson = (url:string)=>{
    const option = {
      stroke: Cesium.Color.HOTPINK,
      fill: Cesium.Color.PINK,
      strokeWidth: 3,
    }
    const promise = Cesium.GeoJsonDataSource.load(url,option)

    promise.then(dataSource=>{
      console.log(dataSource)
      viewer.dataSources.add(dataSource);
    })
  }

  // 切换不同背景图层
  const patternMap = () => {
    const imageryLayers = viewer?.scene.imageryLayers
@@ -291,6 +311,8 @@
    patternMap,
    getEntityById,
    updateEntityPosition,
    addPolyline
    addPolyline,
    loadGeoJson,
    removeAllDataSource
  }
}

 src/pages/page-web/projects/project_list/list_page/list.vue

@@ -102,6 +102,7 @@
  })
  cardList.value = res.data.list
  cesium.removeAllPoint()
  cesium.removeAllDataSource()
  spinning.value = false
}
onMounted(() => {

 src/pages/page-web/projects/tsa.vue

@@ -419,6 +419,7 @@
    cesium.addPoint(setting)
    // cesium.flyTo(setting)
  }
  cesium.loadGeoJson('../src/assets/jsonData/图斑_FeaturesToJSON(1).json')
}, {
  deep: true,
})