高德海量点MassMarks

不想写前端的前端

已于 2022-09-27 17:50:21 修改

阅读量1.4k

点赞数

分类专栏：高德地图文章标签： javascript 前端 vue.js

于 2021-12-28 17:04:10 首次发布

本文链接：https://blog.csdn.net/weixin_49470245/article/details/122197497

版权

高德地图专栏收录该内容

2 篇文章 1 订阅

订阅专栏

<!doctype html>
<html lang="en">
<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>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html, body, #container {
            height: 100%;
            width: 100%;
        }

        .input-card .btn {
            margin-right: 1.2rem;
            width: 9rem;
        }

        .input-card .btn:last-child {
            margin-right: 0;
        }
    </style>
</head>
<body>
<div id="container" class="map" tabindex="0"></div>
<!-- <script type="text/javascript" src='https://a.amap.com/jsapi_demos/static/citys.js'></script> -->
<script type="text/javascript" src="./citys.js"></script>
//./citys.js 数据格式  var citys = [ { "name": "污水井盖", "lnglat": [ "112.59678438275", "37.8066298892175" ], "style": 0, "id": 6062 },···]


<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=da55df830352cfd2ce93939d59888928&plugin=AMap,Map3D,AMap.ControlBar,AMap.DistrictSearch,AMap.MarkerClusterer"></script>
<script type="text/javascript">
    var map = new AMap.Map('container', {
        zoom: 12,
        center: [112.507792,37.690254],
        viewMode: "3D"
    });

    var mask = [];
    var object3Dlayer = new AMap.Object3DLayer();
    map.add(object3Dlayer);
    var district = null;
    //加载行政区划插件
    if (!district) {
        //实例化DistrictSearch
        var opts = {
        subdistrict: 0, //获取边界不需要返回下级行政区
        extensions: "all", //返回行政区边界坐标组等具体信息
        level: "district", //查询行政级别为 市
        };
        district = new AMap.DistrictSearch(opts);
    }
    //行政区查询
    district.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;
        // console.log("区域范围", holes);
        //记录小店区范围-坐标数组，用于区域掩模
        for (var i = 0; i < holes.length; i += 1) {
        mask.push([holes[i]]);
        }

        //添加高度面-3D
        var object3Dlayer = new AMap.Object3DLayer({ zIndex: 1 });
        map.add(object3Dlayer);
        var height = -8000;
        var color = "#B3E2FF"; //rgba 3d轮廓颜色
        var wall = new AMap.Object3D.Wall({
        path: holes,
        height: height,
        color: color,
        });
        wall.transparent = true;
        object3Dlayer.add(wall);

        //添加描边
        for (var h = 0; h < holes.length; h += 1) {
        new AMap.Polyline({
            path: holes[h],
            strokeColor: "#B3E2FF",
            strokeWeight: 4,
            map: map,
        });
        }
        var pathArray = [outer];
        pathArray.push.apply(pathArray, holes);
        var polygon = new AMap.Polygon({
        pathL: pathArray,
        //线条颜色，使用16进制颜色代码赋值。默认值为#006600
        strokeColor: "#B3E2FF",
        strokeWeight: 4,
        //轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
        strokeOpacity: 0.5,
        //多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
        fillColor: "#12233e",
        // fillColor: "#ffffff",
        //多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
        fillOpacity: 1,
        //轮廓线样式，实线:solid，虚线:dashed
        strokeStyle: "dashed",
        /*勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在    
                ie9+浏览器有效 取值： 
                实线：[0,0,0] 
                虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线
                点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实 
                线和10个像素的空白 （如此反复）组成的虚线*/
        strokeDasharray: [10, 2, 10],
        });
        polygon.setPath(pathArray);
        map.add(polygon);
    });


    var style = [
    	{
	        url: 'https://a.amap.com/jsapi_demos/static/images/mass2.png',
	        anchor: new AMap.Pixel(3, 3),
	        size: new AMap.Size(5, 5)
    	}
    ];//图标数组

    var mass = new AMap.MassMarks(citys, {
        opacity: 0.8,
        zIndex: 111,
        cursor: 'pointer',
        style: style
    });//创建点位

    var marker = new AMap.Marker({content: ' ', map: map});//创建一个普通Marker点

    mass.on('mouseover', function (e) {
        marker.setPosition(e.data.lnglat);
        marker.setLabel({content: e.data.name})
    });//绑定划上事件

    mass.setMap(map);//把

</script>
</body>
</html>

不想写前端的前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
高德海量点MassMarks

<!doctype html><html lang="en"><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">
复制链接

扫一扫