OpenLayers3
文章平均质量分 77
桃李不言_下自成蹊
这个作者很懒,什么都没留下…
展开
-
Openlayers之加载ArcgisServer的切片(TileArcGISRest加载方式)
1、先使用ArcGIS Server切好瓦片地图,切完以后在ArcGIS Server Manager中找到该瓦片的访问地址,如图所示:2、ol.source.TileArcGISRest类 Openlayers的API中提供了一个专门用来加载ArcGIS Server切片服务的类ol.source.TileArcGISRest,其具体描述如下: Laye原创 2017-08-15 17:24:59 · 12329 阅读 · 1 评论 -
Icon Pixel Operations——图标像素操作
Example using an icon to symbolize a point. Click on the icon to select it, and it will be rendered using its negative image.使用图标来为点设置样式的例子。单击图标并选择它,它就会使用负片进行渲染。代码: Icon Pixel Operatio翻译 2017-07-04 17:17:16 · 1356 阅读 · 0 评论 -
Icon Colors——图标颜色
Example assigning a custom color to an icon. The features in this examples are all using the same image with the different colors coming from the javascript file. Note that icon files need to obey the翻译 2017-07-04 16:06:37 · 2385 阅读 · 0 评论 -
Hit Tolerance——hit容差
By default, the map.forEachFeatureAtPixel() function only considers features that are directly under the provided pixel. This can make it difficult to interact with features on touch devices. To consi翻译 2017-07-04 14:58:15 · 910 阅读 · 0 评论 -
Earthquakes Heatmap——地震热点图
This example parses a KML file and renders the features as aol.layer.Heatmap layer.这个例子解析一个KML文件并渲染要素为一个ol.layer.Heatmap图层。代码: Earthquakes Heatmap翻译 2017-07-04 14:08:30 · 1066 阅读 · 0 评论 -
Map Graticule——地图坐标网
This example shows how to add a graticule overlay to a map.这个例子用来展示如何在地图上面添加坐标网。代码: Map Graticule var map = new ol.Map({ layers: [翻译 2017-07-04 11:44:16 · 933 阅读 · 0 评论 -
GPX Data——GPX数据
Example of using the GPX source.使用GPX数据源的例子。代码: GPX Data // 必应瓦片地图 var raster = new ol.layer.Tile({ source: new ol.source翻译 2017-07-04 11:32:17 · 2892 阅读 · 0 评论 -
WMS GetFeatureInfo (Tile Layer)——WMS获取要素信息(瓦片图层)
This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS tile layer. Additionallymap.forEachLayerAtPixel is used to change the mouse pointer when hovering a non-transparent p翻译 2017-07-04 11:08:51 · 3730 阅读 · 0 评论 -
WMS GetFeatureInfo (Layers)——WMS获取要素信息(图层)
All features:6Hotel features:2Restaurant features:4Demonstrates the use of the layers option in the ol.format.WMSGetFeatureInfo format object, which allows features r翻译 2017-07-04 10:59:28 · 2865 阅读 · 0 评论 -
WMS GetFeatureInfo (Image Layer)——WMS获取要素信息(图像图层)
This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer. Additionallymap.forEachLayerAtPixel is used to change the mouse pointer when hovering a non-transparent翻译 2017-07-04 10:24:08 · 6168 阅读 · 1 评论 -
Geolocation——地理位置
This example uses the Geolocation API to control the view.这个例子使用Geolocation的API来控制视图。代码: Geolocation track position翻译 2017-07-04 09:57:15 · 959 阅读 · 0 评论 -
GeoJSON
Example of GeoJSON features.GeoJSON要素的例子。代码: GeoJSON // 点样式 var image = new ol.style.Circle({ radius: 5, fill: null,翻译 2017-07-04 09:34:23 · 2727 阅读 · 0 评论 -
Full Screen Control——全屏控件
Click the control in the top right corner to go full screen. Click it again to exit full screen.单击右上角的按钮实现全屏,再次单击退出全屏。If there is no button on the map, your browser does not support theFul翻译 2017-07-03 17:40:47 · 1469 阅读 · 0 评论 -
Full Screen Control with extended source element——全屏控件与扩展源要素
Click the control in the top right corner to go full screen. Click it again to exit full screen.单击右上角的按钮实现全屏,再次单击退出全屏。If there is no button on the map, your browser does not support theFull翻译 2017-07-03 17:34:23 · 735 阅读 · 0 评论 -
Full Screen Drag, Rotate, and Zoom——全屏、旋转和缩放
Hold down Shift+Drag to rotate and zoom. Click the button in the top right corner to go full screen. Then do theShift+Drag thing again.按住Shift键并拖动鼠标来旋转和缩放。单击右上角的按钮实现全屏,然后可以再次按住Shift键拖动鼠标来旋转和缩放地图翻译 2017-07-03 17:25:07 · 1025 阅读 · 0 评论 -
Custom Animation——自定义动画
This example shows how to use postcompose and vectorContext to animate features. Here we choose to do a flash animation each time a feature is added to the layer.这个例子用来展示如何使用postcompose和vectorCo翻译 2017-06-30 15:30:06 · 2237 阅读 · 0 评论 -
Extent Interaction——Extent交互控件
This example shows how to use an Extent interaction to draw a modifiable extent.这个例子展示了如何使用Extent交互控件来绘制一个可以修改的范围。Use Shift+Drag to draw an extent.Shift+Drag on the corners or edges of翻译 2017-06-30 14:45:14 · 808 阅读 · 0 评论 -
Map Export——地图导出
Example of exporting a map as a PNG image. This example requires a browser that supportscanvas.toBlob().把地图导出为PNG图片的例子。这个例子需要你的浏览器支持canvas.toBlob()。代码: Map Export翻译 2017-06-30 14:18:28 · 3298 阅读 · 0 评论 -
Icon Sprites with WebGL——WebGL图标精灵
In this example a sprite image is used for the icon styles. Using a sprite is required to get good performance with WebGL.在这个例子中,图标精灵用于图标样式。使用精灵需要WebGL获取好的性能。代码: Icon Sprites with WebG翻译 2017-07-05 10:42:20 · 673 阅读 · 0 评论 -
Icon Symbolizer——图标符号
Example using an icon to symbolize a point.使用图标来表现一个点的例子。代码: Icon Symbolizer #map { position: relative; }翻译 2017-07-05 10:59:32 · 779 阅读 · 0 评论 -
Custom Interactions——自定义交互式控件
This example demonstrates creating a custom interaction by subclassingol.interaction.Pointer. Note that the built in interactionol.interaction.Translate might be a better option for moving feature翻译 2017-06-29 09:39:44 · 1138 阅读 · 0 评论 -
Openlayers之离线加载ArcGIS Server瓦片
1、之前介绍了使用TileArcGISRest和XYZ的方式加载ArcGIS Server瓦片的方式,这两种方式虽然方便,但有一个弊端就是过于依赖ArcGIS Server服务,如果ArcGIS Server的服务挂了,那么所有的瓦片都将无法成功加载,而且随着瓦片服务的增加,也会增加服务器资源的开销,降低性能,所以我们需要使用离线的方式来加载瓦片,与瓦片服务完全分离。在Openlayers中,给我原创 2017-08-16 16:21:25 · 4379 阅读 · 5 评论 -
Openlayers之加载ArcGIS Server瓦片(XYZ方式)
1、打开ArcGIS Server Manager查看已经切好的瓦片的信息,这些信息会在后面的加载瓦片过程中使用,我们先来看看哪些信息是很重要的:2、准备工作完成后,下面我们开始加载瓦片,其中我们会用到一个比较重要的类ol.tilegrid.TileGrid,该类的构造参数自己查看官方API,具体代码如下:原创 2017-08-16 15:32:16 · 10216 阅读 · 3 评论 -
CartoDB source example——CartoDB数据源案例
A simple example with an anonymous cartodb map.一个简单的匿名cartodb地图案例。代码: CartoDB source example Sho翻译 2017-06-28 14:28:38 · 1248 阅读 · 0 评论 -
Canvas Tiles——Canvas瓦片
The black grid tiles are generated on the client with an HTML5 canvas. The displayed tile coordinates are OpenLayers tile coordinates. These increase from bottom to top, but standard XYZ tiling scheme翻译 2017-06-28 14:17:55 · 1481 阅读 · 0 评论 -
Styling feature with CanvasGradient or CanvasPattern——使用CanvasGradient或者CanvasPattern为要素设置样式
First this example creates a reusableCanvasPattern and aCanvasGradient. The countries are loaded from a GeoJSON file. A style function determines for each country whether to use a fill with the pr翻译 2017-06-28 13:56:20 · 15924 阅读 · 0 评论 -
Blend Modes——混合模式
This example shows how to change the canvas compositing / blending mode in post- and precompose event handlers. The Canvas 2D API provides the propertyglobalCompositeOperation with which one can inf翻译 2017-06-28 10:49:33 · 3925 阅读 · 0 评论 -
Custom Tooltips——自定义工具提示
This example shows how to customize the buttons tooltips withBootstrap.这个例子用来展示如何使用Bootstrap来自定义按钮提示。代码: Custom Tooltips .tooltip-inner翻译 2017-06-28 11:06:04 · 1174 阅读 · 0 评论 -
Box Selection——盒形方式选择
This example shows how to use a DragBox interaction to select features. Selected features are added to the feature overlay of a select interaction (ol.interaction.Select) for highlighting.Use Ctrl+D翻译 2017-06-28 09:26:44 · 1138 阅读 · 0 评论 -
Openlayers之拖拽加载矢量数据
1、在日常工作和生活中,我们需要打开某个文件或者加载某些数据的时候,往往通过拖拽的方式来加载或者打开,这样比较直接和方便,那么我们能否使用Openlayers来实现拖拽加载矢量数据呢?答案当然是肯定的,Openlayers为我们提供了一个DragAndDrop的交互式控件,它有一个addfeatures事件,那么我们就可以利用这一点,在把数据拖入地图视口的时候,触发addfeatures事件,从而原创 2017-06-15 16:49:39 · 2123 阅读 · 0 评论 -
View Animation——视图动画
This example shows how to use the view.animate() method to run one or more animations.这个例子用来展示如何使用“view.animate()”方法运行一个或多个动画。代码: View Animation ↻翻译 2017-06-27 11:00:25 · 879 阅读 · 0 评论 -
Accessible Map——访问地图
This page's map element has its tabindex attribute set to "0", that makes it focusable. To focus the map element you can either navigate to it using the "tab" key or use the skip link. When themap翻译 2017-06-27 10:06:21 · 436 阅读 · 0 评论 -
Bing Maps——必应地图
When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you翻译 2017-06-27 16:54:18 · 5885 阅读 · 0 评论 -
Attributions——属性控件
When the map gets too small because of a resize, the attribution will be collapsed. This is because thecollapsible option is set to true if the width of the map gets smaller than 600 pixels.当地图因为重翻译 2017-06-27 15:45:57 · 1023 阅读 · 0 评论 -
Tiled ArcGIS MapServer——ArcGIS瓦片地图服务
This example shows how to use an ArcGIS REST MapService as tiles. This source type supports Map and Image Services. For cached ArcGIS services, better performance is available by usingol.source.XYZ翻译 2017-06-27 15:22:57 · 2330 阅读 · 0 评论 -
Image ArcGIS MapServer——ArcGIS地图图像服务
This example shows how to use a dynamic ArcGIS REST MapService. This source type supports Map and Image Services. For dyamic ArcGIS services.这个例子用来展示如何使用动态的ArcGIS REST MapService,对于动态的ArcGIS服务来说,数据源翻译 2017-06-27 11:32:07 · 2403 阅读 · 0 评论 -
Image Load Events——图像加载事件
Image sources fire events related to image loading. You can listen forimageloadstart,imageloadend, andimageloaderror type events to monitor image loading progress. This example registers listene翻译 2017-07-05 14:59:31 · 2906 阅读 · 0 评论 -
Openlayers之投影转换
1、投影转换所谓投影转换,就是将具有某种投影坐标系的地图转换到另一种投影坐标系上显示,一般可以将具有某种平面投影坐标系的地图转换到某种球面坐标系上,也可以将具有某种球面坐标系的地图转换到平面坐标系下;2、代码实现 body,html,div{ border:none;padding:0;ma原创 2017-02-21 11:30:07 · 4911 阅读 · 0 评论 -
EPSG:4326
This example shows how to create a map in EPSG:4326.这个例子用来展示如何使用EPSG:4326的投影来创建地图。代码: EPSG:4326 var layers = [ new ol.layer.Tile({翻译 2017-06-30 11:33:45 · 6222 阅读 · 0 评论 -
Openlayers之加载MapQuest地图
1、MapQuest地图瓦片构成在浏览器中打开MapQuest地图,按下F12键查看网络资源,可以发现其瓦片地址也非常简单明了,最终得到其通用URL地址为:https://{a-d}.tiles.mapbox.com/v4/mapquest.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwcXVlc3QiLCJhIjoiY2Q2N2RlM原创 2017-06-05 14:09:31 · 2945 阅读 · 0 评论