高德地图3D菱形 区域点击搜索
更新一波吧
<!doctype html>
<html lang="zh-CN"> <head>
<!-- 原始地址：//webapi.amap.com/ui/1.0/ui/geo/DistrictExplorer/examples/index.html -->
<!-- <base href="//webapi.amap.com/ui/1.0/ui/geo/DistrictExplorer/examples/" target="_top"/> -->
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>行政区浏览</title>
<link rel="stylesheet" type="text/css" href="//webapi.amap.com/ui/1.0/ui/geo/DistrictExplorer/examples/area.css">
<style type="text/css">
#btn_list {
width: 326px;
height: 60px;
padding: 10px 0 0 10px;
position: fixed;
top: 10px;
left: 10px;
background: rgba(11,11,13,0.2);
overflow-y: auto;
padding-right: 0;
}
.list_ul {
width: 100%;
height: 100%;
}
.list_li{
width: 86px;
height: 20px;
float: left;
border: 1px solid #252D30;
background: #0D1011;
margin-right: 15px;
margin-bottom: 20px;
cursor: pointer;
color: #CFCFD1;
font-size: 12px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
line-height: 20px;
}
.list_li_select{
border: 1px solid #58D9DC;
}
</style>
</head>
<script src="//webapi.amap.com/maps?v=1.4.15&key=741a28e4b11880dfa0d6673f7c26f32d"></script>
<script src="//webapi.amap.com/loca?v=1.3.0&key=741a28e4b11880dfa0d6673f7c26f32d"></script>
<script src="//a.amap.com/Loca/static/mock/bj_heat_grid.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//a.amap.com/Loca/static/manual/example/script/demo.js"></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<body>
<div id="outer-box">
<div id="container" tabindex="0"></div>
<div id="panel" class="scrollbar1">
<ul id="area-tree">
</ul>
</div>
</div>
<div id="btn_list">
<ul class="list_ul">
<!-- <li class="list_li">西安市雁塔医院</li>
<li class="list_li">西安市雁塔医院</li>
<li class="list_li">西安市雁塔医院</li> -->
</ul>
</div>
<script type="text/javascript">
//创建地图
var map = new AMap.Map('container', {
mapStyle:"amap://styles/95dcdef6e6578530f59300980f588add",
resizeEnable: true,
rotateEnable:true,
pitchEnable:true,
zoom: 17.8,
pitch:75,
rotation:-15,
viewMode:'3D',//开启3D视图,默认为关闭
buildingAnimation:true,//楼块出现是否带动画
expandZoomRange:true,
// zooms:[3,20],
center:[108.925622,34.282085] ,// 108.907941,34.2463 });
debugger;
//just some colors
var colors = [
"#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
"#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
"#651067", "#329262", "#5574a6", "#3b3eac"
]; AMapUI.load(['ui/geo/DistrictExplorer', 'lib/$'], function(DistrictExplorer, $) { //创建一个实例
var districtExplorer = window.districtExplorer = new DistrictExplorer({
eventSupport: true, //打开事件支持
map: map
}); //当前聚焦的区域
var currentAreaNode = null; //鼠标hover提示内容
var $tipMarkerContent = $('<div class="tipMarker top"></div>'); var tipMarker = new AMap.Marker({
content: $tipMarkerContent.get(0),
offset: new AMap.Pixel(0, 0),
bubble: true
}); //根据Hover状态设置相关样式
function toggleHoverFeature(feature, isHover, position) { tipMarker.setMap(isHover ? map : null); if (!feature) {
return;
} var props = feature.properties; if (isHover) { //更新提示内容
$tipMarkerContent.html(props.adcode + ': ' + props.name);
//更新位置
tipMarker.setPosition(position || props.center);
} $('#area-tree').find('h2[data-adcode="' + props.adcode + '"]').toggleClass('hover', isHover); //更新相关多边形的样式
var polys = districtExplorer.findFeaturePolygonsByAdcode(props.adcode);
for (var i = 0, len = polys.length; i < len; i++) { polys[i].setOptions({
// fillOpacity: isHover ? 0.5 : 0.2
});
}
} //监听feature的hover事件
districtExplorer.on('featureMouseout featureMouseover', function(e, feature) {
toggleHoverFeature(feature, e.type === 'featureMouseover',
e.originalEvent ? e.originalEvent.lnglat : null);
}); //监听鼠标在feature上滑动
districtExplorer.on('featureMousemove', function(e, feature) {
//更新提示位置
tipMarker.setPosition(e.originalEvent.lnglat);
}); //feature被点击
districtExplorer.on('featureClick', function(e, feature) {
debugger;
var props = feature.properties;
var area = feature.properties.name;
var nodeList=[];
AMap.service(["AMap.PlaceSearch"], function() {
//构造地点查询类
var placeSearch = new AMap.PlaceSearch({ city: "029", // 兴趣点城市
citylimit: true, //是否强制限制在设置的城市内搜索
map: map, // 展现结果的地图实例
// panel: "panel", // 结果列表将在此容器中进行展示。
autoFitView: false // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
});
//关键字查询
placeSearch.search(''+area+'医院',function(status,result){
nodeList = result.poiList.pois;
console.log(result.poiList.pois);
var x= nodeList[0].location.lng;// 108
var y= nodeList[0].location.lat;// 34
map.setZoomAndCenter(18, [x,y]);
creatHtml(nodeList);
});
}); //如果存在子节点
if (props.childrenNum > 0) {
//切换聚焦区域
switch2AreaNode(props.adcode);
}
}); //绘制区域面板的节点
function renderAreaPanelNode(ele, props, color) { var $box = $('<li/>').addClass('lv_' + props.level); var $h2 = $('<h2/>').addClass('lv_' + props.level).attr({
'data-adcode': props.adcode,
'data-level': props.level,
'data-children-num': props.childrenNum || void(0),
'data-center': props.center.join(',')
}).html(props.name).appendTo($box); if (color) {
$h2.css('borderColor', color);
} //如果存在子节点
if (props.childrenNum > 0) { //显示隐藏
$('<div class="showHideBtn"></div>').appendTo($box); //子区域列表
$('<ul/>').addClass('sublist lv_' + props.level).appendTo($box); $('<div class="clear"></div>').appendTo($box); if (props.level !== 'country') {
$box.addClass('hide-sub');
}
} $box.appendTo(ele);
} //填充某个节点的子区域列表
function renderAreaPanel(areaNode) { var props = areaNode.getProps(); var $subBox = $('#area-tree').find('h2[data-adcode="' + props.adcode + '"]').siblings('ul.sublist'); if (!$subBox.length) {
//父节点不存在，先创建
renderAreaPanelNode($('#area-tree'), props);
$subBox = $('#area-tree').find('ul.sublist');
} if ($subBox.attr('data-loaded') === 'rendered') {
return;
} $subBox.attr('data-loaded', 'rendered'); var subFeatures = areaNode.getSubFeatures(); //填充子区域
for (var i = 0, len = subFeatures.length; i < len; i++) {
renderAreaPanelNode($subBox, areaNode.getPropsOfFeature(subFeatures[i]), colors[i % colors.length]);
}
} //绘制某个区域的边界
function renderAreaPolygons(areaNode) { //更新地图视野
map.setBounds(areaNode.getBounds(), null, null, true); //清除已有的绘制内容
districtExplorer.clearFeaturePolygons(); //绘制子区域 districtExplorer.renderSubFeatures(areaNode, function(feature, i) { var fillColor = colors[i % colors.length];
var strokeColor = colors[colors.length - 1 - i % colors.length]; return {
cursor: 'default',
bubble: true,
strokeColor: strokeColor, //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 3, //线宽
fillColor: fillColor, //填充色
fillOpacity: 0, //填充透明度
};
}); //绘制父区域
districtExplorer.renderParentFeature(areaNode, {
cursor: 'default',
bubble: true,
strokeColor: 'black', //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 1, //线宽
fillColor: null, //填充色
fillOpacity: 0, //填充透明度
});
} //切换区域后刷新显示内容
function refreshAreaNode(areaNode) { districtExplorer.setHoverFeature(null); renderAreaPolygons(areaNode); //更新选中节点的class
var $nodeEles = $('#area-tree').find('h2'); $nodeEles.removeClass('selected'); var $selectedNode = $nodeEles.filter('h2[data-adcode=' + areaNode.getAdcode() + ']').addClass('selected'); //展开下层节点
$selectedNode.closest('li').removeClass('hide-sub'); //折叠下层的子节点
$selectedNode.siblings('ul.sublist').children().addClass('hide-sub');
} //切换区域
function switch2AreaNode(adcode, callback) { if (currentAreaNode && ('' + currentAreaNode.getAdcode() === '' + adcode)) {
return;
} loadAreaNode(adcode, function(error, areaNode) { if (error) { if (callback) {
callback(error);
} return;
} currentAreaNode = window.currentAreaNode = areaNode; //设置当前使用的定位用节点
districtExplorer.setAreaNodesForLocating([currentAreaNode]); refreshAreaNode(areaNode); if (callback) {
callback(null, areaNode);
}
});
} //加载区域
function loadAreaNode(adcode, callback) { districtExplorer.loadAreaNode(adcode, function(error, areaNode) { if (error) { if (callback) {
callback(error);
} console.error(error); return;
} renderAreaPanel(areaNode); if (callback) {
callback(null, areaNode);
}
});
} //西安
switch2AreaNode(610100);
var layer = new Loca.ScatterPointLayer({
map: map,
eventSupport: true
}); var list = heatGrid.map(function (value) { var val = value.split('$');
return {
// coord: val[1].replace("116.","108.").replace("40.","34."),
coord: val[1],
value: +val[0]
}
}); layer.setData(list.slice(0, 5000), {
lnglat: 'coord'
}); var colorArr = [
'#2c7bb6',
'#abd9e9',
'#ffffbf',
'#fdae61',
'#d7191c'
]; layer.setOptions({
// 设定棱柱体顶点数量
vertex: 4,
// 单位米
unit: 'meter',
light: {
// 环境光
ambient: {
// 光照颜色
color: '#ffffff',
// 光照强度，范围 [0, 1]
intensity: 0.5
},
// 平行光
directional: {
color: '#ffffff',
// 光照方向，是指从地面原点起，光指向的方向。
// 数组分别表示 X 轴、Y 轴、Z 轴。
// 其中 X 正向朝东、Y 正向朝南、Z 正向朝地下。
direction: [1, -1.5, 2],
intensity: 0.6
}
},
style: {
// 正多边形半径
radius: 500,
height: {
key: 'value',
value: [0, 50000]
},
// 顶边颜色
color: {
key: 'value',
scale: 'quantile',
value: colorArr
},
opacity: 0.9,
// 旋转角度，单位弧度
rotate: Math.PI / 180 * 45
},
selectStyle: {
color: '#fcff19',
opacity: 0.9
}
}); layer.on('mousemove', (ev) => {
openInfoWin(map, ev.originalEvent, {
'位置': ev.rawData.coord,
'热度': ev.rawData.value
});
}); });
// 创建区医院html
function creatHtml(dataArr){
var html = '';
if(!dataArr){
return false;
}
for(var i=0;i<dataArr.length;i++){
html+="<li class='list_li' onClick='changePosition("+dataArr[i].location.lng+","+dataArr[i].location.lat+")' title="+dataArr[i].name+">"+dataArr[i].name+"</li>"
}
$('.list_ul').empty().append(html);
}
function changePosition (x,y){
map.setZoomAndCenter(18, [x,y]);
}
</script>
</body> </html>
高德地图3D菱形 区域点击搜索的更多相关文章
- 小程序Echarts 构建中国地图并锚定区域点击事件
小程序Echarts 构建中国地图并锚定区域点击事件 Step1 效果展示 使用的绘图框架为 Echarts for Wexin 具体API文档地址请点击 ----> Step2 条件准备 1. ...
- 高德地图markers生成和点击
因为自己平时上班也是比较忙,遇到什么写什么,希望能给现在的你一些帮助,都是自己在工作中遇到的问题,给自己一个提醒,也是分享 相信很多人在做高德地图开发的时候,对于新手,官方的demo解读单个marke ...
- iOS高德地图让指定区域或者点显示在屏幕中间
对于高德地图也是一个新手,很多功能看文档,问技术 或者高德群里讨论 群号:204668425 在我们需求中绘制的有 圆 折线 不规则图形 方式,打开地图指定的绘制图形置于屏幕中间 1.首先创建一个数 ...
- 高德地图3D版的使用方法
坐标拾取器: http://lbs.amap.com/console/show/picker 其经纬度与LatLng()方法中的经纬度是对调的 SDK和实例下载: http://lbs.amap.co ...
- 【高德地图SDK】如何实现轨迹平滑移动？
很多人应该都有类似的经历,叫完车,想看看车离我还有多远距离?但手机屏幕上的车不是一动不动,就是一跳一跳的漂移. 目前市面上大多产品“轨迹平滑移动”做的并不好. 市面上只有快的打车和一号专车实现了平滑移 ...
- JS高德地图应用 ---- 鼠标点击加入标记 & POI搜索
代码如下 (填入Key值) : <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- iOS高德地图使用-搜索，路径规划
项目中想加入地图功能,使用高德地图第三方,想要实现确定一个位置,搜索路线并且显示的方法.耗了一番功夫,总算实现了. 效果 WeChat_1462507820.jpeg 一.配置工作 1.申请key 访 ...
- 高德地图搜索提示获取信息回传activity刷新ui(二)
应用场景: 在主activity中点击进入到另一个activity搜索提示,获取经纬度,点确定返回到主activity,虽然说需求很奇葩,但是遇到了没办法.. 主要包含两部分,搜索提示+activit ...
- 【高德地图API】从零开始学高德JS API（四）搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索
原文:[高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公 ...
随机推荐
- wildfly（JBoss AS）应用服务器快速入门
什么是wildfly JBoss AS 从8版本起名为wildfly.Wildfly是一个开源的基于JavaEE的轻量级应用服务器.可以在任何商业应用中免费使用. WildFly是一个灵活的.轻量的. ...
- Bitset改进你的程序质量
1:Bitset介绍 BitSet 是用于存储二进制位和对二进制进行操作的 Java 数据结构, 此类实现了一个按需增长的位向量.位 set 的每个组件都有一个 boolean 值.用非负的整数将 B ...
- RRiBbit,一个事件总线.基于spring配置不同服务通信!
1.何为RRiBbit? *一种开源事件总线技术,能够让模块(组件)之间双向通讯,也被称为请求相应总线(request-response-bus),使用简单,相对其他框架来说,RRiBbit只需要加个 ...
- POJ1017&&UVA311 Packets(中文题面版)
感谢有道翻译--- Description A工厂生产的产品是用相同高度h的方形包装,尺寸为1* 1,2 * 2,3 * 3,4 * 4,5 * 5,6 6.这些产品总是以与产品高度h相同,尺寸为66 ...
- 【Cocos2d-x】学习笔记目录
从2019年7月开始学习游戏引擎Cocos2dx,版本3.17. 学习笔记尽量以白话的形式表达自己对源码的理解,而不是大篇幅复制粘贴源码. 本人水平有限,欢迎批评指正! Cocos2d-x 学习笔记 ...
- HDU 6607 Time To Get Up(状态压缩+枚举)
题目网址: http://acm.hdu.edu.cn/showproblem.php?pid=6077 思路: 先预处理一下,将每个数字块的“X”看作1,“.”看作0,进行状态压缩转换成二进制数,用 ...
- 5. Sersync实时同步
rsync+Sersync数据的实时同步 sersync介绍 1.什么是实时同步 监控一个目录的变化, 当该目录触发事件(创建\删除\修改) 就执行动作, 这个动作可以是 rsync同步 ,也可以是其 ...
- 卡特兰(Catalan)数入门详解
也许更好的阅读体验 基本概念 介绍 学卡特兰数我觉得可能比组合数要难一点,因为组合数可以很明确的告诉你那个公式是在干什么,而卡特兰数却像是在用大量例子来解释什么时卡特兰数 这里,我对卡特兰数做一点自己 ...
- 学习Spring的思考框架
引子 很早之前听同事说:“要开会了.我都知道领导要问什么,就那几板斧.”其实领导之所以为领导,人家问的问题确实很合情合理,甚至可以说一针见血.而之所以能问出来这些合理的问题,就是因为头脑中有自己的思考 ...
- .NET Core System.Drawing.Common 中文乱码的坑
最近在写一个汉字取点阵的程序,最开始是在win环境下运行的,没发现什么异常,然后今天把程序放在centos 下后发现英文正常,中文完全变成两位的字了,最开始是字体的原因 在把宋体等安装到centos ...