amap api 高德地图项目实操 - 区划聚合+海量点展示

demo内代码为amap api 实现项目内地图插件的效果

<!doctype html>
<html lang="zh-CN"><head><!-- 原始地址：//webapi.amap.com/ui/1.0/ui/geo/DistrictCluster/examples/plus-point-simplifier.html --><base href="http://webapi.amap.com/ui/1.0/ui/geo/DistrictCluster/examples/" /><link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/><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;}</style>
</head><body><div id="container"></div><script src="http://code.jquery.com/jquery-2.1.1.min.js"></script><script type="text/javascript" src='http://webapi.amap.com/maps?v=1.4.2&key=845e9f9e5def93461dfe86b4d643a0e1'></script><!-- UI组件库 1.0 --><script src="http://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script><script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>   <script type="text/javascript">
// 自定义图片var imageLayer = new AMap.ImageLayer({// url: 'http://1.img.dianjiangla.com/jdAssets/jdCity.png',url: 'http://1.img.dianjiangla.com/jdAssets/jdQh.png',opacity:0.8,bounds: new AMap.Bounds([118.8940912546568,29.20439576265778],[120.32081607375262,30.155545642054992]),zooms: [15.1, 20]});var imageLayer1 = new AMap.ImageLayer({// url: 'http://1.img.dianjiangla.com/jdAssets/jdQh.png',url: 'http://chuantu.biz/t6/173/1512980653x-1404793565.png',opacity:0.8,bounds: new AMap.Bounds([118.8940912546568,29.20439576265778],[120.32081607375262,30.155545642054992]),zooms: [0, 12]});var imageLayer2 = new AMap.ImageLayer({// url: 'http://1.img.dianjiangla.com/jdAssets/8bei.png',url: 'http://www.bbvdd.com/d/201712111707229eg.png',opacity:0.8,bounds: new AMap.Bounds([118.8940912546568,29.20439576265778],[120.32081607375262,30.155545642054992]),zooms: [12.1, 13]});var imageLayer3 = new AMap.ImageLayer({// url: 'http://1.img.dianjiangla.com/jdAssets/8bei.png',url: 'http://www.bbvdd.com/d/20171211171824rag.png',opacity:0.8,bounds: new AMap.Bounds([118.8940912546568,29.20439576265778],[120.32081607375262,30.155545642054992]),zooms: [13.1, 15]});//创建地图var map = new AMap.Map('container', {resizeEnable: true,expandZoomRange:true,zooms:[4,20],zoom: 11,center: [119.286105,29.470681],layers: [new AMap.TileLayer(),imageLayer,imageLayer1,imageLayer2,imageLayer3// googleLayer]});var markers = ["119.280698,29.474716","119.280597,29.471716","119.286696,29.474716","119.281695,29.478716","119.286105,29.470681","119.226103,29.420683","119.296102,29.410682","119.226103,29.420683","119.047696,29.320256","119.041697,29.330257","119.048698,29.330258","119.042698,29.330258","119.307696,29.320256","119.221697,29.490257","119.048698,29.310258","119.242698,29.370258",]; var infoWindow = new AMap.InfoWindow({autoMove:true,showShadow:true,offset:(0,0)});     for(var i = 0; i < markers.length; i += 1){marker = new AMap.Marker({position: markers[i].split(','),map: map,icon: new AMap.Icon({            size: new AMap.Size(30, 30),  //图标大小imageSize: new AMap.Size(30, 30), image: "http://p1.so.qhimgs1.com/t01989df0653e0a5ac1.png",// imageOffset: new AMap.Pixel(-8, -30)})  });marker.content='<h2>我是标题</h2>我是第'+i+'个信息窗体的内容';//给Marker绑定单击事件marker.on('mousemove', markerClick);marker.on('mouseout', markerCloseClick);// marker  的显示和隐藏map.on("zoomchange",function(){if(map.getZoom()<10){console.log(marker.th.icon)  marker.hide( )map.clearMap( )}});}function markerClick(e){infoWindow.setContent(e.target.content);infoWindow.open(map, e.target.getPosition());}function markerCloseClick(e){infoWindow.close();}//鼠标点击选点map.on('mousemove', function(e) {  //经度 //纬度  var x = e.lnglat.getLng();var y= e.lnglat.getLat();if(29.205656<y&&y<29.774429&&118.896922<x&&x<119.765112){$.ajax({url:'http://172.30.34.63:6080/arcgis/rest/services/JDLand_XZM/MapServer/identify',data:'f=json&tolerance=5&returnGeometry=true&imageDisplay=1398%2C210%2C96&geometry=%7B"x"%3A'+x+'%2C"y"%3A'+y+'%7D&geometryType=esriGeometryPoint&sr=4326&mapExtent=118.94165999313367%2C29.6123519861085%2C119.90159041305554%2C29.756547542749125&layers=top',success:function( data ){var a = JSON.parse(data)console.log( a );var b = a.results[0].geometry.rings[0];var polygonArr1 = new Array();//多边形覆盖物节点坐标数组polygonArr1.push(b)var polygon1 = new AMap.Polygon({path: polygonArr1,//设置多边形边界路径strokeColor: "#FF33FF", //线颜色strokeOpacity: 0, //线透明度strokeWeight: 0,    //线宽fillColor: "#f66", //填充色fillOpacity: 0,//填充透明度bubble:true,geodesic:true,zIndex:10,});// // 监听鼠标移入、移除事件polygon1.on("mouseover",function (e) {  // polygon1.show( )polygon1.setOptions({fillOpacity : 0.8,strokeOpacity:0.5,strokeWeight:3,})}).on("mouseout",function () { polygon1.setOptions({fillOpacity : 0,strokeOpacity:0,strokeWeight:0,})// polygon1.hide( )});polygon1.setMap(map);},error:function(error){console.log(error);return;}});}}); //加载相关组件AMapUI.load(['ui/geo/DistrictCluster', 'ui/misc/PointSimplifier', 'lib/$'], function(DistrictCluster, PointSimplifier, $) {window.DistrictCluster = DistrictCluster;//启动页面});</script>
</body></html>

amap api 高德地图项目实操 - 区划聚合+海量点展示相关推荐

高德地图区划聚合+海量点展示
<!doctype html> <html lang="zh-CN"> <head> <!-- 原始地址://webapi.ama ...
SpringBoot集成Mybatis项目实操
本文为<从零打造项目>系列第三篇文章,首发于个人网站. <从零打造项目>系列文章比MyBatis Generator更强大的代码生成器 SpringBoot项目基础设施搭建 ...
python三维图能画地图_Python地图绘制实操详解
网上有很多地图绘制的教程,更多趋向于全国地图或者省级地图,但有时我们需要到县级.闲得慌,今天以贵州省毕节市为例,分享一篇Python县级地图的绘制(遥想当时差点把百度翻了个底朝天),希望对需要的你能有 ...
Python17_项目实操关卡-人机PK
项目实操关卡-人机PK 通过实战去成长,这体现在:能在学习初期就知道什么是关键知识,了解专业程序员一般是怎么思考和解决问题的,在一遍遍分析问题.拆解问题及解决问题的过程中真正地理解知识,并用这些知识来 ...
python 爬虫（项目实操）
用BeautifulSoup库解析数据和提取数据,解析数据的方法是: 提取数据的方法是用find() 与find_all() 最后,我们把事情串起来,就变成下图中的模样.它所对应的,正是爬虫四步中的前 ...
新项目实操分析，用付费视频进行流量变现
我们知道,互联网的发展,使得网民越来越多,不仅上网的用户在增多,上网的时间也逐年增加. 所以很多人都想做互联网的生意,因为互联网有足够的关注度和巨大的流量.而且,互联网项目属于网上创业,硬件门槛相对较 ...
章节十五：项目实操：PK小游戏（3）
章节十五:项目实操:PK小游戏(3) 目录章节十五:项目实操:PK小游戏(3) 1. 明确项目目标 2. 分析过程,拆解项目 3. 代码实现,逐步执行 3.1 定义Book类 3.2 类BookMa ...
【Python自查手册】之项目实操
项目实操步骤分析:明确项目目标拆解(将一个问题拆解为多个步骤或者多种不同的层次,逐步解决和执行并最终达到效果)–分析过程拆到无法拆解为止解决:代码实现,逐步执行三局两胜制小游戏 # 敌我两PK ...
爬虫项目实操二、爬取“下厨房”网站的菜名、所需材料、和菜名所对应的详情页URL
项目-爬取"下厨房"网站的菜名.所需材料.和菜名所对应的详情页URL. 它有一个固定栏目,叫做"本周最受欢迎",收集了当周最招人喜欢的菜谱.地址如下: http ...

amap api 高德地图项目实操 - 区划聚合+海量点展示

amap api 高德地图项目实操 - 区划聚合+海量点展示相关推荐

最新文章

热门文章