162 lines
4.2 KiB
TypeScript
162 lines
4.2 KiB
TypeScript
import { FeatureLike } from "ol/Feature";
|
|
import { Text } from "ol/style";
|
|
import Fill from "ol/style/Fill";
|
|
import { FlatStyleLike } from "ol/style/flat";
|
|
import Stroke from "ol/style/Stroke";
|
|
import Style from "ol/style/Style";
|
|
import { calculateCenter } from "./mapUtils";
|
|
import CircleStyle from "ol/style/Circle";
|
|
import { MultiPoint, Point } from "ol/geom";
|
|
|
|
export const highlightStyleYellow = new Style({
|
|
stroke: new Stroke({
|
|
color: 'blue',
|
|
width: 3,
|
|
}),
|
|
fill: new Fill({
|
|
color: 'rgba(0, 0, 255, 0.5)',
|
|
}),
|
|
});
|
|
|
|
export const highlightStyleRed = new Style({
|
|
stroke: new Stroke({
|
|
color: 'red',
|
|
width: 3,
|
|
}),
|
|
fill: new Fill({
|
|
color: 'rgba(255, 255, 0, 0.3)',
|
|
}),
|
|
});
|
|
|
|
export function overlayStyle(feature: FeatureLike) {
|
|
const styles = [new Style({
|
|
geometry: function (feature) {
|
|
const modifyGeometry = feature.get('modifyGeometry');
|
|
return modifyGeometry ? modifyGeometry.geometry : feature.getGeometry();
|
|
},
|
|
fill: new Fill({
|
|
color: 'rgba(255, 255, 255, 0.2)',
|
|
}),
|
|
stroke: new Stroke({
|
|
color: '#ffcc33',
|
|
width: 2,
|
|
}),
|
|
image: new CircleStyle({
|
|
radius: 7,
|
|
fill: new Fill({
|
|
color: '#ffcc33',
|
|
}),
|
|
}),
|
|
})]
|
|
const modifyGeometry = feature.get('modifyGeometry')
|
|
const geometry = modifyGeometry ? modifyGeometry.geometry : feature.getGeometry()
|
|
const result = calculateCenter(geometry)
|
|
const center = result.center
|
|
if (center) {
|
|
styles.push(
|
|
new Style({
|
|
geometry: new Point(center),
|
|
image: new CircleStyle({
|
|
radius: 4,
|
|
fill: new Fill({
|
|
color: '#ff3333'
|
|
})
|
|
})
|
|
})
|
|
)
|
|
const coordinates = result.coordinates
|
|
if (coordinates) {
|
|
const minRadius = result.minRadius
|
|
const sqDistances = result.sqDistances
|
|
const rsq = minRadius * minRadius
|
|
if (Array.isArray(sqDistances)) {
|
|
const points = coordinates.filter(function (_coordinate, index) {
|
|
return sqDistances[index] > rsq
|
|
})
|
|
styles.push(
|
|
new Style({
|
|
geometry: new MultiPoint(points),
|
|
image: new CircleStyle({
|
|
radius: 4,
|
|
fill: new Fill({
|
|
color: '#33cc33'
|
|
})
|
|
})
|
|
})
|
|
)
|
|
}
|
|
}
|
|
}
|
|
return styles
|
|
}
|
|
|
|
const figureStyle = new Style({
|
|
fill: new Fill({
|
|
color: 'rgba(255,255,255,0.4)'
|
|
}),
|
|
stroke: new Stroke({
|
|
color: 'black',
|
|
width: 1.25
|
|
}),
|
|
text: new Text({
|
|
font: '12px Calibri,sans-serif',
|
|
fill: new Fill({ color: '#000' }),
|
|
stroke: new Stroke({
|
|
color: '#fff', width: 2
|
|
})
|
|
})
|
|
})
|
|
|
|
const lineStyle = new Style({
|
|
stroke: new Stroke({
|
|
color: '#3399CC',
|
|
width: 1
|
|
}),
|
|
text: new Text({
|
|
font: '12px Calibri,sans-serif',
|
|
fill: new Fill({ color: '#000' }),
|
|
stroke: new Stroke({
|
|
color: '#fff', width: 2
|
|
}),
|
|
placement: 'line',
|
|
overflow: true,
|
|
//declutterMode: 'obstacle'
|
|
})
|
|
})
|
|
|
|
const drawingLayerStyle: FlatStyleLike = {
|
|
'fill-color': 'rgba(255, 255, 255, 0.2)',
|
|
//'stroke-color': '#ffcc33',
|
|
'stroke-color': '#000000',
|
|
'stroke-width': 2,
|
|
'circle-radius': 7,
|
|
'circle-fill-color': '#ffcc33',
|
|
}
|
|
|
|
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 regionsLayerStyle = new Style({
|
|
stroke: new Stroke({
|
|
color: 'blue',
|
|
width: 1,
|
|
}),
|
|
fill: new Fill({
|
|
color: 'rgba(0, 0, 255, 0.01)',
|
|
}),
|
|
})
|
|
|
|
export {
|
|
drawingLayerStyle,
|
|
selectStyle,
|
|
regionsLayerStyle,
|
|
lineStyle,
|
|
figureStyle
|
|
} |