111
This commit is contained in:
parent
e0b93a88c2
commit
bcce2530aa
|
|
@ -3,7 +3,8 @@ module.exports = {
|
|||
env: {
|
||||
browser: true,
|
||||
node: true,
|
||||
es6: true
|
||||
es6: true,
|
||||
'vue/setup-compiler-macros': true
|
||||
},
|
||||
extends: [
|
||||
'plugin:vue/vue3-recommended',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
{
|
||||
}
|
||||
|
|
@ -5,9 +5,12 @@
|
|||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
|
||||
|
||||
<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>
|
||||
<!-- 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>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,6 +1,9 @@
|
|||
{
|
||||
"name": "vite_vue3",
|
||||
"version": "0.0.0",
|
||||
"globals": {
|
||||
"Cesium": true
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "vite --mode localhost",
|
||||
"build:test": "vite build --mode test && esno ./build/script",
|
||||
|
|
@ -14,12 +17,14 @@
|
|||
"@vicons/ionicons5": "^0.10.0",
|
||||
"ali-oss": "^6.17.1",
|
||||
"axios": "^0.26.1",
|
||||
"cesium": "^1.102.0",
|
||||
"dayjs": "^1.11.2",
|
||||
"mockjs": "^1.1.0",
|
||||
"pinia": "^2.0.13",
|
||||
"pinia-plugin-persist": "^1.0.0",
|
||||
"tinymce": "^5.10.2",
|
||||
"vue": "^3.2.16",
|
||||
"vue-jstree": "^2.1.6",
|
||||
"vue-router": "^4.0.14",
|
||||
"vuedraggable": "^4.1.0"
|
||||
},
|
||||
|
|
@ -42,6 +47,7 @@
|
|||
"unocss": "^0.16.4",
|
||||
"unplugin-vue-components": "^0.18.5",
|
||||
"vite": "^2.6.4",
|
||||
"vite-plugin-cesium": "^1.2.22",
|
||||
"vite-plugin-html": "^2.1.2",
|
||||
"vite-plugin-mock": "^2.9.6",
|
||||
"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
|
||||
-->
|
||||
<template>
|
||||
<n-config-provider :locale="zhCN" :date-locale="dateZhCN" inline-theme-disabled :theme-overrides="themeOverrides">
|
||||
<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>
|
||||
<dash-board/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { zhCN, dateZhCN } from 'naive-ui'
|
||||
import themeOverrides from '@/utils/ui/theme.js'
|
||||
import loadingBar from '@/components/LoadingBar/index.vue'
|
||||
import messageContent from '@/components/Message/index.vue'
|
||||
import dialogContent from '@/components/Dialog/index.vue'
|
||||
|
||||
<script>
|
||||
import dashBoard from './views/dashboard/index.vue'
|
||||
export default {
|
||||
components:{
|
||||
dashBoard
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<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.
|
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)
|
||||
|
||||
app.mount('#app')
|
||||
|
||||
}
|
||||
|
||||
setupApp()
|
||||
|
|
|
|||
|
|
@ -1,25 +1,476 @@
|
|||
<template>
|
||||
<div>
|
||||
首页
|
||||
<div id='cesiumContainer'>
|
||||
</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>
|
||||
|
||||
<script>
|
||||
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 {
|
||||
name: 'HomePage',
|
||||
components: {
|
||||
|
||||
},
|
||||
setup(props) {
|
||||
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() {
|
||||
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 {
|
||||
toSystem
|
||||
toSystem,
|
||||
...toRefs(data),
|
||||
treeData: createData(),
|
||||
defaultExpandedKeys: ref(['40', '41']),
|
||||
collapseMapList,
|
||||
expandMapList,
|
||||
switchMap,
|
||||
zoomIn,
|
||||
zoomOut,
|
||||
reset,
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 viteEnv = wrapperEnv(env)
|
||||
const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY } = viteEnv
|
||||
|
||||
return {
|
||||
root,
|
||||
base: VITE_PUBLIC_PATH || '/',
|
||||
plugins: createVitePlugins(viteEnv, isBuild),
|
||||
|
||||
lintOnSave: false,
|
||||
resolve: {
|
||||
alias: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue