maptalks.js
maptalks.js copied to clipboard
add global ResourceManager for images
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)
理由: 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