openlayers 实现地图切割

2024-09-01

Openlayers3中实现地图的切割

概述: 本文讲述如何在Openlayers3中结合canvas实现对地图的切割. 效果: 全图切割北京区域切割河北区域实现: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ol3 wms

项目背景最近有一个使用全球地图展示数据的项目,用地图展示数据本身没什么难度,但出于安全和保密的考虑,甲方单位要求项目不能连接外网,只能在内网使用,也就是说,我们不得不在内网中部署一个地图服务器,在这个地图服务器的基础上进行开发. 由于之前没有这方面的技术积累,在经过一番搜素和比较后,发现了几个解决方案. 不过,甲方不愿意再花钱购买任何第三方的软件和服务了,所以,我的解决方案就只能在开源方案中寻找了,商业的解决方案都被排除在外. 几个方案 GeoServer GeoServer是一个功能齐全,遵

使用OpenLayers 勾画地图

<!DOCTYPE html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta charset="utf-8" /> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <meta http-equiv=X-UA-Compatible content="

JavaWeb和WebGIS学习笔记（五）——使用OpenLayers显示地图

系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)--GeoServer 发布shp数据地图 JavaWeb和WebGIS学习笔记(四)--使用uDig美化地图,并叠加显示多个图层前言:在上一篇博客JavaWeb和WebGIS学习笔记(四)--使用uDig美化地图,并叠加显示多个图层中,我们使用Layer Preview功能,通过GeoServer自

OpenLayers中地图缩放级别的设置方法

来源于:http://www.cnblogs.com/sailheart/archive/2011/03/15/1984519.html 一.概述在OpenLayers中,地图必须具有一个缩放级别的范围,缩放级别可以用比例尺(scale)或者分辨率(resolution)表示. 比例尺——屏幕上1米代表多少地图坐标单位:分辨率——屏幕上一个像素代表多少地图坐标单位.两者的转换关系是:scale = resolution * 72 * 39.3701(1米=39.3701英寸,1英寸=72像素)

OpenLayers在地图上显示统计图，饼图线状图柱状图，修复统计图跳动的问题

环境介绍 Openlayers ol.js v5.3.0 Highcharts highcharts.js v7.0.1 jquery jquery-3.3.1.js v3.3.1 显示效果地图放大缩小对统计图的大小无影响以饼状图为例 1.添加地图,并渲染统计图所在的点位, vector是渲染feature需要用的图层,一定要保证在所有图层的最前方,否则渲染的feature会被遮盖,(地图量算时由于这个问题搞了一上午) sourceMeasure = new ol.source.Vector

使用OpenLayers发布地图

OpenLayers是用于制作交互式Web地图的开源客户端JavaScript类库,制作的地图几乎可以在所有的浏览器中查看.因为是客户端类库,它不需要特殊的服务器端软件或配置,甚至不用下载任何东西就可以使用它.OpenLayers最初由Metacarta开发,现在它已经成为一个拥有众多开发者和帮助社区的成熟.流行的框架. 下载OpenLayers OpenLayers的官方网址为:http://openlayers.org/ 1.打开官网,可以看到目前OpenLayers的最新版本是2.12,直

OpenLayers在地图外放置控件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>在地图外放置控件</title> <link rel="s

openlayers之地图截图

方法1 //this.map._this为初始化地图对象 this.map._this.once('postcompose', function (event) { var canvas = event.context.canvas; if (navigator.msSaveBlob) { navigator.msSaveBlob(canvas.msToBlob(), 'map.png'); } else { canvas.toBlob(function (blob) { saveAs(blob

openlayers之地图测距侧面

项目背景vue-cli3.0 public下html需要引入文件 <link rel="stylesheet" href="<%= BASE_URL %>./css/gr-ol.css" type="text/css"> <script src="<%= BASE_URL %>./js/ol.js" type="text/javascript"></sc

OpenLayers绘制地图，无需外网，内网访问，提高安全性。

1. 首先引入ol ,npm i --save ol 2. 创建地图一个地图初步就这样完成了. 3. 怎么与后台进行交互? 具体参考文档:http://weilin.me/ol3-primer/ch12/12-01-01.html 然后就是配置: 其中的view center 设置就是显示某一局部的中心,就是限制显示局部区域. 4. 自定义加载图标先定义map,然后把后台数据比如图片,经纬度等放入this.nodeData.set(name,value), 然后在其他地方就通过this.no

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 3 之加入地图鼠标右键菜单

加入右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu.当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 contextmenu 事件的回调函数中实现对应的显示菜单功能就可以. 那么在 openlayers 中.在地图中加入这个事件,我们从哪里下手呢?首先我们得了解 openlayers 的初始化页面的过程. openlayers 初始化页面过程 openlayers 也是一个前端库,那么它肯定离不开 html 的运

通过openlayers加载dwg格式的CAD图并与互联网地图叠加

Openlayers介绍 Openlayers是一个基于Javacript开发,免费.开源的前端地图开发库,使用它,可以很容易的开发出WebGIS系统.目前Openlayers支持地图瓦片.矢量数据等众多地图数据格式,支持比较完整的地图交互操作.目前OpenLayers已经成为一个拥有众多开发者和帮助社区的成熟.流行的框架,在国内外的GIS相关行业中得到了广泛的应用. openlayers 官网地址 https://openlayers.org/ openlayers 源码地址 https:

MMORPG大型游戏设计与开发（服务器游戏场景地图和区域）

地图的数据以及区域的信息是场景的重要组成部分,这些数据同时存在客户端和服务器,而且都是由编辑器生成的.那么保存的文件数据结构是怎样的?一张3D的场景地图又是怎样处理这些数据的?同时告诉大家这里同样只是讲的理论与设计,理论和设计往往都很空洞,但是却很灵活,需要靠每个人怎么运用. 一些图片区域和格子从上面的截图可以看出游戏场景其实是由格子来区分的,不管是矩形的格子还是其他形状的格子也好,一张地图不可能只有一个点(即多点组成一张地图).在3D场景中似乎格子的位置总伴随着高度信息,所以让人感觉有些迷

OpenLayers 3 中Layers的相关知识

昨天自己一遍又一遍的把API里Accessible map那个例子写下来,终于好像有熟悉一点点.找到一篇博文详细讲Layers的.整理一下贴出来(本来想在网上做笔记可以重新排版,比写在本子上要容易有结构些.奈何自己学的零零散散,结果还是乱成一团了.) 在 OpenLayers 中,图层是使用 layer 对象表示的,主要有: 热度图层(heatmaplayer). 图片图层(imagelayer). 切片图层(tilelayer) 矢量图层(vectorlayer) 四种类型,它们都是继承 La

[原创.数据可视化系列之一]使用openlayers 3 显示聚合数据

在地图上显示点数据是最常用的地图展示功能之一,但是如果很多点在地图上显示,或造成密密麻麻的一片,无法正常看清楚,这个时候,一般有两种解决方案,一种是根据数据重要程度进行标注,重要的显示大一些,不重要的显示小点,比如百度地图就是这样的:另一种方法是使用聚合,让相邻的点聚合成一个点,也能解决这个问题. 使用openlayers 3 地图组件比较容易解决这个问题,关键是 ol.source.Cluster 对象,这个对象有两个参数,一个是聚合距离,一个是原始的点数据.代码片段如下: 1:初始化ol3

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

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

Geoserver基本使用、WMS服务发布与OpenLayers测试

1.Geoserver与OpenLayers的下载 Geoserver:http://geoserver.org/ OpenLayers:http://openlayers.org/ 2.安装部署Geoserver 环境:jdk 1.7,geoserver-2.5 配置:修改geoserver-2.5/ect/jetty.xml 的端口为8089,避免端口冲突. <Call name="addConnector"> <Arg> <New class=&qu

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: