一.参考资料 https://commenthol.github.io/leaflet-rastercoords/ https://github.com/commenthol/gdal2tiles-leaflet https://www.jianshu.com/p/2372fe239130 https://github.com/commenthol/gdal2tiles-leaflet/blob/master/gdal2tiles.py https://www.jianshu.com/p/3b3…

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 在GIS领域,金字塔技术一直是一个基础性技术,WMTS规范专门制定了针对切片请求的格式.利用这种技术,前端可以快速展示出指定级别的地图或影像. 但是,由于切图本身是一张图片,图片上看似是兴趣点的要素根本无法进行前端交互.于是,针对兴趣点等矢量数据的展示,基本原理都是先获取到矢量的地理信息(比如GeoJson),在前端绘制(内核为一个element),于是该e…

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 这周利用晚上在家时间研究了下如何使用AE来开发切图工具.最初的想法是直接调用GP服务,利用CreateMapServerCache .ManageMapServerCacheTiles 和Geoprocessor 这样三个类来做.但是这个思路有个巨大的弊端就是必须先发布地图服务.于是接下来又马上转换思路,想能否通过瓦片选址算法以及AE的一些细粒度类来实现这个…

1.未发布的参照http://www.cnblogs.com/oolili/p/4752114.html 2.在发布地图服务的基础上,打开Arccatalog,找到发布的地图服务选项,如下图: 右键地图服务的服务属性(services properties): (1) (2) (3) 注意:这里切图比较关键的是你要设置的地图比例级别多大以及多少各级别,一般都是和用来发布地图服务的mxd文档设置比例对应一致!! 备注: GIS技术交流QQ群:432512093…

gdal2tiles.py是GDAL库中用于生成TMS瓦片的python代码,支持谷歌墨卡托EPSG:3857与经纬度EPSG:4326两种瓦片,输出png格式图像. gdal2tiles.py More info at: http://wiki.osgeo.org/wiki/Tile_Map_Service_Specificationhttp://wiki.osgeo.org/wiki/WMS_Tiling_Client_Recommendationhttp://msdn.microsoft.…

比赛地址:https://tianchi.aliyun.com/competition/entrance/231717/introduction 这次比赛给的图非常大5万x5万,在训练之前必须要进行数据的切割.通常切割后的大小为512x512,或者1024x1024. 按照512x512切完后的结果如下: 切图时需要注意的几点是: gdal的二进制安装包wheels在:https://www.lfd.uci.edu/~gohlke/pythonlibs/ 这里获取 图像是4个channel,前三…

关于png.jpg.gif切图时的使用感悟 曾经切图时都是一股脑所有图全切成jpg格式,最近突然心血来潮简单的研究了下其他图片格式的具体属性,才突然发现走了不少弯路,并没有做到使图片用最小体积展现出最佳的效果. 今天我就简单的总结下这两个的成果,同时以后也会持续更新最新的感悟. png8.png24.gif.jpg的体积大小 常见的png分为png8和png24: jpg则是由半分比来调整压缩率:gif到没有什么特殊的. 他们通常情况下的体积由大到小来: png24>jpg(100%)>gif…

这篇文章站在GUI设计师的角度概述了APP从项目启动到切片输出的过程,相当于工作流程的介绍.这里写的不是一种规范,只是一种工作方法,加上技术的更新是非常快的,大家在具体工作中,一定要灵活运用. 这里我们只说iOS系统下的设计,至于Android,因为尺寸太多,涉及的东西比较乱.1 Part 1 项目立项 文件结构 项目名称v1.0 -> 01_源文件psd 02_效果图jpg 03_标注图png 04_标注源文件 05_切片资源png 原型.rar 工具: 界面设计:PS, AI 标注:PxCo…

关于iPhone6/6+适配问题一直有争议,今天小编专门为大家整理了相关的有效方案,希望对大伙儿有帮助! 移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选择性地忽视android适配问题,只出一套iOS平台设计稿.随着苹果发布两种新尺寸的大屏iPhone 6,iOS平台尺寸适配问题终于还是来了,移动设计全面进入"杂屏"时代.看看下面三款iPhone尺寸和分辨率数据就知道屏幕有多杂了. 加上Android生态中纷繁复杂的各种奇葩尺寸,现在AP…

目前网站图片的采用一共有流行三种,分别是JPG.PNG.GIF,然而很多人并不知道三者在选择的时候究竟应该选谁.虽然都可以存储图片,但是如果要发布到网上,就必须考虑速度.大小和失真程度的问题.如果你运用得好,选对图片,那样便会使网站的整体体验上升,如果你运用得不好,就会引起反效果.下面我通过文件大小等多方面的元素来讲一下网站图片的合理选择. PNG.GIF.JPG 介绍 GIF 图片 Gif 算是比较老的图片格式了,它的色彩效果最低,用gif保存鲜艳的图片的话会让你的网站看上去非常可怕.但是gi…

页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background). 一.使用PS工具 1.1 PS首选…

× 目录 [1]切图信息 [2]切图步骤 [3]实战 前面的话 前端工程师除了使用photoshop进行测量之外,更重要的是要使用该软件进行切图.本文是photoshop巧用系列的第三篇——切图篇 切图信息 在网页制作中有哪些图片是需要被切出来的呢?主要分为两类,一类是修饰性图片,另一类是内容性图片 [1]修饰性图片 修饰性图片主要对网页内容进行修饰,一般会被制作为雪碧图,用在background属性中,通常保存为png24(IE6不支持半透明)和png8格式.修饰性图片主要包括以下几类: 1.…

我们在给app切图的时候不知道告诉ui启动图标切多大,其实你新建一个android项目就知道应该切多大了.新建一个项目会产生几种大小的启动图标. 我把各个文件夹下的ic_launcher.png文件都查看了下大小,得出如下值: 1.drawable-hdpi  72*72 2.drawable-mdpi  48*48 3.drawable-xhdpi 96*96 4.drawable-xxhdpi 144*144 看到上面的参数我相信大家都知道启动icon切多大了.…

目前APP设计师们对Assistor PS 可是好评连连,说是切图仔的福音或救星.确实是这样的. 与其他切图标记软件不同的是,Assistor PS 是完全独立于 PS 本身的,说是一个外挂更加合适,旨在提高切图标记的效率及速度.虽然不是一个插件,但是它与 PS 是连通的,当你在 PS 选择一个图层在后,即可使用它的功能.如果你肯花点时间下载是试用,相信不会让你失望,甚至能可能让你觉得相见恨晚. APP切图标记PS的外挂神器推荐-Assistor PS 包括mac版和window版,具体版本下载…

网络上已经有很多适配教程,可是看了半天总是半懂不懂..最后还是要综合多个教程再动动脑子动动手,最好有程序大哥帮你试一下(这得有多大的福气) 如果有跟我一样情况的: 1.       有人说用sketch自动导出多套尺寸切图和SVG矢量格式,表示没钱买MAC 2.       有人说用切图神器cutman,表示用CC以上版本PS不支持 3.       另…不喜欢/用不惯/不会用ps自带切图工具的 目前iPhone有10种型号,5种屏幕尺寸,再加上6plus的“降采样”(Downsampling)…

以分辨率为1920×1080的android设备为例.在项目中加载资源的位置为xxhdpi文件夹: 例如将图片放入mdpi文件夹中就会出现,图片的横纵尺寸分别乘3被的后果,因为它认为在这个文件夹中是低分辨率图片:从而也会导致内存扩大为图片在xxhdpi文件夹放置时的三倍.所以一定要对不同分辨率的设备做不同的切图.…

APP切图流程和APP切图命名规范详细完整版 http://www.25xt.com/appdesign/7339.html Marketch…

一.PS界面设置 1.新建(ctrl+n) 初始化尺寸参数 预设:自定 宽度:1920px 高度:自设(如:2000px) 分辨率:72像素/英寸 颜色:RGB/8位 背景内容:透明 存储为预设 2.移动工具设置 快捷键:V 作用:选择和移动图层 2.1选择图层 自动选择不用勾选,将后面设置为图层 windows系统:Ctrl键+单击鼠标左键 苹果系统:command+单击鼠标左键 2.2显示/隐藏图层 点击图层前面的小眼睛 显示/隐藏所有图层: 在小眼睛那里选中一个图层右键点击->显示/隐藏所…

网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background). 一.使用PS工具 1.1 PS首选项设置 编辑->首选项->单位与标尺,选改为像素. 1.2 面板 在"窗口"菜单下开启: 工具(默认已开启) 选项(默认已开启) 图层(默认已开启)…

UI基础教程 – 原生App切图的那些事儿 转发:http://www.shejidaren.com/app-ui-cut-and-slice.html 移动APP切图是UI设计必须学会的一项技能,切图虽然简单,但还是有很多地方需要注意的,下面由tgideas的 LV主唱大人 跟大家讲讲原生App切图的那些事儿,对UI入门或需了解APP切图的设计师来说会有帮助哦. 如何切图? 了解iphone界面的尺寸 最小的分辨率是320×480,我们把这个尺寸定为基准界面尺寸(baseline),基准尺寸所…

APP UI设计及切图规范 1.概述 1.1 编写目的 该文档主要针对移动端开发的视觉设计和开发过程中的工作环节做统一的规划规范,是系统进入UI设计的前置文档.部分内容来自网络收集修编,转载请注明由 嗡嗡(iwengweng.cn) 整理. 1.2 读者对象 项目实施工作组UI/UE设计人员. 2.色值规范 系统采用统一色彩标注值,超出的需要进行登记管理. 色彩范围值:以通用字号C开头标识,在Android开发中对应相应的配置文件 参考:Android开发设计规范 2.1 屏幕适配 Androi…

界面为移动工具时(快捷键V),选中左上角的图层. 点击视图,选中显示→智能参考线,与标尺. 点击窗口,把"库" "颜色"去掉,把屏幕右上角的"通道" "路径"关闭,旁边的"属性"关闭,选中"图层" "信息" "字符".把"信息" "字符",里面的"段落","属性"关闭.…

× 目录 [1]初始设置 [2]自动切图 前面的话 随着photoshop版本的不断升级,软件本身增加了很多新的功能,也为切图工作增加了很多的便利.photoshop最新的版本新增了自动切图功能,本文将详细介绍photoshop的这个新功能 初始设置 当然首先还是要进行一些首选项设置 [1]在编辑 -> 首选项 -> 增效工具中,选中启用生成器 [2]重启photoshop,在文件 -> 生成中,点击图像资源在文件 -> 生成中,点击图像资源 [注意]只有在photoshop中有文…

系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的切图功能称为传统切图,而从PhotoShop CC版本开始PS提出了精准切图.所谓传统切图就是切图人员基本上都是自己分割图层切图,传统切图又分为全手工切图和参考线切图:现在CC版本提出的精准切图,切图人员可以依赖计算机把图层对象精确的切割出来,这样切割出来的图层肯定比传统切图切出来的精准度高.另一方…

切图严格来说并不是UI设计师的工作, 而是前端工程师的工作,指的是将UI设计师的设计(大部分为photoshop创建的PSD文件)转化为界面(网页或窗体等)所需要资源的过程.切图是衔接UI设计和应用程序的桥梁,是一种将设计师的“理想”转化为“现实”的工作. 由于不同人的实现方法不同,可能对切图的需求也存在一定的差异.作为前端工程师,掌握切图将为提升自己的竞争力带来一臂之力. 一般来说,photoshop可以通过手动进行切图,这样比较好控制,但是对于复杂的UI来说,往往比较费事费力.photosh…

切图之前 哪些是需要切出来的? 修饰性的 (一般用在background属性) 图标.logo 有特殊效果的按钮  文字等 非纯色的背景 内容性的 (一般用在img标签) Banner.广告图片 文章中的配图 从服务器加载的图片不用 切图,只需要『占位』即可 切出来的图片 存为哪种类型? 修饰性的 PNG24 (IE6不支持半透明) PNG8 内容性的 一般存为 JPG 切图 · 隐藏文字只留背景 若文字为独立图层,隐藏文字图层 找到文字图层 去掉眼睛图标 若文字和背景合并,平铺背景覆盖文字 矩…

移动端IOS知识普及:IOS标准分辨率:1242px * 2208px 切片要求: 1.    设计稿是按标准分辨率1242X2208设计,图片资源尺寸则是3倍图尺寸,将整个设计图压缩成750X1334,图片资源尺寸则是2倍图尺寸,在二倍图的基础上压缩成50%,图片资源尺寸则是1倍图尺寸: 2.产品效果图独立切片,即是每张效果图独立建立一个文件夹(命名以效果图名称为准),文件夹内容包含1倍图文件.2倍图文件.                                     3倍图文件和标…

图片热点 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果.与图片链接不同,热点是图片上的某一个区域或多个区域. 我们用魔兽世界图片来做一个图片热点,点击logo.区域和不同人物会连接到对应种族介绍: 在网页中打开图片,指向特定的区域将显示连接提示,点击后连接到指定网址 <body><table align="center"><tr> <td><img src="魔兽世界1.jpg"…

第一部分:界面设置 1.点击“文件-新建”(或者ctrl+n)打开一个新建对话框.名称可随意填写.“预设”设置为自定,“宽度”一般选择1920,“单位”选为像素.“高度”可选择为2000,“单位”选为像素.“分辨率”设置为72px;“颜色”设置为RGB颜色,8位.“背景内容”为透明.之后点击确定即可打开.这里建议最好“存储预设”,这样以后就可以直接打开用了.如下: 2.将移动工具的“自动选择”不要打勾,后面的选择使用“图层”.如下: (技巧:如果我们需要选择psd的某一个图层,可直接ctrl+点…

1. 新建设置 文件->新建->预设->自定义 1920 像素 2000 像素 72 像素/英寸 背景内容 透明 存储预设 2.视图设置 视图->显示->智能参考线选中视图->标尺选中 3.窗口设置 窗口->颜色关闭,通道关闭,属性关闭,库关闭窗口->信息打开,字符打开 形成如下图所示: [信息][字符][图层][历史记录] 四个面板 点击信息面板右侧的小按钮,选择面板选项 模式 全部为RGB颜色标尺单位 像素勾选 文档标尺确定保存 4.编辑设置 编辑-&g…