OpenLayer

[转]openlayer+geoserver实现WFS操作

From:http://liushaobo2005.blog.163.com/blog/static/253056702011541462372/ wfs是OGC的标准规范,主要用于提供对矢量地理数据的服务,我们以一个对摄像头图层进行操作为例了解如何通过openlayer+geoserver实现WFS操作. 首先利用postgis建表camera,参照http://postgis.refractions.net/docs/ch04.html 接着在geoserver中创建相关图层camera,数…

OpenLayer 3 鹰眼控件和全屏显示

<body> <div id="map"></div> <script> var map=new ol.Map({ target:"map", layer:[], view:new ol.View({ center:[0,0], zoom:2 }) //control:new control.defaults().extend([ // new ol.control.FullScreen() // ]) }) var…

openlayer的凸包算法实现

最近在要实现一个openlayer的凸多边形,也遇到了不小的坑,就记录一下 1.具体的需求: 通过在界面点击,获取点击是的坐标点,来绘制一个凸多边形. 2.思考过程: 1)首先,我们得先获取点击事件发生时,触发的点的坐标 map.events.register('click', map, function (e) { var pixel = new OpenLayers.Pixel(e.xy.x,e.xy.y); var lonlat = map.getLonLatFromPixel(pixel…

完整版openlayer的例子及中文注释（完整中文版）

//@sourceURL=PersonLocation.jsvar window_temp = { onbeforeunload: null, DEBUG_MODE: false, MAPLIST: null, MAPLIST_CACHE: {}, MAP: null, MAP_LAYERS: null, LAYER: ['basic', 'area', 'device', 'person', 'single', 'building'], MAP_CTRLS: null, CTRLS: ['sc…

leaflet一个前端gis框架，比openlayer更简单

leaflet一个前端gis框架,比openlayer更简单作者github:https://github.com/mourner?tab=overview&from=2009-12-01&to=2009-12-31 github:https://github.com/Leaflet/Leaflet 中文教程:http://115.28.28.161:4000/index.html http://jsfiddle.net/FranceImage/9dggfhnc/ http://bl.o…

AngularJs 中使用OpenLayer例子,手机端地图加载不显示问题

var map, toolip, overlay; var layer = new ol.layer.Vector(); var imgLayer = new ol.layer.Image(); var center = ol.proj.transform([116.46, 39.92], 'EPSG:4326', 'EPSG:3857'); var extent = [center[0] - 6290…

openlayer 5 获取中心点

之前在控制台把map对象打印出来后,有一个很像中心点坐标map.focus_.我可以确定的告诉大家,这个不是中心点坐标,检查出来的结果是地图中心最右的点位. 在创建地图时,会将中心点左边写在view中,那么获取中心点坐标也是在view中在官网中View中有一个事件--calculateExtent(opt_size) 官网中是这么介绍的 Calculate the extent for the current view state and the passed size. The size i…

electron-vue 引入OpenLayer 报错 Unexpected token export

electron-vue 引入OpenLayer 报错 Unexpected token export 解决办法: 在 .electron-vue/webpack.renderer.config.js 添加 ol let whiteListedModules = ['vue','ant-design-vue','ol']…

openlayer 3 在layer上添加feature

首先获取layer的source,所以你的source里就先要有内容. vectorLayer.getSource().addFeature(iconFeature); 如果source里面没有定义过,则会有如下错误: 还有一点需要注意的是: addFeature()与addFeatures()的区别. (个人见解) addFeatures()会覆盖原source,使用addFeature()则会在原来的基础添加.…

一个完整openlayer的例子，包括marker，popup等

整理转自:http://www.blogjava.net/siriusfx/archive/2007/11/26/163104.html openlayers提供了几十个示例,虽然每个示例都很简单,但却很具有代表性,值得初学者学习. 现在我想做一个测试,包含多个图层.缩放条.工具条.鼠标位置.弹出窗口,其中图层分别来自geoservr 提供的WMS和WFS服务接口. 主要代码如下: 样式定义,定义地图大小,工具条位置和替换按钮图片. <style type="text/css"&…

openlayer调用geoserver发布的地图实现地图的基本功能

转自:http://starting.iteye.com/blog/1039809 主要实现的功能有放大,缩小,获取地图大小,平移,线路测量,面积测量,拉宽功能,显示标注,移除标注,画多边形获取经纬度坐标.根据经纬度坐标显示多边形.地图切换,图层控制等功能. <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//…

Openlayer 3 删除上一次绘制的图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>画图测量面积</title> <link rel="stylesheet" href="css/ol.css"> <script src="js/jquery-1.11.3.js"…

Openlayer 3 最简单的弹出框

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹出框</title> <link rel="stylesheet" href="css/ol.css"> <script src="js/jquery-1.11.3.js">…

Openlayer 3 的点击弹出框

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/ol.css" type="text/css"> <script src="…

<html> <head> <meta charset="utf-8"> <title>GIS开发样例-V1.0</title> <meta content="Copyright (c) Leetao" name="copyright"> <link rel="stylesheet" href="ol.css" type=&quo…

Openlayer 3 的画图测量面积

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>画图测量面积</title> <link rel="stylesheet" href="css/ol.css"> <script src="js/jquery-1.11.3.js"…

Openlayer 3 的画线测量长度

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>画线测量长度</title> <link rel="stylesheet" href="css/ol.css"> <script src="js/jquery-1.11.3.js"…

OpenLayer 3 鼠标位置坐标显示控件

<body> <div id="map"> <div id="mouse-position"></div> </div> <script> var map=new ol.Map({ target:"map", layer:[], view:new ol.View({ center:[0,0], zoom:2 }) //control:ol.control.defaults()…

Openlayer 3 图层列表控件(自定义)

<body><div id="map"></div><div id="layerControl" class="layerControl"> <ul id="layerTree" class="layerTree"></ul></div><script> var layer=new Array();//图层数组…

如何在openlayer接入矢量数据

先说矢量数据集接入,我们通过GeoJSON的示例代码(http://openlayers.org/en/latest/examples/geojson.html)了解Openlayers的源代码,确定显示要素绘制是调用ol.source.vector的forEachFeatureInExtent方法,所以我们根据ol.source.vector构建了ol.source.VectorMapZone,重写forEachFeatureInExtent方法,将查询结果转换成Openlayers3的Geo…

OpenLayer实现路径运动

近期由于业务的需求,让我这从未想过要碰Web Gis的业余前端开发者,走了Web Gis的开发道路.功能需求很简单,但却也是让自己难为了好几天.如,应该选择那个Gis框架,Gis框架的兼容性如何,直接Ie哪些版,能不能简单到只有一张图片就行解决问题,等等...... 在如此多的技术盲点,以及不确定的因素,我开始了征程,现将一些心得做些记录. 一.需求分析客户需要的功能就是能在一张Gis图上实现小车根据路径进行移动,为什么一定要Gis呢(这是客户指定需求,无语一该).并且客户还说底图要很容易更换…

Openlayer 3加载本地ArcGIS切片

第一篇博客,简单的开个头吧.希望自己能坚持记录.一般什么情况什么人需要这样的需求呢,伐木的光头强大哥说我们在深山老林里,没网的啊,地图就手机本地duang的加载一下吧.那么Server啊就要丢掉丢掉.丢掉手表丢掉外套,丢掉背包再丢掉唠叨,咳咳,跑题了.来看看具体步骤吧,非常简单但详细. 1. 制作切片的数据基本信息如下: 图层数据信息: 地理坐标系: GCS_WGS_1984 基准面: D_WGS_1984 本初子午线: Greenwich 角度单位…

openlayer ol.js和ol-debug.js的使用调试技巧

二者实现的功能是一样的,有以下区别 : ol.js一般打包项目的时候使用, ol-debug.js编写代码调试的时候使用. 下边是用ol-debug.js编写代码调试的显示: 编写代码调试的技巧,所有的对象可以通过get(“属性名”)方法获取对应的值 e.selected[0].get("name") 可以智能提示 e.selected[0]的所有属性和方法名,选择即可 e.selected[0].getGeometryName()…

【总结整理】openlayer加载搜狗地图，qq地图，mapabc

qq http://www.cnblogs.com/gisvip/archive/2012/11/01/2750493.html mapabc http://www.cnblogs.com/gisvip/archive/2012/03/25/2417240.html 天地图 http://www.cnblogs.com/gisvip/archive/2012/03/25/2417229.html http://www.cnblogs.com/gisvip/archive/201…

【总结整理】openlayer

实时路况 http://www.cnblogs.com/gisvip/archive/2012/11/24/2787141.html…

openlayer 4326与3857坐标互转之Java版

public class Transform { private static final double PI = Math.PI; private static final double mercatorMax = 20037508.34; /** * 4326坐标转3857即经纬度转墨卡托 * @param lon * @param lat */ public static void transformTo3857(double lon,double lat){ double mercato…

openlayer路线箭头

// 用于设置线串所在的矢量图层样式的函数 var styleFunction = function(feature,res){ //轨迹线图形 var trackLine= feature.getGeometry(); var styles = [ new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#2E8B57', width: 10 }) }) ]; //对segments建立btree索引 let tree= Mapbo…

cesium自定义气泡窗口infoWindow

一.自定义气泡窗口与cesium默认窗口效果对比: 1.cesium点击弹出气泡窗口显示的位置固定在地图的右上角,默认效果: 2.对于习惯arcgis或者openlayer气泡窗口样式的giser来说,感觉不太适应,加上公司的领导也想要arcgis气泡窗口的那种样式效果,所以自定义了类似arcgis模板的气泡窗口模式,可以随着地图移动而移动,简单版本样式效果如下: 二.具体实现思路: 1.气泡窗css样式 /*自定义气泡窗口样式模板*/ .closeButton{width:12px;heigh…

Cesium简介以及离线部署运行

Cesium简介 cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎,一款开源3DGIS的js库.cesium支持3D,2D,2.5D形式的地图展示,可以自行绘制图形,高亮区域,并提供良好的触摸支持,且支持绝大多数的浏览器和mobile,但是由于cesium基于WebGL来渲染3D的,所以对浏览器有要求,必须支持WebGL才行.参照cesium官网的说明文档,浏览器支持版本:IE11或者以上.谷歌.火狐版本比较高级等等,其实测试浏览器支不支持,运行demo就可以测试,会…

我的屌丝giser成长记-研二篇

之前有提到过的,本来按照计划中,研一结束就该去深圳中科院研究所实习的,之前跟里面师兄说好了的,奈何导师又接到一个新的科研研究项目,跟学院的几个其他老师一起合作的,主要是关于土地流转系统,而且是一个挺大的国家基金项目.本来不想参与,原因这里不在描述了,最终还是被导师安排进来了,不过让我感到欣慰的是,终于不是一个人在奋斗了,让我带三个师弟一起在奋斗. 依稀还记得,这个土地流转项目的框架是SSH+extJS,数据库是sqlserver,关于WebGIS功能实现,不是采用arcgis api for s…

【OpenLayer】的更多相关文章