首先說明幾個概念。
GIS：地理資訊系統（Geographic Information System)、Geo、地圖、地理系統。
坐标系：XY、坐标參考系、crs（coordinate reference system）、坐标參考系、把地球放到坐标系裡才能做成數字地圖，通常分為球形和投影平面；
常見坐标系：WGS84地理坐标系（地理學和谷歌地球）、WGS84 web 墨卡托投影坐标系（國外地圖常用）、GCJ02（國内地圖常用）、BD09（百度自定義坐标系）、CGCS2000（基于高斯2000坐标系）
坐标：通常有兩個數值組成的數值、coordinate、[116, 38]、隻知道坐标不知道坐标系無法使用。
投影：projection、把球形坐标系按照一個算法，把每一個點投射到二維平面XY坐标系的方法叫做投影算法。EPSG：Coordinate Systems Worldwide、世界地理坐标系标準組織。
wgs84：球形坐标系、地理坐标系、經緯度坐标、World Geodetic System 1984 、機關是度、EPSG:4326、
lonlat（lon經度、lat次元）
wgs84 墨卡托投影坐标系：Mercator Projection 、把wgs84經緯度坐标按照墨卡托投影得到的平面投影坐标系、EPSG:3857、EPSG:900913、Google Maps Projection, OpenStreetMap, Bing都是用這個投影、https://epsg.io/3857、機關是米
GCJ02：中國國測局制定的坐标系、火星坐标。
CGCS2000：國家大地2000坐标系、EPSG:1024。
瓦片：Tile、包括TMS瓦片、MBTitles、使用很多小圖檔來表示地圖的層級；瓦片使用的是墨卡托投影坐标系（EPSG:3857）
層級：瓦片分為22個層級，每深入一層，圖檔數量增加四倍。
圖層：layer、一個地圖分為很多圖層，包括矢量圖層和影像圖層（通常稱為底圖），兩個圖層疊加可以表示豐富的資訊，兩個影像圖層疊加前需要确認是互相覆寫還是背景透明。
特征：矢量圖層裡有很多特征Feature，每個特征是一個形狀（點Point、線Line、多邊形Polygon），特征的根據坐标決定的。
樣式：每個特征有對應的繪制樣式Style，例如邊框Stroke、填充Fill、圈Circle等等。
GeoJSON ：使用JSON格式帶說明一個特征集合FeatureCollection，使用的的是WGS84地理坐标系。
TopoJSON：是擴充的GeoJSON。
坐标統一：所有資料包括矢量、影像、特征、GEOJSON都要自動或手動轉換為同一個坐标系才能顯示無偏移。
偏移：包括水準偏移、旋轉偏移、縮放偏移。
openlay:一個把切片加載到web項目裡的前端工具包，功能強大。
leaflet：比openlayer更小巧。
openlayer v4.6.5 + echarts 河南地圖json的展示示例：
<!doctype html>
<html >
<head>
<link rel="stylesheet" href="js/openlayer/v4.6.5/css/ol.css" target="_blank" rel="external nofollow" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/jQuery1.3.1.js"></script>
<script type="text/javascript" src="js/openlayer/v4.6.5/build/ol.js"></script>
<script type="text/javascript" src="js/coordtransform.js"></script>
<script type="text/javascript" src="js/cm.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var image = new ol.style.Circle({
radius: 5,
fill: null,
stroke: new ol.style.Stroke({color: 'red', width: 1})
});
var styles = {
'station_1': new ol.style.Style({
image: new ol.style.Circle({
radius: 3,
fill: null,
stroke: new ol.style.Stroke({color: '#bada55', width: 1})
})
}),
'station_2': new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
fill: null,
stroke: new ol.style.Stroke({color: '#bada55', width: 1})
})
}),
'station_3': new ol.style.Style({
image: new ol.style.Circle({
radius: 9,
fill: null,
stroke: new ol.style.Stroke({color: '#bada55', width: 1})
})
}),
'station_4': new ol.style.Style({
image: new ol.style.Circle({
radius: 12,
fill: null,
stroke: new ol.style.Stroke({color: '#bada55', width: 1})
})
}),
'station_5': new ol.style.Style({
image: new ol.style.Circle({
radius: 15,
fill: null,
stroke: new ol.style.Stroke({color: '#bada55', width: 1})
})
}),
'Point': new ol.style.Style({
image: image
}),
'LineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 1
})
}),
'MultiLineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 1
})
}),
'MultiPoint': new ol.style.Style({
image: image
}),
'MultiPolygon': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'yellow',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(255, 255, 0, 0.1)'
})
}),
'Polygon': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
lineDash: [4],
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
}),
'GeometryCollection': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'magenta',
width: 2
}),
fill: new ol.style.Fill({
color: 'magenta'
}),
image: new ol.style.Circle({
radius: 10,
fill: null,
stroke: new ol.style.Stroke({
color: 'magenta'
})
})
}),
'Circle': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 2
}),
fill: new ol.style.Fill({
color: 'rgba(255,0,0,0.2)'
})
})
};
var styleFunction = function(feature) {
return styles[feature.getGeometry().getType()];
};
//fs.concat(new SGGTool(211,false,[{lon:12645670.400179092,lat:4137598.634327903}]).getFeatures())
var geojsonObject = {
'type': 'FeatureCollection',
'crs': {
'type': 'name',
'properties': {
'name': 'EPSG:900913'
}
},
'features':
[{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [0, 0]
}
}, {
'type': 'Feature',
'geometry': {
'type': 'LineString',
'coordinates': [[4e6, -2e6], [8e6, 2e6]]
}
}, {
'type': 'Feature',
'geometry': {
'type': 'LineString',
'coordinates': [[4e6, 2e6], [8e6, -2e6]]
}
}, {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6]]]
}
}, {
'type': 'Feature',
'geometry': {
'type': 'MultiLineString',
'coordinates': [
[[-1e6, -7.5e5], [-1e6, 7.5e5]],
[[1e6, -7.5e5], [1e6, 7.5e5]],
[[-7.5e5, -1e6], [7.5e5, -1e6]],
[[-7.5e5, 1e6], [7.5e5, 1e6]]
]
}
}, {
'type': 'Feature',
'geometry': {
'type': 'MultiPolygon',
'coordinates': [
[[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], [-3e6, 6e6]]],
[[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6], [0, 6e6]]],
[[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], [3e6, 6e6]]]
]
}
}, {
'type': 'Feature',
'geometry': {
'type': 'GeometryCollection',
'geometries': [{
'type': 'LineString',
'coordinates': [[-5e6, -5e6], [0, -5e6]]
}, {
'type': 'Point',
'coordinates': [4e6, -5e6]
}, {
'type': 'Polygon',
'coordinates': [[[1e6, -6e6], [2e6, -4e6], [3e6, -6e6]]]
}]
}
}]
};
//var sgt=new SGGTool(202,false,[{lon:12645670.400179092,lat:4137598.634327903}]).getFeature();
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
//features: new SGGTool(202,false,[{lon:12645670.400179092,lat:4137598.634327903}]).getFeatures()
});
//vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6)));
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: styleFunction
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'henanArcgisTitle/{z}/{x}/{-y}.png'
})
})
],
view: new ol.View({
center: [12284632, 3682763],
zoom: 3
}),
projection: ol.proj.get('EPSG:900913'),
});
map.addControl(new ol.control.MousePosition());
map.addLayer(vectorLayer);
/* var styleFunction = function(feature) {
return styles[feature.getGeometry().getType()];
}; */
//$.getJSON('mapJson/henan.json', function (json) {
$.getJSON('mapJson/henan.json', function (json) {
var vectorSource = new ol.source.Vector();
vectorSource.addFeatures(new ol.format.GeoJSON().readFeatures(decode(json), {featureProjection: ol.proj.get('EPSG:900913')}));
// vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6)));
var vectorLayer = new ol.layer.Vector({
source: vectorSource
//,style: styleFunction
});
map.addLayer(vectorLayer);
});
</script>
</body>
</html>
參考：
https://openlayers.org
![Javascript建構Bingo卡片遊戲[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)