OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包,用于实现标准格式发布的地图数据访问.
我做的这个例子,主要有以下几点功能、
1.上海的市区行政划分,
2、当屏幕的中心中行政区它的放大的面积大于屏幕60%以上,就显示行政区下面的板块
3、鼠标移上去显示该区或板块一些信息.
大概效果就是这样。
OpenLayers 它是开源的框架。它官网例子还是挺多的,但是都没有详细介绍。
openLayer 几个重点要了解
Source(数据源)、Layer(布局层)、geom(几何图形)、Feature(存放geom 类似几何图形的一个容器、附于图形一些特征和样式)、interaction(交互)
Source:
ol 它提供了很多数据,一般我们在地图去绘图形,常用的是这个ol.source.Vector 矢量图数据源
Layer:
和source 一样。一般也只用到了ol.layer.Vector
geom:
几何图 有很多 常用的point、polygon、multipolygon(用过canvas绘图,有一个beginPath,比如有两块地相隔很远,但它们属于一个市,正常我们拿一只笔去画这个两块地,是笔的触点放在第一个图上面,画完一个后,再把笔的触点移到第二个图的起点。如果你用polygon,相当你的笔从第一个图画完后,没拿开笔,而且直接画到了第二个图的起点然后一直画到了第二个图的结束点,它们之间多了一条第一图与第二图的交叉线)
feature:
这个是干嘛的,我们的图形是由geom 来绘的,但这个图形是干嘛的,是什么样子,是红的还是绿的,它有哪些信息呀,这些都由feature去存储和提供
一般是这样用的:
ol.proj.fromLonLat // EPSG:4326 (百度用的就是这种坐标,经纬度)转换成ol 默认的坐标EPSG:3857.
画圆有两种方式:
第一种通过点线和样式来画.
var geom = new ol.geom.Point([13507798.006141692, 3640852.5923628677]);var feature = new ol.Feature(geom);
feature.setStyle(new ol.style.Style({
image: new ol.style.Circle({
radius: 50,
stroke: new ol.style.Stroke({
width: 1,
color: 'red'
})
})
}));
var source = new ol.source.Vector({
features: [feature]
});
var layer = new ol.layer.Vector({ source: source });
map.addLayer(layer);
第二种:
var geom = new ol.geom.Circle([13569329.81391126, 3621819.7723198584],10000);
var feature = new ol.Feature(geom);
feature.setStyle(new ol.style.Style({
stroke: new ol.style.Stroke({
width: 1,
color:'red'
})
}));
var source = new ol.source.Vector({
features: [feature]
});
var layer = new ol.layer.Vector({ source: source });
map.addLayer(layer);
这两种的不同之处,第一种不管地图缩放还是放大,它永远这么大,第一种是以屏幕像素,第二种,你地图缩小它就变小,地图放大它就变大,第二种的半径是以真实距离单位米来计算
创建实例。大家复制这个实例可以体验一下
var map = new ol.Map({
view: new ol.View({
center:[13569329.81391126, 3621819.7723198584],
zoom: 10
}),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map'
});
var geom = new ol.geom.Circle([13569329.81391126, 3621819.7723198584],10000);
var feature = new ol.Feature(geom);
feature.setStyle(new ol.style.Style({
stroke: new ol.style.Stroke({
width: 1,
color:'red'
})
}));
var source = new ol.source.Vector({
features: [feature]
});
var layer = new ol.layer.Vector({ source: source });
map.addLayer(layer);
(function () {
var geom = new ol.geom.Point([13507798.006141692, 3640852.5923628677]);
var feature = new ol.Feature(geom);
feature.setStyle(new ol.style.Style({
image: new ol.style.Circle({
radius: 50,
stroke: new ol.style.Stroke({
width: 1,
color: 'red'
})
})
}));
var source = new ol.source.Vector({
features: [feature]
});
var layer = new ol.layer.Vector({ source: source });
map.addLayer(layer);
}());
扩展 openlayer 提供了一个ol.inherits 来继承原型链,类似Object.create