天地图api 区划聚合+海量点展示 区划到乡镇
2018-09-29 本文已影响0人
凉介Seven
demo内代码为区县级区划到乡镇的demo例子，需要arcgis服务作为支撑获取相应坐标点实现区划效果
<!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>
