GIS web框架 openlayer 系列入门《一》

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