首先说明几个概念。
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
相关推荐
TMS瓦片转mbtiles,mbtiles规范文件转TMS瓦片文件,以及集合到OL3中,并且对源码进行分析
自己发开的地图下载器,免费绿色,支持高德地图、谷歌地图、智图地图、Open Street Map等数据源的瓦片地图下载,支持影像图和电子地图等多种类型地图,64位系统版
(完整的说明文档有截图+源码编译成功的)
google离线API调用google瓦片作为底图再叠加TMS瓦片源码及数据,涉及两种瓦片加载算法,测试可用。
通过对mapbox GL JS进行改造,使其能够加载天地图CGCS2000瓦片地图服务。
请问在openlayers中如何删除Layer中的marker 3 在层中加了一个标记怎么永久的存到地图上 3 OpenLayers 如何设死地图边界 3 谁写过openlayers解析xml 3 openlayer.popup 3 OpenLayers 怎么做字段标注 4 字段标注不是...
openlayers3 调用离线谷歌切片地图 示例
MapTileGenerator支持TMS、WMTS标准瓦片下载,支持百度地图瓦片、高德地图瓦片、腾讯地图瓦片、天地图、ArcServer Rest瓦片、ArcServer本地缓存切片、geoserver WMS等瓦片下载。默认以png文件方式保存瓦片,也支持以...
先加载tif到地图里,地图右键有瓦片按钮,进行切割试用版切割之后会有超图水印,正式版授权才会去掉SuperMap iDesktop 支持单任务生成地图瓦片,是在
将文件放在“Documents\我的 Tableau 存储库\地图源\背景地图”目录下,如果“背景地图”文件夹不存在,请新建一个“背景地图”文件夹,then enjoy。
cesium在在离线的环境下使用的天地图瓦片,网上的瓦片都需要通过下载各种地图下载器,让人头疼,
java地图离线api实例即瓦片下载工具,免注册
openlayers自定义规则切片浏览实例 包括openlayers.js,Config.js,img,TMS.html
基于TMS320C6455的DSP加载模式研究
本资源详细说明如何把S57格式海图生成TMS瓦片,并且提供中国海域相关海图测试数据, 不成功退费
本文详细介绍了TMS320C6678多核程序烧写的原理及实际操作步骤,并附带了转换工具链、烧写程序及验证程序。阅读本文档即可轻松实现多核烧写。
TMS320F28027 最小原理图 电路图 TMS320F28027 最小原理图 电路图 TMS320F28027 最小原理图 电路图 TMS320F28027 最小原理图 电路图 TMS320F28027 最小原理图 电路图