文档章节

GIS(三)——优化js版搜狗地图的brand标牌样式

白志华
 白志华
发布于 2015/10/18 10:56
字数 1272
阅读 2
收藏 0
点赞 0
评论 0

       从上一篇博文的效果图中,我们看到有几个相近的brand标牌给相互遮挡住了,不能完整的显示。怎么处理一下呢?今天我们就来研究一下这个解决方案。

       其实要想不被遮挡,可以让这几个brand位置变动一下,而不总是箭头向下指向景点。如果改变箭头的指向呢?首先我们要了解它原本是怎么处理的。这个肯定是从spirit入手了。

       先说一下spirit的参数:

{
    url:"http://api.go2map.com/maps/images/v2.5/2.png",
    imgSize:[140,77],
    //[[左侧],[中间],[右侧],[尖脚]]
    //[clipLeft,clipTop,width,heigth]
    clips:[[0,0,8,51],[8,0,1,51],[132,0,8,51],[0,53,33,23]],
    //[尖脚绑定坐标的位置]
    anchor:[16,23],
    //尖脚微调偏移
    footOffset:[0,-3]
}

       这里是官网的描述。url是图片的url地址,可以是本地图片。imgSize是图片的像素大小。clips是原图剪切的位置,如果看不懂继续往下看。anchor是锚点,就是在地图中的尖脚对应的坐标 ,参数也是在图片中的偏移量。footOffset是整个尖脚在地图中显示的位置。

       由于这个brand可以自适应宽度,我以为它是以多张图片完成的这个功能,但是看到打开这个url对应的图片(上图),才发现原来只是一张图片。而自适应宽度则是clips设置的功劳了。clips就是从这张图片上切不同的位置作为图片进行显示。clips分为4块,左侧、中间、右侧可以完成自适应宽度。而尖脚则是箭头在图片中的位置。每一个切出来的图片都是从左上角的坐标+宽高切出来的。为什么不设定多设定几张图片呢?这是为了减少下载小图标的次数。


       终于明白了这个brand箭头的处理了。我们要想改变箭头的指向,必须得修改图片了。如果你学做ps,这个工作就简单多了。下面是我修改的图片:


       就是多整几个箭头即可。如果想让箭头向右的话,就在切尖角的参数中,切向右箭头的位置,然后anchor也要设定,把箭头偏移到景点的位置。footOffset则需要调整到整个图片的右侧。很简单,自己试着调整一下就明白了。
       还回到咱们原先的话题。现在有多个景点,可能需要指向不同的方向,所以咱们就不能设定死了,那么就需要设定4个function,来得到4中方向的spirit。根据具体情况来选择不同的brand指向。
       下面是我调整好的function:
//箭头向上
  function get_up_spirit(){
    var spirit={
        url:"22.png",
        imgSize:[140,87],
        clips:[[0,0,8,51],[8,0,1,51],[132,0,8,51],[105,53,33,13]],
        anchor:[17,0],
        footOffset:[0,-63]
             
    }
    return spirit;
  }
  
  //箭头向下
  function get_down_spirit(){
    var spirit={
        url:"22.png",
        imgSize:[140,87],
        clips:[[0,0,8,51],[8,0,1,51],[132,0,8,51],[0,53,33,23]],
        anchor:[16,23],
        footOffset:[0,-3]
    }
    return spirit;
  }
  //箭头向左
  function get_left_spirit(){
    var spirit={
        url:"22.png",
        imgSize:[140,87],
        clips:[[0,0,8,51],[8,0,1,51],[132,0,8,51],[39,53,13,33]],
        anchor:[0,16],
        footOffset:[-54,-45]
    }
    return spirit;
  }
  //箭头向右
  function get_right_spirit(){
    var spirit={
        url:"22.png",
        imgSize:[140,87],
        clips:[[0,0,8,51],[8,0,1,51],[132,0,8,51],[86,53,13,33]],
        anchor:[12,16],
        footOffset:[54,-44]
    }
    return spirit;
  }
       对应的效果图如下:
              

       4个js方法调好了,那么如何针对不同的景点来设定不同的brand指向呢?其实很简单,我们只要为每个景点跟调用的方法名关联上,通过不同的名字字节调用即可。
//加载景点坐标数据
  function loadScenic(){
  	p = [{x:12942902.5,y:4836960.5,title:'颐和园',brand:'up'},
	   	{x:12933625.5,y:4836929.5,title:'香山、植物园',brand:'down'},
	   	{x:12946300.5,y:4839226.5,title:'圆明园遗址公园',brand:'down'},
	   	{x:12948437.5,y:4826035.0,title:'玉渊潭公园',brand:'up'},
	   	{x:12950304.5,y:4829984.0,title:'北京海洋馆',brand:'left'},
	   	{x:12948074.5,y:4829765.0,title:'紫竹院公园',brand:'right'},
	   	{x:12922964.5,y:4853605.5,title:'凤凰岭自然风景区',brand:'down'}];
  }
       在景点数组中,设定一个brand属性,取值域为:up、down、left、right。然后再写一个function,这个function主要是把通过brand来调用对应的方法名:
//获取数据标牌
  function get_spirit(flag){
	return eval("get_" + flag + "_spirit()");
  }
       修改加载标牌的function如下:
//加载标记牌
  function addbrand(){
    for(var i=0;i<p.length;i++){
      var brand = new sogou.maps.Brand({
	        position: new sogou.maps.Point(p[i].x,p[i].y),
	        map: map,
	        spirit:get_spirit(p[i].brand)//get_right_spirit()
	        ,content:p[i].title+"<br /> 城市:北京市"
	        //是否可见,可缺省,缺省为true
	        ,visible:true
	        //指定内容区固定宽度为80,如果不指定,则会根据内容大小自动适应
	       	,fixSize:new sogou.maps.Size(80,0)
	        //指定css,css要在样式表事先定义好
	        ,css:"brand"
	    });
	    brands.push(brand);//将生成的brand,加入到brands数组中
    }
  }
       效果图:
       效果还不错吧。有没有一点点心动呢?那就快快行动起来吧!
       如果你的审美比较高的话,你会发现其实这样处理,虽然都错开了,但是却没有美感。如何处理呢?一篇博文,我将做最终的美化版,大家期待一下吧。

版权声明:本文为博主原创文章,未经博主允许不得转载。

© 著作权归作者所有

共有 人打赏支持
白志华
粉丝 29
博文 260
码字总数 57524
作品 0
长沙
程序员
WEB GIS 开发框架 mapbox-gl-js v0.46.beta1 发布

WEB GIS 开发框架 mapbox-gl-js v0.46.beta1 已发布。 Mapbox GL JS 是一个 JavaScript 库,使用 WebGL 渲染交互式矢量瓦片地图和栅格瓦片地图。WebGL 渲染意味着高性能,MapboxGL 能够渲染大...

达尔文 ⋅ 06/15 ⋅ 0

[译] JavaScript 是如何工作的:对比 WebAssembly + 为什么在某些场景下它比 JavaScript 更合适

原文地址:How JavaScript works: A comparison with WebAssembly + why in certain cases it’s better to use it over JavaScript 原文作者:Alexander Zlatkov 译文出自:掘金翻译计划 本......

stormluke ⋅ 05/23 ⋅ 0

基于AngularJS的个推前端云组件探秘

AngularJS是google设计和开发的一套前端开发框架,他能帮助开发人员更便捷地进行前端开发。AngularJS是为了克服HTML在构建应用上的不足而设计的,它非常全面且简单易学习,因此AngularJS快速...

个推 ⋅ 04/26 ⋅ 0

DOM系列:浏览器与DOM 主标签

最近回过头来在学习JavaScript中的DOM知识,随着学习进度的向前推移,越发感觉DOM知识点较多。为了能更好的系统了解清楚DOM相关的知识,我打算重新将DOM的学习划入到DOM系列当中。那么今天将...

一个敲代码的前端妹子 ⋅ 05/28 ⋅ 0

前端学习之路(从入门到入坑...)

学习前端两年多了,拿了阿里巴巴实现offer,想结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考...

阿小庆 ⋅ 06/14 ⋅ 0

云 GIS 网络客户端开发平台 - iClient-JS

SuperMap iClient JavaScript (简称 iClient-JS )是云 GIS 网络客户端开发平台。基于现代 Web 技术栈全新构建,是 SuperMap 云四驾马车和在线 GIS 平台系列产品的统一 JS 客户端。集成了领先...

ahnan ⋅ 2017/12/04 ⋅ 5

JVM 即时编译器 - GraalVM

Graal — 新的 JVM 即时编译器 GraalVM 是新一代的高性能跨语言虚拟机,用于运行 JavaScript、Python 3、Ruby、R、基于 JVM 的语言,如 Java、Scala、Kotlin 和基于 LLVM 的语言,如 C 和 C+...

匿名 ⋅ 2014/09/29 ⋅ 2

开源书籍-JavaScript 编程精解

《JavaScript 编程精解》(Eloquent JavaScript)第三版,是由马尔奇·哈弗贝克(Marlin Haverbeke)JavaScript程序员编写的JS入门书籍,Marlin Haverbeke通晓多种编程语言,在Web开发方面积累...

marsdream ⋅ 06/04 ⋅ 0

[译] JavaScript 是如何工作的:CSS 和 JS 动画背后的原理 + 如何优化性能

原文地址:How JavaScript works: Under the hood of CSS and JS animations + how to optimize their performance 原文作者:Alexander Zlatkov 译文出自:掘金翻译计划 本文永久链接:git......

辣手摧花 ⋅ 05/15 ⋅ 0

hi-nginx-1.4.9 正式发布,支持 Javascript 后端开发

hi-nginx-1.4.9已经发布。 更新: 支持javascript后端开发 修复脚本搜索的一个bug 从这一版开始,hi-nginx开始支持javascript,这意味着把javascript应用于后端开发,将不再只有nodejs这唯一...

所以呢 ⋅ 05/14 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Centos7重置Mysql 8.0.1 root 密码

问题产生背景: 安装完 最新版的 mysql8.0.1后忘记了密码,向重置root密码;找了网上好多资料都不尽相同,根据自己的问题总结如下: 第一步:修改配置文件免密码登录mysql vim /etc/my.cnf 1...

豆花饭烧土豆 ⋅ 今天 ⋅ 0

熊掌号收录比例对于网站原创数据排名的影响[图]

从去年下半年开始,我在写博客了,因为我觉得业余写写博客也还是很不错的,但是从2017年下半年开始,百度已经推出了原创保护功能和熊掌号平台,为此,我也提交了不少以前的老数据,而这些历史...

原创小博客 ⋅ 今天 ⋅ 0

LVM讲解、磁盘故障小案例

LVM LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。 1.新建分区,更改类型为8e 即L...

蛋黄Yolks ⋅ 今天 ⋅ 0

Hadoop Yarn调度器的选择和使用

一、引言 Yarn在Hadoop的生态系统中担任了资源管理和任务调度的角色。在讨论其构造器之前先简单了解一下Yarn的架构。 上图是Yarn的基本架构,其中ResourceManager是整个架构的核心组件,它负...

p柯西 ⋅ 今天 ⋅ 0

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 今天 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 2

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

创建新用户和授予MySQL中的权限教程

导读 MySQL是一个开源数据库管理软件,可帮助用户存储,组织和以后检索数据。 它有多种选项来授予特定用户在表和数据库中的细微的权限 - 本教程将简要介绍一些选项。 如何创建新用户 在MySQL...

问题终结者 ⋅ 昨天 ⋅ 0

android -------- 颜色的半透明效果配置

最近有朋友问我 Android 背景颜色的半透明效果配置,我网上看资料,总结了一下, 开发中也是常常遇到的,所以来写篇博客 常用的颜色值格式有: RGB ARGB RRGGBB AARRGGBB 这4种 透明度 透明度...

切切歆语 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部