388 lines
17 KiB
HTML
388 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"},
|
|||
|
|
|
|||
|
|
],
|
|||
|
|
colorMap:{
|
|||
|
|
"长江干流流域":"rgb(247, 222, 120)",
|
|||
|
|
"汉江流域":"rgb(162, 225, 211)",
|
|||
|
|
"清江流域":"rgb(198, 221, 113)",
|
|||
|
|
|
|||
|
|
"乌江片区":"rgb(125, 174, 125)",
|
|||
|
|
"清江片区":"rgb(141, 217, 152)",
|
|||
|
|
"沅江片区":"rgb(166, 217, 122)",
|
|||
|
|
|
|||
|
|
"三峡库区":"rgb(224, 191, 148)",
|
|||
|
|
"黄柏河片区":"rgb(240, 231, 192)",
|
|||
|
|
"荆南四河片区":"rgb(239, 234, 138)",
|
|||
|
|
|
|||
|
|
"沮漳河片区":"rgb(246, 204, 188)",
|
|||
|
|
|
|||
|
|
"四湖片区":"rgb(246, 223 ,188)",
|
|||
|
|
"鄂东南片区":"rgb(242, 196, 186)",
|
|||
|
|
"富水片区":"rgb(209 ,145 ,135)",
|
|||
|
|
"鄂东五河片区":"rgb(222, 191, 136)",
|
|||
|
|
|
|||
|
|
"府澴河片区":"rgb(226, 169, 165)",
|
|||
|
|
"汉江下游片区":"rgb(145, 203, 247)",
|
|||
|
|
"唐白河片区":"rgb(126, 229, 236)",
|
|||
|
|
"汉江中游片区":"rgb(190, 216, 233)",
|
|||
|
|
"汉江丹库以上片区":"rgb(168, 189, 241)",
|
|||
|
|
},
|
|||
|
|
outlineColor:"rgb( 142, 21, 21)",
|
|||
|
|
water12:"rgb( 16, 101, 208 )",
|
|||
|
|
water3:"rgb( 117, 167, 232 )",
|
|||
|
|
regionMap:{
|
|||
|
|
"长江干流流域":{coord:[],color:"rgb(247, 222, 120)"},
|
|||
|
|
"汉江流域":{coord:[],color:"rgb(162, 225, 211)"},
|
|||
|
|
"清江流域":{coord:[],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)"},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
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(level2Features&&level2Features.features.length){
|
|||
|
|
level2Features.features.forEach(feature=>{
|
|||
|
|
// console.log(feature)
|
|||
|
|
// 绘制面
|
|||
|
|
this.createOutlinePolygon(
|
|||
|
|
this.boundaryEntities,
|
|||
|
|
feature.geometry,
|
|||
|
|
this.regionMap[feature.properties.region]["color"],
|
|||
|
|
this.outlineColor,
|
|||
|
|
0.8,
|
|||
|
|
true
|
|||
|
|
)
|
|||
|
|
// 添加标注
|
|||
|
|
this.createFeatureLabel(
|
|||
|
|
this.labelCollection,
|
|||
|
|
feature.geometry,
|
|||
|
|
feature.properties.region
|
|||
|
|
)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if(level1Features&&level1Features.features.length){
|
|||
|
|
level1Features.features.forEach(feature=>{
|
|||
|
|
// 绘制面
|
|||
|
|
this.createOutlinePolygon(
|
|||
|
|
this.riverCollection,
|
|||
|
|
feature.geometry,
|
|||
|
|
"#fff",
|
|||
|
|
this.outlineColor,
|
|||
|
|
2,
|
|||
|
|
false
|
|||
|
|
)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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_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_osm&&hubei_osm.features.length){
|
|||
|
|
hubei_osm.features.forEach(feature=>{
|
|||
|
|
this.addPolygonFeature(
|
|||
|
|
this.riverCollection,
|
|||
|
|
feature.geometry,
|
|||
|
|
this.water3,
|
|||
|
|
feature.properties
|
|||
|
|
)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},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 Bolder",
|
|||
|
|
fillColor: Cesium.Color.BLACK,
|
|||
|
|
horizontalOrigin :Cesium.HorizontalOrigin.CENTER,
|
|||
|
|
verticalOrigin:Cesium.VerticalOrigin.CENTER,
|
|||
|
|
// showBackground : true,
|
|||
|
|
// backgroundColor : new Cesium.Color(0.165, 0.165, 0.165, 0.8),
|
|||
|
|
// backgroundPadding : new Cesium.Cartesian2(1, 1),
|
|||
|
|
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>
|