master
Swanky
2 years ago
parent
120fb10d65
commit
b0fb0c6512
@ -1,3 +1,15 @@ |
||||
{ |
||||
siteTitle: '红原县草地资源一张图' |
||||
siteTitle: '红原县草地资源一张图', |
||||
xyzImageOpts: { |
||||
maximumLevel: 21, |
||||
url: 'https://map.shuxitech.com/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}', // 多服务器使用 {s} 语法配合 subdomains 来用 |
||||
subdomains: [0, 1, 2, 3, 4, 5, 6, 7] |
||||
}, |
||||
initExtent: [ |
||||
101.86701132942844, 30.431779754918296, 103.7517428402498, 33.31724803784266 |
||||
], |
||||
zoneLayerOpt: { |
||||
geoserverRoot: 'geoserver2', |
||||
layerName: 'ne:c_area' |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,20 @@ |
||||
import { useState, useEffect, useContext } from 'react' |
||||
import GlobalContext from '../../../../utils/GlobalContext'; |
||||
import { MapContext } from '../MapContext'; |
||||
export default function ImageLayer(props) { |
||||
const { xyzImageOpts } = useContext(GlobalContext); |
||||
const { viewer } = useContext(MapContext); |
||||
|
||||
useEffect(() => { |
||||
if (viewer) { |
||||
let l = new window.Cesium.UrlTemplateImageryProvider({ |
||||
...xyzImageOpts |
||||
// maximumLevel: 18,
|
||||
// url: xyzImageryUrl || 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
|
||||
}); |
||||
viewer.imageryLayers.addImageryProvider(l); |
||||
} |
||||
}, [viewer, xyzImageOpts]) |
||||
|
||||
return null; |
||||
} |
||||
@ -0,0 +1,3 @@ |
||||
import React from "react"; |
||||
|
||||
export const MapContext = React.createContext(); |
||||
@ -0,0 +1,26 @@ |
||||
import { useState, useEffect, useContext } from 'react' |
||||
import CommonApi from '../../../../utils/apis/CommonApi'; |
||||
import { addGeoserverLayer, addPolyline } from '../utils/helper'; |
||||
import { MapContext } from '../MapContext'; |
||||
import GlobalContext from '../../../../utils/GlobalContext'; |
||||
export default function ZoneLayer(props) { |
||||
const { viewer } = useContext(MapContext); |
||||
const { zoneLayerOpt, initExtent } = useContext(GlobalContext); |
||||
|
||||
useEffect(() => { |
||||
if (viewer) { |
||||
addGeoserverLayer({ |
||||
...zoneLayerOpt, |
||||
extent: initExtent, |
||||
viewer |
||||
}) |
||||
CommonApi.getSubZone().then(data => { |
||||
addPolyline({ features: data.features, viewer }); |
||||
}) |
||||
} |
||||
}, [viewer, zoneLayerOpt, initExtent]) |
||||
|
||||
return <> |
||||
|
||||
</>; |
||||
} |
||||
@ -0,0 +1,93 @@ |
||||
import { useState, useEffect, useContext } from 'react' |
||||
import { MapContext } from './MapContext'; |
||||
import GlobalContext from '../../../utils/GlobalContext'; |
||||
import ImageLayer from './ImageLayer'; |
||||
import ZoneLayer from './ZoneLayer'; |
||||
|
||||
const Cesium = window.Cesium; |
||||
const turf = window.turf; |
||||
export default function Map(props) { |
||||
const [viewer, setViewer] = useState(); |
||||
|
||||
const { xyzImageOpts } = useContext(GlobalContext) |
||||
|
||||
useEffect(() => { |
||||
setTimeout(() => { |
||||
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkMmZjMmYyZC1lZTkzLTQzYjctYmE2NS01NTQ0NzQyMWZhNDMiLCJpZCI6MTA2NjEsImlhdCI6MTYwNjI4NjY2MH0.PN1-x4vXpC68czogub9X0UDA3GaGE-31PZVbrRyI7CQ'; |
||||
|
||||
const viewer = window.vvv = new Cesium.Viewer("map", { |
||||
animation: false, //是否显示动画控件
|
||||
homeButton: false, //是否显示home键
|
||||
geocoder: false,// 查询
|
||||
baseLayerPicker: false, //是否显示图层选择控件
|
||||
timeline: false, //是否显示时间线控件
|
||||
fullscreenButton: false, //是否全屏显示
|
||||
scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
|
||||
infoBox: false, //是否显示点击要素之后显示的信息
|
||||
sceneModePicker: false, //是否显示投影方式控件 三维/二维
|
||||
navigationHelpButton: false, //是否显示帮助信息控件
|
||||
terrainProvider: new Cesium.CesiumTerrainProvider({ |
||||
url: "/terrain" |
||||
}), |
||||
skyAtmosphere: false, |
||||
contextOptions: { |
||||
webgl: { |
||||
alpha: true, |
||||
}, |
||||
}, |
||||
}); |
||||
viewer.scene.globe.terrainExaggeration = 1.5; |
||||
viewer.imageryLayers.removeAll() |
||||
viewer.scene.skyBox.destroy(); |
||||
viewer.scene.skyBox = undefined; |
||||
viewer.scene.sun.destroy(); |
||||
viewer.scene.sun = undefined; |
||||
viewer.scene.moon.destroy(); |
||||
viewer.scene.moon = undefined; |
||||
// viewer.scene.sun.show = false;
|
||||
// viewer.scene.moon.show = false;
|
||||
// viewer.scene.skyBox.show = false;
|
||||
viewer.scene.undergroundMode = false; |
||||
viewer.scene.fxaa = true; |
||||
viewer.scene.postProcessStages.fxaa.enabled = true; |
||||
viewer._cesiumWidget._creditContainer.style.display = "none"; |
||||
viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString('#041320')// new Cesium.Color(0, 0, 0, 0);
|
||||
viewer.scene.backgroundcolor = Cesium.Color.fromCssColorString('#041320'); |
||||
viewer.scene.screenSpaceCameraController.enableCollisionDetection = true; |
||||
// viewer.scene.skyAtmosphere.show = false
|
||||
// viewer.scene.screenSpaceCameraController.minimumZoomDistance = props.minimumZoomDistance || 1000;
|
||||
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 50000; |
||||
|
||||
viewer.camera.setView({ |
||||
// 设置相机位置
|
||||
destination: { |
||||
x: -1192369.4758368244, |
||||
y: 5416503.688356532, |
||||
z: 3317519.447624021 |
||||
}, |
||||
orientation: { |
||||
heading: 0.06728175754222843, |
||||
pitch: -0.5237859735536086, |
||||
roll: 0.0012702968682072324 |
||||
} |
||||
}); |
||||
setViewer(viewer) |
||||
}, 1000); |
||||
|
||||
}, []) |
||||
|
||||
return <MapContext.Provider value={{ |
||||
viewer |
||||
}}> |
||||
<div id="map" style={{ |
||||
position: "absolute", |
||||
top: 0, |
||||
left: 0, |
||||
bottom: 0, |
||||
right: 0, |
||||
pointerEvents: "auto" |
||||
}}></div> |
||||
<ImageLayer /> |
||||
<ZoneLayer /> |
||||
</MapContext.Provider>; |
||||
} |
||||
@ -0,0 +1,82 @@ |
||||
|
||||
const Cesium = window.Cesium; |
||||
const turf = window.turf; |
||||
export const addPolyline = ({ features, viewer }) => { |
||||
if (features.length === 0) { |
||||
return; |
||||
} |
||||
const instances = features.forEach(f => { |
||||
var coordinates = f.geometry.coordinates; |
||||
|
||||
var polygon = window.turf.polygon(coordinates); |
||||
var center = window.turf.centerOfMass(polygon).geometry.coordinates; |
||||
console.log(center) |
||||
var position = window.Cesium.Cartesian3.fromDegrees(center[0], center[1]) |
||||
viewer.entities.add({ |
||||
position: position, |
||||
heightReference: window.Cesium.HeightReference.CLAMP_TO_GROUND, |
||||
label: { |
||||
font: "normal 18px MicroSoft YaHei", |
||||
clampToGround: true, |
||||
text: f.properties.name, |
||||
fillColor: window.Cesium.Color.WHITE, |
||||
outlineColor: window.Cesium.Color.BLACK, |
||||
outlineWidth: 4, |
||||
heightReference: window.Cesium.HeightReference.CLAMP_TO_GROUND |
||||
}, |
||||
}); |
||||
// const polygonArr = f.geometry.coordinates.toString().split(',').filter(v => {
|
||||
// return v !== '0'
|
||||
// });
|
||||
// const id = 'zone-' + Math.random().toString().substring(3)
|
||||
// viewer.entities.add({
|
||||
// id: id,
|
||||
// name: '',
|
||||
// polyline: {
|
||||
// positions: Cesium.Cartesian3.fromDegreesArray(polygonArr),
|
||||
// width: 5,
|
||||
// clampToGround: true,
|
||||
// // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
||||
// material: Cesium.Color.BLUE
|
||||
// }
|
||||
// })
|
||||
// this.createGroundPolylineGeometryInstance(f);
|
||||
}) |
||||
} |
||||
|
||||
export const addGeoserverLayer = ({ layerName, extent, isWms, viewer, geoserverRoot = 'geoserver' }) => { |
||||
let layer; |
||||
if (isWms) { |
||||
let imageryProvider = new Cesium.WebMapServiceImageryProvider({ |
||||
url: `/${geoserverRoot}/ne/wms`, |
||||
layers: layerName, |
||||
tileWidth: 256, |
||||
tileHeight: 256, |
||||
enablePickFeatures: false, |
||||
parameters: { transparent: true, format: 'image/png' }, |
||||
version: '1.1.0' |
||||
}); |
||||
|
||||
layer = viewer.imageryLayers.addImageryProvider(imageryProvider); |
||||
} else { |
||||
// const geoserverOptions = geoserverOptions;
|
||||
let matrixIds = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', |
||||
'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18', 'EPSG:4326:19', 'EPSG:4326:20', 'EPSG:4326:21']; |
||||
var wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({ |
||||
url: `/${geoserverRoot}/gwc/service/wmts`, |
||||
layer: layerName, |
||||
style: '', |
||||
format: 'image/png', |
||||
tileMatrixSetID: 'EPSG:4326', |
||||
rectangle: Cesium.Rectangle.fromDegrees(...extent), |
||||
tileMatrixLabels: matrixIds, |
||||
tilingScheme: new Cesium.GeographicTilingScheme({ |
||||
numberOfLevelZeroTilesX: 2, |
||||
numberOfLevelZeroTilesY: 1 |
||||
}), |
||||
// subdomains: geoserverOptions?.subdomains || []
|
||||
}); |
||||
layer = viewer.imageryLayers.addImageryProvider(wmtsImageryProvider); |
||||
} |
||||
return layer; |
||||
} |
||||
@ -0,0 +1,34 @@ |
||||
import { Col, Divider, Form, Radio, Row, Select } from 'antd'; |
||||
import { useState, useEffect } from 'react' |
||||
import ZoneSelector from '../../../../common/ZoneSelector'; |
||||
import CdzyApi from '../../../../../utils/apis/CdzyApi'; |
||||
|
||||
|
||||
export default function CdthFilter(props) { |
||||
const [form] = Form.useForm(); |
||||
|
||||
useEffect(() => { |
||||
form.setFieldsValue({ |
||||
area_code: "-1", |
||||
degradation_level: "-1" |
||||
}) |
||||
}, [form]) |
||||
|
||||
return <Form form={form} layout={"vertical"}> |
||||
<Form.Item label="行政地域" name="area_code"> |
||||
<ZoneSelector /> |
||||
</Form.Item> |
||||
<Divider style={{ |
||||
borderColor: "#075C88" |
||||
}} /> |
||||
<Form.Item label="草地退化等级" name="degradation_level"> |
||||
<Radio.Group> |
||||
<Radio value={"-1"}>全部</Radio> |
||||
<Radio value={"未退化"}>未退化</Radio> |
||||
<Radio value={"轻度退化"}>轻度退化</Radio> |
||||
<Radio value={"中度退化"}>中度退化</Radio> |
||||
<Radio value={"重度退化"}>重度退化</Radio> |
||||
</Radio.Group> |
||||
</Form.Item> |
||||
</Form>; |
||||
} |
||||
@ -0,0 +1,39 @@ |
||||
import { Col, Divider, Form, Input, Radio, Row, Select, Space } from 'antd'; |
||||
import { useState, useEffect } from 'react' |
||||
import ZoneSelector from '../../../../common/ZoneSelector'; |
||||
import CdzyApi from '../../../../../utils/apis/CdzyApi'; |
||||
|
||||
|
||||
export default function CdzzyFilter(props) { |
||||
const [form] = Form.useForm(); |
||||
|
||||
useEffect(() => { |
||||
form.setFieldsValue({ |
||||
area_code: "-1" |
||||
}) |
||||
}, [form]) |
||||
|
||||
return <Form form={form} layout={"vertical"}> |
||||
<Space size={24}> |
||||
<Form.Item label="行政地域" name="area_code"> |
||||
<ZoneSelector /> |
||||
</Form.Item> |
||||
<Form.Item label="年份" name="year"> |
||||
<Input style={{ |
||||
width: 100 |
||||
}} /> |
||||
</Form.Item> |
||||
</Space> |
||||
<Divider style={{ |
||||
marginTop: 0, |
||||
borderColor: "#075C88" |
||||
}} /> |
||||
<Form.Item label="占用类型" name="name"> |
||||
<Radio.Group> |
||||
<Radio value={"-1"}>全部</Radio> |
||||
<Radio value={"临时占用"}>临时占用</Radio> |
||||
<Radio value={"永久占用"}>永久占用</Radio> |
||||
</Radio.Group> |
||||
</Form.Item> |
||||
</Form>; |
||||
} |
||||
@ -0,0 +1,37 @@ |
||||
import { Col, Divider, Form, Input, Radio, Row, Select, Space } from 'antd'; |
||||
import { useState, useEffect } from 'react' |
||||
import ZoneSelector from '../../../../common/ZoneSelector'; |
||||
import CdzyApi from '../../../../../utils/apis/CdzyApi'; |
||||
|
||||
|
||||
export default function StxfgcFilter(props) { |
||||
const [form] = Form.useForm(); |
||||
|
||||
useEffect(() => { |
||||
form.setFieldsValue({ |
||||
area_code: "-1" |
||||
}) |
||||
}, [form]) |
||||
|
||||
return <Form form={form} layout={"vertical"}> |
||||
<Space size={24}> |
||||
<Form.Item label="行政地域" name="area_code"> |
||||
<ZoneSelector /> |
||||
</Form.Item> |
||||
<Form.Item label="年份" name="year"> |
||||
<Input style={{ |
||||
width: 100 |
||||
}} /> |
||||
</Form.Item> |
||||
</Space> |
||||
<Divider style={{ |
||||
borderColor: "#075C88", |
||||
marginTop: 0 |
||||
}} /> |
||||
<Form.Item label="项目名称" name="name"> |
||||
<Input style={{ |
||||
width: 250 |
||||
}} /> |
||||
</Form.Item> |
||||
</Form>; |
||||
} |
||||
@ -0,0 +1,26 @@ |
||||
import { Col, Divider, Form, Input, Radio, Row, Select, Space } from 'antd'; |
||||
import { useState, useEffect } from 'react' |
||||
import ZoneSelector from '../../../../common/ZoneSelector'; |
||||
import CdzyApi from '../../../../../utils/apis/CdzyApi'; |
||||
|
||||
|
||||
export default function WlwsbFilter(props) { |
||||
const [form] = Form.useForm(); |
||||
|
||||
useEffect(() => { |
||||
form.setFieldsValue({ |
||||
area_code: "-1" |
||||
}) |
||||
}, [form]) |
||||
|
||||
return <Form form={form} layout={"vertical"}> |
||||
<Form.Item label="设备类型" name="name"> |
||||
<Radio.Group> |
||||
<Radio value={"-1"}>全部</Radio> |
||||
<Radio value={"气象站"}>气象站</Radio> |
||||
<Radio value={"摄像头"}>摄像头</Radio> |
||||
<Radio value={"虫情设备"}>虫情设备</Radio> |
||||
</Radio.Group> |
||||
</Form.Item> |
||||
</Form>; |
||||
} |
||||
@ -0,0 +1,34 @@ |
||||
import { Col, Divider, Form, Radio, Row, Select } from 'antd'; |
||||
import { useState, useEffect } from 'react' |
||||
import ZoneSelector from '../../../../common/ZoneSelector'; |
||||
import CdzyApi from '../../../../../utils/apis/CdzyApi'; |
||||
|
||||
|
||||
export default function YhswFilter(props) { |
||||
const [form] = Form.useForm(); |
||||
|
||||
useEffect(() => { |
||||
form.setFieldsValue({ |
||||
area_code: "-1", |
||||
degradation_level: "-1" |
||||
}) |
||||
}, [form]) |
||||
|
||||
return <Form form={form} layout={"vertical"}> |
||||
<Form.Item label="行政地域" name="area_code"> |
||||
<ZoneSelector /> |
||||
</Form.Item> |
||||
<Divider style={{ |
||||
borderColor: "#075C88" |
||||
}} /> |
||||
<Form.Item label="有害生物类别" name="degradation_level"> |
||||
<Radio.Group> |
||||
<Radio value={"-1"}>全部</Radio> |
||||
<Radio value={"未退化"}>虫害</Radio> |
||||
<Radio value={"轻度退化"}>毒草害</Radio> |
||||
<Radio value={"中度退化"}>地面鼠</Radio> |
||||
<Radio value={"重度退化"}>地下鼠</Radio> |
||||
</Radio.Group> |
||||
</Form.Item> |
||||
</Form>; |
||||
} |
||||
Loading…
Reference in new issue