popovspiridon99/tests
1
0
Fork 0
forked from VinokurovVE/tests
Code Issues Pull Requests Projects Releases Wiki Activity

Map caching, clickhouse test service

Browse Source
This commit is contained in:
cracklesparkle
2024-08-26 16:11:37 +09:00
parent 579bbf7764
commit ab88fd5ea5
20 changed files with 737 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

192
client/src/components/map/MapComponent.tsx
View File

@ -4,32 +4,20 @@ import 'ol/ol.css'
import Map from 'ol/Map'
import View from 'ol/View'
import { Draw, Modify, Select, Snap, Translate } from 'ol/interaction'
import { OSM, Source, Vector as VectorSource, XYZ } from 'ol/source'
import { OSM, Vector as VectorSource, XYZ } from 'ol/source'
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
import { get, Projection, transform, transformExtent } from 'ol/proj'
import { Divider, IconButton, Slider, Stack, Select as MUISelect, MenuItem, Container, Box } from '@mui/material'
import { Adjust, Api, CircleOutlined, DoubleArrow, FeaturedVideoSharp, Handyman, OpenWith, RectangleOutlined, Timeline, Undo, Warning } from '@mui/icons-material'
import { Divider, IconButton, Slider, Stack, Select as MUISelect, MenuItem, Box } from '@mui/material'
import { Adjust, Api, CircleOutlined, OpenWith, RectangleOutlined, Rule, Straighten, Timeline, Undo, Warning } from '@mui/icons-material'
import { Type } from 'ol/geom/Geometry'
import { altKeyOnly, click, doubleClick, noModifierKeys, platformModifierKey, pointerMove, shiftKeyOnly, singleClick } from 'ol/events/condition'
import Feature, { FeatureLike } from 'ol/Feature'
import Style from 'ol/style/Style'
import Fill from 'ol/style/Fill'
import Stroke from 'ol/style/Stroke'
import { FlatStyleLike } from 'ol/style/flat'
import { click, noModifierKeys, shiftKeyOnly } from 'ol/events/condition'
import Feature from 'ol/Feature'
import { SatelliteMapsProvider } from '../../interfaces/map'
import Tile from 'ol/Tile'
import ImageTile from 'ol/ImageTile'
import { createXYZ, TileGrid } from 'ol/tilegrid'
import { TileCoord } from 'ol/tilecoord'
import { register } from 'ol/proj/proj4'
import proj4 from 'proj4'
import { containsExtent } from 'ol/extent'
import { drawingLayerStyle, regionsLayerStyle, selectStyle } from './MapStyles'
import { googleMapsSatelliteSource, regionsLayerSource, yandexMapsSatelliteSource } from './MapSources'
import { mapCenter, mapExtent } from './MapConstants'
const MapComponent = () => {
proj4.defs('EPSG:3395', '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs')
register(proj4);
const yandexProjection = get('EPSG:3395')?.setExtent([-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]) || 'EPSG:3395'
const mapElement = useRef<HTMLDivElement | null>(null)
const [currentTool, setCurrentTool] = useState<Type | null>(null)
@ -37,18 +25,9 @@ const MapComponent = () => {
const [satMapsProvider, setSatMapsProvider] = useState<SatelliteMapsProvider>('yandex')
const gMapsSatSource = useRef<XYZ>(new XYZ({
//url: `https://khms2.google.com/kh/v=984?x={x}&y={y}&z={z}`,
url: `http://localhost:5000/tile/google/{z}/{x}/{y}`,
attributions: 'Map data © Google'
}))
const gMapsSatSource = useRef<XYZ>(googleMapsSatelliteSource)
const yMapsSatSource = useRef<XYZ>(new XYZ({
//url: `https://sat0{1-4}.maps.yandex.net/tiles?l=sat&x={x}&y={y}&z={z}&scale=1&lang=ru_RU&client_id=yandex-web-maps`,
url: `https://core-sat.maps.yandex.net/tiles?l=sat&x={x}&y={y}&z={z}&scale=1&lang=ru_RU`,
attributions: 'Map data © Yandex',
projection: yandexProjection,
}))
const yMapsSatSource = useRef<XYZ>(yandexMapsSatelliteSource)
const satLayer = useRef<TileLayer>(new TileLayer({
source: gMapsSatSource.current,
@ -56,60 +35,27 @@ const MapComponent = () => {
const draw = useRef<Draw | null>(null)
const snap = useRef<Snap | null>(null)
const selectFeature = useRef<Select | null>(null)
const selectFeature = useRef<Select>(new Select({
condition: function (mapBrowserEvent) {
return click(mapBrowserEvent) && shiftKeyOnly(mapBrowserEvent);
},
}))
const drawingLayer = useRef<VectorLayer | null>(null)
const drawingLayerSource = useRef<VectorSource>(new VectorSource())
const regionsLayer = useRef<VectorLayer>(new VectorLayer({
source: new VectorSource({
url: 'sakha_republic.geojson',
format: new GeoJSON(),
}),
style: new Style({
stroke: new Stroke({
color: 'blue',
width: 1,
}),
fill: new Fill({
color: 'rgba(0, 0, 255, 0.1)',
}),
}),
source: regionsLayerSource,
style: regionsLayerStyle
}))
const selectStyle = new Style({
fill: new Fill({
color: 'rgba(0, 0, 255, 0.3)',
}),
stroke: new Stroke({
color: 'rgba(255, 255, 255, 0.7)',
width: 2,
}),
})
const selectedRegion = useRef<Feature | null>(null)
const geoLayer = useRef<VectorLayer | null>(null)
const geoLayerSource = useRef<VectorSource>(new VectorSource({
url: 'https://openlayers.org/data/vector/ecoregions.json',
format: new GeoJSON(),
const baseLayer = useRef<TileLayer>(new TileLayer({
source: new OSM(),
}))
const baseLayer = useRef<TileLayer | null>(null)
const geoLayerStyle: FlatStyleLike = {
'fill-color': ['string', ['get', 'COLOR'], '#eee'],
}
const drawingLayerStyle: FlatStyleLike = {
'fill-color': 'rgba(255, 255, 255, 0.2)',
'stroke-color': '#ffcc33',
'stroke-width': 2,
'circle-radius': 7,
'circle-fill-color': '#ffcc33',
}
const addInteractions = () => {
if (currentTool) {
draw.current = new Draw({
@ -156,60 +102,43 @@ const MapComponent = () => {
}
}
const zoomToFeature = (feature: Feature) => {
const geometry = feature.getGeometry()
const extent = geometry?.getExtent()
if (map.current && extent) {
map.current.getView().fit(extent, {
duration: 300,
maxZoom: 19,
})
}
}
useEffect(() => {
geoLayer.current = new VectorLayer({
background: '#1a2b39',
source: geoLayerSource.current,
style: geoLayerStyle,
})
baseLayer.current = new TileLayer({
source: new OSM(),
})
drawingLayer.current = new VectorLayer({
source: drawingLayerSource.current,
style: drawingLayerStyle,
})
// Center coordinates of Yakutia in EPSG:3857
const center = transform([129.7578941, 62.030804], 'EPSG:4326', 'EPSG:3857')
// Extent for Yakutia in EPSG:4326
const extent4326 = [105.0, 55.0, 170.0, 75.0] // Approximate bounding box
// Transform extent to EPSG:3857
const extent = transformExtent(extent4326, 'EPSG:4326', 'EPSG:3857')
map.current = new Map({
layers: [baseLayer.current, satLayer.current, regionsLayer.current, drawingLayer.current],
target: mapElement.current as HTMLDivElement,
view: new View({
center,
center: mapCenter,
zoom: 2,
extent: [
11388546.533293726,
7061866.113051185,
18924313.434856508,
13932243.11199202
],
maxZoom: 21,
extent: mapExtent,
}),
})
const modify = new Modify({ source: drawingLayerSource.current })
map.current.addInteraction(modify)
selectFeature.current = new Select({
condition: function (mapBrowserEvent) {
return click(mapBrowserEvent) && shiftKeyOnly(mapBrowserEvent);
},
})
map.current.addInteraction(selectFeature.current)
selectFeature.current.on('select', (e) => {
const selectedFeatures = e.selected
console.log(selectedFeatures)
if (selectedFeatures.length > 0) {
selectedFeatures.forEach((feature) => {
drawingLayerSource.current?.removeFeature(feature)
@ -219,26 +148,63 @@ const MapComponent = () => {
loadFeatures()
// Show current selected region
map.current.on('pointermove', function (e) {
if (selectedRegion.current !== null) {
selectedRegion.current.setStyle(undefined)
selectedRegion.current = null
}
if (map.current && selectStyle !== null) {
if (map.current) {
map.current.forEachFeatureAtPixel(e.pixel, function (f) {
selectedRegion.current = f as Feature
selectedRegion.current.setStyle(selectStyle)
if (f.get('district')) {
setStatusText(f.get('district'))
}
return true
})
}
})
map.current.on('click', function (e) {
if (selectedRegion.current !== null) {
selectedRegion.current = null
}
if (map.current) {
map.current.forEachFeatureAtPixel(e.pixel, function (f) {
selectedRegion.current = f as Feature
// Zoom to the selected feature
zoomToFeature(selectedRegion.current)
return true
});
}
})
// Hide regions layer when fully visible
map.current.on('moveend', function () {
const viewExtent = map.current?.getView().calculateExtent(map.current.getSize())
const features = regionsLayer.current.getSource()?.getFeatures()
let isViewCovered = false
features?.forEach((feature: Feature) => {
const featureExtent = feature?.getGeometry()?.getExtent()
if (viewExtent && featureExtent) {
if (containsExtent(featureExtent, viewExtent)) {
isViewCovered = true
}
}
})
regionsLayer.current.setVisible(!isViewCovered)
})
return () => {
map?.current?.setTarget(undefined)
}
@ -259,8 +225,6 @@ const MapComponent = () => {
const [statusText, setStatusText] = useState('')
const selected = useRef<FeatureLike | null>(null)
// Visibility setting
useEffect(() => {
satLayer.current?.setOpacity(satelliteOpacity)
@ -352,10 +316,14 @@ const MapComponent = () => {
>
<OpenWith />
</IconButton>
<IconButton>
<Straighten />
</IconButton>
</Stack>
<Box>
<div id="map-container" ref={mapElement} style={{ width: '100%', height: '500px', maxHeight: '100%', position: 'relative', flexGrow: 1 }}></div>
<div id="map-container" ref={mapElement} style={{ width: '100%', height: '600px', maxHeight: '100%', position: 'relative', flexGrow: 1 }}></div>
</Box>
<Stack>