openlayers3入门——类、方法、属性详解1
// 创建地图
new ol.Map({
// 设置地图图层
// 创建一个使用Open Street Map地图源的瓦片图层
new ol.layer.Tile({source: new ol.source.OSM()})
// 设置显示地图的视图
view: new ol.View({
center: [0, 0],
// 定义地图显示中心于经度0度，纬度0度处
// 并且定义地图显示层级为2
// 让id为map的p作为地图的容器
target: 'map'
ol.Map：是最主要的地图类，创建地图就需要构造这么一个对象。
layers：从名字和具体的值可见这个地方可以设置多个layer，它是OpenLayers 3地图的组成结构单元，地图是由多个layer组成，
多个图层是可以叠加的，在最上面的会覆盖下面的，以此类推。
view：它为地图定义显示窗口，对应ol.View类，可以自定义地图显示的中心点，缩放层级等。
target:指定地图在页面中具体哪个位置进行显示。对应的是p的id的值。
source：数据源。它是和图层一一对应的，OpenLayers 3也存在多种不同的数据源，每一种在实现上也对应于一个具体的类，
它们都放在包ol.source下面，上面的ol.source.OSM就是其中的一种。
上面这段代码，是创建一个地图最基本的代码结构。[原创.数据可视化系列之一]使用OPENLAYERS 3 显示聚合数据 - 简书
[原创.数据可视化系列之一]使用OPENLAYERS 3 显示聚合数据
在地图上显示点数据是最常用的地图展示功能之一，但是如果很多点在地图上显示，或造成密密麻麻的一片，无法正常看清楚，这个时候，一般有两种解决方案，一种是根据数据重要程度进行标注，重要的显示大一些，不重要的显示小点，比如百度地图就是这样的；另一种方法是使用聚合，让相邻的点聚合成一个点，也能解决这个问题。使用openlayers 3 地图组件比较容易解决这个问题，关键是
ol.source.Cluster 对象，这个对象有两个参数，一个是聚合距离，一个是原始的点数据。代码片段如下：1：初始化ol3 map对象：this.ol2d = new ol.Map({layers: [],//地图图层target: 'map2d',//地图控件controls: ol.control.defaults({attributionOptions:({collapsible: false})}),view : new ol.View({center : ol.proj.transform([ 178.3 ], 'EPSG:4326', 'EPSG:3857'), zoom : 3
//初始坐标范围和放大级别。})])});2：准备Json数据并添加：$.getJSON(options.url, function(result) {var features=[];$(result).each(function(i, val) {geom = new ol.geom.Point(ol.proj.transform([ val.lat, val.lng ], 'EPSG:4326', 'EPSG:3857'));feature = new ol.Feature(geom);features.push(feature);feature.data =});// 添加到矢量数据源var vectorSource = new ol.source.Vector({features : features});//添加到聚合数据源，如果不用这个的话，就会得到许多的点var clusterSource = new ol.source.Cluster({distance: 40,source: vectorSource});//设定图层数据源tmpLayer.setSource(null);tmpLayer.setSource(clusterSource);tmpLayer.setStyle(createStyle);that.setLayerVisible(options.id, true);});
数据秀网站创始人，数据分析和可视化研究者。map.on('pointermove',function(e){
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
map.getTargetElement().style.cursor = 'pointer';
map.getTargetElement().style.cursor = '';
就是在鼠标移动到feature上的时候，鼠标样式更改成手势标记。
阅读(...) 评论()匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。}