145 lines
3.4 KiB
TypeScript
145 lines
3.4 KiB
TypeScript
//自定义画框样式
|
|
const mapboxDrawStyle = [
|
|
// ACTIVE (being drawn)
|
|
// line stroke
|
|
|
|
{
|
|
id: 'gl-draw-line',
|
|
type: 'line',
|
|
filter: [
|
|
'all',
|
|
['==', '$type', 'LineString'],
|
|
['!=', 'mode', 'static'],
|
|
['==', 'active', 'true'],
|
|
],
|
|
layout: {
|
|
'line-cap': 'round',
|
|
'line-join': 'round',
|
|
},
|
|
paint: {
|
|
'line-color': 'rgba(246,67,72,1)',
|
|
'line-dasharray': [0.2, 2],
|
|
'line-width': 2,
|
|
},
|
|
},
|
|
{
|
|
id: 'gl-draw-line-not-active',
|
|
type: 'line',
|
|
filter: ['all', ['==', '$type', 'LineString'], ['!=', 'active', 'true']],
|
|
layout: {
|
|
'line-cap': 'round',
|
|
'line-join': 'round',
|
|
},
|
|
paint: {
|
|
'line-color': 'rgba(246,67,72,1)',
|
|
'line-width': 2,
|
|
},
|
|
},
|
|
|
|
// polygon fill
|
|
{
|
|
id: 'gl-draw-polygon-fill',
|
|
type: 'fill',
|
|
filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
|
|
paint: {
|
|
'fill-color': 'rgba(246,67,72,0.2)',
|
|
'fill-outline-color': 'rgba(246,67,72,0.2)',
|
|
},
|
|
},
|
|
// polygon outline stroke
|
|
// This doesn't style the first edge of the polygon, which uses the line stroke styling instead
|
|
{
|
|
id: 'gl-draw-polygon-stroke-active',
|
|
type: 'line',
|
|
filter: [
|
|
'all',
|
|
['==', '$type', 'Polygon'],
|
|
['!=', 'mode', 'static'],
|
|
['==', 'active', 'false'],
|
|
],
|
|
layout: {
|
|
'line-cap': 'round',
|
|
'line-join': 'round',
|
|
},
|
|
paint: {
|
|
'line-color': 'rgba(246,67,72,1)',
|
|
'line-width': 2,
|
|
},
|
|
},
|
|
{
|
|
id: 'gl-draw-polygon-stroke-active-select',
|
|
type: 'line',
|
|
filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static'], ['==', 'active', 'true']],
|
|
layout: {
|
|
'line-cap': 'round',
|
|
'line-join': 'round',
|
|
},
|
|
paint: {
|
|
'line-color': 'rgba(246,67,72,1)',
|
|
'line-dasharray': [0.2, 2],
|
|
'line-width': 2,
|
|
},
|
|
},
|
|
// vertex point halos
|
|
{
|
|
id: 'gl-draw-polygon-and-line-vertex-halo-active',
|
|
type: 'circle',
|
|
filter: ['all', ['==', 'meta', 'vertex'], ['==', '$type', 'Point'], ['!=', 'mode', 'static']],
|
|
paint: {
|
|
'circle-radius': 5,
|
|
'circle-color': '#FFF',
|
|
},
|
|
},
|
|
// vertex points
|
|
{
|
|
id: 'gl-draw-polygon-and-line-vertex-active',
|
|
type: 'circle',
|
|
filter: ['all', ['==', 'meta', 'vertex'], ['==', '$type', 'Point'], ['!=', 'mode', 'static']],
|
|
paint: {
|
|
'circle-radius': 3,
|
|
'circle-color': 'rgba(246,67,72,1)',
|
|
},
|
|
},
|
|
|
|
// INACTIVE (static, already drawn)
|
|
// line stroke
|
|
{
|
|
id: 'gl-draw-line-static',
|
|
type: 'line',
|
|
filter: ['all', ['==', '$type', 'LineString'], ['==', 'mode', 'static']],
|
|
layout: {
|
|
'line-cap': 'round',
|
|
'line-join': 'round',
|
|
},
|
|
paint: {
|
|
'line-color': '#E13F3F',
|
|
'line-width': 3,
|
|
},
|
|
},
|
|
// polygon fill
|
|
{
|
|
id: 'gl-draw-polygon-fill-static',
|
|
type: 'fill',
|
|
filter: ['all', ['==', '$type', 'Polygon'], ['==', 'mode', 'static']],
|
|
paint: {
|
|
'fill-color': 'rgba(225, 63, 63, 0.2)',
|
|
'fill-outline-color': 'rgba(225, 63, 63, 0.2)',
|
|
},
|
|
},
|
|
// polygon outline
|
|
{
|
|
id: 'gl-draw-polygon-stroke-static',
|
|
type: 'line',
|
|
filter: ['all', ['==', '$type', 'Polygon'], ['==', 'mode', 'static']],
|
|
layout: {
|
|
'line-cap': 'round',
|
|
'line-join': 'round',
|
|
},
|
|
paint: {
|
|
'line-color': '#E13F3F',
|
|
'line-width': 3,
|
|
},
|
|
},
|
|
];
|
|
export default mapboxDrawStyle;
|