使用高德地图（js）制作区域显示

Myth丶恋晨 2023-07-24 09:06 65阅读 0赞

**高德**[地图 JS API][JS API]   [https://lbs.amap.com/api/javascript-api/summary/][https_lbs.amap.com_api_javascript-api_summary]

实现效果展示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWp1Y2Fp_size_16_color_FFFFFF_t_70][]

<!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
        <title>地图遮罩</title>
        <style>
        html,
        body,
        #container {
            height: 100%;
            background-color: rgba(0,0,0);
        }
        </style>
    </head>
    <body>
    <div id="container"></div>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key&plugin=AMap.DistrictSearch"></script>
    <script src="//a.amap.com/jsapi_demos/static/resource/heatmapData.js"></script>
    <script>
        var map = new AMap.Map('container', {
            zoom:13,
            center:[116.360889,39.924331],
             pitch: 0,
            viewMode: '3D',
            mapStyle:'amap://styles/40035571fa9fdd05a26fe1b05f48fdc9',
            /* 禁止缩放*/
            zoomEnable:false,
           /* 禁止拖动*/
            dragEnable: false,
        });
       /* new AMap.TileLayer({
        map: map,
        tileUrl: 'http://mt{1,2,3,0}.google.cn/vt/lyrs=y@142&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil', // s=Galil不加也能渲染
        zIndex: 2 // 在默认层级之上
    	});*/
           //map.setZoom(12.2); //设置地图层级
        new AMap.DistrictSearch({
            extensions:'all',
            subdistrict:0
        }).search('西城区',function(status,result){
            // 外多边形坐标数组和内多边形坐标数组
            var outer = [
                new AMap.LngLat(-360,90,true),
                new AMap.LngLat(-360,-90,true),
                new AMap.LngLat(360,-90,true),
                new AMap.LngLat(360,90,true),
            ];
            var holes = result.districtList[0].boundaries
    
            var pathArray = [
                outer
            ];
            pathArray.push.apply(pathArray,holes)
            var polygon = new AMap.Polygon( {
                pathL:pathArray,
                strokeColor: 'rgb(20,164,173)',
                strokeWeight: 4,
                strokeOpacity:0.8,
                fillColor: 'rgba(0,0,0)',
                fillOpacity: 1,
                strokeStyle:'dashed',
                strokeDasharray:[10,2,10]
            });
            polygon.setPath(pathArray);
            map.add(polygon);
           /*   var polyline = new AMap.Polyline({
            strokeColor: '#3366FF',   // 线颜色
            strokeOpacity: 1,         // 线透明度
            strokeWeight: 2,          // 线宽
            strokeStyle: 'solid',     // 线样式
            strokeDasharray: [10, 5], // 补充线样式
            geodesic: false            // 绘制大地线
        });
           polyline.setPath(pathArray);
           map.add(polyline);*/
            
            
        })
           if (!isSupportCanvas()) {
            alert('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')
        }
    
        //详细的参数,可以查看heatmap.js的文档 http://www.patrick-wied.at/static/heatmapjs/docs.html
        //参数说明如下:
        /* visible 热力图是否显示,默认为true
         * opacity 热力图的透明度,分别对应heatmap.js的minOpacity和maxOpacity
         * radius 势力图的每个点的半径大小
         * gradient  {JSON} 热力图的渐变区间 . gradient如下所示
         *	{
         .2:'rgb(0, 255, 255)',
         .5:'rgb(0, 110, 255)',
         .8:'rgb(100, 0, 255)'
         }
         其中 key 表示插值的位置, 0-1
         value 为颜色值
         */
        var heatmap;
        map.plugin(["AMap.Heatmap"], function () {
            //初始化heatmap对象
            heatmap = new AMap.Heatmap(map, {
                radius: 25, //给定半径
                opacity: [0, 0.8]
                /*,
                gradient:{
                    0.5: 'blue',
                    0.65: 'rgb(117,211,248)',
                    0.7: 'rgb(0, 255, 0)',
                    0.9: '#ffea00',
                    1.0: 'red'
                }
                 */
            });
            
            var points =[
            {"lng":116.363808,"lat":39.878455,"count":100},
            {"lng":116.354765,"lat":39.90129,"count":100},
            {"lng":116.373133,"lat":39.919922,"count":1200},
            {"lng":116.363505,"lat":39.928956,"count":100},
            {"lng":116.389898,"lat":39.942875,"count":100}
           ];
            //设置数据集：该数据为北京部分“公园”数据
            heatmap.setDataSet({
                data: points,
                max: 100 	
            });
        });
    
        //判断浏览区是否支持canvas
        function isSupportCanvas() {
            var elem = document.createElement('canvas');
            return !!(elem.getContext && elem.getContext('2d'));
        }
        
        
        //添加点标记
        var  markerList=[ {"title":"1","lng":116.363808,"lat":39.878455},
                       {"title":"2","lng":116.363505,"lat":39.928956},
                       {"title":"3","lng":116.389898,"lat":39.942875},
                        {"title":"4","lng":116.373133,"lat":39.919922},
                         {"title":"5","lng":116.354765,"lat":39.90129}
        ];
           // 创建一个 Icon
        var Icon = new AMap.Icon({
            // 图标尺寸
            size: new AMap.Size(100, 100),
            // 图标的取图地址
            image: 'img/popular.gif',
            // 图标所用图片大小
           imageSize: new AMap.Size(100, 100),
            // 图标取图偏移量
          // imageOffset: new AMap.Pixel(-20, -3)
        });
         var markers=[];
        var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
        for(var i = 0 ; i < markerList.length ; i ++){
        	   // 将 icon 传入 marker
    		    var marker = new AMap.Marker({
    		        position: new AMap.LngLat(markerList[i].lng,markerList[i].lat),
    		        icon: Icon,
    		        offset: new AMap.Pixel(-50, -50),
    		         clickable: true
    		    }); 
    		      marker.content = '我是第' + (i + 1) + '个Marker';
    		      marker.on('click', markerClick);
        	   markers.push(marker);
        	 
        	      //点标注的点击事件
             /*   var clickHandle = AMap.event.addListener(marker, 'click', function(e) {
                   alert(marker.getTitle());
                });*/
          
         }
          function markerClick(e) {
            infoWindow.setContent(e.target.content);
            infoWindow.open(map, e.target.getPosition());
        }
           // 将 markers 添加到地图
           map.add(markers);
           /*      for(var i = 0 ; i < markers.length ; i ++){
               
          }*/
          
     
     
    </script>
    </body>
    </html>

[JS API]: https://lbs.amap.com/api/javascript-api
[https_lbs.amap.com_api_javascript-api_summary]: https://lbs.amap.com/api/javascript-api/summary/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWp1Y2Fp_size_16_color_FFFFFF_t_70]: /images/20230528/0c7589e5f4964b76898977b9131f7db5.png