如何调openlayers地图大小

2024-11-09

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像素)

Echarts地图悬浮框显示多组series数据以及修改地图大小

1.如何让echarts的地图悬浮框出现多组series数据? 2.如何更改地图默认的大小? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HULU</title> <script src="{{ static_url('js/echarts-all.js') }}">&

echarts设置地图大小比例,大小设置

设置地图大小可通过以下属性设置: geo.aspectScale number [ default: 0.75 ] 这个参数用于 scale 地图的长宽比. 最终的 aspect 的计算方式是:geoBoundingRect.width / geoBoundingRect.height * aspectScale geo.layoutCenter Array [ default: null ] layoutCenter 和 layoutSize 提供了除了 left/right/top/bott

Android调起地图导航

想要使用导航功能可以使用各个地图的开放平台集成导航模块,如果不想集成也可以调起相关app导航调起其他app首先得使用到该app包名,先贴出来 public final static String BAIDU_PACKAGENAME = "com.baidu.BaiduMap"; public final static String GAODE_PACKAGENAME = "com.autonavi.minimap"; public final static

Openlayers 地图定位到相应位置并缩放

说明: 在地图操作中,有个功能,需要点击一个点,将视图定位到点击点的位置,并放大. 解决方案: 1.可以有openlayers中可以有ol.View来控制,但是在更改时,会将地图初始化时设置的maxZoom,minZoom等覆盖掉,因此需要在设置新的view前,重新设置一次初始化时的值,避免重复覆盖. /** * @description 地图定位中心并缩放事件 * @param {Map} _map 地图对象 * @param {Feature} _feature 要定位的要素 * @para

OpenLayers学习笔记（四）— QML显示html中openlayers地图的坐标

GitHub:八至作者:狐狸家的鱼本文链接:实现QML中显示html中地图的坐标如何QML与HTML通信已经在这篇文章 QML与HTML通信之画图详细讲述了 1.HTML var coord; map.on('singleclick',(evt)=>{ coord = ol.coordinate.toStringXY(ol.proj.transform(evt.coordinate,'EPSG:3857','EPSG:4326'),2); content.changeText(coord

Echarts 设置地图大小

项目中要添加地图,默认地图太小,折腾半天终于找到解决方案. series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiangsu', // 自定义扩展图表类型 zoom: 1.2, //这里是关键,一定要放在 series中 itemStyle: { normal: { label: { show: true } }, emphasis: { label: { show: true } } }, 看一下 zoom: 1.2 的效果看一下

web端调百度地图页面

在点击进入地图的入口(下面数据是vue渲染的数据) <a class="navigation" v-if="merchant.longitude && merchant.latitude" href="http://api.map.baidu.com/marker?location={{merchant.latitude}},{{merchant.longitude}}&title={{merchant.name}}&

openLayers地图缩放的回调

//设置地图最小缩放级别为17级 map.events.register("zoomend", this, function (e) { //每次地图缩放时就会进入到这 if (map.getZoom() < 17) { //map.zoomTo(17); map.setCenter(map.getCenter(),17); } });

改变容器Size后，刷新地图大小。

You need to call the API to update map size. http://dev.openlayers.org/docs/files/OpenLayers/Map-js.html#OpenLayers.Map.updateSize Here's how we do it window.onresize = function() { setTimeout( function() { map.updateSize();}, 200); } You can see we

【03】openlayers 地图事件

绑定事件:map.on(type, listener) 取消绑定:map.un(type, listener) type:事件类型 listener:执行得函数体事件类型: //事件类型 let type = { click:'click',//单击 dblclick:'dblclick',//双击,双击会触发click singleclick:'singleclick',//单击,延迟250毫秒,就算双击不会触发 moveend:'moveend',//鼠标滚动事件 pointermove:

【04】openlayers 地图弹框

效果: 创建地图: //创建地图 var map = new ol.Map({ //设置显示地图的视图 view: new ol.View({ projection: 'EPSG:4326', //投影方式 center: [108, 34], //定义初始显示位置 zoom: 3 //定义地图显示层级 }), //创建地图图层 layers: [ //创建一个使用Open Street Map地图源的瓦片图层 new ol.layer.Tile({ source: new ol.source.

【11】openlayers 地图交互

地图交互interaction 关于map的方法: //添加地图交互 map.addInteraction(interaction) //删除地图交互 map.removeInteraction(interaction) 创建矢量图层并添加到地图容器中: //创建矢量图层并添加到地图容器中 var source = new ol.source.Vector({ wrapX: false }); var vector = new ol.layer.Vector({ source: source }

openlayers 地图移动缩放动画

map.getView().animate({ // 只设置需要的属性即可 center: [data.jd, data.wd], // 中心点 zoom: 11, // 级别 rotation: undefined, // 缩放完成view视图旋转弧度 duration: 1000 // 缩放持续时间,默认不需要设置 })

HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用

在前面<百度地图.ECharts整合HT for Web网络拓扑图应用>我们有介绍百度地图和 HT for Web 的整合,我们今天来谈谈 OpenLayers 和 HT for Web 的整合. HT for Web作为逻辑拓扑图形组件自身没有GIS功能,但可以与各种GIS引擎即其客户端组件进行融合,各取所长实现逻辑拓扑和物理拓扑的无缝融合,本章将具体介绍HT for Web与开发免费的OpenLayers地图结合应用的关键技术点,该文介绍的结合的原理,其实还可推广到与ArcGIS.百度地图

HT for Web整合OpenLayers实现GIS地图应用

HT for Web作为逻辑拓扑图形组件自身没有GIS功能,但可以与各种GIS引擎即其客户端组件进行融合,各取所长实现逻辑拓扑和物理拓扑的无缝融合,本章将具体介绍HT for Web与开发免费的OpenLayers地图结合应用的关键技术点,该文介绍的结合的原理,其实还可推广到与ArcGIS.百度地图以及GoogleMap等众多GIS地图引擎融合的解决方案. 以上抓图为本文介绍的例子最终运行效果,接下来我们一步步来实现,首选显示地图信息需要有城市经纬度数据,搜索了下感谢此篇博客提供的数据.这么大量

MapXtrem + Asp.net 地图随窗体改变大小

在B/S框架下,MapXtreme都是基于图片的,也就是说在客户端显示的地图实际上都是一张图片. 地图控件 <cc1:MapControl ID="/> 在调试模式下,编译后的地图控件 <span id="MapControl1" style="display:inline-block;height:600px;width:800px;"><img width="800px" height="60

H5端调起百度地图、腾讯地图app

来自一个需求的总结: 在微信公众号中根据地图上的marker和label,或者搜索结果点击调起地图APP进行导航. 一开始是使用百度地图进行开发,后面转腾讯是因为微信不允许不是自家或者合作方的APP在微信自带浏览器中唤起.(这里吐槽一下微信,这么搞算垄断吗?还有腾讯地图有多渣心里没点B数吗?用户使用量就是一个很好的证明!) 首先: 百度地图Marker打点及label并添加对应点击事件给百度地图添加了maker,label及对应的点击事件,如果需要创建多个marker和label:从第二行创建

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

ROS中利用V-rep进行地图构建仿真

V-rep中显示激光扫描点在VREP自带的场景中找到practicalPathPlanningDemo.ttt文件,删除场景中多余的物体只保留静态的地图.然后在Model browser→components→sensors中找到SICK TiM310 Fast激光雷达,拖入场景中: 打开脚本参数修改器,可以修改雷达扫描范围(默认为270°),是否显示雷达扫描线(true),以及最大探测距离(默认为4m)这三个参数.地图大小为5m×5m,我们将雷达最大探测距离改为2m 将激光雷达放到地图中任

如何调openlayers地图大小

热门专题