谷歌地图聚合点

author author     2022-09-10     342

关键词:

我们有时候需要观察地图 不同地方数据的所在范围和分布密集情况,热力图和聚合点的使用无疑是最好的选择。

1.首先说说百度地图,只做国内的地图可以使用百度地图的海量点和热力图还是蛮好用的。

a.海量点的最大好处是加载很多数据点的情况下不卡顿。

b.如果是画mark在地图上,当点多的时候,会很卡。

c.我之所以用谷歌地图的热力图,是因为我发现百度地图的热力图没有叠加功能,满足不了我的需求。比如说我想了解全国姓张,李,王的人的对比分布,我想要姓张的区域显示红色,姓李的显示蓝色,姓王的显示橙色。这个需求百度地图无法满足我,但是谷歌可以。

2.说说谷歌地图,谷歌地图的热力图我就不说了,https://developers.google.com/maps/documentation/javascript/examples/        这里面有实例的。

a.谷歌地图支持热力图叠加,但是没有海量点,这一点让我很难过,如果全部画marker的话,数据点太多,加载太卡

b.这就用到了谷歌聚合点,如图

技术分享

技术分享

3.代码实例,主要看看引用了哪些个文件,我是从      https://github.com/Leaflet/Leaflet.markercluster    找到的下载包和实例

 

<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js" integrity="sha512-WXoSHqw/t26DszhdMhOXOkI7qCiv5QWXhH9R7CgvgZMHz1ImlkVQ3uNsiQKu5wwbbxtPzFXd1hK4tzno2VqhpA==" crossorigin=""></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="screen.css" />

<link rel="stylesheet" href="../dist/MarkerCluster.css" />
<link rel="stylesheet" href="../dist/MarkerCluster.Default.css" />
<script src="../dist/leaflet.markercluster-src.js"></script>
</head>
<body>

<div id="map"></div>
<button id="populate">Populate 1 marker</button>
<button id="remove">Remove 1 marker</button>

<script type="text/javascript">

var tiles = L.tileLayer(‘https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png‘, {
maxZoom: 18,
attribution: ‘&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors‘
}),
latlng = new L.LatLng(50.5, 30.51);

var map = new L.Map(‘map‘, {center: latlng, zoom: 15, layers: [tiles]});

var markers = new L.MarkerClusterGroup();
var markersList = [];

function populate() {
for (var i = 0; i < 100; i++) {
var m = new L.Marker(getRandomLatLng(map));
markersList.push(m);
markers.addLayer(m);
}
return false;
}
function populateRandomVector() {
for (var i = 0, latlngs = [], len = 20; i < len; i++) {
latlngs.push(getRandomLatLng(map));
}
var path = new L.Polyline(latlngs);
map.addLayer(path);
}
function getRandomLatLng(map) {
var bounds = map.getBounds(),
southWest = bounds.getSouthWest(),
northEast = bounds.getNorthEast(),
lngSpan = northEast.lng - southWest.lng,
latSpan = northEast.lat - southWest.lat;

return new L.LatLng(
southWest.lat + latSpan * Math.random(),
southWest.lng + lngSpan * Math.random());
}

markers.on(‘clusterclick‘, function (a) {
alert(‘cluster ‘ + a.layer.getAllChildMarkers().length);
});
markers.on(‘click‘, function (a) {
alert(‘marker ‘ + a.layer);
});

populate();
map.addLayer(markers);

L.DomUtil.get(‘populate‘).onclick = function () {
var bounds = map.getBounds(),
southWest = bounds.getSouthWest(),
northEast = bounds.getNorthEast(),
lngSpan = northEast.lng - southWest.lng,
latSpan = northEast.lat - southWest.lat;
var m = new L.Marker(new L.LatLng(
southWest.lat + latSpan * 0.5,
southWest.lng + lngSpan * 0.5));
markersList.push(m);
markers.addLayer(m);
};
L.DomUtil.get(‘remove‘).onclick = function () {
markers.removeLayer(markersList.pop());
};
</script>
</body>
</html>
































































谷歌markercluster

...是画mark在地图上,当点多的时候,会很卡。c.我之所以用谷歌地图的热力图,是因为我发现百度地图的热力图没有叠加功能,满足不了我的需求。比如说我想了解全国姓张, 查看详情

地图点聚合优化方案

...com/LBSer/p/4417127.html一、为什么需要点聚合   在地图上查询结果通常以标记点的形式展现,但是如果标记点较多,不仅会大大增加客户端的渲染时间,让客户端变得很卡,而且会让人产生密集恐惧症(图1)。为了解决... 查看详情

百度地图点聚合

<html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="viewport"content="initial-scale=1.0,user-scalable=no"/><styletype="text/css">body, 查看详情

ionic修改应用名称及修改百度离线地图点聚合图标

1.ionic修改应用名称2.修改百度离线地图点聚合图标 查看详情

教你如何拔取百度地图poi兴趣点

教你如何拔取百度地图POI兴趣点 通过聚合数据提供的接口,获取百度地图的POI兴趣点,并存储至数据库中。 实现:1、聚合数据百度POI接口说明调用聚合数据,首先得注册聚合。聚合数据提供的百度地图POI的接口有三个... 查看详情

与谷歌地图上的兴趣点互动

】与谷歌地图上的兴趣点互动【英文标题】:InteractwithPointsofInterestonGoogleMaps【发布时间】:2020-01-1000:35:28【问题描述】:我正在使用MapsApi开发AndroidStudio。在显示的地图上,有谷歌已经放置的标记(见下图)。有没有办法通过点... 查看详情

在谷歌地图中做“沿途的兴趣点”

】在谷歌地图中做“沿途的兴趣点”【英文标题】:doing"pointsofinterestalongaroute"ingooglemaps【发布时间】:2011-04-2917:38:53【问题描述】:我需要允许旅行者使用谷歌地图绘制路线,然后查询我的兴趣点数据库(比如说,麦当... 查看详情

在android中的谷歌地图上绘制点

】在android中的谷歌地图上绘制点【英文标题】:drawpointsongooglemapsinandroid【发布时间】:2011-12-2610:46:31【问题描述】:我正在将Google地图与我的android应用程序集成。我能够在地图视图中完美地显示地图。现在我需要根据获取方向... 查看详情

如何将点保存到谷歌地图

】如何将点保存到谷歌地图【英文标题】:HowtosaveapointtoGoogleMaps【发布时间】:2019-07-2122:29:47【问题描述】:我正在寻找一种解决方案,该解决方案可以让我根据纬度和经度坐标在地图上保存地址,以便我可以直接在我的程序中... 查看详情

高德地图实现一个比例圆环形聚合点缩放(代码片段)

前言:碰到一个需求,效果实现一个该范围不同点数的圆环比例以及总数。比例按照对应的区域内不同内容的数量实现比例圆环比例。查看高德api只有点聚合效果,我们可以根据他的基础api来增加实现更高级的效果改造。先上效... 查看详情

两个纬度/经度点之间的谷歌地图距离计算?

】两个纬度/经度点之间的谷歌地图距离计算?【英文标题】:GoogleMapDistanceCalculationbetweenTwoLat/LngPoints?【发布时间】:2013-01-1617:38:30【问题描述】:最好的方法是什么(或)是否有谷歌的方法已经可以计算简单的StraightLine两点之... 查看详情

如何使用多色折线绘制谷歌地图航路点

】如何使用多色折线绘制谷歌地图航路点【英文标题】:howtodrawagooglemapswaypointwithmulti-coloredpolylines【发布时间】:2016-06-2914:11:57【问题描述】:您好,我尝试在谷歌地图上绘制带有方向航路点的折线。我尝试过类似的方法。Mydraw... 查看详情

谷歌地图视图如何在地图缩放时获取原始点或框进行注释?

】谷歌地图视图如何在地图缩放时获取原始点或框进行注释?【英文标题】:Googlemapviewhowcanigetoriginalpointorframeforannotationwhilemapzoom?【发布时间】:2011-12-1614:03:16【问题描述】:我在点击注释时在地图中设置了自定义注释针我得到... 查看详情

百度点聚合功能,自定义针头功能

 关于怎么导入百度地图SDK与创建应用就不多说了,百度的文档应该比我说的更详细,下面直接正文吧:demo图:demo路径在最下面;1.首先地图的初始化-(void)viewWillAppear:(BOOL)animated{  [superviewWillAppear:animated];}-(void)setupView{  ... 查看详情

在谷歌地图中围绕一个点绘制半径

】在谷歌地图中围绕一个点绘制半径【英文标题】:DrawradiusaroundapointinGooglemap【发布时间】:2010-10-2323:19:17【问题描述】:我正在使用GoogleMapsAPI并添加了标记。现在我想在每个标记周围添加一个10英里的半径,这意味着一个在缩... 查看详情

获取位于谷歌地图多边形内的所有点

】获取位于谷歌地图多边形内的所有点【英文标题】:GetallpointsthatlieswithinapolygononGoogleMap【发布时间】:2016-10-0107:02:28【问题描述】:我正在构建一个Rails应用程序,其中Google地图用于使用绘图工具过滤地图上的所有点FileModel.rbc... 查看详情

移动谷歌地图标记点时用纬度和经度更新数据库

】移动谷歌地图标记点时用纬度和经度更新数据库【英文标题】:Updatedbwithlatitudeandlongitudewhengooglemapmarkerpointismove【发布时间】:2013-11-1009:31:51【问题描述】:嗯,我有一个谷歌地图,所有经纬度都来自db,它显示在地图上。我... 查看详情

谷歌地图方向服务航路点超过 50 个

】谷歌地图方向服务航路点超过50个【英文标题】:Googlemapdirectionserviceswaypointsmorethan50【发布时间】:2014-03-2902:29:47【问题描述】:Documentation表示航点限制为8个点。但我必须从50多个航点中找到最佳航点订单列表。该怎么做?我... 查看详情