前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 webpack 配置介绍文档详细的 webpack 文档配置介绍,适合新手查看,我也是边看边学 vscode 安装包下载,我这边用 vscode工具编译开发前端项目,个人觉的这款工具还不错 leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 l

L.Control 所有leaflet控制的基础类.继承自IControl接口. 你可以这样添加控件: control.addTo(map); // the same as map.addControl(control); 构造器 构造器 使用 描述 L.Control( <Control options> options? ) new L.Control(…) L.control(…) 通过给定的选项创建一个控制. Options 选项 类型 默认值 描述 position String '

最近需要加载 ArcGIS 瓦片图层,运行官网加载 ArcGIS 瓦片图层的 demo 是没有问题的.如果把 ArcGIS 瓦片图层 URL 换成是自已发布的 ArcGIS 地图服务,发现加载不出来,而服务本身提供的 ArcGIS API 却可以加载出来.到底是哪里的问题呢,于是便试着写了个自定义扩展方法 ArcGISTileLayer 用来加载 ArcGIS 瓦片图层. 1.分析 ArcGIS API 的 URL 打开浏览器的 Network 发现 URL 参数是由 dpi .bboxSR.i

L.Map API各种类中的核心部分,用来在页面中创建地图并操纵地图. 使用 example // initialize the map on the "map" div with a given center and zoom var map = L.map('map', { center: [51.505, -0.09], zoom: 13 }); 构造器 构造器 使用 描述 L.Map( <HTMLElement|String> id, <Map options

先说说这个功能可能使用到的地方,当我们下载的网上瓦片或者矢量数据的第一级或开始几级效果不是很好时,我们就就想让用户看到这些级别的瓦片.实现这个功能比较简单,主要就是修改Openlayers.map的isValidZoomLevel方法.具体如下:1.先定义好一个limiteZoonLevel方法,在 /* *设置地图可以缩放的级别 *Parameters: *minLevel - {int} 最小级别 *maxLevel - {int} 最大级别 */ limiteZoonLevel: func

Control.Layers方法 该方法可以创建一个切换图层的工具, L.control.layers(baseLayers, overlayers).addTo(map); baseLayers参数表示可以切换的图层,以单选形式展示:overlayers表示覆盖图层,以checkbox形式展示: baseLayers可以是由L.tileLayer创建的切片图层,或者是L.layerGroup创建的图层分组: 其中imga,imgb,imgc,imgd都是由L.tileLayer创建的图层:Co

效果: 创建地图: //创建地图 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.

效果:  创建地图: 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.OSM() })

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.    前言 我们在上一章里了解到WebGIS中栅格图层的本质——地图图片.而从之前的第二章到第五章,我们详细的介绍了地图图片的获取原理和方法.所以在设计栅格图层前,我们已经知道了栅格图层中数据是如何获得的,剩下的便是怎样将这个过程用一种符合面向对象的设计原则来进行实现. 2.栅格数据获得的流程 这里我再次将栅格数据获得的流程描述一遍: 首先,得到屏幕范围内的地图

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 这篇文章里,我主要针对OGC标准中的WMS.WMTS以及ArcGIS的在线地图服务来进行解析. 写之前,我先来给大家提一下OGC是什么.OGC的全名是Open GIS Consortium,中文名是开放地理空间信息联盟,它是一个是非盈利.志愿的国际标准化组织.在空间数据互操作领域,基于公共接口访问模式的互操作方法是一种基本的操作方法.通过国际标准化组织(IS

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在上一节中我们知道了屏幕上一像素等于实际中多少单位长度(米或经纬度)的换算方法,而知道这个原理后,接下来我们要怎么用它呢?它和我们前端显示地图有什么关联呢?这一节,我会尽量详细的将这两个问题一一回答.说一个题外话,这一系列的文章我都会少给代码,多画流程图或者UML图来跟大家交流,一来便于没有很多GIS和编程基础的人读懂,二来使大家不局限于某种代码的实现而更关

1.前言 在上一节中我们知道了屏幕上一像素等于实际中多少单位长度(米或经纬度)的换算方法,而知道这个原理后,接下来我们要怎么用它呢?它和我们前端显示地图有什么关联呢?这一节,我会尽量详细的将这两个问题一一回答.说一个题外话,这一系列的文章我都会少给代码,多画流程图或者UML图来跟大家交流,一来便于没有很多GIS和编程基础的人读懂,二来使大家不局限于某种代码的实现而更关注于原理. 2.影像金字塔简介 我们之前反复提到了影像金字塔这个概念,但是没有对其做一个大概的介绍,这里我将这个概念补充一下. 2

在已有的Control.Loading控件基础上结合CSS3 animation属性实现 .nz-loading .nz-loader { display: block; -webkit-animation: shift-rightwards 3s ease-in-out infinite; -moz-animation: shift-rightwards 3s ease-in-out infinite; -ms-animation: shift-rightwards 3s ease-in-ou

基本概念: 地图瓦片地址:http://mt2.google.cn/vt/lyrs=m@167000000&hl=zh-CN&gl=cn&x=420&y=193&z=9&s=Galil 现在就是要将一张张这类的地图瓦片,在客户端拼接成一幅完整的地图. 瓦片大小为:256×256. url中关键参数解析: 参数 描述 mt2.google.cn Google瓦片服务服务器,可以尝试mt1.google.cn依然有效.Google提供多台瓦片服务器,减轻服务器负

动态加载影像图层为例 研究了两三天算是弄出来了.本例适合影像数据量特别的大程序使用,可以动态的添加删除影像数据,还有不完善的地方,不过基本满足要求. 1.首先得到关键点的图层 m_Map = axMapControl.Map; int l = 0; int f = 0; for (int j = 0; j < m_Map.LayerCount; j++) { if (m_Map.get_Layer(j).Name == "Points") { l = j;//获得Points图层

从底层谈WebGIS 原理设计与实现(三):WebGIS前端地图显示之根据地理范围换算出瓦片行列号的原理 1.前言   在上一节中我们知道了屏幕上一像素等于实际中多少单位长度(米或经纬度)的换算方法,而知道这个原理后,接下来我们要怎么用它呢?它和我们前端显示地图有什么关联呢?这一节,我会尽量详细的将这两个问题一一回答.说一个题外话,这一系列的文章我都会少给代码,多画流程图或者UML图来跟大家交流,一来便于没有很多GIS和编程基础的人读懂,二来使大家不局限于某种代码的实现而更关注于原理. 2.影像

ArcGisServer根据最大最小坐标换算瓦片行列号 1.前言 在上一节中我们知道了屏幕上一像素等于实际中多少单位长度(米或经纬度)的换算方法,而知道这个原理后,接下来我们要怎么用它呢?它和我们前端显示地图有什么关联呢?这一节,我会尽量详细的将这两个问题一一回答.说一个题外话,这一系列的文章我都会少给代码,多画流程图或者UML图来跟大家交流,一来便于没有很多GIS和编程基础的人读懂,二来使大家不局限于某种代码的实现而更关注于原理. 2.影像金字塔简介 我们之前反复提到了影像金字塔这个概念,但是

上篇实现了基础地图加载以及二三维模式切换:本篇的内容则是图层管理控制,从两个不同角度来实现,分别是直接绑定arcgis api提供的图层管理widget(LayerList)以及自定义图层管理图标的点击事件来控制图层的隐藏或者显示.不管是LayerList或者自定义图标点击管理图层的实现方式,核心都是根据Layer的属性visible来设置true或者false来控制的. 一.谈谈本篇自己认为比较重要的几个专业术语名称的理解: 1.TileLayer TileLayer,加载缓存地图服务的瓦片图

1.添加透明度控制条 <input id="slider" type="range" min="0" max="1" step="0.1" value="1" v-model="opacity" @input="changeOpactiy" > 2.在export default的data中加入观测值 export default {

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在上一节中我们知道了屏幕上一像素等于实际中多少单位长度(米或经纬度)的换算方法,而知道这个原理后,接下来我们要怎么用它呢?它和我们前端显示地图有什么关联呢?这一节,我会尽量详细的将这两个问题一一回答.说一个题外话,这一系列的文章我都会少给代码,多画流程图或者UML图来跟大家交流,一来便于没有很多GIS和编程基础的人读懂,二来使大家不局限于某种代码的实现而更关