implement text path

[deyihu]

fix #573
fix #707

text-along-path.zip

• 设置textSpacing 即可

  var map = new maptalks.Map('map', {
            "center": [120.66798102314476, 30.98710361260956], "zoom": 11, "pitch": 0.20000000000003, "bearing": -3,
            maxFPS: 30,
            // // devicePixelRatio: 2,
            baseLayer: new maptalks.TileLayer('base', {
                urlTemplate: "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
                urlTemplate: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
                subdomains: ['a', 'b', 'c', 'd'],
                attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
            })
        });

        const layerOptions = {
            'forceRenderOnMoving': false,
            'forceRenderOnZooming': false,
            'forceRenderOnRotating': false,
            collision: true,
            collisionDelay: 0,
        }

        const layer = new maptalks.VectorLayer('layer', {
            ...layerOptions
        }).addTo(map);
        const layer1 = new maptalks.VectorLayer('layer1', {
            ...layerOptions
        }).addTo(map);

        const coordinates = [
            [
                120.61146665920035,
                31.205774184079388
            ],
            [
                120.61131866872256,
                31.203103349749625
            ],
            [
                120.6111114820535,
                31.200021037255937
            ],
            [
                120.61102268776676,
                31.19862858389658
            ],
            [
                120.61082290062154,
                31.194799231488645
            ],
            [
                120.61054847611308,
                31.19078457808652
            ],
            [
                120.61039135969475,
                31.187245183978035
            ],
            [
                120.61043063879936,
                31.18608029114617
            ],
            [
                120.61053538307829,
                31.18519541104891
            ],
            [
                120.6109281741243,
                31.184209712087664
            ]
         
        ];

        const symbol = {
            lineWidth: 8,
            lineColor: 'black',
            textName: '苏州湾大道',
            // textName: 'Hello World',
            // textPlacement?: 'point' | 'vertex' | 'line' | 'vertex-first' | 'vertex-last';
            textPlacement: 'line',
            textSpacing: 500,
            textFill: 'yellow',
            textFaceName: '微软雅黑',
            textWeight: 'bold',
            textSize: 12,
            textOpacity: 1,
            // textDy: 10,
            textHaloFill: '#000',
            textHaloRadius: 1,
            textHaloOpacity: 1,
            // textAlongDebug: true
        }
        const line = new maptalks.LineString(coordinates, {
            // enableClip: true,
            symbol: Object.assign({}, symbol)
        }).addTo(layer)

        map.setView({
          "center":[120.63297278,31.12046989],"zoom":12.619233141066326,"pitch":0,"bearing":4.499999999999204
        })

• 注意点：因为canvas处理文字性能太差了，故把字符做成纹理了，以此来提高性能，字符的缓存用LRU管理，故当页面有大量的字符时，会值性能急剧下降，目前LRU的最大值设置为50000

[fuzhenn]

需要增加一个测试用例，至少覆盖逻辑保证不会出错

[deyihu]

@fuzhenn 测试用例已经添加