高德地图api 点聚合+海量点+点击事件（根据地区或坐标进行定位）

<!doctype html>
<html lang="zh-CN">

<head>
       
       <base href="//webapi.amap.com/ui/1.0/ui/geo/DistrictCluster/examples/" />
       <meta charset="utf-8">
       <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
       <title>区划聚合+海量点展示</title>
       <style>
           html,
           body,
           #container {
               width: 100%;
               height: 100%;
               margin: 0px;
           }

           #loadingTip {
               position: absolute;
               z-index: 9999;
               top: 0;
               left: 0;
               padding: 3px 10px;
               background: red;
               color: #fff;
               font-size: 14px;
           }

           #right {
               position: absolute;
               z-index: 9999;
               top: 0;
               right: 0;
               padding: 3px 10px;
               background: red;
               color: #fff;
               font-size: 14px;
           }
       </style>
   </head>

<body>
       <div id="container">
           <div id="right">
               行政编码：<input id="adcode" type="text" value="" />
               坐标：<input id="lnglat" type="text" value="" />
               <a onclick="a()">点击 </a>
           </div>
       </div>
       <script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.12&key=您申请的key值'></script>
       
       <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
       <script type="text/javascript">
           //创建地图
           var map = new AMap.Map('container', {
               resizeEnable: true,
               zoom: 4
           });

           function a() {
               var lnglat;
               var adcode;
               adcode = document.getElementById("adcode").value;
               lnglat = document.getElementById("lnglat").value;
               console.log("lnglat:"+lnglat)
               if(!lnglat == '') {
                   console.log("1:"+adcode)
                   var point = lnglat.split(",")；
                   distCluster.zoomToShowSubFeatures(adcode, [point[0], point[1]])
                   addMark(point[0], point[1])
               } else {
                   console.log("2:"+adcode)
                   distCluster.zoomToShowSubFeatures(adcode)
               }

               function refresh() {
                   var zoom = 13;
                   console.log("zoom:" + zoom)
                   //获取 pointStyle
                   var pointStyle = pointSimplifierIns.getRenderOptions().pointStyle;

                   //根据当前zoom调整点的尺寸
                   pointStyle.width = pointStyle.height = 2 * Math.pow(1.2, map.getZoom() - 3);
               }

}

           function addMark(lng, lat) {
               // 创建一个自定义内容的 infowindow 实例
               var infoWindowContent = "坐标:" + lng + "," + lat;
               var infoWindow = new AMap.InfoWindow({
                   position: [lng, lat],
                   offset: new AMap.Pixel(0, 0),
                   content: infoWindowContent
               });
               infoWindow.open(map);
           }

           function initPage(DistrictCluster, PointSimplifier, $) {
               var pointSimplifierIns = new PointSimplifier({
                   map: map, //所属的地图实例
                   autoSetFitView: false, //禁止自动更新地图视野
                   zIndex: 110,
                   getPosition: function(item) {

                       if(!item) {
                           return null;
                       }
                       var lngLatLine = item.lngLatLine;

                       if(!lngLatLine) {
                           return null;
                       }

                           return item.groupId;
                       },
                       groupStyleOptions: function(gid) {

                           return groupStyleMap[gid];
                       }
                   }
               });

               function onIconLoad() {
                   pointSimplifierIns.renderLater();
               }

               function onIconError(e) {
                   alert('图片加载失败！');
               }

               groupStyleMap = {
                   '0': {
                       pointStyle: {
                           //绘制点占据的矩形区域
                           content: PointSimplifier.Render.Canvas.getImageContent(
                               'http://a.amap.com/jsapi_demos/static/images/blue.png', onIconLoad, onIconError),
                           //宽度
                           width: 16,
                           //高度
                           height: 16,
                           //定位点为中心
                           offset: ['-50%', '-50%'],
                           fillStyle: null,
                           //strokeStyle: null
                       }
                   },
                   '1': {
                       pointStyle: {
                           //绘制点占据的矩形区域
                           content: PointSimplifier.Render.Canvas.getImageContent(
                               'http://a.amap.com/jsapi_demos/static/images/green.png', onIconLoad, onIconError),
                           //宽度
                           width: 16,
                           //高度
                           height: 16,
                           //定位点为中心
                           offset: ['-50%', '-50%'],
                           fillStyle: null,
                           // strokeStyle: null
                       }
                   }
               };

               var distCluster = new DistrictCluster({
                   zIndex: 100,
                   map: map, //所属的地图实例

getPosition: function(item) {

                       if(!item) {
                           return null;
                       }
                       var lngLatLine = item.lngLatLine;

                       if(!lngLatLine) {
                           return null;
                       }

                       var parts = lngLatLine.split(',');
                       //返回经纬度
                       return [parseFloat(parts[0]), parseFloat(parts[1])];
                   }
               });

window.distCluster = distCluster;

function refresh() {

                   var zoom = map.getZoom();
                   console.log("zoom:" + zoom)
                   //获取 pointStyle
                   var pointStyle = pointSimplifierIns.getRenderOptions().pointStyle;

                   //根据当前zoom调整点的尺寸
                   pointStyle.width = pointStyle.height = 2 * Math.pow(1.2, map.getZoom() - 3);
               }

               map.on('zoomend', function() {
                   refresh();
               });

refresh();

$('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(document.body);
$.get('https://a.amap.com/amap-ui/static/data/10w.txt', function(csv) {

                   $('#loadingTip').remove();
                   console.log("调用数据")
                   var lines = csv.split('\n');
                   data = [];

                   for(var i = 0, len = lines.length; i < len; i++) {
                       data.push({
                           lngLatLine: lines[i],
                           groupId: i % 2
                       });
                   }
                   distCluster.setData(data);
                   pointSimplifierIns.setData(data);
               });
           }

//加载相关组件
AMapUI.load(['ui/geo/DistrictCluster', 'ui/misc/PointSimplifier', 'lib/$'], function(DistrictCluster, PointSimplifier, $) {

               //启动页面
               initPage(DistrictCluster, PointSimplifier, $);
           });
       </script>
   </body>

</html>

效果图如下：

高德地图api 点聚合+海量点+点击事件（根据地区或坐标进行定位）

猜你喜欢