guoyuepeng
/
qa-prevention-gwj-vue
1
0
Fork 3
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

limingyu-20240412-消防点位坐标地图 #11

Merged
guoyuepeng merged 2 commits from limingyu-20240412-消防点位坐标地图 into dev 2024-04-13 18:08:04 +08:00
Conversation 0 Commits 2 Files Changed 4
4 changed files with 325 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
config/index.js
View File

@ -16,6 +16,13 @@ module.exports = {
pathRewrite: {
'^/api': ''
}
},
'/mapapi/': {
target: 'http://192.168.192.215:8021/',
changeOrigin: true,
pathRewrite: {
'^/mapapi/': ''
}
}
},

318
src/views/firefighting/points/components/edit.vue
View File

@ -135,7 +135,7 @@
</el-form>
</div>
<el-dialog :visible.sync="dialogFormMap" title="定位" width="1050px" class="dy-dialog">
<div id="map"/>
<div id="cesiumContainer"/>
<div slot="footer" class="dialog-footer">
<span>经度：</span>
<el-input v-model="LONGTITUDE" style="width: 200px" placeholder="请输入内容" disabled/>
@ -167,6 +167,16 @@ import { upload } from '@/utils/upload'
import SelectTree from '@/components/SelectTree'
import waves from '@/directive/waves' // waves directive
import TiandiMap from '@/components/TianMap/TiandiMap.vue'
import RyDragEntity from "../../../map/js/ry_dragentity";
import DragEntity from "../../../map/js/dragentity";
let viewer = null
let drag = null
let ry_drag = null
var tiandituTk = 'e8a16137fd226a62a23cc7ba5c9c78ce'
var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']
const Cesium = window.Cesium
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkOWQ0MGYwMy0yODUwLTQ1YzktOGM4OC02MTMwY2UyZjNlMzQiLCJpZCI6MTY0NTUwLCJpYXQiOjE2OTM4OTU1Mjd9.1cC0sSzyj79LZv0ILNCcl0Mabw6hl8TNngFNFr7H8f4'
export default {
components: { Pagination, SelectTree, TiandiMap },
@ -260,7 +270,15 @@ export default {
limit: 20
},
multipleSelection: [],
accidentList: []
accidentList: [],
corpInfo: {
CORP_INFO_ID: '',
longitude: '',
latitude: ''
},
center: { longitude: 119.6486945226887, latitude: 39.93555616569192, height: 900000 },
poinEntity: {},
dichitype :0
}
},
watch: {
@ -292,7 +310,268 @@ export default {
// this.getFirePointCheckPhotos(this.FIRE_POINT_ID)
}
},
mounted() {
this.initCorpInfo()
},
methods: {
initCorpInfo() {
requestFN(
'/map/getCorpInfo', {}
).then((data) => {
this.corpInfo.CORP_INFO_ID = data.info.CORP_INFO_ID
this.corpInfo.latitude = data.info.latitude
this.corpInfo.longitude = data.info.longitude
this.initMap2()
}).catch((e) => {
console.log(e)
})
},
initMap2() {
console.info(viewer)
if (this.dichitype ===2){
return
}
viewer = new Cesium.Viewer('cesiumContainer', {
animation: false, // 动画
homeButton: true, // home键
geocoder: true, // 地址编码
baseLayerPicker: false, // 图层选择控件
timeline: false, // 时间轴
fullscreenButton: true, // 全屏显示
infoBox: true, // 点击要素之后浮窗
sceneModePicker: true, // 投影方式 三维/二维
navigationInstructionsInitiallyVisible: false, // 导航指令
navigationHelpButton: false, // 帮助信息
selectionIndicator: false, // 选择
imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
// 影像底图
url: 'http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + tiandituTk,
subdomains: subdomains,
layer: 'tdtImgLayer',
style: 'default',
format: 'image/jpeg',
tileMatrixSetID: 'GoogleMapsCompatible', // 使用谷歌的瓦片切片方式
show: true
})
})
viewer._cesiumWidget._creditContainer.style.display = 'none' // 隐藏cesium ion
viewer.imageryLayers.addImageryProvider(new 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
}))
drag = new DragEntity({
viewer
})
// 根据不同的公司将信息加载到地图上
this.initInfo()
this.leftDownAction()
console.log(this.LATITUDE)
if(this.LATITUDE){
console.log('LATITUDE')
this.dfdfd (this.LONGTITUDE,this.LATITUDE)
}
this.loadTilesetHandler()
ry_drag = new RyDragEntity({
viewer
})
this.dichitype = 2
},
leftDownAction(){
// 去掉entity的点击事件 start
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
// 去掉entity的点击事件 end
this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
let id
this.handler.setInputAction(movement => {
var cartesian = this.getCatesian3FromPX(movement.position)
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
},
getCatesian3FromPX: function(px) {
if (viewer && px) {
var picks = viewer.scene.drillPick(px)
var cartesian = null
// eslint-disable-next-line one-var
var isOn3dtiles = false,
isOnTerrain = false
// drillPick
for (const i in picks) {
const pick = picks[i]
if (
(pick && pick.primitive instanceof Cesium.Cesium3DTileFeature) ||
(pick && pick.primitive instanceof Cesium.Cesium3DTileset) ||
(pick && pick.primitive instanceof Cesium.Model)
) {
// 模型上拾取
isOn3dtiles = true
}
// 3dtilset
if (isOn3dtiles) {
viewer.scene.pick(px) // pick
cartesian = viewer.scene.pickPosition(px)
if (cartesian) {
const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
if (cartographic.height < 0) cartographic.height = 0
let lon = Cesium.Math.toDegrees(cartographic.longitude),
lat = Cesium.Math.toDegrees(cartographic.latitude),
height = cartographic.height
cartesian = this.transformWGS84ToCartesian({
lng: lon,
lat: lat,
alt: height
})
}
}
}
// 地形
const boolTerrain =
viewer.terrainProvider instanceof
Cesium.EllipsoidTerrainProvider
// Terrain
if (!isOn3dtiles && !boolTerrain) {
var ray = viewer.scene.camera.getPickRay(px)
if (!ray) return null
cartesian = viewer.scene.globe.pick(ray, viewer.scene)
isOnTerrain = true
}
// 地球
if (!isOn3dtiles && !isOnTerrain && boolTerrain) {
cartesian = viewer.scene.camera.pickEllipsoid(
px,
viewer.scene.globe.ellipsoid
)
}
const cartesian1 = new Cesium.Cartesian3(cartesian.x, cartesian.y, cartesian.z) // 替换为实际的 Cartesian3 坐标值
// 将 Cartesian3 坐标转换为 Cartographic 坐标
const cartographic = Cesium.Cartographic.fromCartesian(cartesian1)
// 将 Cartographic 坐标转换为 CGCS2000 计算经纬度
const lng = Cesium.Math.toDegrees(cartographic.longitude)
const lat = Cesium.Math.toDegrees(cartographic.latitude)
const height = cartographic.height // 高度
this.LONGTITUDE = lng
this.LATITUDE = lat
this.dfdfd(lng,lat)
return `CGCS2000 坐标: 经度 ${lng}, 纬度 ${lat}, 高度 ${height}`
}
},
transformWGS84ToCartesian: function(position, alt) {
// eslint-disable-next-line no-return-assign
return position ? Cesium.Cartesian3.fromDegrees(
position.lng || position.lon,
position.lat,
position.alt = alt || position.alt,
Cesium.Ellipsoid.WGS84
)
: Cesium.Cartesian3.ZERO
},
dfdfd (LONGITUDE,LATITUDE){
let dianweiName = '消防点位'
if(this.form.FIRE_POINT_NAME){
dianweiName = this.form.FIRE_POINT_NAME
}
var initPoint = [
{
'id': '00002',
'data_id': '00002',
'MAP_POINT_NAME': dianweiName,
'name': '',
'point_type': '',
'type': '',
'descr': '',
'position': {
'x': LONGITUDE,
'y': LATITUDE
},
CORP_INFO_ID: 'f8da1790b1034058ae2efefd69af3284'
}
]
this.dragAreaEntity(initPoint)
ry_drag = new RyDragEntity({
viewer
})
},
// 加载点
dragAreaEntity(pointArr) {
console.log('pointArr',pointArr)
console.log('')
this.poinEntity = {}
const collection = new Cesium.CustomDataSource('clickEntityCollection')
pointArr.forEach(item => {
if (!this.poinEntity.hasOwnProperty(item.id)) {
const entity = drag.addEntity(item)
this.poinEntity[item.id] = entity
collection.entities.add(entity)
}
})
viewer.dataSources.removeAll()
viewer.dataSources.add(collection)
},
initInfo() {
this.bottomOptionsIndex = ''
this.clickPort({
id: '00003',
CORP_INFO_ID: this.corpInfo.CORP_INFO_ID,
longitude: this.corpInfo.longitude,
latitude: this.corpInfo.latitude,
height: '2000'
})
},
clickPort({ id, longitude, latitude, height, CORP_INFO_ID }) {
console.log('clickPort', id, longitude, latitude, height, CORP_INFO_ID)
this.gangkouActive = id
this.CORP_INFO_ID = CORP_INFO_ID
this.componentKey = Math.random()
this.bottomOptionsKey = Math.random()
this.bottomOptionsAnimationComplex = false
this.toCenter({ longitude, latitude, height })
drag.addPolygon(id)
viewer.dataSources.removeAll()
},
toCenter(center = this.center) {
console.log('toCenter', center)
this.center.longitude = center.longitude
this.center.latitude = center.latitude
this.center.height = center.height
viewer.camera.flyTo({
// 设置中心点,x,y,缩放等级
destination: Cesium.Cartesian3.fromDegrees(this.center.longitude, this.center.latitude, this.center.height)
})
},
loadTilesetHandler() {
console.log('loadTilesetHandler')
Cesium.ExperimentalFeatures.enableModelExperimental = true
var cfdd = new Cesium.Cesium3DTileset({
url: '/mapapi/ware/upload/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E4%B8%9C/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E4%B8%9C/merge_tile.json'
})
viewer.scene.primitives.add(cfdd)
var cfdx = new Cesium.Cesium3DTileset({
url: '/mapapi/ware/upload/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E8%A5%BF/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E8%A5%BF/merge_tile.json'
})
viewer.scene.primitives.add(cfdx)
var qhdxys = new Cesium.Cesium3DTileset({
url: '/mapapi/ware/upload/qhdxys/merge_tile.json'
})
viewer.scene.primitives.add(qhdxys)
var qhdgysh = new Cesium.Cesium3DTileset({
url: '/mapapi/ware/upload/qhdgysh/merge_tile.json'
})
viewer.scene.primitives.add(qhdgysh)
},
handleRemove(file) {
if (file.IMGFILES_ID) {
// 已经上传过的 现在删除 记录这个id
@ -375,17 +654,17 @@ export default {
this.dialogFormMap = false
},
initTDT() {
return new Promise((resolve, reject) => {
if (window.T) {
console.log('天地图初始化成功...')
resolve(window.T)
reject('error')
} else {
console.info(999999999)
}
}).then(T => {
window.T = T
})
// return new Promise((resolve, reject) => {
// if (window.T) {
// console.log('天地图初始化成功...')
// resolve(window.T)
// reject('error')
// } else {
// console.info(999999999)
// }
// }).then(T => {
// window.T = T
// })
},
/**
* 初始化地图
@ -395,7 +674,8 @@ export default {
*/
initMap(lng, lat, zoom) {
this.initTDT().then((T) => {
const imageURL = 'http://t0.tianditu.gov.cn/img_w/wmts?' + 'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' + '&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=e8a16137fd226a62a23cc7ba5c9c78ce'
// const imageURL = 'http://t0.tianditu.gov.cn/img_w/wmts?' + 'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' + '&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=e8a16137fd226a62a23cc7ba5c9c78ce'
const imageURL = 'http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + tiandituTk
// 创建自定义图层对象
this.lay = new window.T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 })
// 初始化地图对象
@ -436,8 +716,12 @@ export default {
handleMap() {
this.dialogFormMap = true
this.$nextTick(() => {
if (!this.map) this.initMap(this.LONGTITUDE, this.LATITUDE, 16)
else this.initCenter(this.LONGTITUDE, this.LATITUDE, 16)
if (!this.map){
// this.initMap(this.LONGTITUDE, this.LATITUDE, 16)
this.initCorpInfo()
} else {
this.initCenter(this.LONGTITUDE, this.LATITUDE, 16)
}
})
},
confirm() {
@ -670,7 +954,7 @@ export default {
</script>
<style>
#map {
#cesiumContainer {
width: 1000px;
height: 500px;
}

21
src/views/map/index.vue
View File

@ -749,16 +749,17 @@ export default {
checkImg: require('../../assets/map/gangkou_index/buttom/ico23_on.png'),
containAuthorization: [],
eliminateAuthorization: []
},
{
label: '压力管道',
dialog_width: '1200px',
check: false,
img: require('../../assets/map/gangkou_index/buttom/ico24.png'),
checkImg: require('../../assets/map/gangkou_index/buttom/ico24_on.png'),
containAuthorization: [],
eliminateAuthorization: []
}
// ,
// {
// label: '压力管道',
// dialog_width: '1200px',
// check: false,
// img: require('../../assets/map/gangkou_index/buttom/ico24.png'),
// checkImg: require('../../assets/map/gangkou_index/buttom/ico24_on.png'),
// containAuthorization: [],
// eliminateAuthorization: []
// }
// {
// label: '锅炉',
// dialog_width: '1200px',
@ -1347,7 +1348,7 @@ export default {
// eslint-disable-next-line no-unused-vars
var _this = this
const collection = new Cesium.CustomDataSource('clickEntityCollection')
console.info()
poin.forEach(item => {
if (!this.poinEntity.hasOwnProperty(item.id)) {
const entity = drag.addEntity(item)

12
static/maplocation.html
View File

@ -8,13 +8,13 @@
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>hello-jsmap</title>
<script src="http://192.168.0.31:8089/joysuch/jsmap/jsmap.js" type="text/javascript"></script>
<link type="text/css" href="http://192.168.0.31:8089/joysuch/jsmap/jsmap.css" rel="stylesheet"/>
<script src="http://192.168.192.201:7024/joysuch/jsmap/jsmap.js" type="text/javascript"></script>
<link type="text/css" href="http://192.168.192.201:7024/joysuch/jsmap/jsmap.css" rel="stylesheet"/>
<!-- <script src="http://mapdemo.joysuch.com/lib/jsmap/jsmap.js" type="text/javascript"></script>-->
<!-- <link type="text/css" href="http://mapdemo.joysuch.com/lib/jsmap/jsmap.css" rel="stylesheet"/>-->
<link rel="stylesheet" href="http://192.168.0.31:8089/joysuch/LocalAssets/css/animation/pop.css">
<link rel="stylesheet" href="http://192.168.0.31:8089/joysuch/LocalAssets/css/animation/loading.css">
<link rel="stylesheet" href="http://192.168.0.31:8089/joysuch/LocalAssets/css/dom.css">
<link rel="stylesheet" href="http://192.168.192.201:7024/joysuch/LocalAssets/css/animation/pop.css">
<link rel="stylesheet" href="http://192.168.192.201:7024/joysuch/LocalAssets/css/animation/loading.css">
<link rel="stylesheet" href="http://192.168.192.201:7024/joysuch/LocalAssets/css/dom.css">
<style>
.jsmap-animation-point,
.jsmap-animation-point:after,
@ -366,7 +366,7 @@
mapType: jsmap.JSMapType.MAP_3D,
//必要，地图路径
// mapServerURL: 'http://mapdemo.joysuch.com',
mapServerURL: 'http://192.168.0.31:8089/joysuch/jsmap/data/map',
mapServerURL: 'http://192.168.192.201:7024/joysuch/jsmap/data/map',
openingAnimation: false,
enableLighting: true,
enableShadows: true,