【openlayers 学习笔记一】的更多相关文章

OpenLayers学习笔记4——使用jQuery UI实现測量对话框

OpenLayers学习最好的方式就是跟着其自带的演示样例进行学习,另外对web前端的开发设计要了解,慢慢积累,这样在一般的小项目中应该是足够用了. 本篇參照量測demo实现对话框形式的量測,抛砖引玉,通过这个功能.后面的查询.定位等基于对话框的形式就非常easy实现了. 先看下效果图: 长度測量: 面积測量: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ2lzZXJfd2h1/font/5a6L5L2T/fontsize/400/fill/I0J…

OpenLayers学习笔记5——使用jQuery UI实现查询并标注（UI篇）

近期事情非常多,老板给的压力也非常大.经常出差,另外项目和个人研究还都要跟上,本月要交论文,还要写专利,仅仅能抽时间来学习其它的东西了. 关于OpenLayers的在博客中不会写太多详细的实现(网上有非常多openlayers的博客,关于载入wms.标记.量測的,我这里就不再反复了),仅仅是记录自己的开发学习经验和一些须要注意的问题.真正做开发的都知道,要想学好开发仅仅能通过自己默默的多磨. .关于WW的学习和开发已经搁置了好久了,等过去这段时间,打算好好学一下jogl,争取做一些粒子模拟出来.…

OpenLayers学习笔记3——使用jQuery UI美化界面设计

PC端软件在开发是有较多的界面库能够选择,比方DevExpress.BCG.DotNetBar等,能够非常方便快捷的开发出一些炫酷的界面,近期在学习OpenLayers.涉及到web前端开发,在设计界面时刚開始不熟悉,设计的非常丑,后来參照ArcGIS在线体验中心的demo以及对web前端界面设计库的调研,终于採用jQuery UI来美化界面(还有比較强大的Dojo).先来看下效果: 这里说下地图与影像切换两个button的实现,其它的都是一样的方式: CSS文件: #mapViewButton…

openlayers 学习笔记之1

1. 为Web Gis客户端开发的javascript 框架 百度文库中的教程:入门经典> 1) 初始化map: map = new OpenLayers.Map(mapContainerName, { controls: [, ) }), new OpenLayers.Control.Navigation(), new OpenLayers.Control.LayerSwitcher(), , topOutUnits: "公里", topInUnits: "米&quo…

openlayers 学习笔记一

1. 创建地图,加载控件 var map = new OpenLayers.Map("map", { projection: new OpenLayers.Projection("EPSG:900913"), displayProjection: new OpenLayers.Projection("EPSG:4326") }); map.addControl(new OpenLayers.Control.Permalink()); map.ad…

OpenLayers学习笔记（十）— 动态加载JSON数据模拟航迹线

在openlayers 3 上,加载本地json数据,动态绘制航迹线,以飞机当前位置为地图中心,此例子是模拟DEMO 本文链接:动态加载JSON数据模拟航迹线 作者:狐狸家的鱼 GitHub:八至 前提需求 需要以JSON数据动态加载绘制飞机轨迹线,飞机图标以加载的坐标为当前实时位置,经过的坐标追加到轨迹线上,标牌始终跟随飞机移动. 简单搭建本地服务器 因为要加载本地JSON文件,可能会存在跨域问题,所以在本地搭建一个服务器来加载数据,会更加方便. 1.全局安装http-server npm i…

OpenLayers学习笔记（九）— 限制地图显示范围

openlayers 3 地图上限制地图显示及拖动范围,坐标系是4326转3857,中心经纬度精确到小数点后六位,减少误差 GitHub:八至 作者:狐狸家的鱼 本文链接:ol3-限制地图显示及拖动范围 查看extent参数可以知道: 所以可以这样进行设置范围: var view = new ol.View({ ... extent: [minx,miny,maxx,maxy] ... }); var map = new ol.Map({ ... view: view, ... }); 并且需要…

OpenLayers学习笔记（八）— 类似比例尺的距离环（二）

openlayers 3 地图上创建一个距离环,始终以地图中心为中心,每个环之间的距离类似比例尺,随地图缩放而变化. 添加具有覆盖整个范围的特征的虚拟层,其可以被设置为围绕地图中心的环. 这篇是上一篇距离环文章的拓展和完善 GitHub:八至 作者:狐狸家的鱼 在线预览 这是模仿openlayers插件库ol-ext新出的canvas距离环功能,简直雪中送炭. 代码: <!DOCTYPE html> <html lang="en"> <head> &…

OpenLayers学习笔记（七）— 类似比例尺的距离环（一）

openlayers 3 地图上创建一个距离环,始终以地图中心为中心,每个环之间的距离类似比例尺,随地图缩放而变化. 添加具有覆盖整个范围的特征的虚拟层,其可以被设置为围绕地图中心的环.注意,根据地图投影,当真实地图比例发生变化时,环尺寸(甚至形状)可能会根据位置而变化,例如,如果从格陵兰岛移动到非洲,这些距离将为50公里,200公里,500公里和1000公里. GitHub:八至 作者:狐狸家的鱼 本文链接:类似比例尺功能的距离环 代码: style: html, body { height:…

OpenLayers学习笔记（六）— 拖拽叠加层overlayer

是在官网例子基础上增加的拖拽功能 GitHub:八至 作者:狐狸家的鱼 本文链接:拖拽叠加层overlayer 全部代码 <!DOCTYPE html> <html> <head> <title>Icon Symbolizer</title> <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type=…