菱形 区域点击搜索"/>
高德地图3D菱形 区域点击搜索
更新一波吧
<!doctype html>
<html lang="zh-CN"><head><!-- 原始地址：//webapi.amap/ui/1.0/ui/geo/DistrictExplorer/examples/index.html --><!-- <base href="//webapi.amap/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/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/maps?v=1.4.15&key=741a28e4b11880dfa0d6673f7c26f32d"></script>
<script src="//webapi.amap/loca?v=1.3.0&key=741a28e4b11880dfa0d6673f7c26f32d"></script>
<script src="//a.amap/Loca/static/mock/bj_heat_grid.js"></script>
<script src=".1.1.min.js"></script>
<script src="//a.amap/Loca/static/manual/example/script/demo.js"></script><!-- UI组件库 1.0 -->
<script src="//webapi.amap/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 colorsvar 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;// 108var y= nodeList[0].location.lat;// 34map.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);//更新选中节点的classvar $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});});});// 创建区医院htmlfunction 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>
转载于:.html
更多推荐
高德地图3D菱形 区域点击搜索
发布评论