OpenLayers自定义圆锥投影中国地图

一、效果说明

 实现自定义圆锥投影中国地图，并且和相同投影下的点、线、面数据相叠加。 

二、原理说明

圆锥投影是横版中国地图常用的地图投影，正式名称为正轴等面积割圆锥投影。

1. 正轴：投影面的轴线与地轴相同；
2. 等面积：投影后的地图上各区域面积保持不变；
3. 割圆锥：两条标准纬线。圆锥投影的等变形线与纬线保持平行，标准纬线上无长度变形，两条标准纬线可以让变形更为均匀。

横版中国地图具体参数为，中央经线110°E，标准纬线25°N、47°N。

OpenLayers中自定义投影需要调用proj4.js库，调用proj4即可实现自定义投影，以本文所用投影为例：

proj4.defs('EPSG:10000', '+proj=aea +lat_1=25 +lat_2=47 +lat_0=0 +lon_0=110 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');

1.  proj：投影类型，aea指等面积圆锥投影；
2.  lat_1、lat_2：两条标准纬线；
3.  lon_0：中央经线。

横版中国地图

三、代码展示

自定义圆锥投影，在Map初始化时，将projection参数定义为该自定义投影即可。

js部分如下：

//自定义投影
proj4.defs('EPSG:10000', '+proj=aea +lat_1=25 +lat_2=47 +lat_0=0 +lon_0=110 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
var proj10000 = ol.proj.get('EPSG:10000');

//定义地图范围
var displayExtent = ol.proj.transformExtent([80.198348, 16.348074, 135.571333, 49.866416], 'EPSG:4326', proj10000);

//点符号
var image = new ol.style.Circle({
    radius: 5,
    fill: null,
    stroke: new ol.style.Stroke({ color: 'red', width: 1 })
});

var style = new ol.style.Style({
    image: image,
    stroke: new ol.style.Stroke({
        color: 'blue',
        lineDash: [4],
        width: 3
    }),
    fill: new ol.style.Fill({
        color: 'rgba(0, 0, 255, 0.1)'
    })
});

var pointLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: 'data/point.geojson',
        projection: 'EPSG:4326'
    }),
    style: style
});

var lineLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: 'data/line.geojson',
        projection: 'EPSG:4326'
    }),
    style: style
});

var polygonLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: 'data/polygon.geojson',
        projection: 'EPSG:4326'
    }),
    style: style
});

var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        polygonLayer,
        lineLayer,
        pointLayer,
    ],
    target: 'map',
    view: new ol.View({
        projection: proj10000,
        center: ol.extent.getCenter(displayExtent),
        zoom: 5,
        minZoom: 0,
        maxZoom: 10
    })
});