按比例改变点的大小

1
2
3
4
5
6
7
8
9
10
11
layer.renderer = new SimpleRenderer({
  symbol: {
    type: "simple-marker",
    color: [100, 100, 100],
    outline: {
      color: [255, 255, 255, 0.7],
      width: 0.5
    },
    size: "10px"
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
layer.renderer = new SimpleRenderer({
  label: "Weather Station",
  symbol: {
    type: "simple-marker",
    color: [100, 100, 100],
    outline: {
      color: [255, 255, 255, 0.7],
      width: 0.5
    },
    size: "2px"
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
// generates a new renderer with a scale-dependent
// size visual variable to vary icon size by scale
locationRendererCreator.createRenderer({
  layer: layer,
  view: view,
  sizeOptimizationEnabled: sizeOptimizationEnabled
}).then((rendererResponse) => {
  // the renderer contains a size variable with stops
  // mapping icon sizes to scale values
  layer.renderer = rendererResponse.renderer;
}).catch((error) => {
  console.error(error);
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// icon sizes will linearly change
// depending on the view.scale
// This variable was generated using the previous snippet
const sizeVariable = {
  type: "sizeInfo",
  valueExpression: "$view.scale",
  stops: [
    {
      size: 7.5,
      value: 1155581.108577
    },
    {
      size: 6,
      value: 9244648.868618
    },
    {
      size: 3,
      value: 73957190.948944
    },
    {
      size: 1.5,
      value: 591657527.591555
    }
  ]
};

const renderer = layer.renderer.clone();
renderer.visualVariables.push(sizeVariable);
layer.renderer = renderer;