2017年06月_桃李不言_下自成蹊

08月 07月 06月 04月 03月 02月 01月

翻译 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 2229

翻译 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 803

翻译 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 3288

翻译 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 6215

翻译 Earthquakes with custom symbols——自定义地震样式

This example parses a KML file and renders the features as a vector layer. The layer is given astyle that renders earthquake locations with a custom lightning symbol and a size relative to their mag

2017-06-30 11:27:45 478

This example parses a KML file and renders the features as clusters on a vector layer. The styling in this example is quite involved. Single earthquake locations (rendered as stars) have a size relati

2017-06-30 10:59:51 740

翻译 Dynamic Data——动态数据

Example of dynamic data.动态数据的例子。代码： Dynamic Data var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: ne

2017-06-30 09:36:24 1609 1

翻译 Draw Shapes——绘制图形

This demonstrates the use of the geometryFunction option for the ol.interaction.Draw. Select a shape type from the dropdown above to start drawing. To activate freehand drawing, hold theShift ke

2017-06-29 17:03:00 1399

翻译 Freehand Drawing——自由绘制

This example demonstrates the ol.interaction.Draw in freehand mode. During freehand drawing, points are added while dragging. Setfreehand: true to enable freehand mode. Note that freehand mode can

2017-06-29 15:04:16 1443

翻译 Draw Features——绘制要素

Example of using the Draw interaction. Select a geometry type from the dropdown above to start drawing. To finish drawing, click the last point. To activate freehand drawing for lines, polygons, and c

2017-06-29 14:41:02 966

翻译 Draw and Modify Features——绘制与修改要素

Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction.使用ol.interaction.Draw交互和ol.interaction.Modify交互的例子。代码： Draw and Modify Feat

2017-06-29 14:18:48 1885

翻译 Drag, Rotate, and Zoom——拖拽、旋转和缩放

Shift+Drag to rotate and zoom the map around its center.按下Shift键并拖动鼠标来实现围绕地图中心进行旋转和缩放。代码： Drag, Rotate, and Zoom var map = new ol.Map({

2017-06-29 11:17:08 1931

翻译 Drag-and-Drop——拖拽

Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will only work with data in EPS

2017-06-29 11:08:19 1054

翻译 Drag-and-Drop Image Vector——拖拽Image Vector

Example of using the drag-and-drop interaction with aol.source.ImageVector. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.与

2017-06-29 10:55:38 547

翻译 Device Orientation——设备方向

This example shows how to track changes in device orientation.这个例子用来展示如何去追踪设备方向的改变。代码： Device Orientation track changes

2017-06-29 10:26:59 2083

翻译 d3 Integration——d3集成

The example loads TopoJSON geometries and uses d3 (d3.geo.path) to render these geometries to a canvas element that is then used as the image of an OpenLayers image layer.这个例子加载TopoJSON的几何图形并使用d3（

2017-06-29 10:11:58 559

翻译 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 1132

翻译 Custom Icon——自定义图标

This example creates a custom element for the attribution icon.这个例子用来为attribution控件的图标创建一个自定义的元素。代码： Custom Icon // 创建一个超链接元素并为其设置href和target属

2017-06-28 17:45:07 3602

翻译 Custom Controls——自定义控件

This example creates a "rotate to north" button.这个例子用来创建一个“旋转到北”的按钮。代码： Custom Controls .rotate-north { top: 65px; left: .5em; }

2017-06-28 17:35:17 1148

翻译 Color Manipulation——颜色操作

A raster source allows arbitrary manipulation of pixel values. In this example, RGB values on the input tile source are adjusted in a pixel-wise operation before being rendered with a second raster so

2017-06-28 17:15:12 891

翻译 Clustered Features——聚合要素

This example shows how to do clustering on point features.这个例子用来展示如何对点要素尽心聚合。代码： Clustered Features cluster distance

2017-06-28 16:38:05 926

翻译 Advanced View Positioning——高级视图定位

This example demonstrates how a map's view can be adjusted so a geometry or coordinate is positioned at a specific pixel location. The map above has top, right, bottom, and left padding applied inside

2017-06-28 16:11:52 547

翻译 CartoDB source example——CartoDB数据源案例

A simple example with an anonymous cartodb map.一个简单的匿名cartodb地图案例。代码： CartoDB source example Sho

2017-06-28 14:28:38 1246

翻译 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 1471

翻译 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 15656

翻译 Custom Tooltips——自定义工具提示

This example shows how to customize the buttons tooltips withBootstrap.这个例子用来展示如何使用Bootstrap来自定义按钮提示。代码： Custom Tooltips .tooltip-inner

2017-06-28 11:06:04 1170

翻译 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 3914

翻译 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 1131

翻译 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 5857

翻译 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 1017

翻译 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 2326

翻译 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 2396

翻译 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 872

翻译 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 432

原创 Openlayers之拖拽加载矢量数据

1、在日常工作和生活中，我们需要打开某个文件或者加载某些数据的时候，往往通过拖拽的方式来加载或者打开，这样比较直接和方便，那么我们能否使用Openlayers来实现拖拽加载矢量数据呢？答案当然是肯定的，Openlayers为我们提供了一个DragAndDrop的交互式控件，它有一个addfeatures事件，那么我们就可以利用这一点，在把数据拖入地图视口的时候，触发addfeatures事件，从而

2017-06-15 16:49:39 2116

原创 Linux系统下编译C++文件初级

1、在桌面上新建一个HelloWorld.cpp文件； 2、在HelloWorld.cpp文件中编写如下代码，输出“hello world”的字符串，代码非常简单，我就不做过多说明； 3、打开Ubuntu的Terminal终端，在控制台输入“cd Desktop”进入到桌面目录，然后输入“ll”，查看桌面上的所有文件，可以发现刚刚建立的HelloWorld.cpp文

2017-06-15 14:38:42 740

原创 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 2935

原创 Openlayers之加载Stamen地图

1、Stamen地图瓦片构成我们使用浏览器打开Stamen地图，按下F12查看网络资源，可以发现其瓦片URL非常直观明了，与OpenStreetMap的地图瓦片URL差不多，最终可以得到其通用URL：http://{a-d}.tile.stamen.com/toner/{z}/{x}/{y}.png，下面我们就来使用Openlayers加载Stamen地图；2、代码实现

2017-06-05 09:32:53 2183

原创 Openlayers之加载谷歌地图

1、谷歌地图瓦片构成我们用浏览器打开谷歌地图，然后按下F12键，查看网络资源中的地图瓦片，可以发现瓦片URL中变化的部分为1i、2i和3i后面的数字，经过分析可以知道1i后面的应该是瓦片的级别，2i后面的应该是瓦片的行号，所以最终得到其通用URL为：http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i

2017-06-05 09:23:15 10158 2

原创 Openlayers之加载高德地图

1、高德地图瓦片URL构成我们打开高德地图，然后按下F12键查看其网络资源，结果很不巧，高德改变了使用XYZ瓦片加载的方式，不过没关系，我们切换到卫星图，可以看到卫星图的底图仍是瓦片，不过没有任何标注信息，这个可以更改URL中的style的值，最终我们可以得到其通用瓦片URL：http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&siz

2017-06-01 15:38:26 21700 12