wangmengqi1 #11
|
|
@ -3,7 +3,8 @@ module.exports = {
|
||||||
env: {
|
env: {
|
||||||
browser: true,
|
browser: true,
|
||||||
node: true,
|
node: true,
|
||||||
es6: true
|
es6: true,
|
||||||
|
'vue/setup-compiler-macros': true
|
||||||
},
|
},
|
||||||
extends: [
|
extends: [
|
||||||
'plugin:vue/vue3-recommended',
|
'plugin:vue/vue3-recommended',
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
@ -5,9 +5,12 @@
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite App</title>
|
<title>Vite App</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.21/skins/default/aliplayer-min.css" />
|
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.21/skins/default/aliplayer-min.css" />
|
||||||
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.21/aliplayer-h5-min.js"></script>
|
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.21/aliplayer-h5-min.js"></script>
|
||||||
|
<!-- Include the CesiumJS JavaScript and CSS files -->
|
||||||
|
<script src="https://cesium.com/downloads/cesiumjs/releases/1.101/Build/Cesium/Cesium.js"></script>
|
||||||
|
<link href="https://cesium.com/downloads/cesiumjs/releases/1.101/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,6 +1,9 @@
|
||||||
{
|
{
|
||||||
"name": "vite_vue3",
|
"name": "vite_vue3",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
|
"globals": {
|
||||||
|
"Cesium": true
|
||||||
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite --mode localhost",
|
"dev": "vite --mode localhost",
|
||||||
"build:test": "vite build --mode test && esno ./build/script",
|
"build:test": "vite build --mode test && esno ./build/script",
|
||||||
|
|
@ -14,12 +17,14 @@
|
||||||
"@vicons/ionicons5": "^0.10.0",
|
"@vicons/ionicons5": "^0.10.0",
|
||||||
"ali-oss": "^6.17.1",
|
"ali-oss": "^6.17.1",
|
||||||
"axios": "^0.26.1",
|
"axios": "^0.26.1",
|
||||||
|
"cesium": "^1.102.0",
|
||||||
"dayjs": "^1.11.2",
|
"dayjs": "^1.11.2",
|
||||||
"mockjs": "^1.1.0",
|
"mockjs": "^1.1.0",
|
||||||
"pinia": "^2.0.13",
|
"pinia": "^2.0.13",
|
||||||
"pinia-plugin-persist": "^1.0.0",
|
"pinia-plugin-persist": "^1.0.0",
|
||||||
"tinymce": "^5.10.2",
|
"tinymce": "^5.10.2",
|
||||||
"vue": "^3.2.16",
|
"vue": "^3.2.16",
|
||||||
|
"vue-jstree": "^2.1.6",
|
||||||
"vue-router": "^4.0.14",
|
"vue-router": "^4.0.14",
|
||||||
"vuedraggable": "^4.1.0"
|
"vuedraggable": "^4.1.0"
|
||||||
},
|
},
|
||||||
|
|
@ -42,6 +47,7 @@
|
||||||
"unocss": "^0.16.4",
|
"unocss": "^0.16.4",
|
||||||
"unplugin-vue-components": "^0.18.5",
|
"unplugin-vue-components": "^0.18.5",
|
||||||
"vite": "^2.6.4",
|
"vite": "^2.6.4",
|
||||||
|
"vite-plugin-cesium": "^1.2.22",
|
||||||
"vite-plugin-html": "^2.1.2",
|
"vite-plugin-html": "^2.1.2",
|
||||||
"vite-plugin-mock": "^2.9.6",
|
"vite-plugin-mock": "^2.9.6",
|
||||||
"vite-plugin-vue-setup-extend": "^0.4.0"
|
"vite-plugin-vue-setup-extend": "^0.4.0"
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
29
src/App.vue
29
src/App.vue
|
|
@ -7,29 +7,16 @@
|
||||||
* @FilePath: \gis\src\App.vue
|
* @FilePath: \gis\src\App.vue
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<n-config-provider :locale="zhCN" :date-locale="dateZhCN" inline-theme-disabled :theme-overrides="themeOverrides">
|
<dash-board/>
|
||||||
<n-loading-bar-provider>
|
|
||||||
<loading-bar />
|
|
||||||
<n-dialog-provider>
|
|
||||||
<dialog-content />
|
|
||||||
<n-message-provider>
|
|
||||||
<message-content />
|
|
||||||
</n-message-provider>
|
|
||||||
<router-view v-slot="{ Component }">
|
|
||||||
<component :is="Component" />
|
|
||||||
</router-view>
|
|
||||||
</n-dialog-provider>
|
|
||||||
</n-loading-bar-provider>
|
|
||||||
</n-config-provider>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script>
|
||||||
import { zhCN, dateZhCN } from 'naive-ui'
|
import dashBoard from './views/dashboard/index.vue'
|
||||||
import themeOverrides from '@/utils/ui/theme.js'
|
export default {
|
||||||
import loadingBar from '@/components/LoadingBar/index.vue'
|
components:{
|
||||||
import messageContent from '@/components/Message/index.vue'
|
dashBoard
|
||||||
import dialogContent from '@/components/Dialog/index.vue'
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 313 B |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
|
|
@ -14,6 +14,7 @@ function setupApp() {
|
||||||
setupRouter(app)
|
setupRouter(app)
|
||||||
|
|
||||||
app.mount('#app')
|
app.mount('#app')
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
setupApp()
|
setupApp()
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,476 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div id='cesiumContainer'>
|
||||||
首页
|
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 底图切换按钮 -->
|
||||||
|
<div class="maptab">
|
||||||
|
<div class="maptabs_box" :style="cursor" @mouseover="expandMapList" @mouseleave="collapseMapList">
|
||||||
|
<div class="layer1" :style="{ backgroundImage: 'url(' + mapList[0].bg + ')' }" @click="switchMap(0)">
|
||||||
|
<div class="title">{{ mapList[0].name }}</div>
|
||||||
|
</div>
|
||||||
|
<div :class="[expand ? 'layer3' : 'layer2']" :style="{ backgroundImage: 'url(' + mapList[1].bg + ')' }" @click="switchMap(1)">
|
||||||
|
<div class="title">{{ mapList[1].name }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 工具栏 -->
|
||||||
|
<div class="tools">
|
||||||
|
<div class="item" @click="zoomIn">
|
||||||
|
<img src="@/assets/img/zoomIn.png" />
|
||||||
|
</div>
|
||||||
|
<div class="item" @click="zoomOut">
|
||||||
|
<img src="@/assets/img/zoomout.png" />
|
||||||
|
</div>
|
||||||
|
<div class="item" @click="reset">
|
||||||
|
<img src="@/assets/img/located.png" />
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<img src="@/assets/img/measureLength.png" />
|
||||||
|
</div>
|
||||||
|
<div class="item" style="border:0px">
|
||||||
|
<img src="@/assets/img/measureArea.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="maptabs_box" :style="cursor" @mouseover="expandMapList" @mouseleave="collapseMapList">
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="layer1"
|
||||||
|
:style="{backgroundImage:'url('+mapList[0].bg+')'}"
|
||||||
|
@click="switchMap(0)"
|
||||||
|
>
|
||||||
|
<div class="title">{{mapList[0].name}}</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
:class="[expand?'layer3':'layer2']"
|
||||||
|
:style="{backgroundImage:'url('+mapList[1].bg+')'}"
|
||||||
|
@click="switchMap(1)"
|
||||||
|
>
|
||||||
|
<div class="title">{{ mapList[1].name }}</div>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<!-- 图层管理 -->
|
||||||
|
<n-tree block-line :data="treeData" :default-expanded-keys="defaultExpandedKeys" checkable expand-on-click selectable
|
||||||
|
class="layer-tree"></n-tree>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
|
import { ref, reactive, onMounted, toRefs } from 'vue'
|
||||||
|
import axios from 'axios'
|
||||||
|
import { repeat } from 'seemly'
|
||||||
|
import sallitePng from '@/assets/img/satelliteMap.png'
|
||||||
|
import TDMapPng from '@/assets/img/TDMap.png'
|
||||||
|
import AdministrtivePng from '@/assets/img/Administrative.png'
|
||||||
|
|
||||||
|
function createData(level = 4, baseKey = "") {
|
||||||
|
if (!level)
|
||||||
|
return void 0;
|
||||||
|
return repeat(6 - level, void 0).map((_, index) => {
|
||||||
|
const key = "" + baseKey + level + index;
|
||||||
|
return {
|
||||||
|
label: createLabel(level),
|
||||||
|
key,
|
||||||
|
children: createData(level - 1, key)
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function createLabel(level) {
|
||||||
|
if (level === 4)
|
||||||
|
return "图层四";
|
||||||
|
if (level === 3)
|
||||||
|
return "图层三";
|
||||||
|
if (level === 2)
|
||||||
|
return "图层二";
|
||||||
|
if (level === 1)
|
||||||
|
return "图层一";
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'HomePage',
|
name: 'HomePage',
|
||||||
|
components: {
|
||||||
|
|
||||||
|
},
|
||||||
setup(props) {
|
setup(props) {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
viewer: null,
|
||||||
|
mapList: [
|
||||||
|
{ name: '电子图', bg: TDMapPng },
|
||||||
|
{ name: '影像图', bg: sallitePng },
|
||||||
|
{ name: '行政区划图', bg: AdministrtivePng }
|
||||||
|
],
|
||||||
|
cursor: { cursor: '' },
|
||||||
|
expand: false,
|
||||||
|
mapChooseIndex: 0,
|
||||||
|
currentChooseIndex: 0,
|
||||||
|
//测距
|
||||||
|
tempEntities: [],
|
||||||
|
pointNum: 0,
|
||||||
|
floatingPoint: undefined,
|
||||||
|
activeShape: undefined
|
||||||
|
}
|
||||||
function toSystem() {
|
function toSystem() {
|
||||||
router.push({ path: '/login' })
|
router.push({ path: '/login' })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const initMap = () => {
|
||||||
|
//设置相机初始飞到中国上空
|
||||||
|
// Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90)
|
||||||
|
data.viewer = new Cesium.Viewer('cesiumContainer', {
|
||||||
|
// 右上角 搜索
|
||||||
|
geocoder: false,
|
||||||
|
// 右上角 Home
|
||||||
|
homeButton: false,
|
||||||
|
// 右上角 2D/3D切换
|
||||||
|
sceneModePicker: false,
|
||||||
|
// 右上角 地形
|
||||||
|
baseLayerPicker: false,
|
||||||
|
// 右上角 Help
|
||||||
|
navigationHelpButton: false,
|
||||||
|
// 左下角 圆盘动画控件
|
||||||
|
animation: false,
|
||||||
|
// 时间轴
|
||||||
|
timeline: false,
|
||||||
|
// 右小角 全屏
|
||||||
|
fullscreenButton: false,
|
||||||
|
vrButton: false,
|
||||||
|
// 点击要素后提示信息
|
||||||
|
infoBox: false,
|
||||||
|
selectionIndicator: false,
|
||||||
|
// 每个几何实例将只能以3D渲染以节省GPU内存
|
||||||
|
scene3DOnly: false,
|
||||||
|
// 关闭地球光环
|
||||||
|
skyAtmosphere: false,
|
||||||
|
// 初始化底图
|
||||||
|
// imageryProvider: new Cesium.SingleTileImageryProvider({
|
||||||
|
// url: 'https://gisdata.t-aaron.com/GlobalBkLayer.jpg'
|
||||||
|
// }),
|
||||||
|
imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
|
||||||
|
url: "http://t0.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=f634525a82da65f715d168d7ba1899c0",
|
||||||
|
layer: "tdtImgLayer",
|
||||||
|
style: "default",
|
||||||
|
format: "image/jpeg",
|
||||||
|
tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式
|
||||||
|
show: true
|
||||||
|
}),
|
||||||
|
shouldAnimate: true,
|
||||||
|
orderIndependentTranslucency: false,
|
||||||
|
contextOptions: {
|
||||||
|
webgl: {
|
||||||
|
alpha: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
//设置相机飞到中国上空
|
||||||
|
data.viewer.camera.flyTo({
|
||||||
|
destination: Cesium.Cartesian3.fromDegrees(116.435314, 40.960521, 10000000.0),
|
||||||
|
duration: 5
|
||||||
|
})
|
||||||
|
renderDistrict()
|
||||||
|
renderData()
|
||||||
|
// load3dtiles()
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* wms,wmts,tms,wfs服务的加载方法
|
||||||
|
*/
|
||||||
|
const renderDistrict = () => {
|
||||||
|
//加载wms服务
|
||||||
|
const wmsLayer = new Cesium.WebMapServiceImageryProvider({
|
||||||
|
url: 'https://geoserver.t-aaron.com:4080/geoserver/ows',
|
||||||
|
layers: 'liuyang:town',
|
||||||
|
parameters: {
|
||||||
|
service: 'WMS',
|
||||||
|
format: 'image/png',
|
||||||
|
transparent: true//务必设置为true,否则不显示底图
|
||||||
|
}
|
||||||
|
})
|
||||||
|
data.viewer.imageryLayers.addImageryProvider(wmsLayer)
|
||||||
|
|
||||||
|
//加载wmts服务
|
||||||
|
//加载arcgis server发布的wmts服务
|
||||||
|
const arcgisLayer = new Cesium.WebMapTileServiceImageryProvider({
|
||||||
|
url: 'https://basemap.nationalmap.gov/arcgis/rest/services/USGSHydroCached/MapServer/WMTS',
|
||||||
|
layer: 'USGSHydroCached',
|
||||||
|
style: 'default',
|
||||||
|
format: 'image/png',
|
||||||
|
tileMatrixSetID: 'default028mm',
|
||||||
|
maximumLevel: 18,
|
||||||
|
credit: 'U. S. Geological Survey'
|
||||||
|
})
|
||||||
|
data.viewer.imageryLayers.addImageryProvider(arcgisLayer)
|
||||||
|
//加载 geoserver发布的wmts服务
|
||||||
|
const wmtsurl = 'http://192.168.11.35:8999/geoserver/gwc/service/wmts/rest/sz_pg:yaotanghe1/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png';
|
||||||
|
const wmtsLayer = new Cesium.WebMapTileServiceImageryProvider({
|
||||||
|
url: wmtsurl,
|
||||||
|
layer: 'sz_pg:yaotanghe1',
|
||||||
|
style: '',
|
||||||
|
format: "image/png",
|
||||||
|
|
||||||
|
tileMatrixSetID: "EPSG:4326",
|
||||||
|
tilingScheme: new Cesium.GeographicTilingScheme(),
|
||||||
|
// tilingScheme: new Cesium.GeographicTilingScheme()
|
||||||
|
|
||||||
|
//tileMatrixSetID:"EPSG:900913",//不能设置为4326,否则cesium中不显示
|
||||||
|
})
|
||||||
|
data.viewer.imageryLayers.addImageryProvider(wmtsLayer)
|
||||||
|
|
||||||
|
//加载wfs服务
|
||||||
|
axios.get('https://geoserver.t-aaron.com:4080/geoserver/lusong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=lusong%3Arivers&maxFeatures=50&outputFormat=application%2Fjson').then((res) => {
|
||||||
|
var datasource = Cesium.GeoJsonDataSource.load(res.data)
|
||||||
|
|
||||||
|
data.viewer.dataSources.add(datasource)
|
||||||
|
//改变所加载图层的样式
|
||||||
|
}).catch((err) => {
|
||||||
|
console.log(err)
|
||||||
|
})
|
||||||
|
//加载tms服务
|
||||||
|
const urlTemplateImageryProvider = new Cesium.UrlTemplateImageryProvider({
|
||||||
|
url: "https://geoserver.t-aaron.com:4080/geoserver/gwc/service/tms/1.0.0/jiangning%3Avillage-lines@EPSG%3A4326@png",
|
||||||
|
})
|
||||||
|
data.viewer.imageryLayers.addImageryProvider(urlTemplateImageryProvider)
|
||||||
|
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* geojson,wkt,gml等数据的加载
|
||||||
|
*/
|
||||||
|
const renderData = () => {
|
||||||
|
//加载本地geojson/geoserver发布的geojson,本地的文件要放在public目录下
|
||||||
|
data.viewer.dataSources.add(
|
||||||
|
Cesium.GeoJsonDataSource.load(
|
||||||
|
//'https://geoserver.t-aaron.com:4080/geoserver/liuyang/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=liuyang%3Aclassification&maxFeatures=50&outputFormat=application%2Fjson',
|
||||||
|
'/liuyang.json',
|
||||||
|
{
|
||||||
|
stroke: Cesium.Color.White,//边框颜色
|
||||||
|
fill: Cesium.Color.RED.withAlpha(0.5),//填充颜色
|
||||||
|
strokeWidth: 3//边框宽度
|
||||||
|
}
|
||||||
|
)
|
||||||
|
)
|
||||||
|
//加载wkt数据
|
||||||
|
|
||||||
|
}
|
||||||
|
//加载3dtiles数据
|
||||||
|
const load3dtiles = () => {
|
||||||
|
//加载倾斜摄影b3dm格式
|
||||||
|
const palaceTileset = new Cesium.Cesium3DTileset({
|
||||||
|
url: 'https://gisdata.t-aaron.com/b3dm/lusongqu_b3dm/tileset.json',
|
||||||
|
//控制切片视角显示的数量，可调节性能
|
||||||
|
maximumScreenSpaceError: 2,
|
||||||
|
maximumNumberOfLoadedTiles: 100000
|
||||||
|
|
||||||
|
})
|
||||||
|
data.viewer.scene.primitives.add(palaceTileset)
|
||||||
|
//控制模型的位置
|
||||||
|
palaceTileset.readyPromise.then(function (palaceTileset) {
|
||||||
|
data.viewer.scene.primitives.add(palaceTileset)
|
||||||
|
var heightOffset = 0.0
|
||||||
|
var boundingSphere = palaceTileset.boundingSphere//获取3DTiles的bounds范围
|
||||||
|
var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center)//获取3DTiles的范围中心点的弧度
|
||||||
|
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0)//模型本身的位置
|
||||||
|
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset)//模型改变的位置
|
||||||
|
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3())//定义模型的改变状态
|
||||||
|
palaceTileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation)//修改模型的位置
|
||||||
|
data.viewer.zoomTo(palaceTileset, new Cesium.HeadingPitchRange(0.5, -0.2, palaceTileset.boundingSphere.radius * 1.0))
|
||||||
|
})
|
||||||
|
//定位到三维模型
|
||||||
|
data.viewer.zoomTo(palaceTileset)
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 鼠标移入展开地图栏
|
||||||
|
*/
|
||||||
|
const expandMapList = () => {
|
||||||
|
console.log('222')
|
||||||
|
data.cursor = { cursor: 'pointer' }
|
||||||
|
data.expand = true
|
||||||
|
if (data.currentChooseIndex !== data.mapChooseIndex) {
|
||||||
|
data.mapList = data.mapList.reverse()
|
||||||
|
data.currentChooseIndex = 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 鼠标移出收起地图栏
|
||||||
|
*/
|
||||||
|
const collapseMapList = () => {
|
||||||
|
console.log('111')
|
||||||
|
data.cursor = { cursor: '' }
|
||||||
|
data.expand = true
|
||||||
|
if (data.currentChooseIndex !== data.mapChooseIndex) {
|
||||||
|
//切换底图
|
||||||
|
data.mapList = data.mapList.reverse()
|
||||||
|
data.currentChooseIndex = 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//切换底图
|
||||||
|
const switchMap = (index) => {
|
||||||
|
console.log(index, '索引')
|
||||||
|
data.currentChooseIndex = index
|
||||||
|
|
||||||
|
// switch (data.mapList[index].name) {
|
||||||
|
// case '电子图':
|
||||||
|
// data.tdtImgMap.setVisible(false)
|
||||||
|
// data.tdtLineMap.setVisible(true)
|
||||||
|
// break
|
||||||
|
// case '影像图':
|
||||||
|
// data.tdtImgMap.setVisible(true)
|
||||||
|
// data.tdtLineMap.setVisible(false)
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
// 放大地图
|
||||||
|
const zoomIn = () => {
|
||||||
|
data.viewer.camera.zoomIn()
|
||||||
|
// let position=data.viewer.camera.position
|
||||||
|
// let cameraHeight=data.viewer.scene.globe.ellipsoid.cartesianToCartographic(position).height;
|
||||||
|
// //每次缩小20倍,参数可改
|
||||||
|
// let moveRate=cameraHeight/20.0
|
||||||
|
// data.viewer.camera.moveBackward(moveRate)
|
||||||
|
}
|
||||||
|
//缩小地图
|
||||||
|
const zoomOut = () => {
|
||||||
|
data.viewer.camera.zoomOut()
|
||||||
|
// let position=data.viewer.camera.position;
|
||||||
|
// let cameraHeight=data.viewer.scene.globe.ellipsoid.cartesianToCartographic(position).height
|
||||||
|
// //每次缩小20倍,参数可改
|
||||||
|
// let moveRate=cameraHeight/20.0
|
||||||
|
// data.viewer.camera.moveForward(moveRate)
|
||||||
|
}
|
||||||
|
//复位
|
||||||
|
const reset = () => {
|
||||||
|
data.viewer.camera.flyTo({
|
||||||
|
destination: Cesium.Cartesian3.fromDegrees(116.435314, 40.960521, 10000000.0),
|
||||||
|
duration: 5
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//测量空间直线距离
|
||||||
|
//根据类型绘制对象
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initMap()
|
||||||
|
})
|
||||||
return {
|
return {
|
||||||
toSystem
|
toSystem,
|
||||||
|
...toRefs(data),
|
||||||
|
treeData: createData(),
|
||||||
|
defaultExpandedKeys: ref(['40', '41']),
|
||||||
|
collapseMapList,
|
||||||
|
expandMapList,
|
||||||
|
switchMap,
|
||||||
|
zoomIn,
|
||||||
|
zoomOut,
|
||||||
|
reset,
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.tabbar {
|
||||||
|
position: absolute;
|
||||||
|
width: 80px;
|
||||||
|
height: 100px;
|
||||||
|
bottom: 15px;
|
||||||
|
right: 15px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 5px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
span {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图层管理
|
||||||
|
.layer-tree {
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
//底图切换按钮
|
||||||
|
.maptab {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 15px;
|
||||||
|
|
||||||
|
//底部切换按钮
|
||||||
|
.maptabs_box {
|
||||||
|
float: right;
|
||||||
|
position: relative;
|
||||||
|
width: 150px;
|
||||||
|
height: 60px;
|
||||||
|
|
||||||
|
.layer1,
|
||||||
|
.layer2,
|
||||||
|
.layer3 {
|
||||||
|
width: 74px;
|
||||||
|
height: 60px;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
box-shadow: 0 2px 2px rgb(0 0 0 /25%);
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layer1 {
|
||||||
|
right: 0;
|
||||||
|
|
||||||
|
z-index: 1005;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layer2 {
|
||||||
|
right: 10px;
|
||||||
|
|
||||||
|
z-index: 1004;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layer3 {
|
||||||
|
right: 84px;
|
||||||
|
|
||||||
|
z-index: 1004;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
position: absolute;
|
||||||
|
width: 50px;
|
||||||
|
height: 20px;
|
||||||
|
right: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 20px;
|
||||||
|
background: #2770d4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//工具栏
|
||||||
|
.tools {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
bottom: 100px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
padding: 5px;
|
||||||
|
border-bottom: 1px solid rgb(46, 46, 46);
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,133 @@
|
||||||
|
export default {
|
||||||
|
tempEntities: [],
|
||||||
|
pointNum: 0,
|
||||||
|
floatingPoint: undefined,
|
||||||
|
activeShape: undefined,
|
||||||
|
viewer:null,
|
||||||
|
/**
|
||||||
|
* 根据类型绘制对象
|
||||||
|
* @param {} type 绘制类型
|
||||||
|
* @param {*} view cesium view
|
||||||
|
*/
|
||||||
|
draw(type, viewer) {
|
||||||
|
this.viewer=viewer
|
||||||
|
let position = []
|
||||||
|
let tempPoints = []
|
||||||
|
let activeShapePoints = []
|
||||||
|
//创建场景的canvas元素
|
||||||
|
let handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
|
||||||
|
switch(type){
|
||||||
|
//绘制线
|
||||||
|
case 'Polyline':
|
||||||
|
//监听鼠标移动
|
||||||
|
handler.setInputAction(function(movement){
|
||||||
|
if(Cesium.defined(this.floatingPoint)){
|
||||||
|
let newPosition=this.viewer.scene.pickPosition(movement.endPosition)
|
||||||
|
if(Cesium.defined(newPosition)){
|
||||||
|
this.floatingPoint.position.setValue(newPosition)
|
||||||
|
activeShapePoints.pop()
|
||||||
|
activeShapePoints.push(newPosition)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
||||||
|
//左键单击开始画线
|
||||||
|
handler.setInputAction(function(click){
|
||||||
|
let earthPosition=viewer.scene.pickPosition(click.position)
|
||||||
|
if(Cesium.defined(earthPosition)){
|
||||||
|
this.floatingPoint=this.drawPoint(earthPosition)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取位置信息
|
||||||
|
//从相机位置创建一条射线,这条射线通过世界中movement.position像素所在的坐标,返回Cartesian3坐标
|
||||||
|
let ray=this.viewer.camera.getPickRay(click.position)
|
||||||
|
//找到射线与渲染的地球表面之间的交点,射线必须以世界坐标给出,返回Cartesian3坐标
|
||||||
|
position=this.viewer.scene.globe.pick(ray,this.viewer.scene)
|
||||||
|
tempPoints.push(position)//记录点位
|
||||||
|
this.pointNum+=1
|
||||||
|
let tempLength=tempPoints.length//记录点数
|
||||||
|
//调用绘制点的接口
|
||||||
|
let point=this.drawPointLabel(tempPoints[tempPoints.length-1],JSON.stringify(this.pointNum))
|
||||||
|
tempEntities.push(point)
|
||||||
|
//存在超过一个点的时候
|
||||||
|
if(tempLength>1){
|
||||||
|
//绘制线
|
||||||
|
let pointline=this.drawPolyline([temPoints[tempPoints.length-2],tempPoints[tempPoints.length-1]])
|
||||||
|
tempEntities.push(pointline)//保存记录
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//绘制点
|
||||||
|
drawPoint(position){
|
||||||
|
//本质上就是添加一个点的实体
|
||||||
|
return this.viewer.entities.add({
|
||||||
|
position:position,
|
||||||
|
point:{
|
||||||
|
color:Cesium.Color.WHEAT,
|
||||||
|
pixelSize:5,
|
||||||
|
outlineWidth:3,
|
||||||
|
disableDepthTestDistance:Number.POSITIVE_INFINITY,
|
||||||
|
heightReference:Cesium.HeightReference.CLAMP_TO_GROUND//规定贴地
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//绘制面几何对象
|
||||||
|
drawPolygon(positions){
|
||||||
|
if(positions.length<2) return
|
||||||
|
return this.viewer.entities.add({
|
||||||
|
name:'面几何对象',
|
||||||
|
polygon:{
|
||||||
|
hierarchy:positions,
|
||||||
|
material:new Cesium.ColorMaterialProperty(
|
||||||
|
Cesium.Color.WHEAT.withAlpha(0.4)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
drawPointLabel(position,pointNum){
|
||||||
|
//本质上就是添加一个点的实体
|
||||||
|
return this.viewer.entities.add({
|
||||||
|
name:'点几何对象',
|
||||||
|
position:position,
|
||||||
|
point:{
|
||||||
|
color:Cesium.Color.WHEAT,
|
||||||
|
pixelSize:5,
|
||||||
|
outlineWidth:3,
|
||||||
|
disableDepthTestDistance:Number.POSITIVE_INFINITY,
|
||||||
|
heightReference:Cesium.HeightReference.CLAMP_TO_GROUND//规定贴地
|
||||||
|
},
|
||||||
|
label:{
|
||||||
|
text:pointNum,
|
||||||
|
font:'30px sans-serif',
|
||||||
|
fillColor:Cesium.Color.WHITE,
|
||||||
|
outlineWidth:2,
|
||||||
|
backgroundColor:Cesium.Color.BLACK,
|
||||||
|
showBackground:true,
|
||||||
|
style:Cesium.LabelStyle.FILL,
|
||||||
|
verticalOrigin:Cesium.VerticalOrigin.BOTTOM,
|
||||||
|
horizontalOrigin:Cesium.HorizontalOrigin.CENTER
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
drawPolyline(positions){
|
||||||
|
if(positions.length<1) return
|
||||||
|
return this.viewer.entities.add({
|
||||||
|
name:'线几何对象',
|
||||||
|
polyline:{
|
||||||
|
position:positions,
|
||||||
|
width:5.0,
|
||||||
|
material:new Cesium.PolylineGlowMaterialProperty({
|
||||||
|
color:Cesium.Color.WHITE
|
||||||
|
}),
|
||||||
|
depthFailMaterial:new Cesium.PolylineGlowMaterialProperty({
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -16,10 +16,12 @@ export default defineConfig(({ command, mode }) => {
|
||||||
const env = loadEnv(mode, process.cwd())
|
const env = loadEnv(mode, process.cwd())
|
||||||
const viteEnv = wrapperEnv(env)
|
const viteEnv = wrapperEnv(env)
|
||||||
const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY } = viteEnv
|
const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY } = viteEnv
|
||||||
|
|
||||||
return {
|
return {
|
||||||
root,
|
root,
|
||||||
base: VITE_PUBLIC_PATH || '/',
|
base: VITE_PUBLIC_PATH || '/',
|
||||||
plugins: createVitePlugins(viteEnv, isBuild),
|
plugins: createVitePlugins(viteEnv, isBuild),
|
||||||
|
|
||||||
lintOnSave: false,
|
lintOnSave: false,
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue