Author: jng
Date: 2019-09-23 23:58:54 -0700 (Mon, 23 Sep 2019)
New Revision: 9624
Modified:
sandbox/jng/mvt_alt/Doc/samples/ol2samples/mvt/index.html
Log:
Update MVT sample to apply style (ripped from mapguide-rest equivalent example)
Modified: sandbox/jng/mvt_alt/Doc/samples/ol2samples/mvt/index.html
===================================================================
--- sandbox/jng/mvt_alt/Doc/samples/ol2samples/mvt/index.html 2019-09-24 05:14:46 UTC (rev 9623)
+++ sandbox/jng/mvt_alt/Doc/samples/ol2samples/mvt/index.html 2019-09-24 06:58:54 UTC (rev 9624)
@@ -31,6 +31,258 @@
//This sample is assumed to be hosted at http://servername/mapguide/ol2samples/xyz/index_ol.html
var mapAgentUrl = "../../mapagent/mapagent.fcgi";
+ var layerStyleCache = {};
+ function styleFunc(feature, resolution) {
+ //These styles have been painfully hand written from what's specified in the Layer Definitions
+ //
+ //Wouldn't it be nice if there was a way to translate these styles automatically? ;-)
+ var layer = feature.get("layer");
+ var sort_key = feature.get("_displayIndex");
+ var styleName = "default";
+ if (layer == "Parcels") {
+ styleName = "parcel_" + feature.get("RTYPE");
+ } else if (layer == "CityLimits") {
+ styleName = "citylimits_" + (resolution <= 4.5) ? "low" : "high";
+ } else if (layer == "Districts") {
+ styleName = "districts_" + feature.get("ID");
+ }
+ var styleKey = layer + "/" + styleName + "/" + sort_key;
+ var styleArray = layerStyleCache[styleKey];
+ if (!styleArray) {
+ if (layer == "Districts") {
+ styleArray = [
+ new ol.style.Style({
+ stroke: new ol.style.Stroke({
+ color: '#A68B53',
+ width: 1
+ }),
+ text: new ol.style.Text({
+ font: 'normal 11pt Verdana',
+ text: 'District: ' + feature.get("ID"),
+ fillColor: new ol.style.Fill({ color: '#625231' }),
+ stroke: new ol.style.Stroke({ color: '#625231', width: 0.5 })
+ }),
+ zIndex: sort_key
+ })
+ ];
+ } else if (layer == "Buildings") {
+ styleArray = [
+ new ol.style.Style({
+ stroke: new ol.style.Stroke({
+ color: '#DDDDDD',
+ width: 1
+ }),
+ fill: new ol.style.Fill({
+ color: '#808080'
+ }),
+ zIndex: sort_key
+ })
+ ];
+ } else if (layer == "Parcels") {
+ var type = feature.get("RTYPE");
+ if (type == "AGR") {
+ styleArray = [
+ new ol.style.Style({
+ stroke: new ol.style.Stroke({
+ color: '#808080',
+ width: 1
+ }),
+ fill: new ol.style.Fill({
+ color: '#C19E6A'
+ }),
+ zIndex: sort_key
+ })
+ ];
+ } else if (type == "EXM") {
+ styleArray = [
+ new ol.style.Style({
+ stroke: new ol.style.Stroke({
+ color: '#808080',
+ width: 1
+ }),
+ fill: new ol.style.Fill({
+ color: '#B9A670'
+ }),
+ zIndex: sort_key
+ })
+ ];
+ } else if (type == "MER") {
+ styleArray = [
+ new ol.style.Style({
+ stroke: new ol.style.Stroke({
+ color: '#808080',
+ width: 1
+ }),
+ fill: new ol.style.Fill({
+ color: '#B2AE77'
+ }),
+ zIndex: sort_key
+ })
+ ];
+ } else if (type == "MFG") {
+ styleArray = [
+ new ol.style.Style({
+ stroke: new ol.style.Stroke({
+ color: '#808080',
+ width: 1
+ }),
+ fill: new ol.style.Fill({
+ color: '#ABB67E'
+ }),
+ zIndex: sort_key
+ })
+ ];
+ } else if (type == "RES") {
+ styleArray = [
+ new ol.style.Style({
+ stroke: new ol.style.Stroke({
+ color: '#808080',
+ width: 1
+ }),
+ fill: new ol.style.Fill({
+ color: '#A4BE85'
+ }),
+ zIndex: sort_key
+ })
+ ];
+ } else if (type == "S&W") {
+ styleArray = [
+ new ol.style.Style({
+ stroke: new ol.style.Stroke({
+ color: '#808080',
+ width: 1
+ }),
+ fill: new ol.style.Fill({
+ color: '#9DC68C'
+ }),
+ zIndex: sort_key
+ })
+ ];
+ } else if (type == "WTC") {
+ styleArray = [
+ new ol.style.Style({
+ stroke: new ol.style.Stroke({
+ color: '#ABC7E9',
+ width: 1
+ }),
+ fill: new ol.style.Fill({
+ color: '#96CE93'
+ }),
+ zIndex: sort_key
+ })
+ ];
+ } else { //Other
+ styleArray = [
+ new ol.style.Style({
+ stroke: new ol.style.Stroke({
+ color: '#000',
+ width: 1
+ }),
+ fill: new ol.style.Fill({
+ color: '#D4D4D4'
+ }),
+ zIndex: sort_key
+ })
+ ];
+ }
+ } else if (layer == "CityLimits") {
+ if (resolution <= 4.5) {
+ styleArray = [
+ new ol.style.Style({
+ stroke: new ol.style.Stroke({
+ color: '#C0C0C0',
+ width: 1
+ }),
+ fill: new ol.style.Fill({
+ color: '#C0C0C0'
+ }),
+ zIndex: sort_key
+ })
+ ];
+ } else {
+ styleArray = [
+ new ol.style.Style({
+ stroke: new ol.style.Stroke({
+ color: '#D5C8AC',
+ width: 1
+ }),
+ fill: new ol.style.Fill({
+ color: '#D5C8AC'
+ }),
+ zIndex: sort_key
+ })
+ ];
+ }
+ } else if (layer == "Hydrography") {
+ styleArray = [
+ new ol.style.Style({
+ stroke: new ol.style.Stroke({
+ color: '#ABC7E9',
+ width: 1
+ }),
+ fill: new ol.style.Fill({
+ color: '#ABC7E9'
+ }),
+ zIndex: sort_key
+ })
+ ];
+ } else if (layer == "Islands") {
+ styleArray = [
+ new ol.style.Style({
+ stroke: new ol.style.Stroke({
+ color: '#D5C8AC',
+ width: 1
+ }),
+ fill: new ol.style.Fill({
+ color: '#D5C8AC'
+ }),
+ zIndex: sort_key
+ })
+ ];
+ } else if (layer == "Roads") {
+ styleArray = [
+ new ol.style.Style({
+ text: new ol.style.Text({
+ font: 'bold 11px "Open Sans", "Arial Unicode MS", "sans-serif"',
+ placement: 'line',
+ fill: new ol.style.Fill({
+ color: 'white'
+ }),
+ text: feature.get("NAME")
+ }),
+ stroke: new ol.style.Stroke({
+ color: '#646464',
+ width: 1.5
+ }),
+ zIndex: sort_key
+ })
+ ];
+ } else if (layer == "Tracks") {
+ styleArray = [
+ new ol.style.Style({
+ stroke: new ol.style.Stroke({
+ color: '#808080',
+ width: 1.5
+ }),
+ zIndex: sort_key
+ })
+ ];
+ } else {
+ styleArray = [new ol.style.Style({
+ stroke: new ol.style.Stroke({
+ color: '#000',
+ width: 1
+ }),
+ zIndex: sort_key
+ })];
+ }
+ if (styleArray) {
+ layerStyleCache[styleKey] = styleArray;
+ }
+ }
+ return styleArray;
+ }
+
$(document).ready(function () {
//NOTE: Your map definition can be in any coordinate system as long as it it transformable to LL84
//
@@ -53,11 +305,15 @@
new ol.layer.VectorTile({
declutter: true,
source: new ol.source.VectorTile({
- format: new ol.format.MVT(),
+ format: new ol.format.MVT({
+ // This is needed for us to support labelling: https://github.com/openlayers/openlayers/issues/5758
+ featureClass: ol.Feature
+ }),
tileGrid: ol.tilegrid.createXYZ({ maxZoom: 19, tileSize: [4096, 4096] }),
url: mapAgentUrl + "?OPERATION=GETTILEIMAGE&VERSION=1.2.0&CLIENTAGENT=OpenLayers&USERNAME=Anonymous&MAPDEFINITION=Library://Samples/Sheboygan/TileSets/SheboyganMVT.TileSetDefinition&BASEMAPLAYERGROUPNAME=Base+Layer+Group&TILECOL={y}&TILEROW={x}&SCALEINDEX={z}",
projection: "EPSG:3857"
- })
+ }),
+ style: styleFunc
})/*,
new ol.layer.Tile({
source: new ol.source.TileDebug({