如何使用circle-translate将geojson圆移动其动态半径的50%

时间:2018-07-06 10:13:32

标签: mapbox mapbox-gl-js

我有一个Mapbox图层,其中有多个具有完全相同的坐标的GEOJson要素(因此它们堆叠在彼此的顶部)。

为防止它们堆叠的问题,我希望使用circle-translate选项将每个圆圈移开。如果每个圆圈的宽度为20px,这很容易,因为我可以将一个10px向左移动,另一个10px向右移动。

我的问题是,每个圆的半径都是根据要素的值生成的,因此某些圆的半径大于其他圆的半径。因此,我需要将translate值设为圆直径的50%。

有没有办法做到这一点?

这是我的图层的代码

const LNG = {
  name: 'LNG',
  id: 'lng-markers',
  showDetailsOnHover: true,
  source: {
    type: 'geojson',
    data,
  },
  type: 'circle',
  paint: {
    'circle-color': '#E74133',
    'circle-translate': [-10, -10],
    'circle-radius': [
      'interpolate',
      ['exponential', 1],
      ['number', ['get', 'LNG']],
      0,
      7,
      10,
      10,
      100,
      15,
      1000,
      20,
      10000,
      25,
      100000,
      30,
      1000000,
      35,
      10000000,
      40,
      100000000,
      45,
    ],
  },
  opacity: 70,
  checked: true,
  offset: { bottom: [0, -10] },
  childLayers: [
    {
      id: 'lng-markers__props',
      type: 'symbol',
      filter: ['>', `${ 'LNG' }`, 0],
      source: 'lng-markers',
      layout: {
        'text-field': `{${ 'LNG' }_en}`,
        'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
        'text-size': 12,
      },
      paint: {
        'text-color': '#FFFFFF',
        'text-translate': [-10, -10],
      },
    },
  ],
};

1 个答案:

答案 0 :(得分:1)

如果<?php use PHPMailer\PHPMailer\PHPMailer; use PHPMailer\PHPMailer\Exception; require 'vendor/autoload.php'; $mail = new PHPMailer(true); try { $mail->SMTPDebug = 2; $mail->isSMTP(); $mail->Host = 'localhost'; $mail->Username = 'email'; $mail->Password = 'password'; $mail->SMTPSecure = 'ssl'; $mail->SMTPAuth = true; $mail->Port = 465; $mail->setFrom('email', 'Test Message'); $mail->addAddress("email"); $mail->isHTML(true); $mail->Subject = 'This is the Subject'; $mail->Body = 'This has been sent'; $mail->AltBody = 'This has been sent'; $mail->send(); echo 'Message has been sent'; } catch (Exception $e) { echo 'Message could not be sent. Mailer Error: <br>', $mail->ErrorInfo; } 支持数据驱动的样式,这将非常简单。您只需要使用相同的表达式,但其值只有大小的一半。

A,不是。

在将GeoJSON数据添加到地图之前,您可能不得不考虑对其进行修改。