maptalks.js icon indicating copy to clipboard operation
maptalks.js copied to clipboard

add global ResourceManager for images

Open deyihu opened this issue 3 years ago • 1 comments

maptalks's version and what browser you use?

Issue description

        const rs= maptalks.ResourceManager;
        rs.setRootUrl('https://maponline0.bdimg.com/sty/map_icons2x/MapRes/');

        rs.add('a', 'https://qcloudimg.tencent-cloud.cn/raw/ec59493ecd73b8bf7d8db60d1d153468.svg')
        console.log(rs.get('a'));
        rs.add('b', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAYCAYAAAD6S912AAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAL3SURBVDiNrdRPSNtQHAfw78tLTWzTWsU/CDvMmyA4TFurwmAMHAjTy3aYY4fhdbcxEKEqYkE87zgQdxDcZQw9jI0x2HbQWpvBQPDmDjv4p2ht2tK0eXk71DaNbXVs+0HgkV/eJ7/fL+EB/zlIo0RKVe+C0kewrHsgpAsAwPkRBOEjGFv3a9rnPwLPhoZuEsZWCSEByedzuyRJECgFAFiMoWgYlpFO5zjnCU7p09bt7Z8NwfNAIMyB97Lf75MUhYI0aIBzGJkMy6dSaQKMtSQSsRowFw7fKJjmD097e6vY3NxoEo4w83lkk8nTJkpvuWOxXwAglJMFxlZkv99bg8kysLAAzM0BkuRIibIMuaXFV2BspXxPAIB0KDRCKB2WFEWswebngf5+YGAAmJ2tQSVFEQmlw+lQaKQCMsYmJY+n2TGzMtbbC8RiwM4O0NdXixICyeNpZoxNVkBC6Zgoy7QuBgCbm8DGRmldBxVlmRJKx+wZWla3IFZ1OzNjVxaJAAcHpSsSsSudnq48LogiYFndNkiIy/GDMIZrg9oNkQvDBjk/Y6ZpP7y8DOztAeEwEI0CPT2lKxoFBgeB/X1gacl+v2kCnJ/ZMyRkixWLNmgYwOJiCQWA8XFgYqK03t8v/Ub5vA0WiyCEbFVAzvmaoeu6o6VqNBy2K7uEAYCh6zrnfK3SPgCkgkHN3dY24HK7nbOSpNIHoLTU5iWsmMshd3r63b+7qzrAtKre5qL4ydvV1USqBn5VWKaJzPFxQeB81BuPf620DAA+TfsGxl6kDw+zVvUHugLTj46ysKznZcxRYTnOgsEpQshLb2enW3C56mOFAvSTk5zA2DOfpq1W5+qeT+eBwGMuCK+Ujg43bWpy5FixiMzxcQ7AlD8ef3N5b+MTOxh8COC10tlZQZlhIHNykhU4f+JLJN7V29cQBIC0qt63BGFd6ejwcM6RTSazxLIetGjah0Z7rgQvKh0F8BYAp4SMe+PxL9ftuTb0YPDOuaoO/TP0N/Ebqf8uLX1vrPcAAAAASUVORK5CYII=')
        console.log(rs.get('b'));
        rs.add('c', 'gonganjiaoguan.png');
        console.log(rs.get('c'));

        async function loadSprite() {
            //data form mapbox.com
            const options = {
                imgUrl: 'https://api.mapbox.com/styles/v1/mapbox/streets-v12/sprite.png?access_token=pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2p0MG01MXRqMW45cjQzb2R6b2ptc3J4MSJ9.zA2W0IkI0c6KaAhJfk9bWg',
                jsonUrl: 'https://api.mapbox.com/styles/v1/mapbox/streets-v12/sprite.json?access_token=pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2p0MG01MXRqMW45cjQzb2R6b2ptc3J4MSJ9.zA2W0IkI0c6KaAhJfk9bWg'
            };

            await rs.loadSprite(options)
            console.log('loadSprite end');
        }

        const layer = new maptalks.VectorLayer('layer', {
            hitDetect: false
        }).addTo(map);

        //test null image
        const marker = new maptalks.Marker(map.getCenter(), {
            symbol: {
                markerFile: '$tingchecang.png'
            }
        });
        marker.addTo(layer);
        //test  has host
        const marker1 = new maptalks.Marker(map.getCenter().add(-0.1, 0), {
            symbol: {
                markerFile: '$a'
            }
        });
        marker1.addTo(layer);
        //test base64
        const marker2 = new maptalks.Marker(map.getCenter().add(-0.2, 0), {
            symbol: {
                markerFile: '$b'
            }
        });
        marker2.addTo(layer);

        //test Relative Address
        const marker3 = new maptalks.Marker(map.getCenter().add(-0.3, 0), {
            symbol: {
                markerFile: '$c'
            }
        });
        marker3.addTo(layer);

        async function addSprite() {
            await loadSprite();
            const marker = new maptalks.Marker(map.getCenter().add(0.1, 0), {
                properties: {
                    iconName: '$it-motorway-3'
                },
                symbol: {
                    markerFile: '{iconName}'
                }
            });
            marker.addTo(layer);

            const marker1 = new maptalks.Marker(map.getCenter().add(0.2, 0), {
                symbol: {
                    markerFile: '$airport'
                }
            });
            marker1.addTo(layer);
        }
        addSprite();

Please provide a reproduction URL (on any jsfiddle like site)

deyihu avatar Dec 08 '22 07:12 deyihu

理由: vt的style文件是个json文件,无法将js语句带入进去,如果在里面使用相对地址,如果资源目录改变了,瞬间GG 解决方法:

  • 手动修改json文件
  • 动态请求json文件然后再代码里动态改变资源的地址

如果在style json文件里使用绝对地址,当资源地址变了也是GG,而且整个style json文件也会膨胀不少

使用了这个方法后

1.只要在style json文件里写个取值符合即可

{
  symbol:{
      markerFile:"$dog"
   }
}

{
  symbol:{
      markerFile:"$images/dog"
   }
}

{
  symbol:{
      markerFile:"$images/foo/dog"
   }
}

2.如果需要动态读取

{
  symbol:{
      markerFile:"{iconName}"
   }
}

3.支持加载sprite资源为样式文件服务 4.支持OffscreenCanvas和ImageBitmap

deyihu avatar Dec 09 '22 14:12 deyihu