前端数据可视化之高德地图

最新推荐文章于 2024-06-05 21:08:48 发布

vanillaSup

最新推荐文章于 2024-06-05 21:08:48 发布

阅读量1.6k

点赞数 4

文章标签：可视化 js

本文链接：https://blog.csdn.net/Hwyll/article/details/118099566

版权

高德地图&数据可视化

仙人指路，才高八斗
- 区域掩模和遮罩一起使用

仙人指路，才高八斗

Gaud map在手，做啥都不愁

区域掩模和遮罩一起使用

先来搭建盒子模型和引入高德地图

然后在body里面放入你申请的key（注意2.0版本不在支持object3D，故本次实验在1.4版本下进行）
宁波市区域掩模&wall
接着使用GeoJSON根据标注你的GeoJSON配置在地图上对应覆盖物（就是用GeoJSON做遮罩，而不是用行政区域查询，因为更加方便）
附上一个获取各省市GeoJSON数据格式的网站
http://datav.aliyun.com/tools/atlas/#&lat=30.35828173619863&lng=106.7222742206687&zoom=3.5
然后就是按照高德地图官网ctrl+c&ctrl+v
在这里插入图片描述
好了，到此为止就完成了，让我们来看一看效果
效果1
效果2
最后附上全部代码

<!DOCTYPE HTML>
<html>

<head>
    <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>区域掩模和遮罩</title>
    <style>
        body,
        html,
        #container {
            margin: 0;
            width: 100%;
            height: 100%
        }
    </style>
    <link rel="stylesheet" href="//a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
</head>

<body>
    <div id="container"></div>
    <script language="javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key&plugin=Map3D,AMap.DistrictSearch">
    </script>
    <script language="javascript">
        var opts = {
            subdistrict: 0,
            extensions: 'all',
            level: 'district'
        };
        //利用行政区查询获取边界构建mask路径
        //也可以直接通过经纬度构建mask路径
        var district = new AMap.DistrictSearch(opts);
        district.search('宁波市', function (status, result) {
            var bounds = result.districtList[0].boundaries;
            var mask = []
            for (var i = 0; i < bounds.length; i += 1) {
                mask.push([bounds[i]])
            }
            var map = new AMap.Map('container', {
                mask: mask,
                center: [121.54816, 29.607034],
                disableSocket: true,
                viewMode: '3D',
                showLabel: false,
                resizeEnable: true, //是否监控地图容器尺寸变化，默认值为false
                rotateEnable: true, //地图是否可旋转，3D视图默认为true，2D视图默认false
                pitchEnable: true, //是否允许设置俯仰角度，3D视图下为true，2D视图下无效
                labelzIndex: 130,
                pitch: 40,
                zoom: 9,
                // skyColor: '#41A863', //指定天空颜色
                mapStyle: 'amap://styles/grey', //添加自定义样式
                layers: [
                    // new AMap.TileLayer.RoadNet({
                    //     rejectMapMask: true
                    // }),
                    // new AMap.TileLayer.Satellite({
                    // rejectMapMask: true
                    // }),
                ]
            });
            //点标记
            var maskerIn1 = new AMap.Marker({
                position: [121.871889, 29.871452],
                map: map
            })
            var maskerIn2 = new AMap.Marker({
                position: [121.333733, 30.272161],
                map: map
            })
            var maskerIn3 = new AMap.Marker({
                position: [121.337988, 29.617074],
                map: map
            })
            var maskerIn4 = new AMap.Marker({
                position: [121.837988, 29.417074],
                map: map
            })

            //添加高度面
            var object3Dlayer = new AMap.Object3DLayer({
                zIndex: 1
            });
            map.add(object3Dlayer)
            var height = -50000;
            var color = '#0088ffcc';
            // var color = '#030a52'; //rgba
            var wall = new AMap.Object3D.Wall({
                path: bounds,
                height: height,
                color: color
            });
            wall.transparent = true
            object3Dlayer.add(wall)
            //添加描边
            for (var i = 0; i < bounds.length; i += 1) {
                new AMap.Polyline({
                    path: bounds[i],
                    strokeColor: '#99ffff',
                    strokeWeight: 4,
                    map: map
                })
            }
            //使用GeoJSON根据标注你的GeoJSON配置在地图上对应覆盖物
            ajax('https://geo.datav.aliyun.com/areas_v2/bound/330200_full.json', function (err, geoJSON) {
                if (!err) {
                    var geojson = new AMap.GeoJSON({
                        geoJSON: geoJSON,
                        // 还可以自定义getMarker和getPolyline
                        getPolygon: function (geojson, lnglats) {
                            // 计算面积
                            // var area = AMap.GeometryUtil.ringArea(lnglats[0])
                            var polygon = new AMap.Polygon({
                                bubble: true,
                                path: lnglats,
                                // fillOpacity: 1 - Math.sqrt(area /
                                //     8000000000), // 面积越大透明度越高
                                fillOpacity: 0.3,
                                fillColor: '#80d8ff',
                                strokeColor: '#0091ea',
                            })
                            map.add(polygon);
                            // polygon.setMap(map);
                            polygon.on('mouseover', () => {
                                polygon.setOptions({
                                    fillOpacity: 0.7,
                                    fillColor: '#7bccc4'
                                })
                            });
                            polygon.on('mouseout', () => {
                                polygon.setOptions({
                                    fillOpacity: 0.3,
                                    fillColor: '#80d8ff'
                                })
                            });
                        }
                    });

                    geojson.setMap(map);

                    log.success('GeoJSON 数据加载完成')
                } else {
                    log.error('GeoJSON 服务请求失败')
                }
            })
        });
    </script>
</body>

</html>

喜欢的兄弟多多点赞咯，唯世俗长存！

vanillaSup

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
前端数据可视化之高德地图

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码
复制链接

扫一扫