简单的台风例子

社区不少同学问了台风场景下台风图形的构造问题，因为台风图形形状比较特殊，maptalks里是不会直接提供这种业务性的图形的，因而在这里特别的说明下提供大家一个思路

WARNING

示例的数据均为我虚拟的数据，不是真实的数据,为了演示效果造的假数据

图片来自中央气象台台风网

构造最外面的图形

从图片上看虽然这个图形不是常见的图形，但是也是有规律的，其是个两个半圆组成只是半径不同而已.

maptalks里:

提供了扇形 Sector
Sector 也提供了getShell()方法，用来获取外环的坐标点集合

那么灵感就来了，我们可以把两个扇形的外环坐标集合联合起来就可以组成这个特殊图形的坐标点集合了？

扇形的外环集合是一个封闭的图形，我们应该去掉其首尾两个坐标点

const sector1 = new maptalks.Sector(center, radius, -90, 90, {
    symbol,
    numberOfShellPoints: 120,
});

const shell1 = sector1.getShell();
const sector2 = new maptalks.Sector(center, radius * 1.2, 90, 270, {
    symbol,
    numberOfShellPoints: 120,
});

const shell2 = sector2.getShell();

const coordinates1 = shell1.slice(1, shell1.length - 1);
const coordinates2 = shell2.slice(1, shell2.length - 1);

const ring = [...coordinates1, ...coordinates2];

polygon = new maptalks.Polygon([ring], {
    enableSimplify: false,
    symbol: fillSymbol,
}).addTo(layer);

其他的图形

其他的图形比较简单加几个圆形就可以了

circle1 = new maptalks.Circle(center, radius / 1.5, {
    symbol: Object.assign({}, fillSymbol, {
        polygonFill: "#815E14",
        lineColor: "#E99503",
    }),
}).addTo(layer);

circle2 = new maptalks.Circle(center, radius / 3, {
    symbol: Object.assign({}, fillSymbol, {
        polygonFill: "#A66C12",
        lineColor: "#E6820E",
    }),
}).addTo(layer);

point = new maptalks.Marker(center, {
    symbol: {
        markerFile: "./../assets/image/typhoon.png",
        markerVerticalAlignment: "middle",
    },
}).addTo(layer);

简单的台风例子 ​

构造最外面的图形 ​

其他的图形 ​

简单的台风例子

构造最外面的图形

其他的图形