If you want to change the selector indicator, there is an effortless way with few lines of code.
Changing the svg :
document.querySelector('.cesium-selection-wrapper svg').outerHTML = svg
Changing the size :
.cesium-selection-wrapper {
width: 60px;
height: 60px;
}
Here’s a simple react component I built with 2 different svgs, one is a red square, similar to the existing, the second is a yellow modern target ( both svgs from svgrepo.com).
import { useEffect } from 'react';
export const SelectionIndicator = () => {
let svg
switch (settings.selectorIndicator) {
case 1:
svg = `<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512" xml:space="preserve">
<rect x="244.096" y="178.545" width="23.817" height="158.856"/>
<rect x="176.584" y="246.049" width="158.856" height="23.817"/>
<g>
<polygon style="fill:#E21B1B;" points="49.594,170.677 1.961,170.677 1.961,3.914 176.536,3.914 176.536,51.547 49.594,51.547 "/>
<polygon style="fill:#E21B1B;" points="343.276,47.633 343.276,0 510.039,0 510.039,174.591 462.406,174.591 462.406,47.633 "/>
<polygon style="fill:#E21B1B;" points="49.594,345.237 1.961,345.237 1.961,512 176.536,512 176.536,464.367 49.594,464.367 "/>
<polygon style="fill:#E21B1B;" points="343.276,464.367 343.276,512 510.039,512 510.039,337.417 462.406,337.417 462.406,464.367
"/>
</g>
</svg>`
break;
case 2 :
svg = `
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
\t viewBox="0 0 512 512" xml:space="preserve">
<path style="fill:#FEE187;" d="M256,41.681c-117.76,0-213.222,95.462-213.222,213.222S138.24,468.125,256,468.125
\ts213.222-95.462,213.222-213.222S373.76,41.681,256,41.681z M256,413.393c-87.531,0-158.49-70.959-158.49-158.49
\tS168.469,96.413,256,96.413s158.49,70.959,158.49,158.49S343.531,413.393,256,413.393z"/>
<path style="fill:#FFC61B;" d="M498.147,242.147H482.71c-6.384-114.708-98.293-206.955-212.856-213.884V13.853
\tC269.853,6.202,263.65,0,256,0c-7.651,0-13.853,6.202-13.853,13.853v14.409C127.583,35.192,35.674,127.439,29.29,242.147H13.853
\tC6.202,242.147,0,248.349,0,256c0,7.651,6.202,13.853,13.853,13.853h15.575c7.427,113.687,98.886,204.805,212.718,211.69v16.603
\tc0,7.651,6.202,13.853,13.853,13.853c7.65,0,13.853-6.202,13.853-13.853v-16.603c113.832-6.885,205.291-98.003,212.718-211.69
\th15.575c7.65,0,13.853-6.202,13.853-13.853C512,248.349,505.796,242.147,498.147,242.147z M454.949,242.147h-27.078
\tC421.658,157.63,354.225,89.86,269.853,83.118V56.023C369.132,62.871,448.639,142.722,454.949,242.147z M143.772,269.853
\tc6.742,50.867,47.357,91.162,98.374,97.417v31.602c-68.351-6.526-122.978-60.815-130.014-129.02H143.772z M269.853,367.28
\tc24.799-3.012,47.789-14.05,65.813-31.891c18.039-17.857,29.318-40.754,32.571-65.535h31.63
\tc-7.036,68.204-61.663,122.493-130.014,129.02L269.853,367.28L269.853,367.28z M356.49,242.147c-0.176,0-0.348,0.019-0.524,0.026
\tc-0.144-0.006-0.285-0.025-0.431-0.026c-0.051,0-0.101,0-0.152,0c-7.582,0-13.768,6.105-13.849,13.704
\tc-0.504,46.644-38.875,84.592-85.534,84.592c-47.167,0-85.539-38.373-85.539-85.539s38.373-85.539,85.539-85.539
\tc7.65,0,13.853-6.202,13.853-13.853v-44.578c69.083,6.596,124.135,61.984,130.215,131.214L356.49,242.147L356.49,242.147z
\t M242.147,56.023v86.512c-51.751,6.345-92.807,47.711-98.654,99.612H57.051C63.361,142.722,142.867,62.871,242.147,56.023z
\t M57.19,269.853h27.122c7.209,83.493,74.195,150.15,157.835,156.835v27.093C143.598,446.985,64.521,368.258,57.19,269.853z
\t M269.853,453.782v-27.093c83.64-6.684,150.625-73.343,157.835-156.834h27.122C447.479,368.258,368.402,446.985,269.853,453.782z"/>
</svg>`
}
useEffect(() => {
document.querySelector('.cesium-selection-wrapper svg').outerHTML = svg
}, []);
return false
}