不同API加载geojson
1.mapboxgl：在底图上叠加geojson格式的矢量数据切片
add vector tile geojson
2.mapboxgl在矢量切片上叠加geojson
countiesChina
3.openlayer加载geojson
//加载geojson数据
var GeoJsonLayer = new ol.layer.Vector({
title: 'add Layer',
source: new ol.source.Vector({
projection: 'EPSG:3857',
url: '../geojson/building.geojson',
format:new ol.format.GeoJSON()
})
});
var GeoJsonLayer1 = new ol.layer.Vector({
title: 'add Layer',
source: new ol.source.Vector({
projection: 'EPSG:3857',
url: '../geojson/road.geojson',
format:new ol.format.GeoJSON()
})
});
var map = new ol.Map({
layers: [
GeoJsonLayer,GeoJsonLayer1
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: true
})
}),
view: new ol.View({
center: [13479415.218162835,3684289.1918338826],
// ol.proj.transform([13479415.218162835,3684289.1918338826], 'EPSG:3857', 'EPSG:4326'),
zoom: 17
})
});
4.leaflet加载图层的时候，经纬度要对调顺序
var map = L.map('map', {
center: [31.4, 121],//注意：leaflet这里要写成纬度，经度的格式！之前出错就是因为这里经纬度位置没有进行调换
zoom: 2
}
);
var imageUrl = '../images/baidu2.png',
imageBounds = [[31.369, 120.9319], [31.416, 121.03728]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);
5.openlayer加载geojson格式的矢量切片
var projection4326 = new ol.proj.Projection({
code: 'EPSG:4326',
units: 'degrees',
});
var defaultView = new ol.View({
projection: projection4326,
center: [114.15, 22.65],
//new ol.proj.fromLonLat([114.15, 22.65]),
zoom: 4
});
window.onload =function (){
//参数设置：图层名称 / 投影坐标系 / 初始化样式
var layerName = 'testchina815:counties_china';
var layerProjection = '4326';
var initStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgb(163,204,25)',
width: 5
})
});
//矢量切片图层
var vectorTile = new ol.layer.VectorTile({
title:"counties_china",
style: initStyle,
projection: projection4326,
//矢量切片数据
source: new ol.source.VectorTile({
projeciton: projection4326,
format: new ol.format.GeoJSON(),
tileGrid: ol.tilegrid.createXYZ({
extent: ol.proj.get('EPSG:4326').getExtent(),
maxZoom: 10
}),
tilePixelRatio:1,
// 矢量切片服务地址
tileUrlFunction: function(tileCoord){
return 'http://127.0.0.1:8080/geoserver/gwc/service/tms/1.0.0/'
+layerName+'@EPSG%3A4326@geojson/'+(tileCoord[0]-1)
+ '/'+tileCoord[1] + '/' + (Math.pow(2,tileCoord[0]-1)+tileCoord[2]) + '.geojson';
}
})
});
// alert(vectorTile.tileUrlFunction);
//构造Map对象
//你需要在页面中提供一个id='map'的div
map = new ol.Map({
target: 'map',
// layers: [
// new ol.layer.Tile({
// source: new ol.source.OSM()
// }),
// ],
view:defaultView
// controls:[
// new ol.control.ScaleLine(),
// new ol.control.ZoomSlider(),
// new ol.control.LayerSwitcher(),
// new ol.control.OverviewMap(),
// new ol.control.Zoom()
// ],
});
map.addLayer(vectorTile);
//alert("m");
}
6.leaflet加载各大主流的矢量切片pbf格式
var map = L.map('map');
// var cartodbAttribution = '© OpenStreetMap contributors, © CartoDB';
//
// var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
// attribution: cartodbAttribution,
// opacity: 0.5
// }).addTo(map);
var vectorTileStyling = {
water: {
fill: true,
weight: 1,
fillColor: '#06cccc',
color: '#06cccc',
fillOpacity: 0.2,
opacity: 0.4,
},
admin: {
weight: 1,
fillColor: 'pink',
color: 'pink',
fillOpacity: 0.2,
opacity: 0.4
},
waterway: {
weight: 1,
fillColor: '#2375e0',
color: '#2375e0',
fillOpacity: 0.2,
opacity: 0.4
},
landcover: {
fill: true,
weight: 1,
fillColor: '#53e033',
color: '#53e033',
fillOpacity: 0.2,
opacity: 0.4,
},
landuse: {
fill: true,
weight: 1,
fillColor: '#e5b404',
color: '#e5b404',
fillOpacity: 0.2,
opacity: 0.4
},
park: {
fill: true,
weight: 1,
fillColor: '#84ea5b',
color: '#84ea5b',
fillOpacity: 0.2,
opacity: 0.4
},
boundary: {
weight: 1,
fillColor: '#c545d3',
color: '#c545d3',
fillOpacity: 0.2,
opacity: 0.4
},
aeroway: {
weight: 1,
fillColor: '#51aeb5',
color: '#51aeb5',
fillOpacity: 0.2,
opacity: 0.4
},
road: { // mapbox & nextzen only
weight: 1,
fillColor: '#f2b648',
color: '#f2b648',
fillOpacity: 0.2,
opacity: 0.4
},
tunnel: { // mapbox only
weight: 0.5,
fillColor: '#f2b648',
color: '#f2b648',
fillOpacity: 0.2,
opacity: 0.4,
// dashArray: [4, 4]
},
bridge: { // mapbox only
weight: 0.5,
fillColor: '#f2b648',
color: '#f2b648',
fillOpacity: 0.2,
opacity: 0.4,
// dashArray: [4, 4]
},
transportation: { // openmaptiles only
weight: 0.5,
fillColor: '#f2b648',
color: '#f2b648',
fillOpacity: 0.2,
opacity: 0.4,
// dashArray: [4, 4]
},
transit: { // nextzen only
weight: 0.5,
fillColor: '#f2b648',
color: '#f2b648',
fillOpacity: 0.2,
opacity: 0.4,
// dashArray: [4, 4]
},
building: {
fill: true,
weight: 1,
fillColor: '#2b2b2b',
color: '#2b2b2b',
fillOpacity: 0.2,
opacity: 0.4
},
water_name: {
weight: 1,
fillColor: '#022c5b',
color: '#022c5b',
fillOpacity: 0.2,
opacity: 0.4
},
transportation_name: {
weight: 1,
fillColor: '#bc6b38',
color: '#bc6b38',
fillOpacity: 0.2,
opacity: 0.4
},
place: {
weight: 1,
fillColor: '#f20e93',
color: '#f20e93',
fillOpacity: 0.2,
opacity: 0.4
},
housenumber: {
weight: 1,
fillColor: '#ef4c8b',
color: '#ef4c8b',
fillOpacity: 0.2,
opacity: 0.4
},
poi: {
weight: 1,
fillColor: '#3bb50a',
color: '#3bb50a',
fillOpacity: 0.2,
opacity: 0.4
},
earth: { // nextzen only
fill: true,
weight: 1,
fillColor: '#c0c0c0',
color: '#c0c0c0',
fillOpacity: 0.2,
opacity: 0.4
},
// Do not symbolize some stuff for mapbox
country_label: [],
marine_label: [],
state_label: [],
place_label: [],
waterway_label: [],
poi_label: [],
road_label: [],
housenum_label: [],
// Do not symbolize some stuff for openmaptiles
country_name: [],
marine_name: [],
state_name: [],
place_name: [],
waterway_name: [],
poi_name: [],
road_name: [],
housenum_name: [],
};
// Monkey-patch some properties for nextzen layer names, because
// instead of "building" the data layer is called "buildings" and so on
vectorTileStyling.buildings = vectorTileStyling.building;
vectorTileStyling.boundaries = vectorTileStyling.boundary;
vectorTileStyling.places = vectorTileStyling.place;
vectorTileStyling.pois = vectorTileStyling.poi;
vectorTileStyling.roads = vectorTileStyling.road;
var mapboxUrl = "https://{s}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token={token}";
var mapboxVectorTileOptions = {
rendererFactory: L.canvas.tile,
attribution: '© OpenStreetMap contributors, © MapBox',
vectorTileLayerStyles: vectorTileStyling,
token: 'pk.eyJ1IjoiaXZhbnNhbmNoZXoiLCJhIjoiY2l6ZTJmd3FnMDA0dzMzbzFtaW10cXh2MSJ9.VsWCS9-EAX4_4W1K-nXnsA'
};
var mapboxPbfLayer = L.vectorGrid.protobuf(mapboxUrl, mapboxVectorTileOptions);
var openmaptilesUrl = "https://free-{s}.tilehosting.com/data/v3/{z}/{x}/{y}.pbf.pict?key={key}";
var openmaptilesVectorTileOptions = {
rendererFactory: L.canvas.tile,
attribution: '© OpenMapTiles, © OpenStreetMap contributors',
vectorTileLayerStyles: vectorTileStyling,
subdomains: '0123',
key: 'UmmATPUongHdDmIicgs7',
maxZoom: 14
};
var openmaptilesPbfLayer = L.vectorGrid.protobuf(openmaptilesUrl, openmaptilesVectorTileOptions).addTo(map);
// Assumes layers = "all", and format = "mvt"
var nextzenTilesUrl = "https://tile.nextzen.org/tilezen/vector/v1/512/all/{z}/{x}/{y}.mvt?api_key={apikey}";
var nextzenVectorTileOptions = {
rendererFactory: L.canvas.tile,
attribution: '© NextZen, © OpenStreetMap contributors',
vectorTileLayerStyles: vectorTileStyling,
apikey: 'gCZXZglvRQa6sB2z7JzL1w',
};
var nextzenTilesPbfLayer = L.vectorGrid.protobuf(nextzenTilesUrl, nextzenVectorTileOptions);
var esriStyle = {};
esriStyle.Continent = vectorTileStyling.earth;
esriStyle.Bathymetry = vectorTileStyling.water;
esriStyle["Vegetation small scale"] = vectorTileStyling.landuse;
esriStyle["Marine area"] = vectorTileStyling.water;
esriStyle.Land = vectorTileStyling.earth;
esriStyle["City small scale" ] = vectorTileStyling.building;
esriStyle["Admin0 point" ] = [];
esriStyle["Water area small scale" ] = vectorTileStyling.water;
esriStyle["Water line small scale/label" ] = [];
esriStyle["Water line small scale" ] = vectorTileStyling.water;
esriStyle["Marine waterbody/label" ] = [];
esriStyle["Boundary line" ] = vectorTileStyling.boundary;
esriStyle["Admin0 forest or park" ] = vectorTileStyling.landuse;
esriStyle["Openspace or forest" ] = vectorTileStyling.landuse;
esriStyle["Admin1 area/label" ] = [];
esriStyle["Admin2 area/label" ] = [];
esriStyle["Admin0 forest or park/label" ] = [];
esriStyle["Water area small scale/label" ] = [];
esriStyle["Road tunnel" ] = vectorTileStyling.road;
esriStyle["Road" ] = vectorTileStyling.road;
esriStyle["Water line medium scale/label"] = [];
esriStyle["Water line medium scale" ] = vectorTileStyling.water;
esriStyle["Urban area" ] = vectorTileStyling.landuse;
esriStyle["Admin1 forest or park" ] = vectorTileStyling.landuse;
esriStyle["Water area medium scale/label"] = [];
esriStyle["Water area medium scale" ] = vectorTileStyling.water;
esriStyle["Spot elevation" ] = [];
esriStyle["City large scale" ] = vectorTileStyling.building;
esriStyle["Admin2 area/label" ] =
esriStyle["Water area large scale" ] = vectorTileStyling.water;
esriStyle["Water line large scale/label" ] = [];
esriStyle["Water line large scale" ] = vectorTileStyling.water;
esriStyle["Point of interest" ] = vectorTileStyling.building;
esriStyle["Road/label" ] = [];
esriStyle["Ferry/label" ] = [];
esriStyle["Ferry" ] = vectorTileStyling.water;
esriStyle["Building" ] = vectorTileStyling.building;
esriStyle["Water area/label" ] = [];
esriStyle["Water area" ] = vectorTileStyling.water;
esriStyle["Water line" ] = vectorTileStyling.water;
esriStyle["Cemetery/label" ] = [];
esriStyle["Cemetery" ] = vectorTileStyling.landuse;
esriStyle["Retail" ] = vectorTileStyling.landuse;
esriStyle["Airport/label" ] = [];
esriStyle["Airport" ] = vectorTileStyling.landuse;
esriStyle["Industry" ] = vectorTileStyling.landuse;
esriStyle["Water area large scale/label" ] = [];
esriStyle["Road tunnel/label" ] = [];
esriStyle["Golf course/label" ] = [];
esriStyle["Golf course" ] = vectorTileStyling.landuse;
esriStyle["Industry/label" ] = [];
esriStyle["Marine area/label" ] = [];
esriStyle["Railroad" ] = vectorTileStyling.road;
esriStyle["Medical" ] = vectorTileStyling.landuse;
esriStyle["Education" ] = vectorTileStyling.landuse;
esriStyle["Park or farming" ] = vectorTileStyling.landuse;
esriStyle["Exit" ] = vectorTileStyling.road;
esriStyle["Retail/label" ] = [];
esriStyle["Beach/label" ] = [];
esriStyle["Beach" ] = vectorTileStyling.landuse;
esriStyle["Special area of interest" ] = vectorTileStyling.housenumber;
esriStyle["Point of interest" ] = vectorTileStyling.poi;
esriStyle["Education/label" ] = [];
esriStyle["Landmark" ] = vectorTileStyling.landuse;
esriStyle["Cemetery" ] = vectorTileStyling.landuse;
esriStyle["Transportation" ] = vectorTileStyling.road;
esriStyle["Landmark/label" ] = [];
esriStyle["Medical/label" ] = [];
esriStyle["Park or farming/label" ] = [];
esriStyle["Building/label" ] = [];
var esriTilesUrl = "https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/{z}/{y}/{x}.pbf";
var esriVectorTileOptions = {
rendererFactory: L.canvas.tile,
attribution: '© ESRI',
vectorTileLayerStyles: esriStyle,
};
var esriTilesPbfLayer = L.vectorGrid.protobuf(esriTilesUrl, esriVectorTileOptions);
map.setView({ lat: 47.040182144806664, lng: 9.667968750000002 }, 0);
L.control.layers({
OpenMapTiles: openmaptilesPbfLayer,
"MapBox Vector Tiles": mapboxPbfLayer,
"NextZen Vector Tiles": nextzenTilesPbfLayer,
"ESRI basemap vector tiles": esriTilesPbfLayer
}, {}, {collapsed: false}).addTo(map);
7.leaflet加载平面坐标系的geojson数据：注意CRS参数的设置
var map = L.map('map', {
crs: L.CRS.Simple
});
//这句话是关键，在加这句话之前图一直出不来，按照网上的设置bounds的方法并不好使！！！！设置缩放级别之后图上显示的大小发生改变
map.setView([947.39058818, 4000.72975],10);
L.geoJSON(tunnel_left,{
style: {
"color": "#ff7800",
"weight": 5,
"opacity": 1
}
}).addTo(map);
console.log("map"+map);