·¢ËÍÔ´´ÎÄÕÂÖÁadmin@caup.net£¬¿ÉÉêÇë×¢²áÑûÇëÂë
ÄúÐèÒª µÇ¼ ²Å¿ÉÒÔÏÂÔØ»ò²é¿´£¬Ã»ÓÐÕʺţ¿×¢²á·½Ê½
x
½ñÌì ³ÇÊÐÊý¾ÝʦÊÖ²áΪ´ó¼ÒÍƼö ÔÚÏßµØͼ¡ª¡ªMapbox£¬ÍøÕ¾Ìṩ¹¹½¨Ä£¿é£¬ÒԱ㽫µØͼ¡¢ËÑË÷ºÍµ¼º½µÈλÖù¦ÄÜÌí¼Óµ½Óû§´´½¨µÄÈκÎÌåÑéÖУ¬²¢¿É×ÔÓÉ´îÅä¶àÖÖµØͼ·ç¸ñ£¬Í¨¹ý3DÊӽDZ仯½áºÏÎÄ×Ö½²Êö¹ÊʵØͼ£¬¸ü¶àÏêÇ飬´ó¼Ò¿ÉÒÔÔÚ³ÇÊÐÊý¾ÝʦÊÖ²áÍøÕ¾²é¿´¡£
Mapbox https://www.mapbox.com/
Ò»¡¢ÍøÕ¾¼ò½é
MapboxÊÇÒƶ¯ºÍWebÓ¦ÓóÌÐòµÄλÖÃÊý¾Ýƽ̨£¬ÌṩÖÆ×÷¾«ÃÀµÄµØͼºÍ¿ª·¢ÈËÔ±ÓѺõÄλÖÃÊý¾Ý£¬APIºÍSDK£¬ÒÔ±ãÓû§¿ÉÒÔרעÓÚÉè¼Æ£¬¹¹½¨ºÍ¿ª·¢Ó¦ÓóÌÐò¡£
±¾ÎÄÕýÎÄÄÚÈÝÊÚȨתÔØ×Ô΢ÐŹ«ÖںţºMapbox
½ñÌìΪ´ó¼Ò½éÉÜ»ùÓÚmapboxµÄ½»»¥¹ÊʵØͼ½Ì³Ì£¬ÎÄÕÂÀ´×Ô΢ÐŹ«ÖÚºÅmapboxµÄÎÄÕ£º¡¶¡¸Mapbox ½»»¥¹ÊʵØͼ¡¹Áã»ù´¡ DIY Ö¸ÄÏ | ¸½ 27 ÖÖ½»»¥¶¯»Ô´Âë ¡·¡£
˵µ½½»»¥¹ÊʵØͼ£¬ÊÇÒ»ÖÖȫеÄͼÎÄÄÚÈÝÐðÊö·½Ê½£¬½áºÏµØÀíλÖ㬲»½ö½öÊÇͼÎIJ¢Ã¯£¬»¹Ö§³ÖÔÚÏß½»»¥£¬·Ç³£ÊʺÏ×öÀúÊ·ÎÄ»¯¡¢Ê¼þ·¢Õ¹¡¢·ÀÔÖÏìÓ¦µÄչʾ¡£±ÈÈçÎÒÃÇ·ÖÏí¹ýºÜ¶à°¸Àý£º
¿ÉÊÇ£¬Ôõô×öÄØ£¿ÎªÊ²Ã´ËûÃÇÄÜ×ö³öÕâôºÃ¿´µÄ½»»¥¹ÊÊ°¡£¬ÎÒÊÇС°×ÉõÖÁ²»»á±à³Ì£¬ÓÐÏ£ÍûÂð£¿
Õâƪ DIY Ö¸ÄϾÍÊÇ´ÓÌì¶ø½µµÄСÌìʹ£¬°ïÖúÄãÂõ³öÖÆ×÷¿ÉÊÓ»¯½»»¥¹ÊʵĵÚÒ»²½£¡Ñ§¹ý±¾½Ì³Ì£¬ÄãÒ²¿ÉÒÔ×ö³öÕâÑùµÄ½»»¥¹ÊʵØͼÁË£¡
¹âÔÎÌØЧ¡¢Ê±¼äÏߵȶ¼²»ÔÚ»°Ï£¡
Ö¸ÄÏÔ¤ÆÚЧ¹û
🎈ÔÚ´ËÏ×ÉÏÔÚÏßÌåÑéÈë¿Ú£º https://lobenichou.github.io/cuny-mbx-2019/
ÔÚ¹«Öںźǫ́»Ø¸´¹Ø¼ü´Ê¡¸½»»¥¹ÊÊ¡¹£¬¼´¿É»ñµÃÏîÄ¿Ô´Â룡
±¾Ö¸ÄÏÓÉÀ´×ԾɽðɽµÄ Mapbox ´´Ò⿪·¢Óë¼¼Êõ²¼µÀʦ LO B¨¦NICHOU£¨ÔøÈÎ WIRED Ç°¶Ë¿ª·¢¹¤³Ìʦ£© ÔÚ The Craig Newmark Graduate School of Journalism ½øÐеÄУ԰Åàѵ·Òë¶øÀ´¡£
Mapbox ´´Ò⿪·¢Óë¼¼Êõ²¼µÀʦ LO B¨¦NICHOU
¶þ¡¢¿Î³ÌÏà¹ØÊý¾ÝºÍ×ÊÔ´×¼±¸
Mapbox GL JS ½»»¥µØͼ
ÔÚѧϰµÄ¹ý³ÌÖÐÄã¿ÉÄÜÐèÒªµÄ×ÊÔ´ºÍÊý¾Ý ¡ª¡ª
🔗 Ô´´úÂëºÍÓ¢ÎÄ°æ¿Î³Ì 🔗 ×¢²áµÇ½ Mapbox µÄÈë¿Ú 🔗 ½»»¥¹ÊʵØͼÖÆ×÷¿ò¼Ü Scrollama 🔗 ŦԼÈË¿Úͳ¼Æ¡¢¾¼ÃºÍλÖÃÊý¾Ý 🔗 ŦԼµØÌúÏß·Êý¾Ý 🔗 ŦԼµØÌúÕ¾Êý¾Ý
×¢Ò⣺Êý¾ÝÒÑ×¼±¸ºÃ¹©ÄúʹÓᣱ¾¿Î³Ì²»Éæ¼°Êý¾ÝÇåÀíºÍµØÀí´¦Àí¡£²»Òª½«´ËÊý¾ÝÓÃÓÚ³ö°æ¡£ÒòΪËüÐèÒª½øÐÐÊÂʵ¼ì²é£¬ÆäÖÐһЩ¿ÉÄܻᶪʧ»òÎÞЧ¡£´ËÊý¾Ý½öÓÃÓÚÑÝʾÊý¾ÝÇý¶¯µÄÑùʽ¡£
ÕâЩÊÇÄãÔÚѧϰµÄʱºò£¬¿ÉÄÜ»áÐèÒªµÄ¸üÉîÈëµÄ֪ʶ ¡ª¡ª
🔗 Mapbox Ãû´Ê½âÊÍ 🔗 Mapbox ¿ÉÊÓ»¯Ñ¡ÇéÊý¾ÝÖÐÎÄ½Ì³Ì ÉÏ Ï£¬º¸ÇÁ˺ËÐĵĸÅÄ±ÈÈç±í´ïʽ 🔗 µØͼÉè¼ÆÖ¸ÄÏ £¨Çë¹Ø×¢ Mapbox ¹«ÖںŻظ´ ¼¼Êõ »ñµÃ£¬ÖÐÎÄ°æ¼´½«³ö¯£© 🔗 ʹÓà Tippercanoe ½« GeoJSON ¸ñʽת»¯Îª MBTiles
ºÃÁË£¬ÏÂÃæ¾ÍÒ»Æð¿ªÊ¼ÕýʽµÄѧϰ°É¡£
Èý¡¢Êý¾Ý¸ñʽ½éÉÜ
ÕâÊǺÜÖØÒªµÄ¿ªÊ¼£¬ÒòΪ½»»¥¹ÊʵÄÄÚÈÝ£¬Êý¾ÝÕ¼µ½ÁËÒ»´ó°ë¡£¶ø´ó²¿·Ö¿ª·¢ÕßÓöµ½µÄÎÊÌ⣬³ýÁËÊý¾ÝÔ´£¨Ç°Ã涼¸æËßÄãÀ²£¡£©£¬»¹ÓоÍÊÇ´ÓÍøÉÏÏÂÔØ»òÕß×ÔÐÐÖÆ×÷µÄÊý¾ÝÈ´»ëÈ»²»ÖªÓ¦¸ÃÈçºÎȥʹÓá£
ÄÇôÏÂÃæÎÒÃǾÍÒ»¸öÒ»¸ö½éÉÜһϡ£
Tileset:
Tileset ÊÇÒ»×é Raster Data£¨ÒÔÏñËØ·½Ê½´æ´¢£© »ò Vector Data£¨ÒԵ㡢Ïß¡¢¶à±ßÐδ洢£©£¬±»·ÖΪ¶à´ï 22 ¸öÔ¤Éè Zoom Level µÄ¾ùÔÈÍø¸ñ¡£ÔÚ Mapbox ¿âºÍ SDK ÖУ¬Tilesets ÊǵØͼµÄºËÐIJ¿·Ö£¬ËüÃÇÒ²ÊÇÎÒÃÇÓÃÓÚÈ·¶¨ Map View ÊýÁ¿£¨¾ÍÊÇ Pay-as-you-go ¸¶·ÑģʽÖеĵØͼµ÷ÓÃÁ¿£©µÄÖ÷Òª»úÖÆ¡£
Tilesets ¿É±»¸ß¶È»º´æ²¢¿ìËÙ¼ÓÔØ£¬ÓÉʸÁ¿ÇÐƬ(Vector Tiles)×é³É£¬ÓÃÓÚ¿ìËÙ»º´æ£¬Ëõ·ÅºÍÌṩµØͼ¡£Mapbox Web ºÍÒƶ¯¶ËʸÁ¿ÍßƬ£¨Vector Tiles£©±ÈÕ¤¸ñÍßƬ£¨Raster Tiles£©Ð¡ 75£¥¡£ÕâÑù¿ÉÒÔ¿ìËÙ£¬Æ½»¬µØ´ÓµØͼµÄÊÀ½çÊÓͼËõ·Åµ½½ÖµÀ¼¶Ï¸½Ú¡£
¹ËÃû˼Ò壬ʸÁ¿ÇÐƬ£¨Vector Tiles£©º¬ÓеÄÊÇʸÁ¿Êý¾Ý£¬¶ø²»ÊÇäÖȾͼÏñ¡£ËüÃÇÒÔ½ô´ÕµÄ½á¹¹»¯¸ñʽ°üº¬Á˼¸ºÎÐÎ×´ºÍÔªËØ - ÈçµÀ·Ãû³Æ£¬µØÃû£¬ÃÅÅƺÅÂ롣ʸÁ¿ÇÐƬ£¨Vector Tiles£©½öÔÚ¿Í»§¶ËÇëÇóʱ±»äÖȾ£¬ÀýÈç Web ä¯ÀÀÆ÷»òÒƶ¯Ó¦ÓóÌÐòµÄÇëÇó£¬ÇÒÊÇÔÚ¿Í»§¶Ë½øÐÐäÖȾ¡£
MapboxÎļþÀàÐÍ£º
1. CSV£º
CSV£¨Comma-separated Value£©ÊÇÒ»ÖÖ³£¼ûµÄ±í¸ñÊý¾Ý£¬¿ÉÒÔÔÚ Excel Öдò¿ª£¬Ö»ÓÐÔÚº¬ÓÐ×ø±êµÄʱºò£¬¿ÉÒÔ±»»æÖÆÔÚµØͼÉÏ£¬±ÈÈçÏÂÃæµÄÊý¾Ý¡£
ÔÚÉÏ´« CSV Îļþʱ£¬Çë×¢ÒâÒÔÏÂÊÂÏ
²é¿´ Mapbox Upload API Documentation£¬Á˽â CSV ÎļþµÄ´óСÏÞÖÆ¡£ CSV Îļþ±ØÐë²ÉÓà UTF-8 ±àÂë¡£ ÔÚ Mapbox Studio »ò Mapbox Studio Classic ÖÐÉÏ´«Ê±£¬CSV Îļþ±ØÐë°üº¬×ø±ê£¨Î³¶ÈºÍ¾¶È£©¡£ CSV Îļþ½öÊÊÓÃÓÚµãÊý¾Ý¡£
2. GeoJSON£º
GeoJSON ÊÇ Mapbox Web Service ºÍ API Ö§³ÖµÄµØͼÊý¾ÝµÄÎļþ¸ñʽ¡£×÷Ϊ JSON ¸ñʽµÄ×Ó¼¯£¬Ëü¿ÉÒÔÔÚÏÖ´úÈí¼þÖб»½âÎö£¬²¢ÇÒ¿ÉÒÔÔÉúÖ§³Ö JavaScript ÓïÑÔ¡£
Óм¸ÖÖ¿ªÔ´¹¤¾ß¿ÉÓÃÓÚ½«ÆäËûµØÀí¿Õ¼äÊý¾Ý¸ñʽת»»Îª GeoJSON£º
togeojson, Ò»¸öÓÃÓÚת»» KML ºÍ GPX£¨XML¸ñʽ£©µÄ½Úµã°ü ogr2ogr, ÎÞµÐÇ¿´óµÄ 40-in-1 ʸÁ¿Êý¾Ýת»»¹¤¾ß geojson.io ÓÃÀ´´´½¨¡¢ ת»»ºÍ±à¼ GeoJSON
3. MBTiles£º
MBTiles ÊÇÓÃÓÚ´æ´¢ Tilesets µÄÎļþ¸ñʽ¡£Ëü¿ÉÒÔ°ïÖúÄú´ò°ü×é³É Tilesets µÄÊýǧ¸öÎļþ£¬²¢±ãÓÚÒƶ¯£¬×îÖÕÉÏ´«µ½ Mapbox »òÔÚ Web ºÍÒƶ¯Ó¦ÓóÌÐòÖÐʹÓá£MBTiles ÊÇÒ»¸ö¿ª·ÅµÄ¹æ·¶£¬»ùÓÚ SQLite Êý¾Ý¿â¡£MBTiles ¿ÉÒÔ´æ·Å Raster Tiles »ò Vector Tilesets¡£
4. KML£º
KML ÊÇÒ»ÖÖÀàËÆÓÚ GeoJSON µÄÎļþ¸ñʽ£¬µ«ÔÚ Google ²úÆ·Öиü³£Óá£ÏàËÆÖ®´¦ÊÇ£¬Óë GeoJSON Ò»Ñù£¬Ëü¿ÉÒÔ´æ´¢µã£¬Ïߣ¬¶à±ßÐκÍÆäËûʸÁ¿Êý¾Ý£»Óë GeoJSON ²»Í¬µÄÊÇ£¬Ëü»ùÓÚ XML ¶ø²»ÊÇ JSON¡£
ÉÏ´« KML ʱ£¬Çë×¢Òâ Mapbox ²»Ö§³ÖÈκΠKML À©Õ¹¼þ¡£
5. GPX£º
GPX »ò GPS eXchange ¸ñʽÊÇͨ³£ÓÉ GPS ½ÓÊÕÆ÷´´½¨µÄÊý¾Ý¸ñʽ¡£Äú¿ÉÒÔ½« GPX ÎļþÉÏ´«µ½ Mapbox ÕÊ»§£¬ÒÔ±ãÔÚ×Ô¶¨ÒåµØͼÑùʽÖÐʹÓá£
Çë×¢Ò⣬Mapbox ²»Ö§³ÖÑØÏßµÄÖµ£¨ÀýÈ磬ÑØ×ÅÂýÅÜ·Ïߵĸ÷¸öµãµÄ¸ß³ÌºÍʱ¼ä£©¡£¿ÉÒÔÉÏÔØÑØÒ»ÐеÄÖµµÄ GPX Îļþ£¬µ« Mapbox ½«ºöÂÔ¸ÃÐеÄÈκÎÊý¾Ý¡£
6. shapefile£º
shapefile£¬Ò²³ÆΪ ESRI shapefile£¬ÊÇÓÃÓÚ´æ´¢µØÀíʸÁ¿Êý¾ÝµÄÎļþ¸ñʽ¡£
ÉÏ´« shapefile ʱ£¬Çë×¢ÒâÒÔϼ¸µã£º
²é¿´ Mapbox Uploads API Îĵµ£¬Á˽â shapefile µÄµ±Ç°´óСÏÞÖÆ¡£Çë×¢Ò⣬´ËÏÞÖÆÊÊÓÃÓÚ shapefile µÄδѹËõ´óС£¬¶ø²»ÊÇѹËõ zip µÄ´óС¡£ Shapefile Óɼ¸¸öµ¥¶ÀµÄÎļþ×é³É£¬ÔÚÉÏ´«Ö®Ç°Ó¦¸Ã½«ËüÃÇ×éºÏ³ÉÒ»¸ö zip Îļþ¡£ÔÚÕâЩÎļþÖУ¬Mapbox ¿ÉÒÔ¶ÁÈ¡ shp£¬shx£¬dbf£¬prj ºÍ index Îļþ¡£Ê¹Óà zip ÎļþÉÏ´«µÄÈκÎÆäËûÎļþ¶¼½«±»ºöÂÔ¡£
7. TIFF£º
TIFF£¨ÓÐʱÊÇTIF£©ÊÇÓÃÓÚ±£´æ¹âդͼÏñµÄÎļþ¸ñʽ¡£Ê¹Óà Mapbox£¬TIFF ͨ³£ÊÇ GeoTIFF£¬ÕâÒâζ×ÅÎļþǶÈëÁ˵ØÀíÅä×¼ÐÅÏ¢¡£
Äú¿ÉÒÔÔÚ Mapbox Studio Öн« TIFF Îļþ×÷Ϊ tilesets ÉÏ´«£¬²¢ÔÚ Mapbox Studio Ñùʽ±à¼Æ÷ÖÐʹÓÃËüÃÇ¡£ÉÏ´« TIFF Îļþʱ£¬Çë¼Çס TIFF ÎļþµÄµ±Ç°´óСÏÞÖÆ¡£
¼¸ºÎÀàÐÍ£º
Èý¡¢¼¸¸öѵÁ·µÄÀý×Ó
ÔÚÁ˽âÁËÊý¾Ý¸ñʽ֮ºó£¬ÎÒÃǾͿÉÒÔ¿ªÊ¼ÉÏÊÖ Mapbox ÁË£¬Mapbox ÖÐÓÐһЩ³£¼ûµÄ¶¨Ò壺
Êý¾Ý¼¯£¨Dataset£©£º±à¼Êý¾Ý Tileset£º½«ÄúµÄÊý¾Ýºæ±ºµ½Ê¸Á¿ÍßƬÖУ¬»òÕßÉÏ´«Õ¤¸ñ ¿â£¨Libraries£©£ºÊ¹Óà Mapbox ¿â½«ÄúµÄÑùʽÌí¼Óµ½Ó¦ÓóÌÐòÖÐ
ѵÁ·Ò»
ѵÁ·¶þ
ʹÓúËÐĵØͼ·ç¸ñ£¨dark£¬light£¬streets£© ʹÓà Mapbox GL JS ÔÚÇ°¶ËÌí¼ÓÊý¾Ý ʹÓà Mapbox GL JS Öеıí´ïʽÉèÖÃÊý¾ÝÑùʽ
ѵÁ·Èý
ÔÚÊý¾Ý¼¯±à¼Æ÷£¨dataset editor£©ÖÐÉÏ´«Êý¾Ý
±à¼ÄúµÄÊý¾Ý ÔÚ Mapbox Studio ÖÐÉè¼ÆµØͼ·ç¸ñ µ¼³ö¸ß·Ö±æÂÊ PNG ²¢ÔÚ Photoshop ÖÐÍê³ÉÆäÓ๤×÷»ò°´ÔÑùʹÓÃ
ÑùʽÉè¼Æ¹¤¾ß-Mapbox Studio:
Mapbox Studio ¿ÉÒÔ°ïÖúÄã´¦ÀíÊý¾ÝµÄÑùʽ»¯¡£
Tilesets
Mapbox ×Ô´øµÄ 6 ¿î Tilesets ÒѾÓÐһЩÔÚÉèÖÃÀïÃæÁË£¬¿ÉÒÔÖ±½ÓÄÃÀ´Ó㬰üÀ¨ÎÀÐÇÊý¾Ý¡¢½ÖµÀ¡¢µØÐεȵȡ£
Mapbox Studio ËùÖ§³ÖµÄÊý¾ÝÎļþ
Èç¹ûÏëÒª×Ô¼ºÉÏ´«Êý¾ÝҪעÒâÖ§³ÖµÄÊý¾ÝÀàÐÍ¡£
µã»÷ͼƬ²é¿´ÎĵµÔÎÄ
Mapbox Studio ÒDZí°å
½øÈë Mapbox Studio
µØͼÑùʽ
Mapbox Studio ÖÐÒѾÓÐһЩºËÐÄÑùʽÁË£¬Äã¿ÉÒÔÖ±½ÓÄÃÀ´Ê¹Ó㬻òÕß´´½¨ÐµĿհ×Ñùʽ£¬×Ô¼º·¢»Ó£¬Ò²Ö§³ÖÉÏ´« JSON ÑùʽÎļþ¡£
Mapbox Studio µÄµØͼͼ²ãÀàÐÍ
Fill Fill-extrusion Line Circle Symbol Heatmap Hillshade Raster
ͼ²ã£¨Layer£©µÄÀàÐͱØÐëÊÇÉÏÃ漸¸öÖ®Ò»¡£Í¨¹ý Mapbox GL JS ÎĵµµÄÑùʽ¹æ·¶²¿·Ö£¬ÎÒÃÇ¿ÉÒÔÁ˽⵽ÕâЩÀàÐ͵ĺ¬Òå👇
Fill - ´øÓпÉÑ¡±ß¿òµÄ¶à±ßÐÎ Fill-extrusion - ¾ßÓÐ 3D ÀÉì¶à±ßÐÎ Line - Ïß Circle - Ò»¸öÔ² Symbol - Ò»¸ö±êÖ¾»òÕßÎı¾ Heatmap - ÈÈÁ¦Í¼ Hillshade - »ùÓÚ DEM Êý¾ÝµÄ¿Í»§¶ËɽÌåÒõÓ°¿ÉÊÓ»¯£¬Ä¿Ç°½öÖ§³Ö Mapbox Terrain RGB¡£
Êý¾ÝÉÏ´«¡¢Ñùʽ¶¼¸ã¶¨ÁËÒÔºó£¬ÎÒÃÇÏÂÃæ¾ÍÒª½ø½×½»»¥Éè¼ÆÁË£¡ÓÐÇë Mapbox GL JS
½»»¥Éè¼Æ¹¤¾ß-Mapbox GL JS:
Mapbox GL JS ÊÇÇ¿´óµÄ JavaScript ¿â£¬¿ÉÒÔ°ïÖúÄãÖÆ×÷¿áìÅ¡¢¸ß¶È×Ô¶¨ÒåµÄ½»»¥µØͼ¡£µ±Äã°´ÕÕ Mapbox Ñùʽ¹æ·¶Éè¼ÆºÃµØͼºó£¬Mapbox GL JS »á½«ËüÓëʸÁ¿ÍßƬ½áºÏ£¨·ûºÏ Mapbox ʸÁ¿ÍßƬ¹æ·¶£©£¬²¢Óà WebGL äÖȾ³öÀ´¡£
Mapbox Studio ÄÜ×öµÄ£¬Mapbox GL JS »ù±¾É϶¼¿ÉÒÔ×ö£¬±ÈÈçÌí¼ÓÊý¾Ý👇
ÔÚµØͼÉÏÌí¼ÓʸÁ¿ÍßƬÊý¾Ý
Äú¿ÉÒÔÔÚÕâ¸ö Github Repo Á˽â¸ü¶à¹ØÓÚ Mapbox GL JS µÄÄÚÈÝ¡£
һЩ³£¼û¸ÅÄî
Mapbox GL JS ʹÓà WebGL£¬ÔÊÐíä¯ÀÀÆ÷·ÃÎÊÄúµÄ¼ÆËã»ú GPU£¨Ê¹Æä¸ü¿ì£© ËüʹÓÃÃûΪ Canvas µÄ HTML ÔªËØ Äú¿ÉÒÔÉèÖÃÊý¾ÝÑùʽ£¬Ìí¼ÓÊý¾Ý£¬Ìí¼Ó½»»¥ÐÔµÈ
µÚÒ»²½£ºÔÚÒ³ÃæÉÏÏÔʾһÕŵØͼ²¢ÏÔʾ×Ô¶¨Òåͼ²ã
ÎÒÃÇ¿ÉÒԲο¼ Mapbox GL JS µÄÎĵµÖÐ Display a map µÄÀý×Ó¡£½«ÏÂÃæµÄ´úÂ븴ÖƵ½Îı¾ÖУ¬±£´æ²¢Ð޸ĺó׺Ϊ.html£¬ÔÙÓÃä¯ÀÀÆ÷´ò¿ª¡£
[size=0.85em]<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Display a map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94bWF4IiwiYSI6ImNqbnY4MHM3azA2ZmkzdnBnMThvNzRoZ28ifQ.IffqPZGkhcdPjnZ2dmSO6w';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [-74.50, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});
</script>
</body>
</html>
Äã¿ÉÒÔ¿´µ½µØͼÒѾÏÔʾ³öÀ´ÁË¡£
Èç¹ûÏëÒªÐÞ¸ÄÑùʽ£¬¿ÉÒÔÌæ»» style ºó±ßµÄ mapbox://styles/mapbox/streets-v11 ΪÄãÉè¼ÆÑùʽµÄ style URL £¨µã»÷ Mapbox Studio ÓÒÉÏ½ÇµÄ share - use - Style URL ¼´¿É£©
Èç¹û»¹ÊDz»Ì«Ã÷°×£¬¿ÉÒԲο¼ Mapbox GL JS µÄÎĵµÖÐ Display a map with a custom Layer µÄÀý×Ó£¬Äú¿ÉÒÔ½«Á½²¿·Ö´úÂë½øÐбȽϣ¬ÕÒµ½²îÒ죬¾ÍÖªµÀʲôµØ·½±ä¶¯µ¼ÖÂÁ˵ØͼÑùʽµÄ¸Ä±ä¡£
µÚ¶þ²½£ºÊ¹Óà Mapbox GL JS Ìí¼ÓµØͼ½»»¥
ÔÚ Mapbox GL JS ÎĵµÖУ¬ÎÒÃÇÌṩÁË 26 ÖÖ½»»¥·½Ê½µÄÔ´Âë¡£
²¿·Ö½»»¥°¸Àý
ÒòΪ´úÂë±È½Ï¶à£¬Äú¿ÉÒÔµã»÷ͼƬ½øÈ룬Á˽âÔ´Âë¡£
¡¸´ò¿ª·½Ê½¡¹ÊÇÒ»ÑùµÄ£¬ÀàËÆÓÚÏÔʾµØͼ£¬½«´úÂ븴ÖƵ½Îı¾ÖУ¬±£´æ²¢Ð޸ĺó׺Ϊ.html£¬ÔÙÓÃä¯ÀÀÆ÷´ò¿ª¡£
½»»¥1£ºÉèÖÃͼ²ã²¢µ÷Õû͸Ã÷¶È
½»»¥2£ºµã»÷±êÇ©ÈõØͼ¾ÓÖÐ
½»»¥3£º¸Ä±äͼ²ãµÄÑÕÉ«
½»»¥4£ºÓÃÉùÒô¿ØÖƵØͼµÄÂɶ¯
½»»¥5£º½ûÓõØͼÐýת
½»»¥6£º´´½¨Ò»¸ö¿ÉÒÔÍÏקµÄ Marker
½»»¥7£º´´½¨Ò»¸ö¿ÉÒÔÍÏקµÄµã
½»»¥8: ÊäÈëÎÄ×Ö¶Ô Marker ¹ýÂËÏÔʾ
½»»¥9: չʾÎÞ½»»¥µÄµØͼ
½»»¥10: ¸Ä±äµØͼµÄÓïÑÔ
½»»¥11: ²âÁ¿µØͼÉϵľàÀë
½»»¥12: ²éÕÒ¹ýÂ˵ØͼµÄ Marker
½»»¥13: ͨ¹ýµã»÷Áбí¹ýÂË Marker
½»»¥14: »ñÈ¡Êó±êµã»÷λÖõÄ×ø±ê
½»»¥15: ¸ßÁÁÏÔʾÏàͬÊý¾ÝµÄÇøÓò
½»»¥16: µã»÷ÏÔʾ¸½½üµÄÌØÕ÷
½»»¥17: ÏÔʾ¹â±ê¶ÔÓ¦µÄ´úÂë
½»»¥18: ÏÞÖƵØͼƽÒÆÔÚij¸öÇøÓò
½»»¥19: ¸Ä±äµØͼµÄÑùʽ
½»»¥20: ´´½¨Ê±¼ä½ø¶ÈÌõ
½»»¥21: ÔÚµØͼÉÏÆôÓûò½ûÓà UI
½»»¥22: ¸ù¾ÝËõ·Å³ß¶È¸üеÈÖµÇø
½»»¥23: ¸ù¾Ý¹ú¼Òµ÷Õû±ß½ç
½»»¥24: °´×¡ Shift Ñ¡Ôñ¸ßÁÁÇøÓò
½»»¥25: ¿ìËÙËõ·ÅÖÁÕýºÃ°üÀ¨Â·Ïß
½»»¥26: ´´½¨¹âÔÎÌØЧ
½»»¥27: ÔÚ²»Í¬µØµã¼äƽ»¬·ÉÔ¾
Õâô¶àÖÖ½»»¥·½Ê½£¬ÏàÐÅÄãÒ»¶¨ÒѾÕÒµ½×Ô¼ºÏ²»¶µÄ½»»¥·½Ê½£¬²¢ÇÒÔ¾Ô¾ÓûÊÔÁË°É£¡
ÕâÀïÔÙ·îÉϼ¸¸ö¿ì½ÝÈë¿Ú£¬°ïÖúÄã½ø½×£º
×îÖյĽá¹û£¨ÄãµÄÒ»¶¨»á¸üºÃ£©
ÔÚÏß·ÃÎÊ
ÔÚ³ÇÊÐÊý¾ÝÈ˹«Öںźǫ́»Ø¸´¹Ø¼ü´Ê¡¸½»»¥¹ÊÊ¡¹£¬¼´¿É»ñµÃÏîÄ¿Ô´Â룡
Èç¹ûÄã¾õµÃ±¾ÎĸɻõÂúÂú£¬¾ÍÇë²»Áß·ÖÏíºÍµã¡°ÔÚ¿´¡±Å¶£¡£¡
ÎÒÃǽ«»á²»¶¨ÆڷųöÏà¹ØµÄÄÚÈÝ£¬¿ÉÒÔ¹Ø×¢ Mapbox ΢ÐŹ«ÖںŲ¢Ð¡Ð¡ÆÚ´ýһϠ❤️
ÎÄÕÂÊÚȨתÔØ×Ô΢ÐŹ«ÖںţºMapbox
|