首先说明几个概念。
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 lang="cn">
<head>
<link rel="stylesheet" href="js/openlayer/v4.6.5/css/ol.css" 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
相关推荐
瓦片地图是将大图切割成多个小块（通常为256x256像素），以便于网络传输和高效加载。OpenLayers 提供了丰富的功能，允许开发者轻松地在地图上叠加不同的瓦片图层。 在OpenLayers中，叠加瓦片主要涉及以下几个关键...
本示例“baiduMap_openlayer”是关于如何利用OpenLayers加载和展示百度地图与高德地图的教程。这个教程对开发者来说具有很高的参考价值，特别是那些想要在自己的Web应用中集成地图功能的人员。 首先，让我们深入...
- 使用OpenLayers提供的`TileLayer`和`XYZ`图层源，通过指定Mbtiles服务的URL来加载瓦片。 - 示例代码如下： ```javascript var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: ...
OpenLayers 支持TiledMapService (TMS) 和XYZ两种常见的瓦片地图服务模式。 在DEMO中，你将看到以下关键步骤： 1. **引入OpenLayers库**：在HTML文件中，你需要链接到OpenLayers的库文件。这通常通过CDN或本地文件...
此外，OpenLayers还支持其他类型的地图切片源，如TMS（Tile Map Service），其URL模板中的顺序是`{y}-{x}-{z}`，与XYZ略有不同。 总结起来，OpenLayers加载本地切片涉及到创建TileSource实例，配置URL模板，以及将...
自己发开的地图下载器，免费绿色，支持高德地图、谷歌地图、智图地图、Open Street Map等数据源的瓦片地图下载，支持影像图和电子地图等多种类型地图，64位系统版
2. **获取瓦片数据**: 离线瓦片地图通常存储在特定的文件结构中，如XYZ或TMS格式。你需要有一个完整的瓦片集，包括所有级别的图像文件。 **第二步：创建osgEarth瓦片源** osgEarth提供了多种瓦片源，例如GDAL、...
1. 地图初始化：设置地图底图，通常可以使用OpenStreetMap、Google Maps等公开服务，或者自定义的WMS服务。 2. 动态数据加载：定期从服务器获取最新军事态势数据，更新到地图的矢量图层中。这可以通过Ajax请求实现...
首先，离线瓦片数据通常是按照特定的分块结构（如XYZ或TMS模式）存储的，每一块对应地图上的一个特定区域。91卫图作为国内知名的在线地图服务提供商，其提供的瓦片数据格式可能遵循了标准的Web Mercator投影，以便与...
3. 加载TMS图层：`var tmsLayer = new OpenLayers.Layer.TMS("Your Layer Name", "TMS Service URL", {layername: 'Your Layer', type: 'png', isBaseLayer: true})`，其中'Your Layer Name'是你给图层起的名字，'...
在这个"openlayer在线标绘，并实现增删改查"的主题中，我们将深入探讨如何利用OpenLayers加载离线地图，进行在线标绘，以及如何实现标绘要素的增删改查功能，同时还会涉及地图图层切换和定位功能。 1. **加载离线...
与Google Maps API的XYZ坐标系统不同，TMS的瓦片顺序是自底向上、从左到右的。在叠加TMS瓦片时，需要将这两种瓦片系统的坐标转换逻辑整合到代码中，以确保正确地显示来自不同源的瓦片。 "源码"部分可能包含了实现...
在本文中，我们将深入探讨如何使用Mapbox GL JS库加载天地图CGCS2000瓦片地图服务。Mapbox GL JS是一个强大的JavaScript库，它允许开发者创建交互式的、矢量渲染的地图。天地图是中国官方的地理信息服务，提供多种...
TMS（Tile Map Service）是一种分块加载地图图像的服务，OpenLayers支持TMS图层，通过`OpenLayers.Layer.TMS`创建。 设置瓦片大小主要在TileCache或WMS服务配置中完成。 大数据量线绘制可以考虑分段加载、动态加载...
谷歌离线瓦片地图是一种将大型地图分割成小块图像（通常为256x256像素）的方式，以便于快速加载和离线使用。这些瓦片通常按照层级（Zoom Level）和经纬度坐标进行组织。为了在Leaflet中使用这些瓦片，我们需要创建一...
- OSM（OpenStreetMap）：开放街图是一个免费的地理数据库，很多瓦片地图下载工具支持直接下载OSM数据。 - GeoTIFF和MBTiles：这两种格式常用于存储瓦片地图，GeoTIFF是单个大图像，MBTiles则是将所有瓦片打包在一...
它支持多种数据源，包括WMS、WMTS、TMS、GeoJSON等，使得开发者能够轻松地将地理信息集成到Web应用中。这个压缩包包含的是OpenLayers v6.1版本的相关例子代码和API参考文档，对于学习和理解OpenLayers的功能和用法...
4. **定义图层源**：创建一个`ol.source.XYZ`对象，用于加载谷歌地图的离线切片。你需要提供一个URL模板，该模板应包含切片的层级信息（z，x，y），例如：`'http://yourserver.com/tiles/{z}/{x}/{y}.png'`。在本例...