首页 > 其他 > 详细

高德地图3D菱形 区域点击搜索

时间:2019-06-19 11:01:22      阅读:198      评论:0      收藏:0      [点我收藏+]

更新一波吧

<!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菱形 区域点击搜索

原文:https://www.cnblogs.com/shixingwen/p/11049904.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!