Mapbox Cartogram 根据照片中的颜色来自定义地图颜色样式

MAPBOX制作专题图 最近看了一份人民大学的报告,《中国城市政商关系排行榜2020》,https://new.qq.com/omn/20201230/20201230A0F3MY00.html。 讲的是中国各个城市的政商关系健康指数,决定拿这份报告中的数据,来做一份html的专题图。 数据是使用python脚本从腾讯地图webapi上获取的,前端页面使用的是高德地图瓦片。 效果如下: 一、数据获取 参考腾讯web api:https://lbs.qq.com/service/webService/web... 阅读详情

教程 | 照片秒变底图,用Cartogram DIY一款符合自己品牌风格的底图吧!

 

 

最近发现一款好玩的工具,叫做Cartogram,可以把将任何一张照片的风格提取出来,制作成底图。

 

比如微信风格:

 

 

比如微博风格:

 

 

比如今日头条风格:

 

 

比如SnapChat风格:

 

 

比如抖音风格:

 

 

还有Mapbox风格:

 

 

下面就告诉你怎么样做这样一张底图吧!Cartogram是一款直接在网页端即可进行编辑的「神器」,只需要拖拖拽拽就可以秒生成一张好看的底图了。

 

?开始你的表演吧!

 

在百度上搜索 Mapbox Cartogram,进入第一个网页。你会看到如下界面

 

 

目前默认的是一张黑白色的建筑图片,点击左下角的「Select」你就可以上传自己想要的图片了!如果你用的是电脑,可以直接把图片拖入,很方便哦。

 

以这张二次元秋天的少女为例:

 

图片来自网络

 

上传以后,你会看到这样的画面,是不是经不住想要哇一声!

 

 

可以看到,地图中的建筑、河流、道路等,都被智能地赋予了图片上的颜色,如果你想要改变可以通过移动左下角图片上的小圆点进行调整。

 

 

每个小圆点都代表了一种地图的元素,比如我移动了决定地面颜色的小圆点,就会发现地图瞬间变成了这个样子。

 

 

是不是很神奇?你还可以直接改变整体的地图风格,支持炫彩、暗黑、明亮或者常规风格,就像下面这样。

 

 

设计好的底图,可以直接点击「Save Styles」,在Mapbox Studio中打开,进行更加细致的调整,比如添加数据、图标等等。这块的教程,我们后续还会继续分享!

 

 

想不想自己试一试?在试之前,不妨看一看Twitter上外国开发者的创意,开开脑洞!

 

 

 

vue+mapbox添加自定义图片图层、选中效果、显示popup、增加marker、图层过滤等 例如:平时需要在地图上显示一些设备的分布及状态。 阅读详情

相关推荐

解决win11无法安装.net framework 3.5(包括.net2.0和3.0)错误代码:0x80070005

解决win11无法安装.net framework 3.5(包括.net2.0和3.0)错误代码:0x80070005

zeng699304的博客 2万+

MapBox GL集成自定义Canvas制作动态效果

问题描述 当我们在使用MapBox过程中,有时需要添加动态图标或者一些其他复杂的效果。由于MapBox未提供添加GIF格式图片的接口。所以添加起来比较麻烦。而往往这些效果使用HTML或使用Canvas绘制很容易实现,所以本文主要介绍如何在MapBox中集成HTML或集成自定义Canvas效果。 相关接口 MapBox提供了addImage(id,image,options)方法,其具体介绍如下: ...

giscoder的博客 5013

保姆级教程:用Python+OpenCV实现相移法与格雷码三维重建(从生成条纹到点云生成)

本文详细介绍了使用Python和OpenCV实现相移法与格雷码三维重建的全流程,从条纹生成到点云计算。通过结构光技术,结合相移法和格雷码,实现高精度的三维重建,适用于无纹理物体表面的密集对应点生成。教程包含环境搭建、条纹生成、相位计算、三维点云重建及常见问题排查,适合计算机视觉开发者和研究人员。

weixin_33443333的博客 349

使用cartogram自制Tableau可用的mapbox地图样式

使用cartogram自制Tableau可用的mapbox地图样式

gly1653810310的博客 989

东方财富网API接口逆向分析:手把手教你破解那个带jQuery回调的股票数据接口

本文详细解析了东方财富网股票数据API接口的逆向工程实战技巧,重点介绍了JSONP接口的核心机制、参数解析及数据处理方法。通过Python代码示例演示了如何构造请求、处理分页数据及应对反爬策略,帮助开发者高效获取股票数据。文章还提供了完整的爬虫实现案例和常见问题排查指南。

weixin_30790841的博客 714

intel-VROC raid卡驱动 centos7.9

u盘进入系统,按e,在出现下面在quiet前面输入inst.dd initcall_blacklist=vmd_drv_init 后按Ctrl和x,开始引导。进入系统,按e,在出现下面在quiet前面输入inst.dd inicll_blacklist=vmd_drv_init 后按Ctrl和x,开始引导。驱动完成后,在输入 c 回车, 引导过程开始,进入安装界面。输入1 ,选择这个ISO驱动文件里的rpm包。输入1 ,选择这个ISO驱动文件里的rpm包。vi编辑 /etc/default/grub。

dacming的博客 4540

Mapbox 笔记1(Mapbox 是如何工作的)

文章目录初步了解MapboxMapbox 是如何工作的Access TokenToken的使用范围URL 限制创建和管理 access token创建新数据geojson数据格式创建数据集数据集转换为 tileset 初步了解Mapbox Mapbox 是如何工作的 Access Token 需要获取 access token(访问令牌)以使用 Mapbox 的各种工具、API、SDK。 Token的使用范围 每个 access token 都可以限制Mapbox API的使用范围。在选择 token 范围

hequhecong10857的博客 2610

告别‘火龙’:实测BES2800/RK2108等主流芯片,聊聊AI眼镜的功耗与散热‘内卷’实战

本文深入探讨了AI智能眼镜在功耗与散热方面的挑战,重点分析了恒玄BES2800和瑞芯微RK2108等主控芯片的能效表现。通过实测数据和优化策略,揭示了在6nm工艺、异构计算和系统级散热方案下的实战经验,为AI眼镜的功耗管理提供了实用解决方案。

weixin_30839881的博客 945

使用MapBox自定义地图

一、什么是MapBox,相对国内地图厂商的优势 MapBox是一家美国的地图厂商,2010 年成立于美国华盛顿,2017 年获得软银 1.64 亿美元 C 轮融资,完全开源的开发工具,帮助您在现有产品中实现灵活、轻量、稳定的地图、搜索、导航等位置功能的无缝添加。 因为完全开源所以你可以使用它做自己的地图,而不是像国内厂商一样只能使用厂商配置好的地图。比方说一些产业园区在百度或高德地图中没有显示内部道路,如果这时候有这个显示需求就得借助瓦片或者使用mapbox自己绘制地图了。 二、自定义地图需要做些什么 这里

jianghe_130的博客 5503

使用 MATLAB/Simulink 构建一个基于FOC控制的PMSM矢量控制仿真模型

本教程详细介绍了基于MATLAB/Simulink的永磁同步电机(PMSM)磁场定向控制(FOC)系统建模与仿真方法。主要内容包括:PMSM电机模型参数设置、Clarke/Park变换模块设计、电流环PID控制器配置、SVPWM调制实现以及系统仿真参数优化。文章提供了模块化设计思路和具体参数设置示例,并给出了PID整定建议和进阶优化方向。通过该仿真模型,可深入理解PMSM矢量控制原理,掌握高性能电机控制系统的建模技巧,适用于伺服系统、电动汽车驱动等高端控制场景。教程还推荐了实时仿真和高级控制策略等扩展应用。

xiaoheshang_123的博客 528

Python从0到100完整学习指南(必看导航)

想做这件事情很久了,这次我更新了自己所写过的所有博客,汇集成了Python从0到100,共一百节课,帮助大家一个月时间里从零基础到学习Python基础语法、Python爬虫、Web开发、 计算机视觉、机器学习、神经网络以及人工智能相关知识,成为学业升学和工作就业的先行者!

拥有百余位万粉技术博主、200余位可合作代发博主,私域技术社群规模达千人,商务合作私信 6万+

mapbox自定义地图

基于mapbox根据自己的气象数据定制地图 更多地图效果访问www.mapbox.cn/mapbox-gl-js/examples/ 效果图-风场图 热力图 App.vue <template> <div style="height: 100%; width: 100%"> <div ref="basicMapbox" id="map" :style="mapSize"> <div class="screen">..

weixin_52375283的博客 2511

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

Mapbox 加载自定义 WMS 数据源

Mapbox 加载自定义 WMS 数据源 Step 1 引入依赖文件 <link href="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css" rel="stylesheet"> <script src="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js"></script> Step 2 创建地图容器 <div id="ma

Young Lee 1862

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

Mapbox实现自定义经纬网及标注

在Mapbox地图中,添加经纬网与经纬网坐标标注,并随着地图缩放自适应经纬网网格大小。

YuWebGIS 2594

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

cesium添加mapbox自定义风格底图

前段时间一直想把mapbox的底图添加到cesium中,一直没找到方法。刚刚在cesium的api 中找到了相关的接口,发现现在各种应用开发越来越简便了;里面相关参数写的很详细,如下: 以下是代码: /* * @Author: dzj * @Date: 2020-01-06 18:37:18 * @LastEditTime : 2020-01-06 18:38:40 *...

Dengzj_GISER 8457

unity 使用 Mapbox 设置自定义低图

unity 使用 mapbox插件自定义数字地球底图

qq_39654518的博客 4112

mapbox-gl自定义图层动态贴图效果(视频)

参见链接网址: https://mp.weixin.qq.com/s?__biz=MzU2ODYzNzc4OQ==&mid=2247485788&idx=1&sn=447a4562edb51b730de6386a5eb9158f&chksm=fc8ba96ecbfc2078fb02a06018e55f2b71ab740b045db4977a6150f7963f09c7e08e956f4157&token=991653124&lang=zh_CN#rd ...

地理信息技术杂谈 博客,欢迎技术交流 2079

mapbox、three.js添加自定义3d模型

废话不多说,先看效果图 1、先初始化地图 initMap() { mapboxgl.accessToken = 'pk.eyJ1IjoiMTgzODI0ZHl0IiwiYSI6ImNqbHExNDVjZzI0ZmUza2wxMDhocnlyem4ifQ.FZoJzmqTtli8hAvvAc1OPA' this.map = new mapboxgl.Map({ ...

qq_41186500的博客 4781

mapbox中对同一图层(layer)的不同要素(feature)设置不同的颜色

方法是,给geojson中的每一个feature的propreties设置一个color属性,用于承载不同的颜色,然后在layer加载时候,给paint使用["get","color"],具体代码如下: var myLocation={ "type": "FeatureCollection", "features": [ { "type"...

qq_33460928的博客 9467

MapBox加载不同风格的地图

初始化MapBox地图: var map = new mapboxgl.Map({ container: 'map', zoom: 3, center: [105, 34], //此处更改地图风格 style: 'mapbox://styles/mapbox/satellite-v9', hash: false, }); 1.基础地图(mapbox://style

weixin_42562567的博客 4136

【mapbox】常用功能 改变地图颜色、数据源配置、图层配置

【mapbox】常用功能一. 改变地图颜色 一. 改变地图颜色 由于美工的需求,需要地图颜色与设计稿一致,于是在网上找到了以下方法 用mapbox自带的style样式 用studio.mapbox 自己设计 用蒙版改变颜色(会模糊) ...

深耕 WebGIS 前端 / 数字孪生三维可视化✨ 1万+

Mapbox可视化之填色图

Mapbox填色图绘制的两种方式介绍

Civitasv 4583

Mapbox GL JS实现炫酷的地图背景

经常看到网上的各种地图,有着炫酷的地图背景,用户体验非常不错。在Mapbox GL JS这块,其实关于地图的背景没有太多的设置。但当我们想基于Mapbox GL JS实现炫酷的地图背景改怎么办呢?这里我从三方面介绍一下,如何实现炫酷的Mapbox GL JS地图背景,建议使用第三种。

做GIS梦的人 2356

Mapbox hover 标记点时改变标记点颜色及样式

最近在做 Mapbox 地图,UI需求是当用户点击或者hover到标记点时,改变该标记点的样式并添加一些动画效果。最开始的思路是想拿到该标记点的元素,想直接改,但是发现不可以改变属性,然后想着在hover标记点时添加一个新标记点,但是添加后的标记点的位置和原始标记点有一些出入,hover时效果不好。想了好久……突然就发现我又可以了吼吼吼吼吼吼吼!!!! 思路就是,加载完地图,在添加标记点图层时,再添加一个图层作为hover标记点后的效果图层,初始隐藏掉该图层,当鼠标hover该标记点时将它显示出来 看效果:

不同场景下的水平居中 1772

百度地图API详解之自定义地图类型

个人博客原文地址:http://www.jiazhengblog.com/blog/2011/10/08/422/ 今天的文章主要介绍如何利用地图API实现自定义地图。 百度地图API目前默认支持两种地图类型(map type):普通图和三维图,它们分别通过常量BMAP_NORMAL_MAP和BMAP_PERSPECTIVE_MAP来表示,在1.2版本中这两个常量实际上是MapType对象...

weixin_30271335的博客 1035
上一篇: 利用Window命令行将同一文件夹下面的CSV文件合并到一个文件
下一篇: 用jupyter notebook打开指定目录下的.ipynb文件
普通网友
博客等级 码龄9年 36粉丝 28原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值