389 lines
17 KiB
HTML
389 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<!-- Use correct character set. -->
|
||
<meta charset="utf-8" />
|
||
<!-- Tell IE to use the latest, best version. -->
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
|
||
<meta
|
||
name="viewport"
|
||
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
|
||
/>
|
||
<title>Learning Cesium!</title>
|
||
<script src="./Build/Cesium/Cesium.js"></script>
|
||
<script src="./js/turf.min.js"></script>
|
||
<style>
|
||
@import url(./Build/Cesium/Widgets/widgets.css);
|
||
html,
|
||
body,
|
||
#app,
|
||
#cesiumContainer {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
</style>
|
||
<!-- 引入样式 -->
|
||
<link rel="stylesheet" href="./js/elementui/index.css" />
|
||
<!-- import Vue before Element -->
|
||
<script src="./js/vue2710.js"></script>
|
||
<!-- import JavaScript -->
|
||
<script src="./js/elementui/index.js"></script>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<div id="cesiumContainer"></div>
|
||
</div>
|
||
|
||
<script>
|
||
Cesium.Ion.defaultAccessToken =
|
||
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
|
||
|
||
var geoserverUrl = "http://121.33.231.74:5097/geoserver/"
|
||
var workspace = "iot";
|
||
new Vue({
|
||
el: "#app",
|
||
data: {
|
||
mapInfo:[
|
||
{name:"riverLevel1",url:geoserverUrl+workspace+"/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=iot:hubeilevel1&maxFeatures=9999&outputFormat=application/json"},
|
||
// {name:"riverLevel2",url:geoserverUrl+workspace+"/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=iot:hubeilevel2&maxFeatures=9999&outputFormat=application/json"},
|
||
|
||
{name:"hubei_hyd1_4l",url:geoserverUrl+workspace+"/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=iot:hubei_hyd1_4l&maxFeatures=9999&outputFormat=application/json"},
|
||
{name:"hubei_hyd1_4p",url:geoserverUrl+workspace+"/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=iot:hubei_hyd1_4p&maxFeatures=9999&outputFormat=application/json"},
|
||
{name:"hubei_hyd2_4l",url:geoserverUrl+workspace+"/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=iot:hubei_hyd2_4l&maxFeatures=9999&outputFormat=application/json"},
|
||
{name:"hubei_hyd2_4p",url:geoserverUrl+workspace+"/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=iot:hubei_hyd2_4p&maxFeatures=9999&outputFormat=application/json"},
|
||
|
||
// {name:"hubei_osm",url:geoserverUrl+workspace+"/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=iot:hubei_osm&maxFeatures=9999&outputFormat=application/json"},
|
||
|
||
],
|
||
regionMap:{
|
||
"长江干流流域":{coord:[114.721069,30.855776],color:"rgb(247, 222, 120)"},
|
||
"汉江流域":{coord:[111.319383,32.038113],color:"rgb(162, 225, 211)"},
|
||
"清江流域":{coord:[109.483509,30.107393],color:"rgb(198, 221, 113)"},
|
||
|
||
"乌江片区":{coord:[108.870317,29.909681],color:"rgb(125, 174, 125)"},
|
||
"清江片区":{coord:[110.050511,29.912557],color:"rgb(141, 217, 152)"},
|
||
"沅江片区":{coord:[110.210396,30.451736],color:"rgb(166, 217, 122)"},
|
||
|
||
"三峡库区":{coord:[110.548268,31.133949],color:"rgb(224, 191, 148)"},
|
||
"黄柏河片区":{coord:[111.337632,30.918915],color:"rgb(240, 231, 192)"},
|
||
"荆南四河片区":{coord:[111.927106,30.038710],color:"rgb(239, 234, 138)"},
|
||
|
||
"沮漳河片区":{coord:[111.835033,31.079421],color:"rgb(246, 204, 188)"},
|
||
|
||
"四湖片区":{coord:[112.833908,30.004803],color:"rgb(246, 223 ,188)"},
|
||
"鄂东南片区":{coord:[114.246797,29.964106],color:"rgb(242, 196, 186)"},
|
||
"富水片区":{coord:[114.794233,29.674242],color:"rgb(209 ,145 ,135)"},
|
||
"鄂东五河片区":{coord:[115.316260,30.830389],color:"rgb(222, 191, 136)"},
|
||
|
||
"府澴河片区":{coord:[113.740907,31.576125],color:"rgb(226, 169, 165)"},
|
||
"汉江下游片区":{coord:[113.321659,30.668325],color:"rgb(145, 203, 247)"},
|
||
"唐白河片区":{coord:[112.329638,32.207771],color:"rgb(126, 229, 236)"},
|
||
"汉江中游片区":{coord:[111.721511,31.839883],color:"rgb(190, 216, 233)"},
|
||
"汉江丹库以上片区":{coord:[110.071016,32.370220],color:"rgb(168, 189, 241)"},
|
||
},
|
||
outlineColor:"rgb( 142, 21, 21)",
|
||
water12:"rgb( 16, 101, 208 )",
|
||
water3:"rgb( 117, 167, 232 )",
|
||
},
|
||
methods: {
|
||
initViewer() {
|
||
var viewer = new Cesium.Viewer("cesiumContainer", {
|
||
geocoder: false, //位置查找
|
||
homeButton: false, //视图返回初始位置
|
||
sceneModePicker: false, //视角选择器
|
||
baseLayerPicker:false,//底图选择器
|
||
navigationHelpButton: false, //导航帮助按钮
|
||
animation: false, //动画控制器
|
||
creditContainer:document.createElement("div"),//版权显示
|
||
timeline: false, //时间线
|
||
fullscreenButton: false, //全屏控件
|
||
vrButton: false,
|
||
infoBox: false,
|
||
selectionIndicator: false,
|
||
imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
|
||
url: 'http://t0.tianditu.gov.cn/vec_w/wmts?tk=ea3530e6803b44025cfa81500eaae01f',
|
||
layer:'vec',
|
||
style:'default',
|
||
tileMatrixSetID:'w',
|
||
format:'tiles',
|
||
maximumLevel: 18
|
||
})
|
||
});
|
||
window.viewer = viewer;
|
||
this.viewer = viewer;
|
||
|
||
// 创建数据源
|
||
this.boundaryCollection = new Cesium.PrimitiveCollection();
|
||
this.riverCollection = new Cesium.PrimitiveCollection();
|
||
this.labelCollection = new Cesium.LabelCollection();
|
||
|
||
viewer.scene.primitives.add(this.boundaryCollection);
|
||
viewer.scene.primitives.add(this.riverCollection);
|
||
viewer.scene.primitives.add(this.labelCollection);
|
||
|
||
// 自定义数据源（ CustomDataSource ），其 entities 属性是一个 EntityCollection
|
||
this.boundaryDataSource = new Cesium.CustomDataSource("boundary");
|
||
viewer.dataSources.add(this.boundaryDataSource);
|
||
|
||
this.initEvent(viewer);
|
||
},
|
||
initEvent(viewer){
|
||
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
||
handler.setInputAction(function (evt) {
|
||
//捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
|
||
var cartesian3 = viewer.camera.pickEllipsoid(evt.position);
|
||
// let cartesian3 = viewer.scene.pickPosition(evt.position);
|
||
if (cartesian3) {
|
||
//将笛卡尔三维坐标转为地图坐标（弧度）
|
||
var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian3);
|
||
//将地图坐标（弧度）转为十进制的度数
|
||
var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
|
||
var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
|
||
var alti_String = (viewer.camera.positionCartographic.height / 1000).toFixed(2);
|
||
console.log(log_String+","+lat_String)
|
||
}
|
||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
||
},
|
||
async initData(){
|
||
// 获取wfs矢量数据
|
||
let promiseArr = [];
|
||
this.mapInfo.forEach(item=>{
|
||
promiseArr.push(fetch(item.url).then(res=>res.json()))
|
||
})
|
||
let results = await Promise.allSettled(promiseArr);
|
||
// console.log(results)
|
||
|
||
this.mapData = {};
|
||
for(let i=0;i<results.length;i++){
|
||
this.mapData[this.mapInfo[i].name] = results[i].value;
|
||
}
|
||
},
|
||
drawShap(){
|
||
let level1Features = this.mapData["riverLevel1"];
|
||
let level2Features = this.mapData["riverLevel2"];
|
||
|
||
let hubei_hyd1_4l = this.mapData["hubei_hyd1_4l"];
|
||
let hubei_hyd1_4p = this.mapData["hubei_hyd1_4p"];
|
||
let hubei_hyd2_4l = this.mapData["hubei_hyd2_4l"];
|
||
let hubei_hyd2_4p = this.mapData["hubei_hyd2_4p"];
|
||
|
||
// let hubei_osm = this.mapData["hubei_osm"];
|
||
|
||
if(level1Features&&level1Features.features.length){
|
||
level1Features.features.forEach(feature=>{
|
||
// 绘制面
|
||
this.createOutlinePolygon(
|
||
this.riverCollection,
|
||
feature.geometry,
|
||
this.regionMap[feature.properties.region]["color"],
|
||
this.outlineColor,
|
||
1.5,true
|
||
)
|
||
// 添加标注
|
||
this.createFeatureLabel(
|
||
this.labelCollection,
|
||
feature.geometry,
|
||
feature.properties.region
|
||
)
|
||
})
|
||
}
|
||
|
||
// 一级水系
|
||
if(hubei_hyd1_4p&&hubei_hyd1_4p.features.length){
|
||
hubei_hyd1_4p.features.forEach(feature=>{
|
||
this.addPolygonFeature(
|
||
this.riverCollection,
|
||
feature.geometry,
|
||
this.water12,
|
||
feature.properties
|
||
)
|
||
})
|
||
}
|
||
// 一级支流，线要素
|
||
if(hubei_hyd1_4l&&hubei_hyd1_4l.features.length){
|
||
hubei_hyd1_4l.features.forEach(feature=>{
|
||
this.addPolylineFeature(
|
||
this.riverCollection,
|
||
feature.geometry,
|
||
this.water12,
|
||
feature.properties
|
||
)
|
||
})
|
||
}
|
||
// 二级水系
|
||
if(hubei_hyd2_4p&&hubei_hyd2_4p.features.length){
|
||
hubei_hyd2_4p.features.forEach(feature=>{
|
||
this.addPolygonFeature(
|
||
this.riverCollection,
|
||
feature.geometry,
|
||
this.water12,
|
||
feature.properties
|
||
)
|
||
})
|
||
}
|
||
|
||
// 二级支流，线要素
|
||
if(hubei_hyd2_4l&&hubei_hyd2_4l.features.length){
|
||
hubei_hyd2_4l.features.forEach(feature=>{
|
||
this.addPolylineFeature(
|
||
this.riverCollection,
|
||
feature.geometry,
|
||
this.water12,
|
||
feature.properties
|
||
)
|
||
})
|
||
}
|
||
// if(hubei_osm&&hubei_osm.features.length){
|
||
// hubei_osm.features.forEach(feature=>{
|
||
// this.addPolygonFeature(
|
||
// this.riverCollection,
|
||
// feature.geometry,
|
||
// this.water3,
|
||
// feature.properties
|
||
// )
|
||
// })
|
||
// }
|
||
},
|
||
addPolylineFeature(source,geometry,colorStr,id){
|
||
source.add(new Cesium.Primitive({
|
||
geometryInstances : new Cesium.GeometryInstance({
|
||
geometry: new Cesium.PolylineGeometry({
|
||
positions : Cesium.Cartesian3.fromDegreesArray(geometry.coordinates[0].flat(2)),
|
||
width : 1.0,
|
||
arcType:Cesium.ArcType.RHUMB,//ArcType. GEODESIC， NONE ， RHUMB
|
||
// colors:[Cesium.Color.VIOLET,Cesium.Color.WHEAT,Cesium.Color.THISTLE],//指定线段每段的颜色，数量必须与线段数相同
|
||
}),
|
||
attributes : {
|
||
// 通过attributes属性统一指定线段颜色
|
||
color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString(colorStr?colorStr:"red"))
|
||
},
|
||
id:id
|
||
}),
|
||
appearance : new Cesium.PolylineColorAppearance({
|
||
translucent : false,
|
||
})
|
||
}));
|
||
},
|
||
addPolygonFeature(source,geometry,colorStr,id){
|
||
let geometryType = geometry.type;
|
||
let coord = geometry.coordinates;
|
||
if(geometryType == "MultiPolygon"){
|
||
let polygon = coord[0];
|
||
let outBoundary = new Cesium.PolygonHierarchy( Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2)))
|
||
source.add(new Cesium.Primitive({
|
||
geometryInstances : new Cesium.GeometryInstance({
|
||
geometry: new Cesium.PolygonGeometry({
|
||
polygonHierarchy : outBoundary
|
||
|
||
}),
|
||
id:id
|
||
}),
|
||
appearance : new Cesium.EllipsoidSurfaceAppearance({
|
||
material: new Cesium.Material({
|
||
fabric : {
|
||
type : 'Color',
|
||
uniforms : {
|
||
color : Cesium.Color.fromCssColorString(colorStr?colorStr:"red")
|
||
}
|
||
}
|
||
}),
|
||
faceForward : true
|
||
})
|
||
}));
|
||
}
|
||
},
|
||
createGeometryPolygon(source,geometry,colorStr,id){
|
||
let polygon = null;
|
||
if(geometry.type=="MultiPolygon"){
|
||
// 目前只取外环
|
||
polygon = new Cesium.PolygonGeometry({
|
||
polygonHierarchy : new Cesium.PolygonHierarchy(
|
||
Cesium.Cartesian3.fromDegreesArray(geometry.coordinates[0].flat(2))
|
||
),
|
||
width:100
|
||
});
|
||
}else{
|
||
polygon = new Cesium.PolygonGeometry({
|
||
polygonHierarchy : new Cesium.PolygonHierarchy(
|
||
Cesium.Cartesian3.fromDegreesArray(geometry.coordinates.flat(2))
|
||
)
|
||
});
|
||
}
|
||
const polygonGeometry = Cesium.PolygonGeometry.createGeometry(polygon);
|
||
|
||
source.add(new Cesium.Primitive({
|
||
geometryInstances : new Cesium.GeometryInstance({
|
||
geometry:polygonGeometry,
|
||
id:id
|
||
}),
|
||
appearance : new Cesium.MaterialAppearance({
|
||
material : new Cesium.Material({
|
||
fabric : {
|
||
type : 'Color',
|
||
uniforms : {
|
||
color : Cesium.Color.fromCssColorString(colorStr?colorStr:"red")
|
||
}
|
||
}
|
||
}),
|
||
faceForward : true
|
||
})
|
||
}));
|
||
},
|
||
//创建轮廓线，使用Entity实现
|
||
createOutlinePolygon(source,geometry,colorStr,outlineColorStr,outlineWidth,isFill){
|
||
// 目前MultiPolygon只取外环
|
||
let coords = geometry.type=="MultiPolygon"?geometry.coordinates[0]:geometry.coordinates;
|
||
|
||
let entity = this.boundaryDataSource.entities.add({
|
||
polygon: {
|
||
hierarchy: Cesium.Cartesian3.fromDegreesArray(coords.flat(2)),
|
||
material: Cesium.Color.fromCssColorString(colorStr?colorStr:"red"),
|
||
},
|
||
});
|
||
entity.polygon.fill = isFill;
|
||
entity.polygon.outlineWidth = outlineWidth;
|
||
entity.polygon.outline = false;
|
||
entity.polygon.outlineColor = Cesium.Color.RED;
|
||
entity.polyline = {
|
||
positions: entity.polygon.hierarchy._value.positions,
|
||
width: entity.polygon.outlineWidth,
|
||
material: Cesium.Color.fromCssColorString(outlineColorStr?outlineColorStr:"red"),
|
||
}
|
||
},
|
||
createFeatureLabel(source,geometry,labelText){
|
||
console.log(labelText)
|
||
// 计算中心点
|
||
// let centroid = turf.center(geometry)
|
||
let coord = this.regionMap[labelText]["coord"];
|
||
this.labelCollection.add({
|
||
position : Cesium.Cartesian3.fromDegrees(coord[0],coord[1]),
|
||
text : labelText,
|
||
font : "14px Arial Bold",
|
||
fillColor: Cesium.Color.BLACK,
|
||
horizontalOrigin :Cesium.HorizontalOrigin.CENTER,
|
||
outlineColor: Cesium.Color.WHITE,
|
||
outlineWidth: 2,
|
||
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
||
})
|
||
}
|
||
},
|
||
|
||
created(){
|
||
// this.initData();
|
||
},
|
||
async mounted() {
|
||
this.initViewer();
|
||
await this.initData();
|
||
|
||
this.drawShap();
|
||
viewer.zoomTo(this.boundaryDataSource)
|
||
},
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|