文档章节

GIS(四)——为js版搜狗地图添加边界+Marker和Brand的最终美化版

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

       在《GIS(三)——优化js版搜狗地图的brand标牌样式》中,分享了一下Brand样式的修改。现在把这几次Marker和Brand的修改统一再美化一下,算作一个终极优化版吧。

       这次优化的主要内容是:

  1. 为整个操作的区域,添加边界
  2. 为Marker更换动态图片
  3. 为Brand更换半透明红色图片
  4. 只显示一个Brand,每3秒切换一次

1.绘制边界

       首先做第一个吧,在搜狗地图上添加边界,是一个很简单的、很基本的,但是又很人性化的一个功能。在官网的实例代码中,覆盖层的第21个示例代码《画多边形区域、边自动闭合示例》即是讲解了如何在地图上绘制一个多边形区域。你只要给定几个坐标点,Polygon对象会自动闭合最后一边。点击这里看官网对Polygon类的说明。下面是实例中关键代码:


       可以看到new了一个Polygon的对象,其中,path参数是多边形面坐标的有序序列,说白了就是一个坐标数组。strokeColor是边界边框颜色,strokeOpacity则是边界边框的不透明度,取值0.0-1.0。strokeWeight是边界边框的宽度。 fillColor是中间的填充颜色, fillOpacity是填充部分的不透明度,同样取值范围是0.0-1.0。
       是不是看起来很简单呀。下面的代码是我设定的北京海淀区的边框坐标:
//加载海淀区边界坐标数据
  function loadBound(){
	  b = [{x:12924312.5,y:4842937.5},
	  {x:12921625,y:4842750},
	  {x:12919812.5,y:4847062.5},
	  {x:12919375,y:4849437.5},
	  {x:12918625,y:4849937.5},
	  {x:12918000,y:4850937.5},
      //{x:                      },
	  {x:12919750,y:4854187.5},
	  {x:12920625,y:4856187.5},
	  {x:12922000,y:4856250},
	  {x:12927062.5,y:4854812.5},
	  {x:12927375,y:4855937.5},
      //{x:                      },
	  {x:12931312.5,y:4856437.5},
	  {x:12931000,y:4858500},
	  {x:12933000,y:4861187.5},
	  {x:12934812.5,y:4861375},
	  {x:12935875,y:4858375},
	  {x:12936812.5,y:4858687.5},
	  {x:12938437.5,y:4858000},
      //{x:                      },
	  {x:12940062.5,y:4857812.5},
	  {x:12939187.5,y:4853875},
	  {x:12941000,y:4853250},
	  {x:12941062.5,y:4854437.5},
	  {x:12941937.5,y:4853562.5},
	  {x:12941562.5,y:4852625},
      //{x:                      },
	  {x:12943125,y:4851000},
	  {x:12943687.5,y:4849812.5},
	  {x:12944812.5,y:4850375},
	  {x:12946000,y:4847187.5},
	  {x:12949062.5,y:4846000},
	  {x:12951687.5,y:4847562.5},
	  {x:12952812.5,y:4848000},
     // {x:                      },
	  {x:12954750,y:4847000},
	  {x:12953312.5,y:4845625},
	  {x:12955812.5,y:4844250},
	  {x:12956062.5,y:4842937.5},
	  {x:12951500,y:4841937.5},
	  {x:12954687.5,y:4836187.5},
	  {x:12954875,y:4833375},
      //{x:                      },
	  {x:12953718.75,y:4833406.25},
	  {x:12953906.25,y:4830593.75},
	  {x:12952156.25,y:4830125},
	  {x:12952062.5,y:4831281.25},
	  {x:12951593.75,y:4831156.25},
	  {x:12951625,y:4829812.5},
      //{x:                      },
	  {x:12949000,y:4829750},
	  {x:12949500,y:4829156.25},
	  {x:12949875,y:4824531.25},
	  {x:12949656.25,y:4823187.5},
	  {x:12947187.5,y:4823187.5},
	  {x:12945343.75,y:4821718.75},
	  {x:12945375,y:4823156.25},
      //{x:                      },
	  {x:12940718.75,y:4823187.5},
	  {x:12940687.5,y:4825937.5},
	  {x:12940375,y:4826125},
	  {x:12940625,y:4826781.25},
	  {x:12938031.25,y:4826375},
	  {x:12936031.25,y:4826031.25},
	  {x:12935718.75,y:4826281.25},
	  {x:12935656.25,y:4827187.5},
      //{x:                      },
	  {x:12936375,y:4827593.75},
	  {x:12936250,y:4828437.5},
	  {x:12936468.75,y:4830000},
	  {x:12936156.25,y:4830062.5},
	  {x:12935031.25,y:4831312.5},
	  {x:12933843.75,y:4833156.25},
	  {x:12933187.5,y:4833718.75},
      //{x:                      },
	  {x:12933000,y:4836031.25},
	  {x:12932406.25,y:4836312.5},
	  {x:12931250,y:4835125},
	  {x:12930937.5,y:4836718.75},
	  {x:12929968.75,y:4836437.5},
	  {x:12928843.75,y:4837406.25},
	  {x:12930906.25,y:4838437.5},
	  {x:12931250,y:4839375},
	  {x:12928375,y:4842031.25}]                         
  }

       有了坐标,再结合上面的关键代码,写一个在地图上绘制边界的funciton:
//加载边界
  function addbound(){
    var triangleCoords = [];
    for(var i=0;i<b.length;i++){
      	triangleCoords.push(new sogou.maps.Point(b[i].x,b[i].y));
    }
    var bermudaTriangle = new sogou.maps.Polygon({
        path: triangleCoords,
        strokeColor: "#7CCD7C",
        strokeOpacity: 0.8,
        strokeWeight: 3,
        fillColor: "#7CFC00",
        fillOpacity: 0.35
      });
     bermudaTriangle.setMap(map);
  }

       这样只要调用一下即可在地图上绘制出海淀区的边界了。

2.更换Marker动态图片

       这个就很简单了,如果忘记了,只要回头看看《GIS(一)——在js版搜索地图上添加Marker标记》这篇文章,就可以完成了。其实就是在生成Marker的时候,设定image参数即可。要设置的动态图片如下:

修改的addmarker方法如下(我把图片放到网上了):
//加载标记 
  function addmarker(){
    for(var i=0;i<p.length;i++){
      var point = new sogou.maps.Point(p[i].x,p[i].y);
      //添加一个图标
      var image = 'http://mfxuan.free.800m.net/blogImage/red.gif';
      var marker = new sogou.maps.Marker({
        position: point,
        map: map,
        title:p[i].title,
        icon:image,
        visible:true
      });
      markers.push(marker);
    }
  }

3.更换Brand半透明图片

       这个也很简单,如果忘记的话,看这篇文章《GIS(二)——在js版搜狗地图上添加brand标牌》。由于上次设定了指向不同景点,看起来非常乱,所以我决定还是通知箭头朝上。修改的图片如下:

       修改一下addbrand方法,将参数设定为get_up_spirit(),同时先就爱那个visible设为false,后面会讲到。
//加载标记牌
  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_up_spirit()
	        ,content:p[i].title+"<br /> 城市:北京市"
	        //是否可见,可缺省,缺省为true
	        ,visible:false
	        //指定内容区固定宽度为80,如果不指定,则会根据内容大小自动适应
	       	,fixSize:new sogou.maps.Size(80,0)
	        //指定css,css要在样式表事先定义好
	        ,css:"brand"
	    });
	    brands.push(brand);//将生成的brand,加入到brands数组中
    }
  }

       同时修改 get_up_spirit方法,设定背景图片,而且调整anchor下移7个像素。这是因为修改了marker的图片了,为了防止相互遮挡,将图片整体下移。
//箭头向上
  function get_up_spirit(){
    var spirit={
        url:"http://mfxuan.free.800m.net/blogImage/22.png",
        imgSize:[140,87],
        clips:[[0,0,8,51],[8,0,1,51],[132,0,8,51],[105,53,33,13]],
        anchor:[17,-7],
        footOffset:[0,-63]
    }
    return spirit;
  }

4.设定标牌切换

       标牌统一向上,相互之间肯定是遮挡了。所以为了避免遮挡显得凌乱,可以每次只显示一个brand的信息,几秒之后切换一下。这样就完美解决了前面遇到的问题。
       修改方法很简单,在addbrand方法中,把所有的brand的visible设为false,添加一个changeView方法,去动态更改brand的visible属性,或者直接调用hide()和show()来控制显示即可:
//显示某个景点的内容
  function changeView(){
    //由于new Brand的时候,visible=false,div被隐藏了,所以将所有brand的div都显示出来
    $(".brand").parent().parent().css("display","block");

    //切换标牌
    for(var i=0;i<brands.length;i++){
      brands[i].setZIndex(15);
      brands[i].hide();//所有隐藏
    }
    if(brandId<brands.length){
        brands[brandId].show();//显示
      brands[brandId].setZIndex(20);
        brandId = (brandId+1) % brands.length;
    }
	}

      当然要先定义一个变量来存储当前显示的brand是哪个:
var brandId=0;//记录当前显示的brand

      最后修改一下初始化方法initialize,把添加上的方法都在这里面进行调用:
//初始化数据
  function initialize() {
	//将地图定位在海淀区域
    var point = new sogou.maps.Point(12939000,4840250);
    var myOptions = {
      zoom: 11,
      center: point
    }
    //加载并初始化地图
    map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions);

    //加载景点坐标值
	  loadScenic();
	  
    //加载边界坐标值
    loadBound();
    
    //加载景点标记
    addmarker();
    
    //添加景点标牌
    addbrand();
    
    //立即显示一个
    changeView();
    
    //每隔3秒,切换景点显示
    setInterval(changeView,1000*3);
    
    //加载边界
    addbound(map);
  }

       整个效果图就出来了:


       到此js版搜狗地图的2个简单功能就介绍完毕了。接下来我会再做一个交互查询的功能,尽请期待。

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

本文转载自:http://blog.csdn.net/xiaoxian8023/article/details/39314531

共有 人打赏支持
白志华
粉丝 29
博文 260
码字总数 57524
作品 0
长沙
程序员
云 GIS 网络客户端开发平台 - iClient-JS

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

ahnan ⋅ 2017/12/04 ⋅ 5

开源书籍-JavaScript 编程精解

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

marsdream ⋅ 06/04 ⋅ 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

奖奖奖!高德 LBS 开源组件大赛获奖名单公布

在高德地图的精心策划和开源中国社区的大力推动下,高德LBS”江湖召集令”—— LBS开源组件大赛发出后不少人积极提交作品,经过大众投票和评委投票综合评定,最终公布获奖结果如下: 优秀奖:...

阿娇OSC ⋅ 2014/09/19 ⋅ 24

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

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

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

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

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

所以呢 ⋅ 05/14 ⋅ 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

JVM 即时编译器 - GraalVM

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

匿名 ⋅ 2014/09/29 ⋅ 2

GraalVM 社区版 1.0 RC2,新一代高性能跨语言虚拟机

GraalVM 社区版 1.0 RC2 已发布。 GraalVM 是新一代的高性能跨语言虚拟机,用于运行 JavaScript、Python 3、Ruby、R、基于 JVM 的语言,如 Java、Scala、Kotlin 和基于 LLVM 的语言,如 C 和...

局长 ⋅ 06/07 ⋅ 18

5分钟,掌握9个风骚又简洁的JavaScript技巧

5分钟,掌握9个风骚又简洁的JavaScript技巧 编辑于 2018-05-08

优达学城(Udacity) ⋅ 05/16 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Cloud构建微服务架构—创建“服务注册中心”

创建一个基础的Spring Boot工程,命名为eureka-server,并在pom.xml中引入需要的依赖内容: <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-par......

itcloud ⋅ 13分钟前 ⋅ 0

拖动

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>event</title> <style> #box { width: 100px; height: 100px; background-color: aquamarine; position: absolute; } </style......

fyliujj ⋅ 16分钟前 ⋅ 0

es6 polyfill array

polyfill之javascript函数的兼容写法——Array篇 1. Array.isArray(obj) if (!Array.isArray) { Array.isArray = function(arg) { return Object.prototype.toString.call(arg) === '[objec......

球球 ⋅ 17分钟前 ⋅ 0

kibana启动异常

检查一下:kibana.yml 每一对key:value中,冒号之后应有空格。

增删改查1 ⋅ 19分钟前 ⋅ 0

js修改img的src属性刷新图片时的图片缓存问题

问题:上传一张图片,通过js更新src属性刷新图片使其即时显示时, 当img的src当前的url与上次地址无变化时(只更改图片,名称不变,不同图片名称相同)图片不变化(仍显示原来的图片) 但通过...

HaierBrother ⋅ 20分钟前 ⋅ 0

Mysql

1.Jdbc Url 设置allowMultiQueries为true和false mysql的批量更新是要我们主动去设置的, 就是在数据库的连接url上设置一下,加上* &allowMultiQueries=true *即可。 参数名称 参数说明 缺省...

瑟青豆 ⋅ 23分钟前 ⋅ 0

mysql导出导入表结构与数据

当我们需要进行数据迁移时,mysql自带的mysqldump会是最好的方式。 1.导出某张表的结构和数据 首先,我们应当使用服务器,打开终端,连接到所需要导出的表所在的服务器上。执行命令: mysqld...

hengbao5 ⋅ 23分钟前 ⋅ 0

世界杯也走向“比拼”大数据的时代

《日本经济新闻》6月19日报道称,俄罗斯足球世界杯已于6月14日揭开战幕。作为第21次举办的足球世界杯,如何活用大数据有可能成为决定各支球队胜负的重要因素。从对阵球队的分析到战术建议,还...

加米谷大数据 ⋅ 24分钟前 ⋅ 0

金额转为千分制,金额转中文大写

金额转关为大写 /** 数字金额大写转换(可以处理整数,小数,负数) */ function digitUppercase(n){ if(!n) reutrn "" let fraction = ['角', '分']; let digit = ['零', '壹', '贰', '叁', '肆...

YXMBetter ⋅ 26分钟前 ⋅ 0

开发利器JRebel部署SpringBoot项目

不要以为年纪轻轻就跌倒了人生谷底,未来还有更大的下降空间等着你。 idea下载和安装JRebel 激活JRebel 访问https://my.jrebel.com/ 使用facebook或twitter登录 勾选 Build project automati...

郑龙飞 ⋅ 32分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部