GIS(三)——优化js版搜狗地图的brand标牌样式
JS 优化 样式 地图 GIS 搜狗
2023-09-27 14:25:17 时间
从上一篇博文的效果图中,我们看到有几个相近的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则须要调整到整个图片的右側。非常easy,自己试着调整一下就明确了。
还回到咱们原先的话题。
如今有多个景点,可能须要指向不同的方向,所以咱们就不能设定死了,那么就须要设定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], footO
相关文章
- JS性能DOM优化
- 「NodeJs进阶」超全面的 Node.js 性能优化相关知识梳理
- js - 总结一下条件语句优化
- QRCode.js 生成二维码详细API和参数
- jQuery.Form.js 中文教程
- JQuery和Js中,如何让ajax执行完后再继续往下执行?(已解决,示例)
- js性能优化之函数节流(分流函数)
- webfont技术优化 -webfontloader.js与font-spider
- 「NodeJs进阶」超全面的 Node.js 性能优化相关知识梳理
- 原生js input过滤空格(直接复制可用)
- JS 数组中找到与目标值最接近的数字,记一次工作中关于二分查找的算法优化
- js加载优化-二
- js加载优化
- 【GIS】ArcGIS JS 4.X
- Node.js机制及原理理解初步
- 《Node.js入门经典》一1.3 安装并创建第一个Node.js程序
- 《Node.js入门经典》一2.3 安装模块
- JavaScript setTimeout用法,js setTimeout带参数
- 前后端加密解密 【JS加密模块(md5 、 crypto 、 crypto-js、jsencrypt) python RSA加密解密(pycryptodome )模块安装与使用】
- arcgis api 3.x for js 入门开发系列批量叠加 zip 压缩 SHP 图层优化篇(附源码下载)
- JS中的call()和apply()方法
- js计算两个时间相差天数
- JS正则替换掉小括号及内容
- Three 之 three.js (webgl)性能优化、提高帧率的思路/方向整理
- Three.js Example 注解 —— canvas_sandbox.html