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