林火综合应急信息管理系统大屏
guanqb
2023-03-10 86b1f5115a3392e37c4e6d8669db47e5a433389e
Merge branch 'master' of http://192.168.0.105:10010/r/forest-fire-web
2 files modified
229 ■■■■ changed files
.gitignore 1 ●●●● patch | view | raw | blame | history
src/components/map/index.vue 228 ●●●● patch | view | raw | blame | history
.gitignore
@@ -1,6 +1,7 @@
.DS_Store
node_modules
/dist
package-lock.json
# local env files
src/components/map/index.vue
@@ -9,115 +9,131 @@
let layersObjcect = {
    housingEstateLayer: null,
}
let baseLayers = null
const ysLabels = [
    'EPSG:4490_test:0',
    'EPSG:4490_test:1',
    'EPSG:4490_test:2',
    'EPSG:4490_test:3',
    'EPSG:4490_test:4',
    'EPSG:4490_test:5',
    'EPSG:4490_test:6',
    'EPSG:4490_test:7',
    'EPSG:4490_test:8',
    'EPSG:4490_test:9',
    'EPSG:4490_test:10',
    'EPSG:4490_test:11',
    'EPSG:4490_test:12',
    'EPSG:4490_test:13',
    'EPSG:4490_test:14',
    'EPSG:4490_test:15',
    'EPSG:4490_test:16',
    'EPSG:4490_test:17',
    'EPSG:4490_test:18',
    'EPSG:4490_test:19',
    'EPSG:4490_test:20',
    'EPSG:4490_test:21',
    'EPSG:4490_test:22',
]
export default {
   name: 'mapBox',
   data () {
       return {
    name: 'mapBox',
    data() {
        return {}
    },
    mounted() {
        if (global.viewer != null) {
            global.viewer = null
        }
        
       }
   },
   mounted(){
      if (global.viewer != null) {
          global.viewer = null
      }
      const that = this
      // 初始化地图
      function initViewer () {
           global.viewer = new global.DC.Viewer('viewer-container')
           let baseLayer = new DC.ImageryLayerFactory.createAmapImageryLayer({
             style:'img',
             crs:"WGS84"
           })
           global.viewer.addBaseLayer(baseLayer)
           global.viewer.setPitchRange(-90, -45)
           // global.viewer.scene.globe.depthTestAgainstTerrain = false
           // 去除logo
           let primitiveArr = global.viewer.scene.primitives._primitives
           global.viewer.scene.primitives.remove(primitiveArr[0])
           // 已声明的图层添加到地图上
           siteEntitylayers = new global.DC.VectorLayer('siteEntitylayers')
           global.viewer.addLayer(siteEntitylayers)
           // 图层加入地图
           layersObjcect.housingEstateLayer = new global.DC.VectorLayer('housingEstateLayer')
           global.viewer.addLayer(layersObjcect.housingEstateLayer)
           // 判断是否支持图像渲染像素化处理
           if (global.DC.Namespace.Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
               global.viewer.setOptions({
                   resolutionScale: window.devicePixelRatio
               })
           }
           // 设置地图初始位置,角度等
           global.viewer.camera.setView({
               // Cesium的坐标是以地心为原点,一向指向南美洲,一向指向亚洲,一向指向北极州
               // fromDegrees()方法,将经纬度和高程转换为世界坐标
               destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                   108.55125, 38.3227, 5500000
               ),
               orientation: {
                   // 指向
                   heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
                   // 视角
                   pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
                   roll: 0.0
               }
           })
           global.viewer.use(new global.DC.Measure())
           global.viewer.zoomController.enable = true
      }
      global.DC.ready(initViewer)
   },
   methods:{
   }
        const that = this
        // 初始化地图
        function initViewer() {
            global.DC.Namespace.Cesium.Ion.defaultAccessToken =
                    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyZWQyZWYwNC02OGI2LTQ1MGUtYTQ2MC01OTExYTcwOThkNDIiLCJpZCI6NjgzMzgsImlhdCI6MTYzMjQ2Nzc3OX0.zwUn5xW9KMVQrTmWNUlf5TMztNIAJkStN3eCnaJGj4w'
            global.viewer = new global.DC.Viewer('viewer-container')
            let baseLayer = new DC.ImageryLayerFactory.createAmapImageryLayer({
                animation: false, //动画
                baseLayerPicker: false, //图层选择控件
                timeline: false, //时间轴
                sceneModePicker: false,
                fullscreenButton: false, //全屏显示
                infoBox: true, //点击要素之后浮窗
                navigationInstructionsInitiallyVisible: true, //导航指令
                navigationHelpButton: false, //帮助信息
                selectionIndicator: true, // 选择
                terrainProvider: new global.DC.Namespace.Cesium.CesiumTerrainProvider({
                    url: global.DC.Namespace.Cesium.IonResource.fromAssetId(3956),
                }),
            })
            global.viewer.addBaseLayer(baseLayer)
            global.DC.Namespace.Cesium.Camera.DEFAULT_VIEW_RECTANGLE = global.DC.Namespace.Cesium.Rectangle.fromDegrees(100.15, 31.54, 112.25, 43.56)
            // global.viewer.setPitchRange(-90, -45)
            // global.viewer.scene.globe.depthTestAgainstTerrain = false
            // var cesiumAsset = 'jw1WHkf6s0LAwkAYL1nELtO1pKNcaVQSpHISib9geQI6c1ACcc0gEnEkcsc5a5I5'
            // var tiandituTk = 'bfedb24d63d0cfa0db00fcd2d379abe7'
            // // // 服务负载子域
            // var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']
            // global.DC.Namespace.Cesium.Ion.defaultAccessToken = cesiumAsset
            //
            // global.viewer.imageryLayers.addImageryProvider(new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
            //     //影像注记
            //     url:'http://t{s}.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=' +
            //             tiandituTk,
            //     subdomains: subdomains,
            //     layer: 'tdtCiaLayer',
            //     style: 'default',
            //     format: 'image/jpeg',
            //     tileMatrixSetID: 'GoogleMapsCompatible',
            //     show: true,
            //     transparent: true,
            // }))
            //
            global.viewer.imageryLayers.addImageryProvider(new global.DC.Namespace.Cesium.WebMapServiceImageryProvider({
                //影像注记
                url: 'http://39.107.109.193:8105/geoserver/Map/wms',
                layers: 'yanmo',
                parameters: {
                    version: "1.1.1",
                    layers: 'yanmo1',
                    service: 'WMS',
                    format: 'image/png',
                    opacity: '0.2',
                    transparent: true,
                },
            }))
            // 去除logo
            let primitiveArr = global.viewer.scene.primitives._primitives
            global.viewer.scene.primitives.remove(primitiveArr[0])
            // 已声明的图层添加到地图上
            siteEntitylayers = new global.DC.VectorLayer('siteEntitylayers')
            global.viewer.addLayer(siteEntitylayers)
            // 图层加入地图
            layersObjcect.housingEstateLayer = new global.DC.VectorLayer('housingEstateLayer')
            global.viewer.addLayer(layersObjcect.housingEstateLayer)
            // 判断是否支持图像渲染像素化处理
            if (global.DC.Namespace.Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
                global.viewer.setOptions({
                    resolutionScale: window.devicePixelRatio
                })
            }
            // 设置地图初始位置,角度等
            global.viewer.camera.setView({
                // Cesium的坐标是以地心为原点,一向指向南美洲,一向指向亚洲,一向指向北极州
                // fromDegrees()方法,将经纬度和高程转换为世界坐标
                destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                        108.55125, 38.3227, 5500000
                ),
                orientation: {
                    // 指向
                    heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
                    // 视角
                    pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
                    roll: 0.0
                }
            })
            global.viewer.use(new global.DC.Measure())
            global.viewer.zoomController.enable = true
        }
        global.DC.ready(initViewer)
    },
    methods: {}
}
</script>
<style lang="scss" scope>
   .viewer-box {
       position: relative;
       width: 100%;
       height: 100%;
   }
</style>
.viewer-box {
    position: relative;
    width: 100%;
    height: 100%;
}
</style>