297 lines
13 KiB
JavaScript
297 lines
13 KiB
JavaScript
|
//官方mapbox-streets-v6 vector样式
|
||
|
|
// Styles for the mapbox-streets-v6 vector tile data set. Loosely based on
|
||
|
|
// http://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6.json
|
||
|
|
|
||
|
|
(function (window) {
|
||
|
|
class MapboxStreetsV6 {
|
||
|
|
constructor(options = {}) {
|
||
|
|
this._type = "mapbox-streets-v6";
|
||
|
|
}
|
||
|
|
|
||
|
|
getStyle(options, urltemplate) {
|
||
|
|
var fill = new ol.style.Fill({ color: "" });
|
||
|
|
var stroke = new ol.style.Stroke({ color: "", width: 1 });
|
||
|
|
var polygon = new ol.style.Style({ fill: fill });
|
||
|
|
var strokedPolygon = new ol.style.Style({ fill: fill, stroke: stroke });
|
||
|
|
var line = new ol.style.Style({ stroke: stroke });
|
||
|
|
var text = new ol.style.Style({
|
||
|
|
text: new ol.style.Text({
|
||
|
|
text: "",
|
||
|
|
fill: fill,
|
||
|
|
stroke: stroke,
|
||
|
|
}),
|
||
|
|
});
|
||
|
|
var iconCache = {};
|
||
|
|
function getIcon(iconName) {
|
||
|
|
var icon = iconCache[iconName];
|
||
|
|
if (!icon) {
|
||
|
|
icon = new ol.style.Style({
|
||
|
|
image: new ol.style.Icon({
|
||
|
|
src: "https://unpkg.com/@mapbox/maki@4.0.0/icons/" + iconName + "-15.svg",
|
||
|
|
imgSize: [15, 15],
|
||
|
|
}),
|
||
|
|
});
|
||
|
|
iconCache[iconName] = icon;
|
||
|
|
}
|
||
|
|
return icon;
|
||
|
|
}
|
||
|
|
|
||
|
|
var styles = [];
|
||
|
|
return function (feature, resolution) {
|
||
|
|
var length = 0;
|
||
|
|
var layer = feature.get("layer");
|
||
|
|
var cls = feature.get("class");
|
||
|
|
var type = feature.get("type");
|
||
|
|
var scalerank = feature.get("scalerank");
|
||
|
|
var labelrank = feature.get("labelrank");
|
||
|
|
var adminLevel = feature.get("admin_level");
|
||
|
|
var maritime = feature.get("maritime");
|
||
|
|
var disputed = feature.get("disputed");
|
||
|
|
var maki = feature.get("maki");
|
||
|
|
var geom = feature.getGeometry().getType();
|
||
|
|
if (layer == "landuse" && cls == "park") {
|
||
|
|
fill.setColor("#d8e8c8");
|
||
|
|
styles[length++] = polygon;
|
||
|
|
} else if (layer == "landuse" && cls == "cemetery") {
|
||
|
|
fill.setColor("#e0e4dd");
|
||
|
|
styles[length++] = polygon;
|
||
|
|
} else if (layer == "landuse" && cls == "hospital") {
|
||
|
|
fill.setColor("#fde");
|
||
|
|
styles[length++] = polygon;
|
||
|
|
} else if (layer == "landuse" && cls == "school") {
|
||
|
|
fill.setColor("#f0e8f8");
|
||
|
|
styles[length++] = polygon;
|
||
|
|
} else if (layer == "landuse" && cls == "wood") {
|
||
|
|
fill.setColor("rgb(233,238,223)");
|
||
|
|
styles[length++] = polygon;
|
||
|
|
} else if (layer == "waterway" && cls != "river" && cls != "stream" && cls != "canal") {
|
||
|
|
stroke.setColor("#a0c8f0");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "waterway" && cls == "river") {
|
||
|
|
stroke.setColor("#a0c8f0");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "waterway" && (cls == "stream" || cls == "canal")) {
|
||
|
|
stroke.setColor("#a0c8f0");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "water") {
|
||
|
|
fill.setColor("#a0c8f0");
|
||
|
|
styles[length++] = polygon;
|
||
|
|
} else if (layer == "aeroway" && geom == "Polygon") {
|
||
|
|
fill.setColor("rgb(242,239,235)");
|
||
|
|
styles[length++] = polygon;
|
||
|
|
} else if (layer == "aeroway" && geom == "LineString" && resolution <= 76.43702828517625) {
|
||
|
|
stroke.setColor("#f0ede9");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "building") {
|
||
|
|
fill.setColor("#f2eae2");
|
||
|
|
stroke.setColor("#dfdbd7");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = strokedPolygon;
|
||
|
|
} else if (layer == "tunnel" && cls == "motorway_link") {
|
||
|
|
stroke.setColor("#e9ac77");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "tunnel" && cls == "service") {
|
||
|
|
stroke.setColor("#cfcdca");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "tunnel" && (cls == "street" || cls == "street_limited")) {
|
||
|
|
stroke.setColor("#cfcdca");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "tunnel" && cls == "main" && resolution <= 1222.99245256282) {
|
||
|
|
stroke.setColor("#e9ac77");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "tunnel" && cls == "motorway") {
|
||
|
|
stroke.setColor("#e9ac77");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "tunnel" && cls == "path") {
|
||
|
|
stroke.setColor("#cba");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "tunnel" && cls == "major_rail") {
|
||
|
|
stroke.setColor("#bbb");
|
||
|
|
stroke.setWidth(2);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "road" && cls == "motorway_link") {
|
||
|
|
stroke.setColor("#e9ac77");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "road" && (cls == "street" || cls == "street_limited") && geom == "LineString") {
|
||
|
|
stroke.setColor("#cfcdca");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "road" && cls == "main" && resolution <= 1222.99245256282) {
|
||
|
|
stroke.setColor("#e9ac77");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "road" && cls == "motorway" && resolution <= 4891.96981025128) {
|
||
|
|
stroke.setColor("#e9ac77");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "road" && cls == "path") {
|
||
|
|
stroke.setColor("#cba");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "road" && cls == "major_rail") {
|
||
|
|
stroke.setColor("#bbb");
|
||
|
|
stroke.setWidth(2);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "bridge" && cls == "motorway_link") {
|
||
|
|
stroke.setColor("#e9ac77");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "bridge" && cls == "motorway") {
|
||
|
|
stroke.setColor("#e9ac77");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "bridge" && cls == "service") {
|
||
|
|
stroke.setColor("#cfcdca");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "bridge" && (cls == "street" || cls == "street_limited")) {
|
||
|
|
stroke.setColor("#cfcdca");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "bridge" && cls == "main" && resolution <= 1222.99245256282) {
|
||
|
|
stroke.setColor("#e9ac77");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "bridge" && cls == "path") {
|
||
|
|
stroke.setColor("#cba");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "bridge" && cls == "major_rail") {
|
||
|
|
stroke.setColor("#bbb");
|
||
|
|
stroke.setWidth(2);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "admin" && adminLevel >= 3 && maritime === 0) {
|
||
|
|
stroke.setColor("#9e9cab");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "admin" && adminLevel == 2 && disputed === 0 && maritime === 0) {
|
||
|
|
stroke.setColor("#9e9cab");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "admin" && adminLevel == 2 && disputed === 1 && maritime === 0) {
|
||
|
|
stroke.setColor("#9e9cab");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "admin" && adminLevel >= 3 && maritime === 1) {
|
||
|
|
stroke.setColor("#a0c8f0");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "admin" && adminLevel == 2 && maritime === 1) {
|
||
|
|
stroke.setColor("#a0c8f0");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = line;
|
||
|
|
} else if (layer == "country_label" && scalerank === 1) {
|
||
|
|
text.getText().setText(feature.get("name_en"));
|
||
|
|
text.getText().setFont('bold 11px "Open Sans", "Arial Unicode MS"');
|
||
|
|
fill.setColor("#334");
|
||
|
|
stroke.setColor("rgba(255,255,255,0.8)");
|
||
|
|
stroke.setWidth(2);
|
||
|
|
styles[length++] = text;
|
||
|
|
} else if (layer == "country_label" && scalerank === 2 && resolution <= 19567.87924100512) {
|
||
|
|
text.getText().setText(feature.get("name_en"));
|
||
|
|
text.getText().setFont('bold 10px "Open Sans", "Arial Unicode MS"');
|
||
|
|
fill.setColor("#334");
|
||
|
|
stroke.setColor("rgba(255,255,255,0.8)");
|
||
|
|
stroke.setWidth(2);
|
||
|
|
styles[length++] = text;
|
||
|
|
} else if (layer == "country_label" && scalerank === 3 && resolution <= 9783.93962050256) {
|
||
|
|
text.getText().setText(feature.get("name_en"));
|
||
|
|
text.getText().setFont('bold 9px "Open Sans", "Arial Unicode MS"');
|
||
|
|
fill.setColor("#334");
|
||
|
|
stroke.setColor("rgba(255,255,255,0.8)");
|
||
|
|
stroke.setWidth(2);
|
||
|
|
styles[length++] = text;
|
||
|
|
} else if (layer == "country_label" && scalerank === 4 && resolution <= 4891.96981025128) {
|
||
|
|
text.getText().setText(feature.get("name_en"));
|
||
|
|
text.getText().setFont('bold 8px "Open Sans", "Arial Unicode MS"');
|
||
|
|
fill.setColor("#334");
|
||
|
|
stroke.setColor("rgba(255,255,255,0.8)");
|
||
|
|
stroke.setWidth(2);
|
||
|
|
styles[length++] = text;
|
||
|
|
} else if (layer == "marine_label" && labelrank === 1 && geom == "Point") {
|
||
|
|
text.getText().setText(feature.get("name_en"));
|
||
|
|
text.getText().setFont('italic 11px "Open Sans", "Arial Unicode MS"');
|
||
|
|
fill.setColor("#74aee9");
|
||
|
|
stroke.setColor("rgba(255,255,255,0.8)");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = text;
|
||
|
|
} else if (layer == "marine_label" && labelrank === 2 && geom == "Point") {
|
||
|
|
text.getText().setText(feature.get("name_en"));
|
||
|
|
text.getText().setFont('italic 11px "Open Sans", "Arial Unicode MS"');
|
||
|
|
fill.setColor("#74aee9");
|
||
|
|
stroke.setColor("rgba(255,255,255,0.8)");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = text;
|
||
|
|
} else if (layer == "marine_label" && labelrank === 3 && geom == "Point") {
|
||
|
|
text.getText().setText(feature.get("name_en"));
|
||
|
|
text.getText().setFont('italic 10px "Open Sans", "Arial Unicode MS"');
|
||
|
|
fill.setColor("#74aee9");
|
||
|
|
stroke.setColor("rgba(255,255,255,0.8)");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = text;
|
||
|
|
} else if (layer == "marine_label" && labelrank === 4 && geom == "Point") {
|
||
|
|
text.getText().setText(feature.get("name_en"));
|
||
|
|
text.getText().setFont('italic 9px "Open Sans", "Arial Unicode MS"');
|
||
|
|
fill.setColor("#74aee9");
|
||
|
|
stroke.setColor("rgba(255,255,255,0.8)");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = text;
|
||
|
|
} else if (layer == "place_label" && type == "city" && resolution <= 1222.99245256282) {
|
||
|
|
text.getText().setText(feature.get("name_en"));
|
||
|
|
text.getText().setFont('11px "Open Sans", "Arial Unicode MS"');
|
||
|
|
fill.setColor("#333");
|
||
|
|
stroke.setColor("rgba(255,255,255,0.8)");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = text;
|
||
|
|
} else if (layer == "place_label" && type == "town" && resolution <= 305.748113140705) {
|
||
|
|
text.getText().setText(feature.get("name_en"));
|
||
|
|
text.getText().setFont('9px "Open Sans", "Arial Unicode MS"');
|
||
|
|
fill.setColor("#333");
|
||
|
|
stroke.setColor("rgba(255,255,255,0.8)");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = text;
|
||
|
|
} else if (layer == "place_label" && type == "village" && resolution <= 38.21851414258813) {
|
||
|
|
text.getText().setText(feature.get("name_en"));
|
||
|
|
text.getText().setFont('8px "Open Sans", "Arial Unicode MS"');
|
||
|
|
fill.setColor("#333");
|
||
|
|
stroke.setColor("rgba(255,255,255,0.8)");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = text;
|
||
|
|
} else if (layer == "place_label" && resolution <= 19.109257071294063 && (type == "hamlet" || type == "suburb" || type == "neighbourhood")) {
|
||
|
|
text.getText().setText(feature.get("name_en"));
|
||
|
|
text.getText().setFont('bold 9px "Arial Narrow"');
|
||
|
|
fill.setColor("#633");
|
||
|
|
stroke.setColor("rgba(255,255,255,0.8)");
|
||
|
|
stroke.setWidth(1);
|
||
|
|
styles[length++] = text;
|
||
|
|
} else if (layer == "poi_label" && resolution <= 19.109257071294063 && scalerank == 1 && maki !== "marker") {
|
||
|
|
styles[length++] = getIcon(maki);
|
||
|
|
} else if (layer == "poi_label" && resolution <= 9.554628535647032 && scalerank == 2 && maki !== "marker") {
|
||
|
|
styles[length++] = getIcon(maki);
|
||
|
|
} else if (layer == "poi_label" && resolution <= 4.777314267823516 && scalerank == 3 && maki !== "marker") {
|
||
|
|
styles[length++] = getIcon(maki);
|
||
|
|
} else if (layer == "poi_label" && resolution <= 2.388657133911758 && scalerank == 4 && maki !== "marker") {
|
||
|
|
styles[length++] = getIcon(maki);
|
||
|
|
} else if (layer == "poi_label" && resolution <= 1.194328566955879 && scalerank >= 5 && maki !== "marker") {
|
||
|
|
styles[length++] = getIcon(maki);
|
||
|
|
}
|
||
|
|
styles.length = length;
|
||
|
|
return styles;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//对外接口
|
||
|
|
window.mars3d.MapboxStreetsV6 = MapboxStreetsV6;
|
||
|
|
})(window);
|