关于Openlayer3的菜鸟认识-爱编程
关于Openlayer3的菜鸟认识
什么是OpenLayers？
OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。从OpenLayers2.2版本以后，OpenLayers已经将所用到的Prototype.js组件 整合到了自身当中，并不断在Prototype.js的基础上完善面向对象的开发，Rico用到地方不多，只是在OpenLayers.Popup.AnchoredBubble类中圆角化DIV。
我眼里的Openlayer：
& &　　 说到openlayer不得不说其中的map,map是OpenLayers的核心组件，如果把开发openlayer3过程比做画画的话，那么map就是一个神奇的桌子，它是来承载各式各样的纸(layer)，画画的背景想用地图做背景怎么办？这个时候ol.layer.Tile出来了，想加载网格中加载块状地图，非它莫属，想加载客户数据怎么办？ol.layer.Vector帮助你，好了背景图有了，自己画的也加上了，突然发现对背景跟自己画的有点不满意，想自己添加，修改怎么办，给map加上特效，ol.interaction.xxxx,想要画点你就加ol,interaction.Draw,想修改你就加上ol.interaction.Modify，当然在加特效之前你可以对地图做一些渲染，ol.FeatureOverlayer,因为默认的样式画出来的东西不一定会看的清。当然事实上远没有这没简单，每个类都有自己的方法。就说map吧，至少我用到最多的是它的on()跟once()方法，前者监听一种特定类型的事件，后者监听一次特定类型的事件，其中on()跟un()是配对使用的。其他的就不多说了，可以参考一下官方手册。
一些常用的例子
首先从Map的官方参考手册看起
The map is the core component of OpenLayers. For a map to render, a view, one or more layers, and a target container are needed.
从上面Map的定义看，我们可以知道map是OpenLayers的核心组件。对map进行渲染，我们至少需要一个view（视图），一个layers（层）和一个目标的容器。
根据定义我们创建一个
最简单的map。
&meta charset="utf-8"&
&title&GIS开发样例-V1.0&/title&
&meta content="Copyright (c) Leetao" name="copyright"&
&link rel="stylesheet" href="/jslib/openlayer-3.3.0/css/ol.css" type="text/css"&
&script src="/jslib/openlayer-3.3.0/build/ol-debug.js" type="text/javascript"&&/script&
&div id="map" class="map"&&/div&
var map = new ol.Map({
view: new ol.View({
center: [0, 0], //视图的初始中心
//用于缩放视图的初始分辨率
new ol.layer.Tile({
//Tile预渲染层
source: new ol.source.MapQuest({layer: 'osm'})
target: 'map'
结果如图：
简单地图创建结束，接着让我们在地图上画图案
简单的绘图
&meta charset="utf-8"&
&title&GIS开发样例-V1.0&/title&
&meta content="Copyright (c) Leetao" name="copyright"&
&link rel="stylesheet" href="/jslib/openlayer-3.3.0/css/ol.css" type="text/css"&
&script src="/jslib/openlayer-3.3.0/build/ol-debug.js" type="text/javascript"&&/script&
&div id="map" class="map"&&/div&
&form class="form-inline"&
&label&Geometry type &&/label&
&select id="type"&
&option value="None"&None&/option&
&option value="Point"&Point&/option&
&option value="LineString"&LineString&/option&
&option value="Polygon"&Polygon&/option&
var source = new ol.source.Vector();
var vector = new ol.layer.Vector({
source: source
var map = new ol.Map({
view: new ol.View({
center: [0, 0],
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'osm'})
target: 'map'
//featureOverlay
var featureOverlay = new ol.FeatureOverlay({
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
stroke: new ol.style.Stroke({
color: '#ffcc33',
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
featureOverlay.setMap(map);
var typeSelect = document.getElementById('type');
function addInteraction() {
var value = typeSelect.
if (value !== 'None') {
draw = new ol.interaction.Draw({
features: featureOverlay.getFeatures(),
source: source,
type: /** @type {ol.geom.GeometryType} */ (value)
map.addInteraction(draw);
typeSelect.onchange = function(e) {
map.removeInteraction(draw);
addInteraction();
addInteraction();
结果如下：
上面代码可以让你在Tile上绘点，线以及几何图形，当然如果你把(1)注释了，再尝试在上面绘点，你会发现绘制的图形变成透明的了，
如果你先把(2)注释给取消了，在把(1)给注释了，你会发现，这个时候绘图是可以看见的
绘图结束了就是该修改图了
简单的绘图以及修改图
只需要在原有基础上加个ol.interaction.Modify就可以修改了
代码如下：
&meta charset="utf-8"&
&title&GIS开发样例-V2.0&/title&
&meta content="Copyright (c) Leetao" name="copyright"&
&link rel="stylesheet" href="/jslib/openlayer-3.3.0/css/ol.css" type="text/css"&
&script src="/jslib/openlayer-3.3.0/build/ol-debug.js" type="text/javascript"&&/script&
&div id="map" class="map"&&/div&
&form class="form-inline"&
&label&Geometry type &&/label&
&select id="type"&
&option value="None"&None&/option&
&option value="Point"&Point&/option&
&option value="LineString"&LineString&/option&
&option value="Polygon"&Polygon&/option&
var source = new ol.source.Vector();
var vector = new ol.layer.Vector({
source: source
var map = new ol.Map({
view: new ol.View({
center: [0, 0],
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'osm'})
target: 'map'
//featureOverlay
var featureOverlay = new ol.FeatureOverlay({
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
stroke: new ol.style.Stroke({
color: '#ffcc33',
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
featureOverlay.setMap(map);
var modify = new ol.interaction.Modify({
features: featureOverlay.getFeatures(),
deleteCondition: function(event) {
return ol.events.condition.shiftKeyOnly(event) &&
ol.events.condition.singleClick(event);
map.addInteraction(modify);
var typeSelect = document.getElementById('type');
var // global so we can remove it later
function addInteraction() {
var value = typeSelect.
if (value !== 'None') {
draw = new ol.interaction.Draw({
features: featureOverlay.getFeatures(),
source: source,
type: /** @type {ol.geom.GeometryType} */ (value)
map.addInteraction(draw);
typeSelect.onchange = function(e) {
map.removeInteraction(draw);
addInteraction();
addInteraction();
当然可以添加特效也可以修改特效，采用map.removeInteraction()，可以在特定事件触发之后禁止修改亦或是禁止绘图
上面都是单层的，如果想加入客户数据，参照样例一，将注释（2）去掉即可。
现在我们尝试从后台加载数据，并对后台传来的数据进行二次修改
修改后台传来的数据
主要采用了ol.interaction.Select（）方法
核心代码如下：
var raster = new ol.layer.Tile({
source: new ol.source.MapQuest({
layer: 'sat'
var vector = new ol.layer.Vector({
source: new ol.source.GeoJSON({
projection: 'EPSG:3857',
url: 'data/geojson/countries.geojson'
var select = new ol.interaction.Select();
var modify = new ol.interaction.Modify({
features: select.getFeatures()
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([select, modify]),
layers: [raster, vector],
target: 'map',
view: new ol.View({
center: [0, 0],
其中ol.interaction.Select是用来处理被选中的Vector的数据的。
最后附上官方手册部分翻译（博主自己翻译的，可能有错，只供参考）
如果文章存在错误，请指正。
版权所有 爱编程 (C) Copyright 2012. . All Rights Reserved.
闽ICP备号-3
微信扫一扫关注爱编程，每天为您推送一篇经典技术文章。导读：在1.1创建一副地图创建的示例中，使用的数据资源是ol.source.TileWMS，我们可以从title关键字的字面上理解它的含义，但是基本上来说，这里的关键字可以是任意名称，在OpenLayers3中，图层和资源有一个区别，而在OpenLayers2中，这两部分一起组成了一个图层。ol.layer.Tile表示图像的规则网格，而ol.layer.Imag
在1.1创建一副地图创建的示例中，使用的数据资源是ol.source.TileWMS，我们可以从title关键字的字面上理解它的含义，但是基本上来说，这里的关键字可以是任意名称，在
OpenLayers 3中，图层和资源有一个区别，而在OpenLayers 2中，这两部分一起组成了一个图层。
ol.layer.Tile表示图像的规则网格，而ol.layer.Image表示单个图像，基于图层类型，我们将使用不同的资源（ol.source.TileWMS与ol.source.ImageWMS）。
2.1.3 The ol.source.TileWMS构造函数
url指向的是WMS服务的在线资源，params是对象参数名称及其值，由于在OpenLayers中，默认WMS版本是1.3.0，如果WMS不支持该版本，需要在params中提供一个低版本。
（1） 该示例中WMS提供了一个名为“openstreetmap”的图层，将LAYERS 参数的值
由“bluemarble”改为“openstreetmap”，代码如下： new ol.layer.Tile({
title: &Global Imagery&,
source: new
ol.source.TileWMS({
url: 'http://maps.opengeo.org/geowebcache/service/wms',
params: {LAYERS: 'openstreetmap', VERSION: '1.1.1'}
（2） 改变图层与资源，用单一图像取代瓦片，再这个过程中，需要将资源的url修改
LAYERS 参数的值修改为
“opengeo:countries”，完成修改后，利用浏览器的开发工具，确保请求的是单一
图像而不是256×256像素的瓦片。
了解了从网络地图服务动态获取数据的机制，接下来将深入了解瓦片缓存服务。
2.2 瓦片缓存
默认情况在，瓦片图层请求一个256×256像素的图像来填充地图视窗，当你平移或缩放地图，将发出更多图片请求来填充你没有访问过的地方。浏览器会缓存一些请求的图像，这通常需要大量的处理器来动态渲染图像。
由于瓦片图层以规律的网格请求图像，这使得服务器能够缓存这些图片请求并且在下次浏览相同区域的时候返回该缓存结果，从而获得更好的性能。
2.2.1 ol.source.XYZ
网络地图服务规范使得客户端能够请求的内容具有灵活性，如果没有限制，在实践中，缓存会变得困难甚至不可能实现。
另一种几段情况是，服务器可能只提供固定缩放级别和规律网格的瓦片，这种情况可以概括为XYZ资源的瓦片图层――X/Y代表网格的行与列，Z代表缩放级别。
2.2.2 ol.source.OSM
OpenStreetMap (OSM)投影是为了收集并免费提供世界地图的数据，OSM提供了一些不同的数据渲染作为瓦片缓存集，这些渲染符合基本的XYZ网格配置，并且可以在OpenLayers地图中使用。ol.source.OSM图层可以访问OpenStreetMap瓦片资源。
（1） 打开1.1创建一副地图创建的map.html文件，将地图初始化代码替换为以下代码： &script&
var map = new ol.Map({
target: 'map',
new ol.layer.Tile({
source: new ol.source.OSM()
view: new ol.View({
center: ol.proj.transform([-93.27, 44.98], 'EPSG:4326', 'EPSG:3857'),
controls: ol.control.defaults({
attributionOptions: {
collapsible: false
（2） 在文档的&head&中，添加以下图层属性的样式说明：
width: 512
height: 256
.ol-attribution a {
2.2.2.1 投影
回顾地图的视图定义： view: new ol.View({
center: ol.proj.transform([-93.27, 44.98], 'EPSG:4326', 'EPSG:3857'),
地理空间数据可能来自各种坐标参照系，一个数据集可能是以度为单位的地理（经纬）坐标系，另一个可能是以米为单位的投影坐标系，对坐标系的全面讨论超出了本实践的范围，但了解其基本概念是很重要的。
OpenLayers 3需要知道所使用数据的坐标系，在内部，由ol.proj.Projection对象展现，ol.proj命名空间中的transform 方法使用字符串表示坐标参考系（上述示例中的&EPSG:4326&
以及&EPSG:3857&）。
OpenStreetMap 瓦片数据是墨卡托投影，因此，我们需要使用墨卡托坐标了设置初始化时的中心点。由于一个地方的地理坐标相对来说更容易知道，使用ol.proj.transform方法将地理坐标系（&EPSG:4326&）转化为墨卡托坐标系（&EPSG:3857&）。
包含总结汇报、办公文档、资格考试、旅游景点、IT计算机、word文档、计划方案、党团工作以及2015 OpenLayers_3_入门教程详细版等内容。本文共11页
相关内容搜索OpenLayers3参考API - OpenLayers-gis-OpenLayers3 -
OpenLayers3参考API
相关推荐：can set up the Modify interaction to be able to delete a vertex on a shift-click.
I then get a callback on the linestring feature on('chang
OpenLayers3参考API
1.1 地图：ol.Map。
目标：配置地图窗口的全部属性。
方法：配置map。
图层：layers（）
视图：view（）
html组件：target。
控件：controls（）。ol.control.defaults(常用控件)。
交互工具：interactions()。默认是ol.interactions.defaults。
添加、删除交互工具：addInteraction（），removeInteraction()。
添加图层：addLayer()。
鼠标移动：pointermove
1.2 图层：ol.layer.Layer。
目标：配置地图数据源（source）及其属性(透明度，饱和度，对比度等)。
1.2.1属性：ol.Attribution
目标：右下角用于显示数据源的HTML。
方法：html,一段标示HTML。需要用&公司链接的方式标示权利。
&&&&& var tileAttr=new ol.Attribution({
&&&&& html: 'All maps & ' + '&ahref=&http://www.localhost:8080/&&MyTest GeoServer&/a&'
1.2.2数据源：ol.source。
目标：构建各种不同服务的数据源请求。
1.2.3样式：ol.style
1.3 显示窗口：ol.View。
目标：渲染地图
方法：设置坐标系统，中心点，缩放，旋转等。
默认坐标系统：EPSG:3857。
显示指定范围：fitExtent()。
旋转值：使用弧度。getRotation(),setRotation（）。
获取坐标系统：getProjection()。
2.1 基类：ol.Object。
目标：实现基本功能（事件，属性）。是所有专用类的基类。
方法：实现了事件功能和属性功能。
2.2 容器：ol.Collection
目标：扩展Array，提供快捷操作。
构造：以数据初始化（JSON数组初始化）。
扩展：extend（array），向当前容器的尾部中添加新数组。
索引：item(index),获取第index个数据。
2.3 格式解析：ol.format。
目标：读写不同格式的数据。
2.3.1GeoJSON：ol.format.GeoJSON，操作GeoJSON数据，包括各种读写方法。
geojson参见：
2.4 样式：ol.style。
渲染样式。
Style：基本样式，可以设置各种不同的细节样式。
Stroke：断点线样式。
2.4.1styleFunciton:样式选择函数
目标：为不同的ol.layer.Vector提供不同的style的函数。
方法：线Stroke、填充Fill、文本Text、圆形Circle和预定义图形RegularShape、图标Icon。
2.4.1.1& 文本样式：Text
目标：显示指定的文本。
方法：字体font，偏移offsetX/offsetY，比例尺scale，旋转rotate(顺时针度)，文本text,对齐方式textAlign，基线textBaseline，填充fill,边框stroke。
2.4.1.2& 动态生成样式：styleFunction(feature,resolution)。
必须返回一个style数组。
var styleFunction =function(feature, resolution) {
& returnstyles[feature.getGeometry().getType()];
2.5 事件：ol.event
事件条件：ol.event.condintion
3&地理相关
3.1 矢量元素：ol.Feature。
目标：矢量实体，包括几何和属性。
geometry:几何实体。
3.2 元素样式覆盖：ol.FeatureOverlay
目标：多个元素的样式组。
元素列表：features。
地图：map。
样式：style。
3.3 坐标系统：ol.proj。
目标：坐标系统定义和转换。
坐标系统定义：ol.proj.Projection。
转换：ol.proj.transform（coordinate,srcCRS,targetCRS）。
3.4 几何实体：ol.geom。
目标：点、线、面等几何实体类。
3.4.1坐标对：ol.coordinate、ol.Coordinate。
目标：坐标对操作。
方法：add（），rotate(),toStringXY（）等。
坐标样式函数：createStringXY(小数位数)。将一个坐标对转换为String的函数。
显示为度分秒格式：ol.coordinate.toStringHDMS(coordinate)。相关推荐： the examples presented herehttp://openlayers.org/en/v3.0.0/examples/animation.html and here/questions/26546/o
显示为小数度：ol.coordinate.toStringXY(coordinate)。
3.4.2坐标样式：ol.CoordinateFormatType()
函数对象，接受一个ol.coordinate参数，并转换为String对象。
3.4.3范围：ol.extent,ol.Extent。
目标：表示四角坐标。
方法：扩展，范围，包括等操作。
3.4.4几何体：ol.geom，包括点、线、面、圆等。
3.4.4.1& 基类：ol.geom.Geometry:所有几何体的基类。方法：最近点，范围等。
3.4.4.2& 线：LineString。
长度：getLength()，直接计算两点间线段的长度。
参考：\ol\geom\flat\lengthflatgeom.js
最后点坐标：getLastCoordinate()。
3.4.4.3& 面：polygon
边线：getLineRing(n)。
面积：getArea()。
3.5 切片策略：ol.tilegrid。
目标：切片策略。
创建策略：createXYZ()。
3.6 数据源：ol.source。
目标：构建各种不同服务的数据源请求。
3.6.1ol.source.OSM：openstreetmap的瓦片服务。
跨域特性：crossOrigin,默认是anonymous（匿名，无须授权）。还可以使用use-credentials（使用授权）。
3.6.2ol.source.MapQuest：mapquest网站的服务。可以设置其类型为sat,osm或者hyb。
3.6.3ol.source.TileDebug:目标是调试Tile，生成Tile的网格。
&&&&&&&&&&&&&&&& &&& newol.layer.Tile({
&&&&& &&&&& &&&&&&&&&&& source: new ol.source.TileDebug({
&&&&& &&&&&& &&&&&&&&&&&&&&&& projection: 'EPSG:3857',
&&&&& &&&&&&& &&&&&&&&& tileGrid:ol.tilegrid.createXYZ({maxZoom: 22})})
3.6.4ol.source.TileImage:目标是Tile类的基类。
3.6.5ol.source.Vector
目标：矢量地图数据源。
加载元素函数：当地图窗口变化时，将触发加载函数。
loader:function(extent,resolution,projection)。
在此函数中组织URL，然后请求WFS。返回后使用回调函数加载元素就可以显示了。
添加元素：单个元素：addFeature(feature)；多个元素addFeatures(feature数组)。
加载策略：strategy,目标是从数据源请求矢量的方式，包括单次请求全部元素（ol.loadingstrategy.all,默认），当前视图范围（ol.loadingstrategy.bbox）或切片范围(lo.loadingststrategy.tile)。
全图范围：getExtent()。
3.7 球体：.Sphere
目标：正球体模型。
3.7.1计算球面大面距离：haversineDistance()半正矢公式。
使用经纬度测量较为精确的球面距离。
半正矢公式：haversine formula，halfof versed sine，球面弦和夹角的关系公式。
3.7.2计算球面面积：geodesicArea()。
4&交互相关
4.1 控件：ol.control。
默认控件：ol.control.defauts。包括缩放、旋转、属性，可以配置。
4.1.1鼠标坐标控件：.MousePosition
目标：获取当前鼠标的坐标位置。
样式：className,css类名，默认为ol-mouse-position。默认显示在view的右上角。
坐标格式：coordinateFormat。
坐标系统：projection。
目标HTML组件：target。默认为view。
无数据时内容：undefinedHTML。默认为空。
4.2 交互工具：ol.interactions
目标：提供与ol.Map进行交互的鼠标、键盘等工具。
4.2.1默认工具：ol.interactions.defaults
目标：常用工具，包括缩放、旋转、二指缩放（触摸屏）等。可以配置开关。
4.2.2绘制工具：ol.interactions.Draw。
生成的图形结果数组：features。
数据源：图形绘制的目标。
snap容限：snapTolerance。
几何类型：type。
点数限制：maxPoints,minPoints。
绘制样式：style。
自定义几何生成方法：geometryFunction。
名称：geometryName,用于生成feature。
绘制圆形：createRegularPolygon()，绘制模拟圆形，需指定边数和起点位置。
4.2.3几何生成函数：DrawGeometryFunctionType
目标：生成几何实体。
方法：接受coordinate数组和geometry对象作为参数，返回新的geometry。
4.3 临时图层：ol.Overlay
目标：以地理坐标覆盖在地图表面的临时图层，其中可以加入临时元素。
方法：ol.Overlay
显示：在map上添加Overlay对象。
与目标点的偏移：offset，表示Overlay距离目标点的像素数（如果不设置，则不偏移。不偏移时无法点击到地图）。
Overlay的坐标位置：positioning,可以是左下，右下，中心等。
坐标：setPosition()，如果传入undefined参数，则隐藏。
容器:element。
与地图联动：autoPan，在使用setPosition()或Overlay超过地图范围时，map随之pan，使之随时处于视野之中。
平移动画：autoPanAnimation。
4.4 动画：olx.animation
各种动画效果。
4.4.1平移:panOptions
延迟：duration，单位ms，默认1000。
相关推荐：hing like this:&script type=&text/javascript&&var l1 = new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})});var l2
OpenLayers3参考日1框架1.1 地图：ol.Map。目标：配置地图窗口的全部属性。方法：配置map。图层：layers（图层：ol.layer.Layer。）视图：vie...
相关阅读排行
相关内容推荐
请激活账号
为了能正常使用评论、编辑功能及以后陆续为用户提供的其他产品，请激活账号。
您的注册邮箱：
如果您没有收到激活邮件，请注意检查垃圾箱。2778人阅读
● 综合开发（153）
——【GIS二次开发】（119）
● 3S技术（113）
本节讲述如何在Ol3中加载wms图层并显示到地图中。
你可以在OL官网去下载，下载地址为，也可以去我的百度云盘下载，下载地址为/s/1o6wwHTo。官网上的最新版本为3.6.0，我的网盘的版本为3.0.0，不过官网上的链接好像是失效的。
OL3必须资源引入：
OL3必须引入的资源有两个，一个为样式文件，ol.css；一个为js文件，ol.js。
OL3加载wms：
在Ol3中，可以通过两种方式加载WMS，一种是ol.layer.Image，其对应的资源为ol.source.ImageWMS，他它的定义方式为：
var untiled = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: 'http://localhost:8081/geoserver/lzugis/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
LAYERS: 'lzugis:province',
STYLES: ''
一种是ol.layer.Tile，其对应的资源为ol.source.TileWMS，它的定义方式为：
var tiled = new ol.layer.Tile({
visible: false,
source: new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/lzugis/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
tiled: true,
LAYERS: 'lzugis:province',
STYLES: ''
显示资源：
OL3中显示资源使用Map实现的，一个Map实例包括target，即地图展示的div的id；layers，地图要现实的图层集合；view，包括投影，中心点等信息，定义方式为：
var map = new ol.Map({
controls: ol.control.defaults({
attribution: false
target: 'map',
view: new ol.View({
projection: projection,
rotation: Math.PI / 6
map.getView().fitExtent(bounds, map.getSize());
将上面的内容连起来，完整的代码如下：
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&Ol3 wms&/title&
&link rel=&stylesheet& type=&text/css& href=&http://localhost/ol3/css/ol.css&/&
&style type=&text/css&&
body, #map {
padding: 0
width: 100%;
height: 100%;
font-size: 13
&script type=&text/javascript& src=&http://localhost/ol3/build/ol.js&&&/script&
&script type=&text/javascript& src=&http://localhost/jquery/jquery-1.8.3.js&&&/script&
&script type=&text/javascript&&
function init(){
var format = 'image/png';
var bounds = [73.3, 18.7,
134., 53.6];
var untiled = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: 'http://localhost:8081/geoserver/lzugis/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
LAYERS: 'lzugis:province',
STYLES: ''
var tiled = new ol.layer.Tile({
visible: false,
source: new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/lzugis/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
tiled: true,
LAYERS: 'lzugis:province',
STYLES: ''
var projection = new ol.proj.Projection({
code: 'EPSG:4326',
units: 'degrees'
var map = new ol.Map({
controls: ol.control.defaults({
attribution: false
target: 'map',
view: new ol.View({
projection: projection,
rotation: Math.PI / 6
map.getView().fitExtent(bounds, map.getSize());
&body onLoad=&init()&&
&div id=&map&&
&div id=&location&&&/div&
相关课程：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：418292次
积分：6382
积分：6382
排名：第3211名
原创：190篇
评论：233条
阅读：21941
阅读：1334
文章：50篇
阅读：109996
文章：33篇
阅读：102725
文章：133篇
阅读：319741
webgisQQ群:
androidQQ群:}