地图开发实战案例:高德地图实现区域掩膜的是地图可视化效果

简介: 地图开发实战案例:高德地图实现区域掩膜的是地图可视化效果

项目要点

  1. key必须是web(jsAPI)的应用,web服务的key是无效的;
  2. 只保留可视区域,可以选择行政区划效果,也可以卫星地图效果,但是好看的效果一定是精心设计过的最佳风格展示;


js调用

<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ca11d9894383ee611ed***&plugin=Map3D,AMap.DistrictSearch"></script>


完整代码

var opts = {
        subdistrict: 0,
        extensions: 'all',
        level: 'city'
    };
    //利用行政区查询获取边界构建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.807034],
            viewMode: '3D',
            showLabel: true,
            labelzIndex: 130,
            pitch: 40,
            zoom: 9,
            mapStyle: 'amap://styles/grey',
            /*layers: [
                new AMap.TileLayer.RoadNet({
                    //rejectMapMask:true
                }),
                new AMap.TileLayer.Satellite()
            ]*/
        });
        var maskerIn = new AMap.Marker({
            position: [121.54816, 29.807034],
            map: map
        })
        var maskerOut = new AMap.Marker({//区域外的不会显示
            position: [121.54816, 29.807034],
            map: map
        })
        //添加高度面
        var object3Dlayer = new AMap.Object3DLayer({zIndex: 1});
        map.add(object3Dlayer)
        var height = -7000;
        var color = '#00000cc';//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: '#FFF',
                strokeWeight: 4,
                map: map
            })
        }
    });


Done!

相关文章
|
前端开发 搜索推荐 定位技术
GIS前端—地图标注
GIS前端—地图标注
263 1
|
数据可视化 搜索推荐 JavaScript
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
1004 0
|
2月前
|
数据可视化 定位技术 Python
Folium在地图上展示数据
【10月更文挑战第17天】本文介绍了如何使用Python中的Folium库进行地理可视化。Folium是一个基于Leaflet.js的库,可以轻松创建交互式地图。文章从安装Folium开始,逐步讲解了如何创建地图、添加标记点、展示热力图、自定义图层样式、绘制形状、添加图例和文本标签等内容。通过这些示例,读者可以学会如何利用Folium进行地理数据的可视化,从而更好地理解和展示数据的空间分布。
143 4
|
定位技术
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
352 0
|
数据可视化 前端开发 搜索推荐
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
313 0
|
数据可视化 定位技术
漏刻有时数据可视化解决方案:geo坐标地图、svg地图和图片热点地图的使用比较方案
漏刻有时数据可视化解决方案:geo坐标地图、svg地图和图片热点地图的使用比较方案
131 0
|
8月前
|
数据可视化 定位技术 数据格式
Tableau可视化设计案例-07 多边形地图和背景图地图
Tableau可视化设计案例-07 多边形地图和背景图地图
|
定位技术
百度地图使用 ->展示地图一
百度地图使用 ->展示地图一
112 0
|
搜索推荐 数据可视化 JavaScript
数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索)
数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索)
232 1
|
定位技术 API
高德地图进阶开发实战案例(2):电子围栏(多边形的绘制)的展示
高德地图进阶开发实战案例(2):电子围栏(多边形的绘制)的展示
651 0