mapbox 聚合图

话不多说先看效果图

要实现的功能就是按照根据省份展示出各省上传的数据量

首先我们可以查看 mapboxgl官网有一个例子地址如下： https://docs.mapbox.com/mapbox-gl-js/example/cluster/

可以复制过来直接查看是否有聚合图

是这样的之后我想把数据的颜色变得有些透明的颜色，将字体的颜色改成白色的

https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers-circle 这个链接就是修改circle样式的，

mapboxgl.accessToken ='<your access token here>';;var map = new mapboxgl.Map({container: "map",style: "mapbox://styles/mapbox/streets-v11",center: [-65.017, -16.457],zoom: 5});map.on("load", function() {// 从GeoJSON数据添加一个新的源并设置“cluster”选项为true。GL-JS将把point_count属性添加到源数据中。map.addSource("earthquakes", {type: "geojson",data:"https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",// data.data,//将上面的换成我所需要的cluster: true,clusterMaxZoom: 14, //最大缩放到群集点clusterRadius: 50 // 每一组点的半径（=50）});// 外围有数字的圆圈，加晕染map.addLayer({id: "clusters",type: "circle",source: "earthquakes",filter: ["has", "point_count"],paint: {//*蓝色，当点数小于100时为20px圆//*点计数在100到750之间时为黄色，21px圆//*点计数大于或等于750时为22像素的粉红色圆圈"circle-color": ["step",["get", "point_count"],"rgba(81, 187, 214, 0.8)",100,"rgba(241, 240, 117, 0.8)",750,"rgba(242, 140, 177, 0.8)"],"circle-radius": ["step",["get", "point_count"],20, //蓝色，当点数小于100时为20px圆100, //对应上面circle-color 数字，意思为100以内21, //点计数在100到750之间时为黄色，21px圆750, //对应上面circle-color 数字，意思为750以内22 //点计数大于或等于750时为22像素的粉红色圆圈],// 这个是外边框的颜色 circle-stroke-color这个对应了上面circle-color"circle-stroke-color": ["step",["get", "point_count"],"rgba(81, 187, 214, 0.2)",100,"rgba(241, 240, 117, 0.2)",750,"rgba(242, 140, 177, 0.2)"],// 这个是外边框晕染的范围"circle-stroke-width": ["step",["get", "point_count"],5, //蓝色晕染长度，当点数小于100时为5px晕染100, //对应上面circle-color 数字，意思为100以内6, //点计数在100到750之间时为黄色，6px晕染750, //对应上面circle-color 数字，意思为750以内7 //点计数大于或等于750时为7px像素的粉红色晕染]}});//聚合图圆圈中的数字map.addLayer({id: "cluster-count",type: "symbol",source: "earthquakes",filter: ["has", "point_count"],layout: {"text-field": "{point_count_abbreviated}","text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],"text-size": 12},// 添加这个就可以改变圆圈内字样式，这里我改变了他的颜色paint: {"text-color": "#fff","text-opacity": 1}});// 聚合图中没有数字的显示小圆点map.addLayer({id: "unclustered-point",type: "circle",source: "earthquakes",filter: ["!", ["has", "point_count"]],paint: {"circle-color": "#11b4da","circle-radius": 4,"circle-stroke-width": 1,"circle-stroke-color": "#fff"}});// 单击时检查群集map.on("click", "clusters", function(e) {var features = map.queryRenderedFeatures(e.point, {layers: ["clusters"]});var clusterId = features[0].properties.cluster_id;map.getSource("earthquakes").getClusterExpansionZoom(clusterId, function(err, zoom) {if (err) return;map.easeTo({center: features[0].geometry.coordinates,zoom: zoom});});});map.on("mouseenter", "clusters", function() {map.getCanvas().style.cursor = "pointer";});map.on("mouseleave", "clusters", function() {map.getCanvas().style.cursor = "";});});

到这里我们就已经成功一半了，那么我们现在换掉mapbox官网的数据，展示我们自己的数据，

我的数据是酱紫的，所以改下数据就可以了

map.on("load", function() {// 从GeoJSON数据添加一个新的源并设置“cluster”选项为true。GL-JS将把point_count属性添加到源数据中。map.addSource("earthquakes", {type: "geojson",data:// "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",data.data,//将上面的换成我所需要的cluster: true,clusterMaxZoom: 14, //最大缩放到群集点clusterRadius: 50 // 每一组点的半径（=50）});// 外围有数字的圆圈，加晕染map.addLayer({id: "clusters",type: "circle",source: "earthquakes",filter: ["has", "countTotal"],  //这个地方是返回值是countTotal，所以要改成你要展示的数字paint: {//*蓝色，当点数小于100时为20px圆//*点计数在100到750之间时为黄色，21px圆//*点计数大于或等于750时为22像素的粉红色圆圈"circle-color": ["step",["get", "countTotal"],"rgba(81, 187, 214, 0.8)",100,"rgba(241, 240, 117, 0.8)",750,"rgba(242, 140, 177, 0.8)"],"circle-radius": ["step",["get", "countTotal"],20, //蓝色，当点数小于100时为20px圆100, //对应上面circle-color 数字，意思为100以内21, //点计数在100到750之间时为黄色，21px圆750, //对应上面circle-color 数字，意思为750以内22 //点计数大于或等于750时为22像素的粉红色圆圈],// 这个是外边框的颜色 circle-stroke-color这个对应了上面circle-color"circle-stroke-color": ["step",["get", "countTotal"],"rgba(81, 187, 214, 0.2)",100,"rgba(241, 240, 117, 0.2)",750,"rgba(242, 140, 177, 0.2)"],// 这个是外边框晕染的范围"circle-stroke-width": ["step",["get", "countTotal"],5, //蓝色晕染长度，当点数小于100时为5px晕染100, //对应上面circle-color 数字，意思为100以内6, //点计数在100到750之间时为黄色，6px晕染750, //对应上面circle-color 数字，意思为750以内7 //点计数大于或等于750时为7px像素的粉红色晕染]}});//聚合图圆圈中的数字map.addLayer({id: "cluster-count",type: "symbol",source: "earthquakes",filter: ["has", "countTotal"],layout: {// "text-field": "{point_count_abbreviated}", //原来mapbox的值"text-field": "{countTotal}" + "\n" + "{xzqhmc}",//我们找到我们自己要展示的值"text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],"text-size": 12},// 添加这个就可以改变圆圈内字样式，这里我改变了他的颜色paint: {"text-color": "#fff","text-opacity": 1}});// 聚合图中没有数字的显示小圆点map.addLayer({id: "unclustered-point",type: "circle",source: "earthquakes",filter: ["!", ["has", "countTotal"]],paint: {"circle-color": "#11b4da","circle-radius": 4,"circle-stroke-width": 1,"circle-stroke-color": "#fff"}});// 单击时检查群集map.on("click", "clusters", function(e) {var features = map.queryRenderedFeatures(e.point, {layers: ["clusters"]});var clusterId = features[0].properties.cluster_id;map.getSource("earthquakes").getClusterExpansionZoom(clusterId, function(err, zoom) {if (err) return;map.easeTo({center: features[0].geometry.coordinates,zoom: zoom});});});map.on("mouseenter", "clusters", function() {map.getCanvas().style.cursor = "pointer";});map.on("mouseleave", "clusters", function() {map.getCanvas().style.cursor = "";});});

改下颜色因为我获取的数据量很小没有很大，最后的结果就是第一张图

mapbox 聚合图相关推荐

简图-一款聚合图床源码
程序说明原生PHP开发的一个图床聚合程序,自带鉴黄功能,违规图片智能拦截可以直接复制上传以后的链接以及预览支持5个接口上传,图片都支持https 下载地址:简图-一款聚合图床源码 – 站鸟网程 ...
不限流量全网CDN图床图床API_聚合图床
如果你是一个资深互联网用户,应该已经深知世界上最贵的就是免费.我们仍然会对用户提供免费服务,并且对普通用户来说足够使用.但是如果你想获得更加稳定可靠以及可定制化的图床服务,请考虑我们的付费套餐. 各版 ...
【推荐】一个聚合图床
起因发现刷新一下博客有些图片烂掉了... 检查了一下请求发现是用的新浪图床增加了防盗链,请求报403(哦吼,完蛋). 解决百度了一些图床,发现都还不错,但是不确定他们的稳定性,我也没有兴趣对上传到 ...
推荐自己写的 PicGo 聚合图床插件及 Markdown 写文章图像解决方案
前言之前就装了 PicGo ,这是一个各种图床.OSS 甚至 GitHub 的图片托管一站式管理的软件(即一键上传图片).今年年初我上网找了各种图床,最后敲定聚合图床 ,买了基础版会员(100 元 ...
乘风聚合图床源码多接口
文章目录[隐藏] 源码介绍源码截图源码介绍纯PHP源码无后台,有能力自己加后台,非常简约精美,11个接口,大部分都可以使用.代码全开源无加密! 源码截图附件下载文件名称:乘风聚合图床源 ...
React Native for Arcgis 地图开发聚合图Cluster （十一）
ClusterLayerCtrl 聚合图层调用封装 import React, {useEffect, useState} from 'react'; import {ScrollView, Styl ...
ShareX+聚合图床设置一键上传图片，输出Markdown图片链接
因为,ShareX的下载地址,普通网络打不开. 如果有需要的朋友,可以关注公众号:土堆碎念,然后回复:图床,即可获得安装包文件. 1(可选).为了保存备份,可将剪切的图片,自动以图片的形式,保存在设定 ...
聚合图床，一个聚合了多个免费图床的图床
使用免费图床,总是担心万一哪天图床服务挂了,那之前的图片可能都失效了,再找回来也很困难.有了这样一个聚合图床,每次图片会同步上传到不同的图床,即便原先的图床挂了,也可以通过搜索找回当初其他图床上的文件 ...
Openlayers 聚合图、权重聚合图以及聚合图点击事件
Openlayers 聚合图.权重聚合图以及聚合图点击事件 OpenLayers 教程 Openlayers 聚合图.权重聚合图.聚合图事件在线示例 OpenLayers 教程在实际工作中,Ope ...

mapbox 聚合图

mapbox 聚合图相关推荐

最新文章

热门文章