可视化项目 gis 资源复用思路（cesium）

可视化项目 gis 资源复用思路

背景： A项目的底图、模型 是现在在做的 B项目所需要的，现在要把 B项目的底图之类的替换成 A系统的

底图、模型替换思路

观察可访问系统的 gis 相关网络请求（找到瓦片底图图片、json 文件、3d模型文件的网络请求）

去代码中定位（关键路径，比如 myMapApi/CQKSHMAP，去搜到相关代码，进行两份代码对比）

分析关联代码，将地址路径拼接正确（目的是为了加载、访问同一份资源，即复用）

查看控制台相关报错，针对性解决报错（可能会缺少相关配置文件，复制过来直接使用）

具体操作

更改地图加载配置：src\views\components\common\myMap.vue

• initMap 需要对比着两份文件去改

  • 更改资源请求路径

    • 大致就是配置请求 base路径

    • 瓦片加载地址（earth.sceneTree.root）

    • 白模、精模加载地址（this.urls = '/api/myMapApi'）

      • 精模、白模都是通过 this.add3DTiles(……) 加载的

      • this.add3DTiles('/CQKSHMAP/tileset.json', null, true) // ……白模
        this.add3DTiles('/CQKSHMAP/xiaolongkan/tileset.json', false, -225.4756439025631) // 小龙坎白模
        this.add3DTiles('/CQKSHMAP/ciqikou/tileset2.json', true, -187.74468302780863) // 磁器口精模
        this.add3DTiles('/CQKSHMAP/sanxia/tileset.json', false, -206.62957102924753) // 三峡精模
        

（↓ 这部分是基于项目做的额外处理）

• 更改3D地球默认视角配置（flyToDeafultView()）

• 更改过滤点范围（超出范围的点位将不被渲染）

  • 基于 2024.4 自己优化修复的无效点位造成地图消失问题，需要配置

• 更改加载的道路流光数据

  • 将新要到的道路数据放到 public\Data 目录下，并修改 common.getJson("../Data/spbroad.json") 为对应的路径

addLightLine () {let vm = this;common.getJson("../Data/spbroad.json").then(res => {var lines = [];res.data.features.forEach((item, index) => {var line = [];var coordinates = item.geometry.coordinates[0];for (var i in coordinates) {line.push(coordinates[i][0], coordinates[i][1]);}lines.push(line);});vm.createFlyLines(lines)}).catch()
},initMap () {//默认代理// var mapUrl = "/mapTile/{z}/{x}/{y}.png";if (process.env.NODE_ENV === 'development') {this.urls = '/api/myMapApi'this.modelurl = '/api/glbApi'} else {// mapUrl = "/ksh3Dfile/CQKSHMAP/{z}/{x}/{y}.png";this.urls = window.location.protocol + '//' + window.location.host}var Cesium = this.Cesiumvar earth = new window.XE.Earth('map', {timeline: false,animation: false,geocoder: false,canAnimate: false,homeButton: false,sceneModePicker: false,baseLayerPicker: false,infoBox: false,shouldAnimate: false,navigationHelpButton: false,sceneMode: Cesium.SceneMode.SCENE3D,//是否以二维的形式展现skyBox: new Cesium.SkyBox({sources: {positiveX: require('@/assets/sky/tycho2t3_80_px.jpg'),negativeX: require('@/assets/sky/tycho2t3_80_mx.jpg'),positiveY: require('@/assets/sky/tycho2t3_80_py.jpg'),negativeY: require('@/assets/sky/tycho2t3_80_my.jpg'),positiveZ: require('@/assets/sky/tycho2t3_80_pz.jpg'),negativeZ: require('@/assets/sky/tycho2t3_80_mz.jpg')}}),})this.initChildrenLength = earth.sceneTree.root.children.lengthconst bloom = earth.postProcess.bloom// 发光特效bloom.enabled = falsebloom.glowOnly = falsebloom.contrast = 128bloom.brightness = -1.2bloom.delta = 1bloom.sigma = 3bloom.stepSize = 5bloom.isSelected = falseconst shadow = earth.effect.shadowshadow.enabled = falseshadow.darkness = 0.32shadow.maximumDistance = 2900000shadow.terrainShadow = falseshadow.softShadows = trueshadow.normalOffset = truethis.viewer = earth.czm.viewerthis.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)earth.sceneTree.root = {'children': [{"czmObject": {"name": "百度地图","xbsjType": "Imagery","xbsjImageryProvider": {"XbsjImageryProvider": {"url": this.urls + '/CQKSHMAP/{z}/{x}/{y}.jpg',"srcCoordType": "BD09","dstCoordType": "WGS84"},}}}]}this.viewer.scene.fxaa = truethis.viewer.scene.postProcessStages.fxaa.enabled = truethis.viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString('#011124')// var CartographicCenter = Cesium.Cartesian3.fromDegrees(106.455139, 29.551507, 1000)// AddCircleScanPostStage(this.viewer, CartographicCenter, 800, scanColor, 1000)this.viewer.scene.globe.depthTestAgainstTerrain = truethis.viewer.scene.skyAtmosphere.show = false// 获取图层列表集合var imageryLayers = this.viewer.imageryLayersvar viewModel = {// 图层亮度，1.0使用未修改的图像颜色。小于1.0会使图像更暗，而大于1.0会使图像更亮brightness: 1.5,// 图层对比度，1.0使用未修改的图像颜色。小于1.0会降低对比度，大于1.0会增加对比度。contrast: 2.25,// 图层色调，单位为弧度，0表示使用未修改的图像颜色hue: 3.0,// 图层饱和度，1.0使用未修改的图像颜色。小于1.0会降低饱和度，大于1.0会增加饱和度。saturation: 3.0,// 应用于该图层的伽马校正,1.0使用未修改的图像颜色。gamma: 0.57}// ---修改地图基础色调var layer = imageryLayers.get(0) || {}layer.brightness = viewModel.brightness// 定义最大视野范围，渲染点位时传入参数启用，在此范围外的点位将被隐藏（每次换完地图记得改）this.visiableRectangle = {west: 106.2857926449792, // 最西边的经度坐标 // latitudeMineast: 106.66852453515835,// 最东边的经度坐标 // latitudeMaxnorth: 30.092818813389517, // 最北边的纬度坐标 // longitudeMinsouth: 29.646487489780533, // 最南边的纬度坐标 // longitudeMax}this.flyToDeafultView() // 封装成了方法，请在方法里更改参数 ↓this.add3DTiles('/CQKSHMAP/tileset.json', null, true) // ……白模this.add3DTiles('/CQKSHMAP/xiaolongkan/tileset.json', false, -225.4756439025631) // 小龙坎白模// this.add3DTiles('/CQKSHMAP/xizhan/tileset.json', -260.94252427098672)this.add3DTiles('/CQKSHMAP/ciqikou/tileset2.json', true, -187.74468302780863) // 磁器口精模this.add3DTiles('/CQKSHMAP/sanxia/tileset.json', false, -206.62957102924753) // 三峡精模},// 飞到默认的视角
flyToDeafultView () {this.viewer.camera.setView({destination: Cesium.Cartesian3.fromDegrees(106.4984112, 29.482837, 3513.312453442188),orientation: {heading: Cesium.Math.toRadians(-30),pitch: Cesium.Math.toRadians(-18),roll: Cesium.Math.toRadians(0)}})
},

更改本地代理（开发环境访问）：vue.config.js

proxy: {glbApi: {target: 'https://www.xxx.com:33333', // 换成对应的地址myMapApi: {target: 'http://222.111.111.22:6666/', // 换成对应的地址

更换道路 json 文件：public\Data\spbroad.json

• 问 负责gis数据这块的同事 要到最新/对应的道路数据 json 文件

------------- END 许愿区 -------------

最近想换工作，有没有大佬捞一下本人5年前端开发工作经验，函授本科学历，软件工程专业毕业，在校有专业竞赛经历并获奖
会做大屏驾驶舱、PC端业务系统、移动端H5应用、uniapp 多端应用开发、原生微信小程序开发（含简单的地图逻辑开发）
意向城市成都、重庆，川渝两省范围优先考虑