大屏地图背景透明效果,高德地图怎么才能只渲染局部地图,有全部代码详细。
效果图
需求描述:高德地图,我只需要显示中国地图,背景颜色根据父级元素显示,
可以调整。
1.https://lbs.amap.com/
退出之后,发布,选择使用与分享
2.接下来代码。我先说几个关键点,然后贴全部代码
代码
css部分
html,
body,
#container {
margin:0;
height: 100%;
background-color: #e8e8;;
}
body部分
<div>id="container"></div> <script src="https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=Map3D,AMap.DistrictLayer,AMap.Scale,AMap.ToolBar"></script> <script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/data/china-pp.js"></script>
js部分
var SOC = ‘CHN’ var colors = {}; var GDPSpeed = {
‘520000’:10,//贵州
‘540000’:10,//西藏
‘530000’:8.5,//云南
‘500000’:8.5,//重庆
‘360000’:8.5,//江西
‘340000’:8.0,//安徽
‘510000’:7.5,//四川
‘350000’:8.5,//福建
‘430000’:8.0,//湖南
‘420000’:7.5, //湖北
‘410000’:7.5,//河南
‘330000’:7.0,//浙江
‘640000’:7.5,//宁夏
‘650000’:7.0,//新疆
‘440000’:7.0,//广东
‘370000’:7.0,//山东
‘450000’:7.3,//广西
‘630000’:7.0,//青海
‘320000’:7.0,//江苏
‘140000’:6.5,//山西
‘460000’:7,// 海南
‘310000’:6.5,//上海
‘110000’:6.5, // 北京
‘130000’:6.5, // 河北
‘230000’:6, // 黑龙江
‘220000’:6,// 吉林
‘210000’:6.5, //辽宁
‘150000’:6.5,//内蒙古
‘120000’:5,// 天津
‘620000’:6,// 甘肃
‘610000’:8.5,// 甘肃
‘710000’:2.64, //台湾
‘810000’:3.0, //香港
‘820000’:4.7 //澳门} var getColorByDGP = function(adcode){
if(!colors[adcode]){
var gdp = GDPSpeed[adcode];
if(!gdp){
colors[adcode] = ‘rgb(227,227,227)’
}else{
var r = 3;
var g = 140;
var b = 230;
var a = gdp/10;
colors[adcode] = ‘rgba(’+ r +’,’+ g +’,’+b+’,’+a+’)’;
}
}
return colors[adcode] }var disCountry = new AMap.DistrictLayer.Country({
zIndex:10,
SOC:‘CHN’,
depth:1,
styles:{
‘nation-stroke’:’#ff0000’,
‘coastline-stroke’:’#0088ff’,
‘province-stroke’:’#888888’,
‘fill’:function(props){
return getColorByDGP(props.adcode_pro)
}
} })var map = new AMap.Map(‘container’, {
resizeEnable: true, //是否监控地图容器尺寸变化
layers:[disCountry],
zooms: [4, 10],
center:[106.122082,33.719192],
zoom: 4,
isHotspot:false,
defaultCursor:‘pointer’,
viewMode:‘2D’,
resizeEnable: true,
mapStyle:‘你的样式’,
});map.addControl(new AMap.Scale());
map.addControl(new AMap.ToolBar({liteStyle:true}));
map.on(‘complete’,function(){
var layer = new AMap.LabelsLayer({
// 开启标注避让,默认为开启,v1.4.15 新增属性
collision: false,
// 开启标注淡入动画,默认为开启,v1.4.15 新增属性
animation: true,
});
for (var i = 0; i < LabelsData.length; i++) {
var labelsMarker = new AMap.LabelMarker(LabelsData[i]);
layer.add(labelsMarker);
}
map.add(layer);
})
大屏地图背景透明效果,高德地图怎么才能只渲染局部地图,有全部代码详细。相关推荐
- Django开发数据可视化大屏-JS绘制大屏动态背景-(视图模板制作)
查看本文前请先查看 Django开发数据可视化大屏-项目启动配置 通过前面的文章,我们已经创建了一个Django简单项目,并且做了相关的配置,今天我们来制作视图模板,通过JS绘制3D动态背景效果. 我 ...
- Vue实现数据大屏组件轮播效果
Vue实现数据大屏组件轮播效果 需求 分析 实现 备注 需求 采用Vue结合Echarts制作了数据大屏,由于每个组件占用的空间较小,展示起来不够清晰,所以需要在展示大屏之后,每隔一段时间,就对各组 ...
- Google图片存储格式WebP增加与PNG类似背景透明效果
Google近日在博客上通报了他们提出的新型图片存储格式 - WebP - 的最新进展.Google有意让WebP成为新的网络图形存储格式标准以挑战JPEG.PNG等格式的地位.从博文中我们了解到,W ...
- CSS设置背景透明效果
CSS设置背景透明效果 设置背景透明效果有两种方法: 使用opacity属性定义透明度,范围0-1,0表示完全透明,1表示不透明,优点:可以在背景图片以及背景颜色上使用.缺点:会把设置div及其子元素 ...
- Vue项目大屏可视化适配 transform+解决高德地图经纬度偏移
这几天在做大屏项目的屏幕适配. 看到别人提到过使用flexible.js可以完成大屏的适配.我也尝试了一下,但是并没有成功. 参考了一下别人的项目的适配. 简单描述一下这个适配大屏代码的思路,主要通过 ...
- CSS实现PNG图片背景透明效果
使用PNG图片作背景,但ie6不能显示PNG透明效果,所以要用AlphaImageLoader滤镜来实现. 在CSS文件中要注意图片相对路径:滤镜中的图片路径是相对页面文件,而其它的则是相对CSS文件 ...
- 原生js实现大屏数字上下滚动效果,支持随机多位数字
一文看懂大屏数字滚动 前言 一.html 二.js生成展示的元素 三.css实现样式 四.加入动画和定时器 前言 在大屏项目中经常需要实现那种数字上下滚动的效果,普通的数字随机滚动在UI组件(例如Vi ...
- MapboxGL设置地图背景透明
最近遇到需求,需要把MapBoxGL放置在Leflet 之上,需要把Mapbox的背景设置成透明的,最后发现这个很简单,只要在MapBox的Style里添加一个background类型的图层,设置其背 ...
- 大屏某区域滚动效果循环
// 数据自动滚动事件BEGIN var botTimer = null; // 定时器对象 $('.tbody').hover(function () { clearInterval(botTim ...
最新文章
- 7本书带你掌握数据科学中的数学基础(附下载)
- BZOJ1295 [SCOI2009]最长距离
- linux 内核配置 dns,Linux的dns配置 - Linux操作系统基础进阶练习题_Linux教程_Linux公社-Linux系统门户网站...
- App开发(Android与php接口)之:短信验证码
- Trie树的常见应用大总结(面试+附代码实现)
- mysql多实例脚本_mysql多实例脚本
- 新农大计算机学院照片,【新生指南】小团带你逛校园(内附农大全景图~)
- 华为云携手马栏山文创园助力湖南广电荣获国家广电总局多项大奖
- [OpenShift 4 - DevSecOps Workshop (16) - 使用 VSCode 编辑运行 Tekton Pipeline 资源
- 怎么将DWG文件有效转换为PDF文件
- win10打开计算机出现马赛克,传授win10系统在线播放视频出现马赛克的技巧
- Seckill学习笔记——Day3(秒杀功能实现)
- 小米手机、一加手机、华为手机、小米手环NFC刷门禁卡,全教程!
- 数据库与身份认证:在项目中操作 MySQL
- 【Flutter】【 package】底部导航栏--bottom_navy_bar
- 软件功能介绍之(数据维护)3.1数据编辑(1)
- 杰理之蓝牙认证【篇】
- python输入一个五位数、判断是否为回文数_python如何判断是不是回文数
- 【第三期】电子元器件创意作品,附带高清原图,共计60张
- 超越爱因斯坦 ——宇宙是可以理解的
热门文章
- redis关于set的常用命令
- rabbitmq添加插件和配置文件的添加
- US100超声波测距模块的FPGA驱动
- PHPMyWind编辑器支持Word导入
- 统计在线人数、每日访问人数和总人数
- Android源码编译(基于Ubuntu18.0.4)
- NetBeans--员工信息管理系统
- Parameter 'arg0' not found. Available parameters are [xxx, xxx, param1, param2]
- AlexNet网络的搭建
- fmm3d在windows环境中的编译使用过程