ol加载地图
加载内部封装的地图:
<div id="map" class="map"></div> <script type="text/javascript"> var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 10 }) }); </script> 利用XYZ加载：
<div id="mymap"></div> <script> var openStreetMapLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png' }) }); var map = new ol.Map({ layers: [ openStreetMapLayer ], view: new ol.View({ center: [12570904.1896, 3269680.4449], projection: 'EPSG:3857', zoom: 10 }), target: 'mymap' }); </script> 加载矢量地图：
<div id="mymap"></div> <script type="text/javascript"> var style = new ol.style.Style({ stroke: new ol.style.Stroke({ color: "green", width: 3 }) }) var map = new ol.Map({ target: "mymap", layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ projection: "EPSG:4326", center: [0, 0], zoom: 2 }) }) var vectorSource = new ol.source.Vector({ url: "./data/data/geojson/buildings.geojson", format: new ol.format.GeoJSON() }) var vectorLayer = new ol.layer.Vector({ style: style, source: vectorSource }) map.addLayer(vectorLayer) </script> 加载WMS：
<div id="map"></div> <script> var projection = ol.proj.get('EPSG:4326');//地图投影坐标系 var map = new ol.Map({ target: 'map', view: new ol.View({ center: [0, 0], zoom: 2, }), layers: [ new ol.layer.Tile({ source: new ol.source.OSM() })] }); var wmsLayer = new ol.layer.Tile({ source: new ol.source.TileWMS({ url: 'https://ahocevar.com/geoserver/wms', params: { 'LAYERS': 'topp:states' } }) }); map.addLayer(wmsLayer) </script> 加载WMTS：
<div id="map"></div> <script> var projection = ol.proj.get("EPSG:4326"); var projectionExtent = projection.getExtent(); var size = ol.extent.getWidth(projectionExtent) / 256; var resolutions = []; for (var z = 2; z < 19; ++z) { resolutions[z] = size / Math.pow(2, z); } var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.WMTS({ url: "http://t{0-6}.tianditu.gov.cn/vec_c/wmts?tk=1d109683f4d84198e37a38c442d68311", name: "中国矢量1-4级", layer: "vec", style: "default", matrixSet: "c", format: "tiles", wrapX: true, tileGrid: new ol.tilegrid.WMTS({ origin: ol.extent.getTopLeft(projectionExtent), resolutions: resolutions, matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14] }) }), }) ], target: "map", view: new ol.View({ center: [120.14805, 30.26971], projection: projection, zoom: 3, maxZoom: 17, minZoom: 1 }) }); </script> 加载WFS：
<div id="map"></div> <script> var projection = ol.proj.get('EPSG:3857');//地图投影坐标系 var map = new ol.Map({ target: 'map', view: new ol.View({ center: [-8908887.277395891, 5381918.072437216], zoom: 12, }), layers: [ new ol.layer.Tile({ source: new ol.source.OSM() })] }); var vectorSource = new ol.source.Vector(); var vector = new ol.layer.Vector({ source: vectorSource, style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'rgba(0，0，255,1.0)', width: 2, }), }), }); var vectorSource = new ol.source.Vector({ format: new ol.format.GeoJSON(), url: function (extent) { return ( "https://ahocevar.com/geoserver/wfs?service=WFS&" + "version=1.1.0&request=GetFeature&typename=osm:water_areas&" + "outputFormat=application/json&srsname=EPSG:3857&" + "bbox=" + extent.join(',') + ',EPSG:3857' ); }, strategy: ol.loadingstrategy.bboxStrategy, }); var vector = new ol.layer.Vector({ source: vectorSource, style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'rgba(0, 0，255,1.0)', width: 2, }), }), }); map.addLayer(vector) </script> 原文链接：https://www.cnblogs.com/jiujiubashiyi/p/16089622.html
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/32795
