├── example ├── js │ ├── drawAreas.js │ ├── imagery-with-labels.js │ ├── high-dpi-maps.js │ ├── KML.js │ ├── cloud-maps-wms.js │ └── WFS.js ├── image │ ├── arrow.png │ ├── clear.png │ ├── end.png │ ├── hotel.png │ ├── line.png │ ├── logo.png │ ├── point.png │ ├── seach.png │ ├── start.png │ ├── DarkMap.png │ ├── ending.png │ ├── favicon.png │ ├── pan_off.png │ ├── pan_on.png │ ├── school.png │ ├── vehicle.png │ ├── HybridMap.png │ ├── LightMap.png │ ├── aqirader.png │ ├── edit-icon.png │ ├── starting.png │ ├── waypoint.png │ ├── find_nearby.PNG │ ├── render_pois.PNG │ ├── Spinner-1s-50px.gif │ ├── map-icons │ │ ├── none.png │ │ ├── power.png │ │ ├── road.png │ │ ├── shop.png │ │ ├── aeroway.png │ │ ├── amenity.png │ │ ├── barrier.png │ │ ├── highway.png │ │ ├── leisure.png │ │ ├── manmade.png │ │ ├── natural.png │ │ ├── others.png │ │ ├── sports.png │ │ ├── tourism.png │ │ ├── boundary.png │ │ ├── building.png │ │ ├── education.png │ │ ├── financial.png │ │ ├── healthcare.png │ │ ├── historic.png │ │ ├── sustenance.png │ │ ├── waterway.png │ │ ├── intersection.png │ │ ├── entertainment.png │ │ └── transportation.png │ ├── place-icons │ │ ├── bar.png │ │ ├── car.png │ │ ├── fuel.png │ │ ├── hotel.png │ │ ├── grocery.png │ │ ├── health.png │ │ ├── school.png │ │ └── restaurant.png │ ├── vector-map-arq.jpg │ ├── vector-map-dark.jpg │ ├── vector-map-gpx.jpg │ ├── vector-map-pie.jpg │ ├── vector-map-wfs.jpg │ ├── apple-touch-icon.png │ ├── directions - Copy.png │ ├── vector-map-aerial.jpg │ ├── vector-map-color.jpg │ ├── vector-map-hybrid.jpg │ ├── vector-map-light.jpg │ ├── vector-map-commute.jpg │ ├── vector-map-contour.jpg │ ├── vector-map-elevation.jpg │ ├── vector-map-heatmap.jpg │ ├── GitHub-Mark-Light-32px.png │ ├── apple-touch-icon-72x72.png │ ├── vector-map-projection.jpg │ ├── vector-map-stylelines.jpg │ ├── vector-map-vectortile.jpg │ ├── apple-touch-icon-114x114.png │ ├── apple-touch-icon-144x144.png │ ├── kmart_logo_200_outline_10.png │ ├── lowes_logo_200_outline_10.png │ ├── macys_logo_200_outline_10.png │ ├── sears_logo_200_outline_10.png │ ├── vector-map-imagerylabel.jpg │ ├── vector-map-stylepolygons.jpg │ ├── lifeway_logo_200_outline_10.png │ ├── precipitation_distribution.png │ ├── family_dollar_logo_200_outline_10.png │ ├── vector-map-transparent-background.jpg │ ├── down.svg │ ├── warning.svg │ ├── top.svg │ └── up.svg ├── lib │ ├── fonts │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 │ └── highlight │ │ └── css │ │ └── github.css ├── data │ ├── ACS_16_5YR_GCT0801.US22PR_with_ann.csv │ ├── America.gml │ ├── America.xsd │ ├── Macys.geojson │ ├── hotels.json │ └── educationLsee.geoJson ├── html │ ├── styling-polygons.html │ ├── KML.html │ ├── styling-lines.html │ ├── labeling-features.html │ ├── imagery-with-labels.html │ ├── satellite-with-labels.html │ ├── high-dpi-maps.html │ ├── heatmap-json.html │ ├── WFS.html │ ├── GPX.html │ ├── WKT.html │ ├── styling-points.html │ ├── heatmap-KML.html │ ├── scatter.html │ ├── cloud-vector-maps.html │ └── radar-map.html └── style │ └── media.css ├── .gitignore ├── debug ├── Readme ├── test.png ├── ball_green.png ├── vectormap-icons │ └── fonteditor │ │ ├── vectormap-icons.eot │ │ ├── vectormap-icons.ttf │ │ ├── vectormap-icons.woff │ │ └── vectormap-icons.woff2 ├── index.html ├── index.js └── mapsuite.css ├── .babelrc ├── angular ├── favicon.ico └── index.html ├── image └── GitHub-Mark-Light-32px.png ├── src ├── worker │ ├── vectorTileLayerThreadMode.ts │ └── workerManager.ts ├── style │ ├── geoBrushType.ts │ ├── brushTypeOptions.ts │ ├── textLabelingStrategy.ts │ └── geoStyleProperty.ts ├── tree │ ├── treeNode.ts │ ├── tree.ts │ └── styleJsonCache.ts ├── filter │ ├── GeoNumberAttributeFilter.ts │ ├── geoZoomFilter.ts │ ├── geoFilterItem.ts │ ├── geoRegexFilter.ts │ ├── geoFilter.ts │ ├── geoStringAttributeFilter.ts │ └── geoRangeFilter.ts ├── geom │ └── flat │ │ └── length.js ├── main.ts ├── format │ ├── tileSourceCache.ts │ └── tilePyramid.ts ├── render │ ├── geoPolygonReplay │ │ ├── defaultshader.js │ │ └── defaultshader │ │ │ └── Locations.js │ ├── geoBackgroundImageReplay │ │ ├── defaultshader.js │ │ └── defaultshader │ │ │ └── Locations.js │ ├── geoTextureReplay │ │ ├── defaultshader.js │ │ └── defaultshader │ │ │ └── Locations.js │ └── geoLineStringReplay │ │ └── defaultshader │ │ └── Locations.js ├── geoVectorTile.ts └── source │ └── GeoVector.js ├── .travis.yml ├── tsconfig.json ├── .github └── ISSUE_TEMPLATE │ ├── feature_request.md │ └── bug_report.md ├── gulpfile.js ├── webpack.config.js ├── package.json ├── Hello World.html ├── tslint.json ├── style └── vectormap.css └── index.html /example/js/drawAreas.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /example/node_modules/ -------------------------------------------------------------------------------- /debug/Readme: -------------------------------------------------------------------------------- 1 | Please put the sampels for debug in this directory. -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015" 4 | ], 5 | "plugins": [] 6 | } -------------------------------------------------------------------------------- /debug/test.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/debug/test.png -------------------------------------------------------------------------------- /angular/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/angular/favicon.ico -------------------------------------------------------------------------------- /debug/ball_green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/debug/ball_green.png -------------------------------------------------------------------------------- /example/image/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/arrow.png -------------------------------------------------------------------------------- /example/image/clear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/clear.png -------------------------------------------------------------------------------- /example/image/end.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/end.png -------------------------------------------------------------------------------- /example/image/hotel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/hotel.png -------------------------------------------------------------------------------- /example/image/line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/line.png -------------------------------------------------------------------------------- /example/image/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/logo.png -------------------------------------------------------------------------------- /example/image/point.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/point.png -------------------------------------------------------------------------------- /example/image/seach.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/seach.png -------------------------------------------------------------------------------- /example/image/start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/start.png -------------------------------------------------------------------------------- /example/image/DarkMap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/DarkMap.png -------------------------------------------------------------------------------- /example/image/ending.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/ending.png -------------------------------------------------------------------------------- /example/image/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/favicon.png -------------------------------------------------------------------------------- /example/image/pan_off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/pan_off.png -------------------------------------------------------------------------------- /example/image/pan_on.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/pan_on.png -------------------------------------------------------------------------------- /example/image/school.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/school.png -------------------------------------------------------------------------------- /example/image/vehicle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/vehicle.png -------------------------------------------------------------------------------- /example/image/HybridMap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/HybridMap.png -------------------------------------------------------------------------------- /example/image/LightMap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/LightMap.png -------------------------------------------------------------------------------- /example/image/aqirader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/aqirader.png -------------------------------------------------------------------------------- /example/image/edit-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/edit-icon.png -------------------------------------------------------------------------------- /example/image/starting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/starting.png -------------------------------------------------------------------------------- /example/image/waypoint.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/waypoint.png -------------------------------------------------------------------------------- /example/image/find_nearby.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/find_nearby.PNG -------------------------------------------------------------------------------- /example/image/render_pois.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/render_pois.PNG -------------------------------------------------------------------------------- /example/image/Spinner-1s-50px.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/Spinner-1s-50px.gif -------------------------------------------------------------------------------- /example/image/map-icons/none.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/map-icons/none.png -------------------------------------------------------------------------------- /example/image/map-icons/power.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/map-icons/power.png -------------------------------------------------------------------------------- /example/image/map-icons/road.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/map-icons/road.png -------------------------------------------------------------------------------- /example/image/map-icons/shop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/map-icons/shop.png -------------------------------------------------------------------------------- /example/image/place-icons/bar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/place-icons/bar.png -------------------------------------------------------------------------------- /example/image/place-icons/car.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/place-icons/car.png -------------------------------------------------------------------------------- /example/image/vector-map-arq.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/vector-map-arq.jpg -------------------------------------------------------------------------------- /example/image/vector-map-dark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/vector-map-dark.jpg -------------------------------------------------------------------------------- /example/image/vector-map-gpx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/vector-map-gpx.jpg -------------------------------------------------------------------------------- /example/image/vector-map-pie.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/vector-map-pie.jpg -------------------------------------------------------------------------------- /example/image/vector-map-wfs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/vector-map-wfs.jpg -------------------------------------------------------------------------------- /example/lib/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/lib/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /image/GitHub-Mark-Light-32px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/image/GitHub-Mark-Light-32px.png -------------------------------------------------------------------------------- /example/image/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/apple-touch-icon.png -------------------------------------------------------------------------------- /example/image/directions - Copy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/directions - Copy.png -------------------------------------------------------------------------------- /example/image/map-icons/aeroway.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/map-icons/aeroway.png -------------------------------------------------------------------------------- /example/image/map-icons/amenity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/map-icons/amenity.png -------------------------------------------------------------------------------- /example/image/map-icons/barrier.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/map-icons/barrier.png -------------------------------------------------------------------------------- /example/image/map-icons/highway.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/map-icons/highway.png -------------------------------------------------------------------------------- /example/image/map-icons/leisure.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/map-icons/leisure.png -------------------------------------------------------------------------------- /example/image/map-icons/manmade.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/map-icons/manmade.png -------------------------------------------------------------------------------- /example/image/map-icons/natural.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/map-icons/natural.png -------------------------------------------------------------------------------- /example/image/map-icons/others.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/map-icons/others.png -------------------------------------------------------------------------------- /example/image/map-icons/sports.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/map-icons/sports.png -------------------------------------------------------------------------------- /example/image/map-icons/tourism.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/map-icons/tourism.png -------------------------------------------------------------------------------- /example/image/place-icons/fuel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/place-icons/fuel.png -------------------------------------------------------------------------------- /example/image/place-icons/hotel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/place-icons/hotel.png -------------------------------------------------------------------------------- /example/image/vector-map-aerial.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/vector-map-aerial.jpg -------------------------------------------------------------------------------- /example/image/vector-map-color.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/vector-map-color.jpg -------------------------------------------------------------------------------- /example/image/vector-map-hybrid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/vector-map-hybrid.jpg -------------------------------------------------------------------------------- /example/image/vector-map-light.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/vector-map-light.jpg -------------------------------------------------------------------------------- /example/image/map-icons/boundary.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/map-icons/boundary.png -------------------------------------------------------------------------------- /example/image/map-icons/building.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/map-icons/building.png -------------------------------------------------------------------------------- /example/image/map-icons/education.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/map-icons/education.png -------------------------------------------------------------------------------- /example/image/map-icons/financial.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/map-icons/financial.png -------------------------------------------------------------------------------- /example/image/map-icons/healthcare.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/map-icons/healthcare.png -------------------------------------------------------------------------------- /example/image/map-icons/historic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/map-icons/historic.png -------------------------------------------------------------------------------- /example/image/map-icons/sustenance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/map-icons/sustenance.png -------------------------------------------------------------------------------- /example/image/map-icons/waterway.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/map-icons/waterway.png -------------------------------------------------------------------------------- /example/image/place-icons/grocery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/place-icons/grocery.png -------------------------------------------------------------------------------- /example/image/place-icons/health.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/place-icons/health.png -------------------------------------------------------------------------------- /example/image/place-icons/school.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/place-icons/school.png -------------------------------------------------------------------------------- /example/image/vector-map-commute.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/vector-map-commute.jpg -------------------------------------------------------------------------------- /example/image/vector-map-contour.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/vector-map-contour.jpg -------------------------------------------------------------------------------- /example/image/vector-map-elevation.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/vector-map-elevation.jpg -------------------------------------------------------------------------------- /example/image/vector-map-heatmap.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/vector-map-heatmap.jpg -------------------------------------------------------------------------------- /example/image/GitHub-Mark-Light-32px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/GitHub-Mark-Light-32px.png -------------------------------------------------------------------------------- /example/image/apple-touch-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/apple-touch-icon-72x72.png -------------------------------------------------------------------------------- /example/image/map-icons/intersection.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/map-icons/intersection.png -------------------------------------------------------------------------------- /example/image/place-icons/restaurant.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/place-icons/restaurant.png -------------------------------------------------------------------------------- /example/image/vector-map-projection.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/vector-map-projection.jpg -------------------------------------------------------------------------------- /example/image/vector-map-stylelines.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/vector-map-stylelines.jpg -------------------------------------------------------------------------------- /example/image/vector-map-vectortile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/vector-map-vectortile.jpg -------------------------------------------------------------------------------- /example/image/apple-touch-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/apple-touch-icon-114x114.png -------------------------------------------------------------------------------- /example/image/apple-touch-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/apple-touch-icon-144x144.png -------------------------------------------------------------------------------- /example/image/kmart_logo_200_outline_10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/kmart_logo_200_outline_10.png -------------------------------------------------------------------------------- /example/image/lowes_logo_200_outline_10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/lowes_logo_200_outline_10.png -------------------------------------------------------------------------------- /example/image/macys_logo_200_outline_10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/macys_logo_200_outline_10.png -------------------------------------------------------------------------------- /example/image/map-icons/entertainment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/map-icons/entertainment.png -------------------------------------------------------------------------------- /example/image/map-icons/transportation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/map-icons/transportation.png -------------------------------------------------------------------------------- /example/image/sears_logo_200_outline_10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/sears_logo_200_outline_10.png -------------------------------------------------------------------------------- /example/image/vector-map-imagerylabel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/vector-map-imagerylabel.jpg -------------------------------------------------------------------------------- /example/image/vector-map-stylepolygons.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/vector-map-stylepolygons.jpg -------------------------------------------------------------------------------- /example/lib/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/lib/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /example/lib/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/lib/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /example/lib/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/lib/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /example/lib/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/lib/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /example/image/lifeway_logo_200_outline_10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/lifeway_logo_200_outline_10.png -------------------------------------------------------------------------------- /example/image/precipitation_distribution.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/precipitation_distribution.png -------------------------------------------------------------------------------- /debug/vectormap-icons/fonteditor/vectormap-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/debug/vectormap-icons/fonteditor/vectormap-icons.eot -------------------------------------------------------------------------------- /debug/vectormap-icons/fonteditor/vectormap-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/debug/vectormap-icons/fonteditor/vectormap-icons.ttf -------------------------------------------------------------------------------- /debug/vectormap-icons/fonteditor/vectormap-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/debug/vectormap-icons/fonteditor/vectormap-icons.woff -------------------------------------------------------------------------------- /example/data/ACS_16_5YR_GCT0801.US22PR_with_ann.csv: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/data/ACS_16_5YR_GCT0801.US22PR_with_ann.csv -------------------------------------------------------------------------------- /example/image/family_dollar_logo_200_outline_10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/family_dollar_logo_200_outline_10.png -------------------------------------------------------------------------------- /example/image/vector-map-transparent-background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/example/image/vector-map-transparent-background.jpg -------------------------------------------------------------------------------- /debug/vectormap-icons/fonteditor/vectormap-icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/HEAD/debug/vectormap-icons/fonteditor/vectormap-icons.woff2 -------------------------------------------------------------------------------- /src/worker/vectorTileLayerThreadMode.ts: -------------------------------------------------------------------------------- 1 | export enum VectorTileLayerThreadMode{ 2 | Default=1, 3 | SingleThread, 4 | SingleBackgroundWorker, 5 | MultiBackgroundWorker 6 | } -------------------------------------------------------------------------------- /src/style/geoBrushType.ts: -------------------------------------------------------------------------------- 1 | export enum GeoBrushType { 2 | GeoSolidBrush = 0, 3 | GeoRadialGradientBrush = 1, 4 | GeoLinearGradientBrush = 2, 5 | GeoHatchBrush = 3, 6 | GeoTextureBrush = 4 7 | } -------------------------------------------------------------------------------- /src/tree/treeNode.ts: -------------------------------------------------------------------------------- 1 | export class TreeNode { 2 | data: T; 3 | children: Array>; 4 | 5 | constructor(data: T) { 6 | this.data = data; 7 | this.children = []; 8 | } 9 | } -------------------------------------------------------------------------------- /src/style/brushTypeOptions.ts: -------------------------------------------------------------------------------- 1 | export interface BrushTypeOptions { 2 | fillColor?: string; 3 | fillOpacity?: number; 4 | radialGradient?: string; 5 | linearGradient?: string; 6 | textureFile: string; 7 | foregroundFill?: string; 8 | hatchStyle?: string; 9 | } -------------------------------------------------------------------------------- /src/filter/GeoNumberAttributeFilter.ts: -------------------------------------------------------------------------------- 1 | import { GeoFilterItem } from "./geoFilterItem"; 2 | import { GeoRangeFilter } from "./geoRangeFilter"; 3 | 4 | export class GeoNumberAttributeFilter extends GeoRangeFilter { 5 | constructor(filterItems: GeoFilterItem[]) { 6 | super(filterItems); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: false 3 | node_js: 4 | - "8" 5 | addons: 6 | chrome: stable 7 | env: 8 | - NPM_SCRIPT=test:browserless 9 | matrix: 10 | include: 11 | # Run browser tests only on one Node.js version to save time. 12 | - node_js: "8" 13 | env: NPM_SCRIPT=test:browser 14 | script: 15 | - true 16 | -------------------------------------------------------------------------------- /src/geom/flat/length.js: -------------------------------------------------------------------------------- 1 | export function lineString(flatCoordinates, offset, end, stride, resolution) { 2 | var x1 = flatCoordinates[offset]; 3 | var y1 = flatCoordinates[offset + 1]; 4 | var length = 0; 5 | var i; 6 | for (i = offset + stride; i < end; i += stride) { 7 | var x2 = flatCoordinates[i]; 8 | var y2 = flatCoordinates[i + 1]; 9 | length += (Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)) / resolution); 10 | x1 = x2; 11 | y1 = y2; 12 | } 13 | return length; 14 | }; -------------------------------------------------------------------------------- /src/filter/geoZoomFilter.ts: -------------------------------------------------------------------------------- 1 | import { GeoFilter } from "./geoFilter"; 2 | import { GeoFilterItem } from "./geoFilterItem"; 3 | import { GeoRangeFilter } from "./geoRangeFilter"; 4 | 5 | export class GeoZoomFilter extends GeoRangeFilter { 6 | constructor(filterItems: GeoFilterItem[]) { 7 | super(filterItems); 8 | } 9 | 10 | matchFeatureCore(feature: ol.Feature, zoom: number): boolean { 11 | return this.isInRange(zoom); 12 | } 13 | 14 | replaceVaulesToPbfIndexCore(pbfLayer) { 15 | this.replacedValueToIndex = true; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "module": "es2015", 5 | "target": "es5", 6 | "jsx": "react", 7 | "allowJs": true, 8 | "moduleResolution": "classic", 9 | "types": [ 10 | "openlayers" 11 | ], 12 | "lib": [ 13 | "dom", 14 | "es2015", 15 | "scripthost", 16 | "es2015.promise", 17 | "es2017" 18 | ] 19 | }, 20 | "include": [ 21 | "src/**/*" 22 | ], 23 | "exclude": [ 24 | "node_modules", 25 | "**/*.spec.ts" 26 | ] 27 | } -------------------------------------------------------------------------------- /src/filter/geoFilterItem.ts: -------------------------------------------------------------------------------- 1 | export class GeoFilterItem { 2 | key: string; 3 | operator: string; 4 | value: string; 5 | 6 | constructor(key: string, operator: string, value: string) { 7 | this.key = key; 8 | this.operator = operator; 9 | this.value = value; 10 | } 11 | 12 | static operatorRegex = new RegExp("[<>!=]+", "g"); 13 | public static createFilterItem(filterItemString: string) { 14 | let operator = filterItemString.match(this.operatorRegex)[0]; 15 | let parts = filterItemString.split(operator); 16 | let item = new GeoFilterItem(parts[0], operator, parts[1]); 17 | return item; 18 | } 19 | } -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { VectorTileLayer } from "./layer/vectorTileLayer"; 2 | import { GeoVectorTileSource } from "./source/geoVectorTileSource"; 3 | import { GeoVector as VectorLayer } from "./layer/geoVector"; 4 | import { GeoHeatmap as Heatmap } from "./layer/geoHeatmap"; 5 | import { VectorTileLayerThreadMode } from "./worker/vectorTileLayerThreadMode"; 6 | 7 | ol.thinkgeo = {}; 8 | 9 | ol.thinkgeo["Heatmap"] = Heatmap; 10 | ol.thinkgeo["VectorLayer"] = VectorLayer; 11 | ol.thinkgeo["VectorTileLayer"] = VectorTileLayer; 12 | ol.thinkgeo["VectorTileSource"] = GeoVectorTileSource; 13 | ol.thinkgeo["VectorTileLayerThreadMode"] = VectorTileLayerThreadMode; 14 | 15 | ol.olInit = olInit; 16 | // (window)["ol"] = ol; -------------------------------------------------------------------------------- /example/image/down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/format/tileSourceCache.ts: -------------------------------------------------------------------------------- 1 | import { TilePyramid } from "./tilePyramid"; 2 | 3 | export class TileSourceCache { 4 | featureIndex: number; 5 | tilePyramids: any; 6 | 7 | constructor() { 8 | this.tilePyramids = {}; 9 | this.featureIndex = 0; 10 | } 11 | 12 | addFeature(feature, pbfLayerName, tileCoord, extent) { 13 | if (this.tilePyramids[pbfLayerName] === undefined) { 14 | this.tilePyramids[pbfLayerName] = {}; 15 | } 16 | if (this.tilePyramids[pbfLayerName][tileCoord] === undefined) { 17 | this.tilePyramids[pbfLayerName][tileCoord] = new TilePyramid(tileCoord, extent); 18 | } 19 | this.tilePyramids[pbfLayerName][tileCoord].add(feature, tileCoord); 20 | } 21 | } -------------------------------------------------------------------------------- /example/data/America.gml: -------------------------------------------------------------------------------- 1 | 2 | 7 | missing 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var clean = require('gulp-clean'); 3 | var runSequence = require('run-sequence'); 4 | var ts = require("gulp-typescript"); 5 | var gulpWebpack = require('webpack-stream'); 6 | var webpack = require('webpack'); 7 | 8 | gulp.task('clean:dist', function (done) { 9 | return gulp.src('dist', { 10 | read: false 11 | }).pipe(clean()); 12 | }); 13 | 14 | gulp.task('bundle:src', function (callback) { 15 | //fix cannot find ts-loader issue, see https://github.com/webpack/webpack/issues/2411 for details 16 | delete global.System; 17 | 18 | return gulp.src('src/main.ts') 19 | .pipe(gulpWebpack(require('./webpack.config.js'), webpack)) 20 | .pipe(gulp.dest('dist/')).pipe(gulp.dest('examples/worldstreets/dist')); 21 | }); 22 | 23 | gulp.task('build', function () { 24 | runSequence('bundle:src', function () { 25 | console.log('build finished..'); 26 | }); 27 | }); -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | devtool: 'inline-source-map', 5 | entry: { 6 | 'ol.mapsuite': './src/main.ts' 7 | }, 8 | output: { 9 | filename: '[name].js', 10 | path: path.resolve(__dirname, 'dist') 11 | }, 12 | module: { 13 | rules: [ 14 | { 15 | test: /\.js$/, 16 | exclude: /node_modules/, 17 | loader: "babel-loader" 18 | }, 19 | { 20 | test: /\.tsx?$/, 21 | use: 'ts-loader', 22 | exclude: /node_modules/ 23 | } 24 | ] 25 | }, 26 | resolve: { 27 | extensions: ['.tsx', '.ts', '.js'] 28 | }, 29 | devServer: { 30 | openPage: "./debug", 31 | publicPath: '/debug/dist', 32 | compress: true, 33 | port: 8080 34 | }, 35 | mode: 'development' 36 | }; -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /example/image/warning.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/filter/geoRegexFilter.ts: -------------------------------------------------------------------------------- 1 | import { GeoFilter } from "./geoFilter"; 2 | import { GeoFilterItem } from "./geoFilterItem"; 3 | 4 | export class GeoRegexFilter extends GeoFilter { 5 | regex: RegExp; 6 | 7 | constructor(filterItems: GeoFilterItem[]) { 8 | super(filterItems); 9 | } 10 | 11 | initializeCore() { 12 | let value = this.filterItems[0].value; 13 | value = value.slice(2, value.length - 1); 14 | this.regex = new RegExp(value, "g"); 15 | 16 | this.key = this.filterItems[0].key; 17 | } 18 | 19 | matchFeatureCore(feature: any, zoom: number): boolean { 20 | let currentValue; 21 | if (this.replacedValueToIndex) { 22 | currentValue = feature.properties[this.key]; 23 | } 24 | else { 25 | currentValue = feature.properties[this.key]; 26 | } 27 | 28 | if (!currentValue) { 29 | return false; 30 | } 31 | 32 | return currentValue.toString().match(this.regex) !== null; 33 | } 34 | 35 | replaceVaulesToPbfIndexCore(pbfLayer) { 36 | this.replacedValueToIndex = true; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/render/geoPolygonReplay/defaultshader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @module ol/render/webgl/polygonreplay/defaultshader 3 | */ 4 | // This file is automatically generated, do not edit. 5 | // Run `make shaders` to generate, and commit the result. 6 | 7 | export var fragment = new ol.webgl.Fragment(ol.DEBUG_WEBGL ? 8 | 'precision mediump float;\n\n\n\nuniform vec4 u_color;\nuniform float u_opacity;\n\nvoid main(void) {\n gl_FragColor = u_color;\n float alpha = u_color.a * u_opacity;\n if (alpha == 0.0) {\n discard;\n }\n gl_FragColor.a = alpha;\n}\n' : 9 | 'precision mediump float;uniform vec4 e;uniform float f;void main(void){gl_FragColor=e;float alpha=e.a*f;if(alpha==0.0){discard;}gl_FragColor.a=alpha;}'); 10 | 11 | export var vertex = new ol.webgl.Vertex(ol.DEBUG_WEBGL ? 12 | '\n\nattribute vec2 a_position;\n\nuniform mat4 u_projectionMatrix;\nuniform float u_zIndex;\nuniform mat4 u_offsetScaleMatrix;\nuniform mat4 u_offsetRotateMatrix;\n\nvoid main(void) {\n gl_Position = u_projectionMatrix * vec4(a_position, u_zIndex, 1.0);\n}\n\n\n' : 13 | 'attribute vec2 a;uniform mat4 b;uniform mat4 c;uniform mat4 d;void main(void){gl_Position=b*vec4(a,0.0,1.0);}'); -------------------------------------------------------------------------------- /example/data/America.xsd: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/filter/geoFilter.ts: -------------------------------------------------------------------------------- 1 | import { GeoFilterItem } from "./geoFilterItem"; 2 | 3 | export abstract class GeoFilter { 4 | public initialized: boolean; 5 | public filterItems: GeoFilterItem[]; 6 | public replacedValueToIndex: boolean; 7 | 8 | public key: any; 9 | public keyIndex: number; 10 | 11 | constructor(filterItems: GeoFilterItem[]) { 12 | this.filterItems = filterItems || []; 13 | this.replacedValueToIndex = false; 14 | } 15 | 16 | addFilterItem(filterItem: GeoFilterItem) { 17 | this.filterItems.push(filterItem); 18 | } 19 | 20 | initialize() { 21 | this.initializeCore(); 22 | this.initialized = true; 23 | } 24 | 25 | initializeCore() { } 26 | 27 | matchOLFeature(feature: ol.Feature, zoom: number): boolean { 28 | if (!this.initialized) { 29 | this.initialize(); 30 | } 31 | return this.matchFeatureCore(feature, zoom); 32 | } 33 | 34 | replaceVaulesToPbfIndex(pbfLayer: any) { 35 | this.replaceVaulesToPbfIndexCore(pbfLayer); 36 | } 37 | 38 | abstract matchFeatureCore(feature: ol.Feature, zoom: number): boolean; 39 | abstract replaceVaulesToPbfIndexCore(pbfLayer: any); 40 | } -------------------------------------------------------------------------------- /src/tree/tree.ts: -------------------------------------------------------------------------------- 1 | import { TreeNode } from "./treeNode"; 2 | 3 | export class Tree { 4 | node: TreeNode; 5 | root: TreeNode; 6 | treeIndex: number; 7 | 8 | constructor(node: TreeNode, treeIndex) { 9 | this.node = node; 10 | this.root = node; 11 | this.treeIndex = treeIndex; 12 | } 13 | 14 | traverseNode(callback, select) { 15 | (function recurse(currentNode) { 16 | 17 | if (callback(currentNode)) { 18 | if (currentNode.children.length > 0) { 19 | for (let i = 0, length = currentNode.children.length; i < length; i++) { 20 | if (recurse(currentNode.children[i])) { 21 | continue; 22 | } 23 | } 24 | } 25 | else { 26 | // current node is matched, and without children 27 | select(currentNode); 28 | } 29 | 30 | // true: the currentNode is matched. 31 | return true; 32 | } 33 | // false: the currentNode is not matched. 34 | return false; 35 | })(this.root); 36 | } 37 | } -------------------------------------------------------------------------------- /example/image/top.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/image/up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ol.mapsuite", 3 | "version": "3.0.0", 4 | "description": "The project of StyleJson for Openlayers", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack --config webpack.config.js", 8 | "test": "echo \"Error: no test specified\" && exit 1", 9 | "dev": "gulp build&lite-server -c lite-server-config.json", 10 | "server": "webpack-dev-server --open" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://gitlab.thinkgeo.com/MapSuite/StyleJsonForOpenLayers.git" 15 | }, 16 | "author": "", 17 | "license": "ISC", 18 | "devDependencies": { 19 | "@types/openlayers": "^4.3.12", 20 | "babel-core": "^6.26.3", 21 | "babel-loader": "^7.1.5", 22 | "babel-plugin-transform-class-properties": "^6.24.1", 23 | "babel-preset-env": "^1.7.0", 24 | "babel-preset-es2015": "^6.24.1", 25 | "babel-preset-stage-0": "^6.24.1", 26 | "babelify": "^10.0.0", 27 | "clean-webpack-plugin": "^0.1.19", 28 | "gulp": "^4.0.1", 29 | "gulp-clean": "^0.4.0", 30 | "gulp-typescript": "^4.0.0-alpha.1", 31 | "run-sequence": "^2.2.1", 32 | "ts-loader": "^4.5.0", 33 | "tslint": "^5.9.1", 34 | "typescript": "^3.0.1", 35 | "webpack": "^4.30.0", 36 | "webpack-cli": "^3.3.1", 37 | "webpack-dev-server": "^3.3.1", 38 | "webpack-stream": "^4.0.0" 39 | }, 40 | "dependencies": { 41 | "cryptiles": "^4.1.2", 42 | "hawk": "^7.0.7", 43 | "hoek": "^6.1.3", 44 | "lite-server": "^2.5.3", 45 | "openlayers": "^4.6.5" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/render/geoBackgroundImageReplay/defaultshader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @module ol/render/webgl/geoBackgroundImageReplay/defaultshader 3 | */ 4 | // This file is automatically generated, do not edit. 5 | // Run `make shaders` to generate, and commit the result. 6 | 7 | export var fragment = new ol.webgl.Fragment(ol.DEBUG_WEBGL ? 8 | `precision mediump float; 9 | 10 | varying vec2 v_texCoord; 11 | uniform float u_opacity; 12 | uniform sampler2D u_image; 13 | 14 | void main(void) { 15 | vec4 texColor = texture2D(u_image, v_texCoord); 16 | gl_FragColor.rgb = texColor.rgb; 17 | float alpha = texColor.a * u_opacity; 18 | if (alpha == 0.0) { 19 | discard; 20 | } 21 | gl_FragColor.a = alpha; 22 | }` : 'precision mediump float;uniform vec4 e;uniform float f;void main(void){gl_FragColor=e;float alpha=e.a*f;if(alpha==0.0){discard;}gl_FragColor.a=alpha;}'); 23 | 24 | export var vertex = new ol.webgl.Vertex(ol.DEBUG_WEBGL ? 25 | `attribute vec2 a_position; 26 | uniform mat4 u_projectionMatrix; 27 | uniform mat4 u_projectionTexCoordMatrix; 28 | uniform mat4 u_offsetScaleMatrix; 29 | uniform mat4 u_offsetRotateMatrix; 30 | uniform float u_zIndex; 31 | varying vec4 texCoord; 32 | varying vec2 v_texCoord; 33 | 34 | void main(void) { 35 | gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0); 36 | texCoord = u_projectionTexCoordMatrix * vec4(a_position, 0.0, 1.0); 37 | v_texCoord = vec2(texCoord.x, 1.0 - texCoord.y); 38 | }` : 'attribute vec2 a;uniform mat4 b;uniform mat4 c;uniform mat4 d;void main(void){gl_Position=b*vec4(a,0.0,1.0);}'); -------------------------------------------------------------------------------- /Hello World.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vector World Map 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 25 | 26 | 27 | 28 |
29 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /example/html/styling-polygons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Style Polygons from GeoJSON 9 | 10 | 11 | 12 | 13 | 14 | 42 | 43 | 44 | 45 |
46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /src/render/geoPolygonReplay/defaultshader/Locations.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @module ol/render/webgl/polygonreplay/defaultshader/Locations 3 | */ 4 | // This file is automatically generated, do not edit 5 | // Run `make shaders` to generate, and commit the result. 6 | 7 | /** 8 | * @constructor 9 | * @param {WebGLRenderingContext} gl GL. 10 | * @param {WebGLProgram} program Program. 11 | * @struct 12 | */ 13 | export var Locations = function(gl, program) { 14 | /** 15 | * @type {WebGLUniformLocation} 16 | */ 17 | this.u_projectionMatrix = gl.getUniformLocation( 18 | program, ol.DEBUG_WEBGL ? 'u_projectionMatrix' : 'b'); 19 | 20 | /** 21 | * @type {WebGLUniformLocation} 22 | */ 23 | this.u_offsetScaleMatrix = gl.getUniformLocation( 24 | program, ol.DEBUG_WEBGL ? 'u_offsetScaleMatrix' : 'c'); 25 | 26 | /** 27 | * @type {WebGLUniformLocation} 28 | */ 29 | this.u_offsetRotateMatrix = gl.getUniformLocation( 30 | program, ol.DEBUG_WEBGL ? 'u_offsetRotateMatrix' : 'd'); 31 | 32 | /** 33 | * @type {WebGLUniformLocation} 34 | */ 35 | this.u_color = gl.getUniformLocation( 36 | program, ol.DEBUG_WEBGL ? 'u_color' : 'e'); 37 | 38 | /** 39 | * @type {WebGLUniformLocation} 40 | */ 41 | this.u_opacity = gl.getUniformLocation( 42 | program, ol.DEBUG_WEBGL ? 'u_opacity' : 'f'); 43 | 44 | /** 45 | * @type {WebGLUniformLocation} 46 | */ 47 | this.u_zIndex = gl.getUniformLocation( 48 | program, ol.DEBUG_WEBGL ? 'u_zIndex' : 'g'); 49 | 50 | /** 51 | * @type {number} 52 | */ 53 | this.a_position = gl.getAttribLocation( 54 | program, ol.DEBUG_WEBGL ? 'a_position' : 'a'); 55 | }; 56 | 57 | export default Locations; 58 | -------------------------------------------------------------------------------- /example/lib/highlight/css/github.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | github.com style (c) Vasily Polovnyov 4 | 5 | */ 6 | 7 | .hljs { 8 | display: block; 9 | overflow-x: auto; 10 | padding: 0.5em; 11 | color: #333; 12 | background: #f8f8f8; 13 | } 14 | 15 | .hljs-comment, 16 | .hljs-quote { 17 | color: #998; 18 | font-style: italic; 19 | } 20 | 21 | .hljs-keyword, 22 | .hljs-selector-tag, 23 | .hljs-subst { 24 | color: #333; 25 | font-weight: bold; 26 | } 27 | 28 | .hljs-number, 29 | .hljs-literal, 30 | .hljs-variable, 31 | .hljs-template-variable, 32 | .hljs-tag .hljs-attr { 33 | color: #008080; 34 | } 35 | 36 | .hljs-string, 37 | .hljs-doctag { 38 | color: #d14; 39 | } 40 | 41 | .hljs-title, 42 | .hljs-section, 43 | .hljs-selector-id { 44 | color: #900; 45 | font-weight: bold; 46 | } 47 | 48 | .hljs-subst { 49 | font-weight: normal; 50 | } 51 | 52 | .hljs-type, 53 | .hljs-class .hljs-title { 54 | color: #458; 55 | font-weight: bold; 56 | } 57 | 58 | .hljs-tag, 59 | .hljs-name, 60 | .hljs-attribute { 61 | color: #000080; 62 | font-weight: normal; 63 | } 64 | 65 | .hljs-regexp, 66 | .hljs-link { 67 | color: #009926; 68 | } 69 | 70 | .hljs-symbol, 71 | .hljs-bullet { 72 | color: #990073; 73 | } 74 | 75 | .hljs-built_in, 76 | .hljs-builtin-name { 77 | color: #0086b3; 78 | } 79 | 80 | .hljs-meta { 81 | color: #999; 82 | font-weight: bold; 83 | } 84 | 85 | .hljs-deletion { 86 | background: #fdd; 87 | } 88 | 89 | .hljs-addition { 90 | background: #dfd; 91 | } 92 | 93 | .hljs-emphasis { 94 | font-style: italic; 95 | } 96 | 97 | .hljs-strong { 98 | font-weight: bold; 99 | } 100 | -------------------------------------------------------------------------------- /example/html/KML.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Style Polygons from KML 9 | 10 | 11 | 12 | 13 | 14 | 42 | 43 | 44 | 45 | 46 |
47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /example/html/styling-lines.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Style Lines from GeoJSON 9 | 10 | 11 | 12 | 13 | 14 | 41 | 42 | 43 | 44 | 45 |
46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /src/geoVectorTile.ts: -------------------------------------------------------------------------------- 1 | export class GeoVectorTile extends (ol.VectorTile as { new(tileCoord: ol.TileCoord, state: ol.Tile.State, src: string, format: ol.format.Feature, tileLoadFunction: ol.TileLoadFunctionType): any; }) { 2 | 3 | instructs: any; 4 | 5 | constructor(tileCoord: ol.TileCoord, state: ol.Tile.State, src: string, format: ol.format.Feature, tileLoadFunction: ol.TileLoadFunctionType) { 6 | super(tileCoord, state, src, format, tileLoadFunction); 7 | this.disposeInternal = this.disposeInternalCustom; 8 | } 9 | 10 | public disposeInternalCustom() { 11 | this.features_ = null; 12 | this.replayGroups_ = {}; 13 | // this.state = ol.TileState.ABORT; 14 | this.state = (ol).TileState.IDLE; 15 | this.changed(); 16 | if (this["xhr"] != undefined) { 17 | this["xhr"].abort(); 18 | } 19 | 20 | if (this.workerId !== undefined) { 21 | var disposeInfo = { 22 | formatId: (ol).getUid(this.getFormat()), 23 | maxDataZoom: this.getFormat().maxDataZoom, 24 | tileCoord: this.tileCoord, 25 | requestTileCoord: this.requestTileCoord 26 | } 27 | 28 | this.getFormat().workerManager.postMessage(this.tileCoord + (ol).getUid(disposeInfo), "vectorTileDispose", disposeInfo, null, this.workerId); 29 | } 30 | 31 | (ol.Tile.prototype).disposeInternal.call(this); 32 | } 33 | 34 | public onLoad(dataProjection, extent) { 35 | this.setProjection(dataProjection); 36 | this.setFeatures(); 37 | this.setExtent(extent); 38 | } 39 | 40 | setRenderFeatureInstructs(instructs) { 41 | this.instructs = instructs; 42 | } 43 | 44 | getRenderFeatureInstructs(instructs) { 45 | return this.instructs; 46 | } 47 | } -------------------------------------------------------------------------------- /src/render/geoBackgroundImageReplay/defaultshader/Locations.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @module ol/render/webgl/geoBackgroundImageReplay/defaultshader/Locations 3 | */ 4 | // This file is automatically generated, do not edit 5 | // Run `make shaders` to generate, and commit the result. 6 | 7 | /** 8 | * @constructor 9 | * @param {WebGLRenderingContext} gl GL. 10 | * @param {WebGLProgram} program Program. 11 | * @struct 12 | */ 13 | export var Locations = function(gl, program) { 14 | /** 15 | * @type {WebGLUniformLocation} 16 | */ 17 | this.u_projectionMatrix = gl.getUniformLocation( 18 | program, ol.DEBUG_WEBGL ? 'u_projectionMatrix' : 'b'); 19 | 20 | /** 21 | * @type {WebGLUniformLocation} 22 | */ 23 | this.u_projectionTexCoordMatrix = gl.getUniformLocation( 24 | program, ol.DEBUG_WEBGL ? 'u_projectionTexCoordMatrix' : 'e'); 25 | 26 | /** 27 | * @type {WebGLUniformLocation} 28 | */ 29 | this.u_offsetScaleMatrix = gl.getUniformLocation( 30 | program, ol.DEBUG_WEBGL ? 'u_offsetScaleMatrix' : 'c'); 31 | 32 | /** 33 | * @type {WebGLUniformLocation} 34 | */ 35 | this.u_offsetRotateMatrix = gl.getUniformLocation( 36 | program, ol.DEBUG_WEBGL ? 'u_offsetRotateMatrix' : 'd'); 37 | 38 | /** 39 | * @type {WebGLUniformLocation} 40 | */ 41 | this.u_opacity = gl.getUniformLocation( 42 | program, ol.DEBUG_WEBGL ? 'u_opacity' : 'f'); 43 | 44 | /** 45 | * @type {WebGLUniformLocation} 46 | */ 47 | this.u_zIndex = gl.getUniformLocation( 48 | program, ol.DEBUG_WEBGL ? 'u_zIndex' : 'g'); 49 | 50 | /** 51 | * @type {WebGLUniformLocation} 52 | */ 53 | this.u_image = gl.getUniformLocation( 54 | program, ol.DEBUG_WEBGL ? 'u_image' : 'h'); 55 | 56 | /** 57 | * @type {number} 58 | */ 59 | this.a_position = gl.getAttribLocation( 60 | program, ol.DEBUG_WEBGL ? 'a_position' : 'a'); 61 | }; 62 | 63 | export default Locations; 64 | -------------------------------------------------------------------------------- /src/render/geoTextureReplay/defaultshader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @module ol/render/webgl/polygonreplay/defaultshader 3 | */ 4 | // This file is automatically generated, do not edit. 5 | // Run `make shaders` to generate, and commit the result. 6 | 7 | export var fragment = new ol.webgl.Fragment(ol.DEBUG_WEBGL ? 8 | 'precision mediump float;\nvarying vec2 v_texCoord;\nvarying float v_opacity;\n\nuniform float u_opacity;\nuniform sampler2D u_image;\n\nvoid main(void) {\n vec4 texColor = texture2D(u_image, v_texCoord);\n gl_FragColor.rgb = texColor.rgb;\n float alpha = texColor.a * v_opacity * u_opacity;\n if (alpha == 0.0) {\n discard;\n }\n gl_FragColor.a = alpha;\n}\n' : 9 | 'precision mediump float;varying vec2 a;varying float b;uniform float k;uniform sampler2D l;void main(void){vec4 texColor=texture2D(l,a);gl_FragColor.rgb=texColor.rgb;float alpha=texColor.a*b*k;if(alpha==0.0){discard;}gl_FragColor.a=alpha;}'); 10 | 11 | export var vertex = new ol.webgl.Vertex(ol.DEBUG_WEBGL ? 12 | 'varying vec2 v_texCoord;\nvarying float v_opacity;\n\nattribute vec2 a_position;\nattribute vec2 a_texCoord;\nattribute vec2 a_offsets;\nattribute float a_opacity;\nattribute float a_rotateWithView;\n\nuniform mat4 u_projectionMatrix;\nuniform float u_zIndex;\nuniform mat4 u_offsetScaleMatrix;\nuniform mat4 u_offsetRotateMatrix;\n\nvoid main(void) {\n mat4 offsetMatrix = u_offsetScaleMatrix;\n if (a_rotateWithView == 1.0) {\n offsetMatrix = u_offsetScaleMatrix * u_offsetRotateMatrix;\n }\n vec4 offsets = offsetMatrix * vec4(a_offsets, 0.0, 0.0);\n gl_Position = u_projectionMatrix * vec4(a_position, u_zIndex, 1.0) + offsets;\n v_texCoord = a_texCoord;\n v_opacity = a_opacity;\n}\n\n\n' : 13 | 'varying vec2 a;varying float b;attribute vec2 c;attribute vec2 d;attribute vec2 e;attribute float f;attribute float g;uniform mat4 h;uniform mat4 i;uniform mat4 j;void main(void){mat4 offsetMatrix=i;if(g==1.0){offsetMatrix=i*j;}vec4 offsets=offsetMatrix*vec4(e,0.0,0.0);gl_Position=h*vec4(c,0.0,1.0)+offsets;a=d;b=f;}'); 14 | -------------------------------------------------------------------------------- /example/html/labeling-features.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Label Features 9 | 10 | 11 | 12 | 13 | 14 | 42 | 43 | 44 | 45 | 46 |
47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /example/style/media.css: -------------------------------------------------------------------------------- 1 | @media (max-width: 1100px) { 2 | .navbar-nav { 3 | display: none; 4 | } 5 | } 6 | 7 | @media (max-width: 767px) { 8 | body { 9 | padding-top: 48px; 10 | } 11 | 12 | .navbar { 13 | height: 48px; 14 | } 15 | 16 | .navbar-brand { 17 | height: 48px; 18 | width: 48px; 19 | background-size: 48px; 20 | } 21 | 22 | .navbar-text h4 { 23 | font-size: 1.4rem; 24 | margin-bottom: 0; 25 | } 26 | 27 | .sidebar { 28 | top: 48px; 29 | width: 100%; 30 | height: 500px; 31 | transition: height 0.1s ease-in-out; 32 | max-height: 80vh; 33 | } 34 | 35 | .main { 36 | padding-left: 0; 37 | padding-top: 5px; 38 | } 39 | 40 | .navbar-text h6 { 41 | display: none; 42 | } 43 | 44 | .navbar-toggler { 45 | display: inline-block; 46 | } 47 | 48 | .collapse:not(.show) { 49 | display: none; 50 | } 51 | 52 | .collapsing { 53 | height: 0px; 54 | } 55 | 56 | .main { 57 | max-height: calc(100vh - 48px); 58 | } 59 | 60 | #child-page-title>p{ 61 | display: none; 62 | } 63 | 64 | .tab-content{ 65 | height: calc(100% - 59px); 66 | } 67 | } 68 | 69 | @media (max-width: 400px){ 70 | .navbar-text h4 { 71 | font-size: 1.15rem; 72 | margin-bottom: 0; 73 | } 74 | 75 | #child-page-title h1{ 76 | font-size: 1.8rem; 77 | } 78 | 79 | .navbar-toggler span{ 80 | font-size: 1rem; 81 | } 82 | 83 | .navbar-toggler{ 84 | margin-right: 0.8rem!important; 85 | padding: 0.25rem 0.5rem; 86 | } 87 | 88 | .navbar-brand{ 89 | margin-right: 0.5rem; 90 | } 91 | } 92 | 93 | @media (max-width: 350px){ 94 | .nav-tabs .nav-link{ 95 | font-size: 1.3rem; 96 | } 97 | .tab-content{ 98 | height: calc(100% - 54px); 99 | } 100 | } -------------------------------------------------------------------------------- /debug/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ThinkGeo Vector Tile Map 6 | 7 | 8 | 9 | 44 | 45 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 |
64 | 
65 |
66 | 67 | 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /angular/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Angular 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /src/render/geoTextureReplay/defaultshader/Locations.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @module ol/render/webgl/polygonreplay/defaultshader/Locations 3 | */ 4 | // This file is automatically generated, do not edit 5 | // Run `make shaders` to generate, and commit the result. 6 | 7 | /** 8 | * @constructor 9 | * @param {WebGLRenderingContext} gl GL. 10 | * @param {WebGLProgram} program Program. 11 | * @struct 12 | */ 13 | export var Locations = function(gl, program) { 14 | /** 15 | * @type {WebGLUniformLocation} 16 | */ 17 | this.u_projectionMatrix = gl.getUniformLocation( 18 | program, ol.DEBUG_WEBGL ? 'u_projectionMatrix' : 'h'); 19 | 20 | /** 21 | * @type {WebGLUniformLocation} 22 | */ 23 | this.u_offsetScaleMatrix = gl.getUniformLocation( 24 | program, ol.DEBUG_WEBGL ? 'u_offsetScaleMatrix' : 'i'); 25 | 26 | /** 27 | * @type {WebGLUniformLocation} 28 | */ 29 | this.u_offsetRotateMatrix = gl.getUniformLocation( 30 | program, ol.DEBUG_WEBGL ? 'u_offsetRotateMatrix' : 'j'); 31 | 32 | /** 33 | * @type {WebGLUniformLocation} 34 | */ 35 | this.u_opacity = gl.getUniformLocation( 36 | program, ol.DEBUG_WEBGL ? 'u_opacity' : 'k'); 37 | 38 | /** 39 | * @type {WebGLUniformLocation} 40 | */ 41 | this.u_image = gl.getUniformLocation( 42 | program, ol.DEBUG_WEBGL ? 'u_image' : 'l'); 43 | 44 | /** 45 | * @type {number} 46 | */ 47 | this.a_position = gl.getAttribLocation( 48 | program, ol.DEBUG_WEBGL ? 'a_position' : 'c'); 49 | 50 | /** 51 | * @type {number} 52 | */ 53 | this.a_texCoord = gl.getAttribLocation( 54 | program, ol.DEBUG_WEBGL ? 'a_texCoord' : 'd'); 55 | 56 | /** 57 | * @type {number} 58 | */ 59 | this.a_offsets = gl.getAttribLocation( 60 | program, ol.DEBUG_WEBGL ? 'a_offsets' : 'e'); 61 | 62 | /** 63 | * @type {number} 64 | */ 65 | this.a_opacity = gl.getAttribLocation( 66 | program, ol.DEBUG_WEBGL ? 'a_opacity' : 'f'); 67 | 68 | /** 69 | * @type {number} 70 | */ 71 | this.a_rotateWithView = gl.getAttribLocation( 72 | program, ol.DEBUG_WEBGL ? 'a_rotateWithView' : 'g'); 73 | /** 74 | * @type {WebGLUniformLocation} 75 | */ 76 | this.u_zIndex = gl.getUniformLocation( 77 | program, ol.DEBUG_WEBGL ? 'u_zIndex' : 'h'); 78 | }; 79 | 80 | export default Locations; 81 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "array-type": [ 4 | true, 5 | "array-simple" 6 | ], 7 | "arrow-parens": true, 8 | "no-var-keyword": true, 9 | "no-unused-variable": [ 10 | true, 11 | { 12 | "ignore-pattern": "^_" 13 | } 14 | ], 15 | "ordered-imports": [ 16 | false, 17 | { 18 | "import-sources-order": "lowercase-last", 19 | "named-imports-order": "lowercase-first" 20 | } 21 | ], 22 | "trailing-comma": [ 23 | false, 24 | { 25 | "multiline": "always", 26 | "singleline": "never" 27 | } 28 | ], 29 | "class-name": true, 30 | "comment-format": [ 31 | true, 32 | "check-space" 33 | ], 34 | "indent": [ 35 | true, 36 | "spaces" 37 | ], 38 | "no-eval": true, 39 | "no-internal-module": true, 40 | "no-trailing-whitespace": true, 41 | "no-unsafe-finally": true, 42 | "one-line": [ 43 | true, 44 | "check-open-brace", 45 | "check-whitespace" 46 | ], 47 | "quotemark": [ 48 | true, 49 | "double" 50 | ], 51 | "semicolon": [ 52 | true, 53 | "always" 54 | ], 55 | "triple-equals": [ 56 | true, 57 | "allow-null-check" 58 | ], 59 | "typedef-whitespace": [ 60 | true, 61 | { 62 | "call-signature": "nospace", 63 | "index-signature": "nospace", 64 | "parameter": "nospace", 65 | "property-declaration": "nospace", 66 | "variable-declaration": "nospace" 67 | } 68 | ], 69 | "variable-name": [ 70 | true, 71 | "ban-keywords" 72 | ], 73 | "whitespace": [ 74 | true, 75 | "check-branch", 76 | "check-decl", 77 | "check-operator", 78 | "check-separator", 79 | "check-type" 80 | ] 81 | }, 82 | "jsRules": { 83 | "triple-equals": [ 84 | true, 85 | "allow-null-check" 86 | ] 87 | }, 88 | "defaultSeverity": "warning" 89 | } -------------------------------------------------------------------------------- /src/filter/geoStringAttributeFilter.ts: -------------------------------------------------------------------------------- 1 | import { GeoFilter } from "./geoFilter"; 2 | import { GeoFilterItem } from "./geoFilterItem"; 3 | 4 | export class GeoStringAttributeFilter extends GeoFilter { 5 | expectedValues: string[]; 6 | expectedValueIndexs: number[]; 7 | 8 | constructor(filterItems: GeoFilterItem[]) { 9 | super(filterItems); 10 | } 11 | 12 | initializeCore() { 13 | let expectedValue = this.filterItems[0].value; 14 | expectedValue = expectedValue.slice(1, expectedValue.length - 1); 15 | this.expectedValues = expectedValue.split(","); 16 | this.key = this.filterItems[0].key; 17 | } 18 | 19 | matchFeatureCore(feature: any, zoom: number): boolean { 20 | let currentValue; 21 | let currentExpectedValues; 22 | if (this.replacedValueToIndex) { 23 | currentValue = feature.propertiesIndex[this.keyIndex]; 24 | currentExpectedValues = this.expectedValueIndexs; 25 | } 26 | else { 27 | if (feature.properties !== undefined) { 28 | currentValue = feature.properties[this.key]; 29 | } 30 | else { 31 | currentValue = feature.get(this.key) 32 | } 33 | // currentValue = feature.properties[this.key]; 34 | currentExpectedValues = this.expectedValues; 35 | } 36 | 37 | switch (this.filterItems[0].operator) { 38 | case "=": 39 | return currentExpectedValues.includes(currentValue); 40 | case "!=": 41 | default: 42 | return !currentExpectedValues.includes(currentValue); 43 | } 44 | } 45 | 46 | replaceVaulesToPbfIndexCore(pbfLayer) { 47 | if (!this.initialized) { 48 | this.initialize(); 49 | } 50 | 51 | this.keyIndex = pbfLayer.keys.indexOf(this.key); 52 | 53 | let replacedExpectedVaules = []; 54 | for (let j = 0, jj = this.expectedValues.length; j < jj; j++) { 55 | let numberValue = +this.expectedValues[j]; 56 | if (isNaN(numberValue)) { 57 | replacedExpectedVaules.push(pbfLayer.values.indexOf(this.expectedValues[j])); 58 | } 59 | else { 60 | replacedExpectedVaules.push(pbfLayer.values.indexOf(numberValue)); 61 | } 62 | } 63 | 64 | this.expectedValueIndexs = replacedExpectedVaules; 65 | this.replacedValueToIndex = true; 66 | } 67 | } -------------------------------------------------------------------------------- /src/style/textLabelingStrategy.ts: -------------------------------------------------------------------------------- 1 | import { GeoTextStyle } from "./geoTextStyle"; 2 | import { coordinate } from "openlayers"; 3 | 4 | export class TextLabelingStrategy { 5 | constructor() { } 6 | 7 | public markLocation(flatCoordinates: any, width: number, height: number, resolution: any, geometryType: any, textStyle: GeoTextStyle, strategyTree: any, frameState: olx.FrameState) { 8 | return this.markLocationCore(flatCoordinates, width, height, resolution, geometryType, textStyle, strategyTree, frameState); 9 | } 10 | 11 | protected markLocationCore(flatCoordinates: any, width: number, height: number, resolution: any, geometryType: any, textStyle: GeoTextStyle, strategyTree: any, frameState: olx.FrameState) { 12 | if (this.isOverlapping(flatCoordinates, width, height, textStyle.margin, textStyle.intervalDistance, textStyle.minPadding, textStyle.spacing, strategyTree, frameState)) { 13 | return undefined; 14 | } else { 15 | return flatCoordinates; 16 | } 17 | } 18 | 19 | public isOverlapping(flatCoordinates: any, width: number, height: number, margin: number, minDistance: number, minPadding: number, spacing: number, strategyTree: any, frameState: olx.FrameState) { 20 | if (flatCoordinates === undefined) { return true; } 21 | 22 | let distance = (margin ? margin : 0) + (minDistance ? minDistance : 0) + (minPadding ? minPadding : 0) + (spacing ? spacing : 0); 23 | 24 | let coordinate = [flatCoordinates[0], flatCoordinates[1]]; 25 | let screenCoordinates = this.convertPixelFromCoordinate(coordinate, frameState); 26 | let minX = screenCoordinates[0] - width / 2 - distance * 0.5; 27 | let minY = screenCoordinates[1] - height / 2 - distance * 0.5; 28 | let maxX = minX + width + distance; 29 | let maxY = minY + height + distance; 30 | let box = { 31 | minX: minX, 32 | minY: minY, 33 | maxX: maxX, 34 | maxY: maxY 35 | } 36 | 37 | if (!strategyTree.collides(box)) { 38 | strategyTree.insert(box); 39 | return false; 40 | } 41 | else { 42 | return true; 43 | } 44 | } 45 | 46 | convertPixelFromCoordinate(coordinate: any, frameState: olx.FrameState) { 47 | if (!frameState) { 48 | return null; 49 | } 50 | 51 | return (ol).transform.apply((frameState).coordinateToPixelTransform, coordinate.slice(0, 2)); 52 | } 53 | } -------------------------------------------------------------------------------- /src/format/tilePyramid.ts: -------------------------------------------------------------------------------- 1 | export class TilePyramid { 2 | tileCoord: any; 3 | extent: any; 4 | features: any; 5 | centerPoint: any; 6 | 7 | tileParamid0: TilePyramid; 8 | tileParamid1: TilePyramid; 9 | tileParamid2: TilePyramid; 10 | tileParamid3: TilePyramid; 11 | 12 | 13 | constructor(tileCoord, extent: any) { 14 | this.extent = extent; 15 | this.features = []; 16 | this.centerPoint = [(this.extent[0] + this.extent[3]) / 2, (this.extent[1] + this.extent[4]) / 2]; 17 | } 18 | 19 | add(feature: any, tileCoord: any) { 20 | this.features.push(feature); 21 | if (tileCoord[0] !== this.tileCoord[0]) { 22 | let featureExtent = feature.getGeometry().getExtent(); 23 | let z = this.tileCoord[0] + 1; 24 | let x = this.tileCoord[1] * 2; 25 | let y = this.tileCoord[2] * 2; 26 | let minX = this.extent[0]; 27 | let minY = this.extent[1]; 28 | let maxX = this.extent[2]; 29 | let maxY = this.extent[3]; 30 | 31 | if (ol.extent.intersects(featureExtent, this.tileParamid0.extent)) { 32 | if (this.tileParamid0 === undefined) { 33 | this.tileParamid0 = new TilePyramid([z, x, y + 1], [minX, minY, this.centerPoint[0], this.centerPoint[1]]); 34 | } 35 | this.tileParamid0.add(feature, tileCoord); 36 | } 37 | if (ol.extent.intersects(featureExtent, this.tileParamid1.extent)) { 38 | if (this.tileParamid1 === undefined) { 39 | this.tileParamid1 = new TilePyramid([z, x + 1, y], [this.centerPoint[0], minY, maxX, this.centerPoint[1]]); 40 | } 41 | this.tileParamid1.add(feature, tileCoord); 42 | } 43 | if (ol.extent.intersects(featureExtent, this.tileParamid2.extent)) { 44 | if (this.tileParamid2 === undefined) { 45 | this.tileParamid2 = new TilePyramid([z, x + 1, y], [this.centerPoint[0], this.centerPoint[1], maxX, maxY]); 46 | } 47 | this.tileParamid2.add(feature, tileCoord); 48 | } 49 | if (ol.extent.intersects(featureExtent, this.tileParamid3.extent)) { 50 | if (this.tileParamid3 === undefined) { 51 | this.tileParamid3 = new TilePyramid([z, x, y], [minX, this.centerPoint[1], this.centerPoint[0], maxY]); 52 | } 53 | this.tileParamid3.add(feature, tileCoord); 54 | } 55 | } 56 | } 57 | } -------------------------------------------------------------------------------- /src/tree/styleJsonCache.ts: -------------------------------------------------------------------------------- 1 | import { StyleJsonCacheItem } from "./styleJsonCacheItem"; 2 | import { Tree } from "./tree"; 3 | import { TreeNode } from "./treeNode"; 4 | import { GeoTextStyle } from "../style/geoTextStyle"; 5 | 6 | export class StyleJsonCache { 7 | private geoStyleGroupByZoom: any[]; 8 | 9 | styleJson: any; 10 | geoStyles: any; 11 | geoTextStyleInfo:any; 12 | 13 | constructor() { 14 | this.geoStyleGroupByZoom = []; 15 | this.styleJson = {}; 16 | this.geoStyles = {}; 17 | this.geoTextStyleInfo = {}; 18 | } 19 | 20 | add(zoom: number, dataLayerName: string, tree: Tree) { 21 | if (this.geoStyleGroupByZoom[zoom] === undefined) { 22 | this.geoStyleGroupByZoom[zoom] = {}; 23 | } 24 | if (this.geoStyleGroupByZoom[zoom] === undefined) { 25 | this.geoStyleGroupByZoom[zoom] = {}; 26 | } 27 | if (this.geoStyleGroupByZoom[zoom][dataLayerName] === undefined) { 28 | this.geoStyleGroupByZoom[zoom][dataLayerName] = []; 29 | } 30 | this.geoStyleGroupByZoom[zoom][dataLayerName].push(tree); 31 | 32 | this.readGeoStyleFromTree(tree); 33 | } 34 | 35 | readGeoStyleFromTree(tree) { 36 | return this.readGeoStyleFromTreeNode(tree.root); 37 | } 38 | 39 | readGeoStyleFromTreeNode(node) { 40 | let result = []; 41 | if (node.data.geoStyle) { 42 | this.geoStyles[node.data.geoStyle.id] = node.data.geoStyle; 43 | // get the widths of GeoTextStyle 44 | if(node.data.geoStyle instanceof GeoTextStyle) 45 | { 46 | this.geoTextStyleInfo[node.data.geoStyle.id]= node.data.geoStyle.charWidths; 47 | } 48 | } 49 | if (node.data.childrenGeoStyles && node.data.childrenGeoStyles.length > 0) { 50 | for (let i = 0; i < node.data.childrenGeoStyles.length; i++) { 51 | this.geoStyles[node.data.childrenGeoStyles[i].id] = node.data.childrenGeoStyles[i]; 52 | if(node.data.childrenGeoStyles[i] instanceof GeoTextStyle) 53 | { 54 | this.geoTextStyleInfo[node.data.childrenGeoStyles[i].id]= node.data.childrenGeoStyles[i]; 55 | } 56 | } 57 | } 58 | if (node.children && node.children.length > 0) { 59 | for (let i = 0; i < node.children.length; i++) { 60 | this.readGeoStyleFromTreeNode(node.children[i]); 61 | } 62 | } 63 | return result; 64 | } 65 | 66 | clear() { 67 | this.geoStyleGroupByZoom.length = 0; 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /src/render/geoLineStringReplay/defaultshader/Locations.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @module ol/render/webgl/linestringreplay/defaultshader/Locations 3 | */ 4 | // This file is automatically generated, do not edit 5 | // Run `make shaders` to generate, and commit the result. 6 | 7 | /** 8 | * @constructor 9 | * @param {WebGLRenderingContext} gl GL. 10 | * @param {WebGLProgram} program Program. 11 | * @struct 12 | */ 13 | export var Locations = function(gl, program) { 14 | /** 15 | * @type {WebGLUniformLocation} 16 | */ 17 | this.u_projectionMatrix = gl.getUniformLocation( 18 | program, ol.DEBUG_WEBGL ? 'u_projectionMatrix' : 'h'); 19 | 20 | /** 21 | * @type {WebGLUniformLocation} 22 | */ 23 | this.u_offsetScaleMatrix = gl.getUniformLocation( 24 | program, ol.DEBUG_WEBGL ? 'u_offsetScaleMatrix' : 'i'); 25 | 26 | /** 27 | * @type {WebGLUniformLocation} 28 | */ 29 | this.u_offsetRotateMatrix = gl.getUniformLocation( 30 | program, ol.DEBUG_WEBGL ? 'u_offsetRotateMatrix' : 'j'); 31 | 32 | /** 33 | * @type {WebGLUniformLocation} 34 | */ 35 | this.u_lineWidth = gl.getUniformLocation( 36 | program, ol.DEBUG_WEBGL ? 'u_lineWidth' : 'k'); 37 | 38 | /** 39 | * @type {WebGLUniformLocation} 40 | */ 41 | this.u_miterLimit = gl.getUniformLocation( 42 | program, ol.DEBUG_WEBGL ? 'u_miterLimit' : 'l'); 43 | 44 | /** 45 | * @type {WebGLUniformLocation} 46 | */ 47 | this.u_opacity = gl.getUniformLocation( 48 | program, ol.DEBUG_WEBGL ? 'u_opacity' : 'm'); 49 | 50 | /** 51 | * @type {WebGLUniformLocation} 52 | */ 53 | this.u_color = gl.getUniformLocation( 54 | program, ol.DEBUG_WEBGL ? 'u_color' : 'n'); 55 | 56 | /** 57 | * @type {WebGLUniformLocation} 58 | */ 59 | this.u_size = gl.getUniformLocation( 60 | program, ol.DEBUG_WEBGL ? 'u_size' : 'o'); 61 | 62 | /** 63 | * @type {WebGLUniformLocation} 64 | */ 65 | this.u_pixelRatio = gl.getUniformLocation( 66 | program, ol.DEBUG_WEBGL ? 'u_pixelRatio' : 'p'); 67 | 68 | /** 69 | * @type {WebGLUniformLocation} 70 | */ 71 | this.u_zIndex = gl.getUniformLocation( 72 | program, ol.DEBUG_WEBGL ? 'u_zIndex' : 'q'); 73 | 74 | /** 75 | * @type {number} 76 | */ 77 | this.a_lastPos = gl.getAttribLocation( 78 | program, ol.DEBUG_WEBGL ? 'a_lastPos' : 'd'); 79 | 80 | /** 81 | * @type {number} 82 | */ 83 | this.a_position = gl.getAttribLocation( 84 | program, ol.DEBUG_WEBGL ? 'a_position' : 'e'); 85 | 86 | /** 87 | * @type {number} 88 | */ 89 | this.a_nextPos = gl.getAttribLocation( 90 | program, ol.DEBUG_WEBGL ? 'a_nextPos' : 'f'); 91 | 92 | /** 93 | * @type {number} 94 | */ 95 | this.a_direction = gl.getAttribLocation( 96 | program, ol.DEBUG_WEBGL ? 'a_direction' : 'g'); 97 | }; 98 | 99 | export default Locations; 100 | -------------------------------------------------------------------------------- /example/data/Macys.geojson: -------------------------------------------------------------------------------- 1 | { 2 | "type": "FeatureCollection", 3 | "features": [{ 4 | "type": "Feature", 5 | "geometry": { 6 | "type": "Point", 7 | "coordinates": [-106.267772, 42.845049] 8 | }, 9 | "properties": { 10 | "input_address": "501 Wyoming Blvd SE, Casper, Wyoming, 82609", 11 | "address": "501 SE Wyoming Blvd", 12 | "name": "Macy's" 13 | } 14 | }, { 15 | "type": "Feature", 16 | "geometry": { 17 | "type": "Point", 18 | "coordinates": [-122.118895, 47.670432] 19 | }, 20 | "properties": { 21 | "input_address": "7400 166th Ave NE, Redmond, Washington, 98052", 22 | "address": "7400 166th Ave NE", 23 | "name": "Macy's" 24 | } 25 | }, { 26 | "type": "Feature", 27 | "geometry": { 28 | "type": "Point", 29 | "coordinates": [-122.031496, 37.376216] 30 | }, 31 | "properties": { 32 | "input_address": "200 W Washington Ave, Sunnyvale, California, 94086", 33 | "address": "200 W Washington Ave", 34 | "name": "Macy's" 35 | } 36 | }, { 37 | "type": "Feature", 38 | "geometry": { 39 | "type": "Point", 40 | "coordinates": [-118.426586, 34.041025] 41 | }, 42 | "properties": { 43 | "input_address": "10800 Pico Blvd, Los Angeles, California, 90064", 44 | "address": "10800 W Pico Blvd", 45 | "name": "Macy's" 46 | } 47 | }, { 48 | "type": "Feature", 49 | "geometry": { 50 | "type": "Point", 51 | "coordinates": [-86.12217, 39.866689] 52 | }, 53 | "properties": { 54 | "input_address": "6101 N Keystone Ave, Indianapolis, Indiana, 46220", 55 | "address": "6101 N Keystone Ave", 56 | "name": "Macy's" 57 | } 58 | }, { 59 | "type": "Feature", 60 | "geometry": { 61 | "type": "Point", 62 | "coordinates": [-71.216129, 41.756377] 63 | }, 64 | "properties": { 65 | "input_address": "Swansea Mall Dr, Swansea, Massachusetts, 02777", 66 | "address": "[1 - 599] Swansea Mall Dr", 67 | "name": "Macy's" 68 | } 69 | }, { 70 | "type": "Feature", 71 | "geometry": { 72 | "type": "Point", 73 | "coordinates": [-77.227048, 38.924369] 74 | }, 75 | "properties": { 76 | "input_address": "1651 International Drive, McLean, Virginia, 22102", 77 | "address": "1651 International Dr", 78 | "name": "Macy's" 79 | } 80 | }, { 81 | "type": "Feature", 82 | "geometry": { 83 | "type": "Point", 84 | "coordinates": [-74.012827, 41.100807] 85 | }, 86 | "properties": { 87 | "input_address": "200 Nanuet Mall S, Nanuet, New York, 10954", 88 | "address": "", 89 | "name": "Macy's" 90 | } 91 | }] 92 | } -------------------------------------------------------------------------------- /example/data/hotels.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "FeatureCollection", 3 | "name": "hotels", 4 | "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::3857" } }, 5 | "features": [ 6 | { "type": "Feature", "properties": { "NAME": "Holiday Inn", "ADDRESS": "3400 Parkwood Blvd", "ROOMS": 121 }, "geometry": { "type": "Point", "coordinates": [ -10777541.426251012831926, 3909686.870596440974623 ] } }, 7 | { "type": "Feature", "properties": { "NAME": "Hilton Garden Inn", "ADDRESS": "7550 Gaylord Pkwy", "ROOMS": 102 }, "geometry": { "type": "Point", "coordinates": [ -10777861.033355308696628, 3908868.868046201765537 ] } }, 8 | { "type": "Feature", "properties": { "NAME": "Sheraton", "ADDRESS": "5444 State Highway 121", "ROOMS": 168 }, "geometry": { "type": "Point", "coordinates": [ -10780293.463213533163071, 3906931.123171238228679 ] } }, 9 | { "type": "Feature", "properties": { "NAME": "Comfort Inn and Suites", "ADDRESS": "4220 Preston Rd", "ROOMS": 61 }, "geometry": { "type": "Point", "coordinates": [ -10776227.478681650012732, 3910471.644798124209046 ] } }, 10 | { "type": "Feature", "properties": { "NAME": "Embassy Suites & Conference Center", "ADDRESS": "7600 John Q. Hammons Dr", "ROOMS": 330 }, "geometry": { "type": "Point", "coordinates": [ -10777729.905757339671254, 3908552.03748497646302 ] } }, 11 | { "type": "Feature", "properties": { "NAME": "Homewood Suites", "ADDRESS": "3240 Parkwood Boulevard", "ROOMS": 117 }, "geometry": { "type": "Point", "coordinates": [ -10777436.038351383060217, 3909448.241397516336292 ] } }, 12 | { "type": "Feature", "properties": { "NAME": "Hampton Inn & Suites", "ADDRESS": "3199 Parkwood Blvd", "ROOMS": 105 }, "geometry": { "type": "Point", "coordinates": [ -10777680.340368119999766, 3909280.856687052175403 ] } }, 13 | { "type": "Feature", "properties": { "NAME": "Home 2 Suites", "ADDRESS": "2000 Parkwood Blvd", "ROOMS": 122 }, "geometry": { "type": "Point", "coordinates": [ -10777440.281492434442043, 3908072.583519847597927 ] } }, 14 | { "type": "Feature", "properties": { "NAME": "Aloft Frisco", "ADDRESS": "3202 Parkwood Dr", "ROOMS": 136 }, "geometry": { "type": "Point", "coordinates": [ -10777444.342694297432899, 3909318.109506818000227 ] } }, 15 | { "type": "Feature", "properties": { "NAME": "Westin", "ADDRESS": "1549 Legacy Dr", "ROOMS": 301 }, "geometry": { "type": "Point", "coordinates": [ -10780339.72832659445703, 3907479.226699104532599 ] } }, 16 | { "type": "Feature", "properties": { "NAME": "Hyatt House", "ADDRESS": "2875 Parkwood Blvd", "ROOMS": 132 }, "geometry": { "type": "Point", "coordinates": [ -10777622.28726071678102, 3908848.358258790336549 ] } }, 17 | { "type": "Feature", "properties": { "NAME": "Omni Hotel", "ADDRESS": "11 Cowboys Way", "ROOMS": 301 }, "geometry": { "type": "Point", "coordinates": [ -10778799.338398022577167, 3909858.74393821042031 ] } }, 18 | { "type": "Feature", "properties": { "NAME": "Drury Inn", "ADDRESS": "2880 Dallas Pkwy", "ROOMS": 176 }, "geometry": { "type": "Point", "coordinates": [ -10778152.840631280094385, 3908760.012845300137997 ] } }, 19 | { "type": "Feature", "properties": { "NAME": "Hotel Indigo", "ADDRESS": "2985 Avenue of the Stars", "ROOMS": 110 }, "geometry": { "type": "Point", "coordinates": [ -10777826.086470302194357, 3908962.539279647637159 ] } } 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /src/worker/workerManager.ts: -------------------------------------------------------------------------------- 1 | import { VectorTileLayerThreadMode } from "./vectorTileLayerThreadMode"; 2 | 3 | export class WorkerManager { 4 | workerCount: number; 5 | workers: Worker[]; 6 | currentWorkerIndex; 7 | 8 | inited: boolean; 9 | workerCallback: any; 10 | 11 | constructor(threadMode, workerCount: number) { 12 | if (threadMode === VectorTileLayerThreadMode.SingleBackgroundWorker) { 13 | this.workerCount = 1; 14 | } 15 | else { 16 | if (isNaN(workerCount) || workerCount <= 0) { 17 | this.workerCount = Math.max(Math.floor(window.navigator.hardwareConcurrency / 2), 1); 18 | } 19 | else { 20 | // passed by parm 21 | this.workerCount = workerCount; 22 | } 23 | } 24 | this.currentWorkerIndex = 0; 25 | this.workers = []; 26 | this.workerCallback = {}; 27 | } 28 | 29 | initWorkers() { 30 | try { 31 | let callbacks = this.workerCallback; 32 | for (let i = 0; i < this.workerCount; i++) { 33 | let source = '(' + ol["olInit"] + ')()'; 34 | let blob = new Blob([source]); 35 | let worker = new Worker(window.URL.createObjectURL(blob)); 36 | worker.onmessage = function (e) { 37 | let methodInfo = e.data["methodInfo"]; 38 | let messageData = e.data["messageData"]; 39 | let uid = methodInfo.uid; 40 | let callback = callbacks[uid]; 41 | if (callback) { 42 | callback(messageData, methodInfo); 43 | } 44 | delete callbacks[uid]; 45 | } 46 | this.workers.push(worker); 47 | } 48 | this.inited = true; 49 | return true; 50 | } 51 | catch (e) { 52 | this.inited = false; 53 | return false; 54 | } 55 | 56 | } 57 | 58 | postMessage(uid: string, methodName: string, messageData, callbackInfo, workerIndex) { 59 | 60 | if (typeof workerIndex !== "number" || isNaN(workerIndex) || workerIndex >= this.workers.length) { 61 | workerIndex = this.currentWorkerIndex = (this.currentWorkerIndex + 1) % this.workers.length; 62 | } 63 | 64 | let methodInfo = { 65 | uid: uid, 66 | methodName: methodName, 67 | workerId: workerIndex 68 | }; 69 | 70 | if (callbackInfo) { 71 | this.workerCallback[uid] = callbackInfo; 72 | } 73 | 74 | if(messageData.requestCoord){ 75 | // debugger; 76 | // console.log(messageData.requestCoord) 77 | } 78 | 79 | let postMessage = { 80 | methodInfo: methodInfo, 81 | messageData: messageData 82 | } 83 | 84 | this.workers[workerIndex].postMessage(postMessage); 85 | return workerIndex; 86 | } 87 | 88 | close() { 89 | this.workerCallback = {}; 90 | for (let index = 0; index < this.workers.length; index++) { 91 | this.workers[index].terminate(); 92 | } 93 | } 94 | } -------------------------------------------------------------------------------- /src/filter/geoRangeFilter.ts: -------------------------------------------------------------------------------- 1 | import { GeoFilter } from "./geoFilter"; 2 | import { GeoFilterItem } from "./geoFilterItem"; 3 | 4 | export abstract class GeoRangeFilter extends GeoFilter { 5 | public ranges: Number[][] = []; 6 | public allowedValues: Number[] = []; 7 | public disallowedValues: Number[] = []; 8 | 9 | constructor(filterItems: GeoFilterItem[]) { 10 | super(filterItems); 11 | } 12 | 13 | initializeCore() { 14 | this.filterItems.sort((a, b) => +a.value - +b.value); 15 | for (let i = 0; i < this.filterItems.length; i++) { 16 | let filterItem = this.filterItems[i]; 17 | this.key = filterItem.key; 18 | let value = +filterItem.value; 19 | switch (filterItem.operator) { 20 | case "!=": 21 | this.disallowedValues.push(value); 22 | break; 23 | case "=": 24 | this.allowedValues.push(value); 25 | break; 26 | } 27 | } 28 | } 29 | 30 | matchFeatureCore(feature: any, zoom: number): boolean { 31 | let currentValue; 32 | if (this.replacedValueToIndex) { 33 | currentValue = feature.getProperties()[this.key]; 34 | } 35 | else { 36 | currentValue = feature.getProperties()[this.key]; 37 | } 38 | 39 | return this.isInRange(+currentValue); 40 | } 41 | 42 | replaceVaulesToPbfIndexCore(pbfLayer) { 43 | this.replacedValueToIndex = true; 44 | } 45 | 46 | isInRange(currentValue: any): boolean { 47 | if (this.disallowedValues.includes(currentValue)) { 48 | return false; 49 | } 50 | if (this.allowedValues.includes(currentValue)) { 51 | return true; 52 | } 53 | 54 | for (var i = 0; i < this.filterItems.length; i++) { 55 | var filterItem = this.filterItems[i]; 56 | var value = +filterItem.value; 57 | switch (filterItem.operator) { 58 | case ">": 59 | if (!(currentValue > value)) { 60 | return false; 61 | } 62 | break; 63 | case ">=": 64 | if (!(currentValue >= value)) { 65 | return false; 66 | } 67 | break; 68 | case "<": 69 | if (!(currentValue < value)) { 70 | return false; 71 | } 72 | break; 73 | case "<=": 74 | if (!(currentValue <= value)) { 75 | return false; 76 | } 77 | break; 78 | case "=": 79 | if (!(currentValue === value)) { 80 | return false; 81 | } 82 | break; 83 | case "!=": 84 | if (!(currentValue !== value)) { 85 | return false; 86 | } 87 | break; 88 | default: 89 | break; 90 | } 91 | } 92 | return true; 93 | } 94 | 95 | private static getRange(ranges: Number[][], value: number): Number[] { 96 | for (let i = 0; i < ranges.length; i++) { 97 | let range = ranges[i]; 98 | if (value >= range[0] && value <= range[1]) { 99 | return range; 100 | } 101 | } 102 | return null; 103 | } 104 | } 105 | 106 | -------------------------------------------------------------------------------- /example/html/imagery-with-labels.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Vector Tiles on 3rd Party Imagery 9 | 10 | 11 | 12 | 13 | 14 | 92 | 93 | 94 | 95 | 96 |
97 | 98 |
99 |
100 |

We're having trouble communicating with the ThinkGeo Cloud. Please check the API key being used in 101 | this 102 | sample's JavaScript source code, and ensure it has access to the ThinkGeo Cloud services you are 103 | requesting. You can create and manage your API keys at https://cloud.thinkgeo.com.

105 | 106 |
107 |
108 |
109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /debug/index.js: -------------------------------------------------------------------------------- 1 | var view = new ol.View({ 2 | center:[0,0],zoom:0, 3 | maxZoom: 19, 4 | maxResolution: 40075016.68557849 / 512, 5 | progressiveZoom: true 6 | }); 7 | var zoom = view.getZoom(); 8 | document.getElementById("olzoom").innerHTML = "Zoom:" + (zoom); 9 | view.on("change:resolution", function (e) { 10 | var zoom = view.getZoom(); 11 | if ((zoom.toString()).indexOf(".") > 0) { 12 | zoom = zoom.toFixed(2); 13 | } 14 | document.getElementById("olzoom").innerHTML = "Zoom:" + (zoom); 15 | }); 16 | 17 | var worldStreetsSource = new ol.thinkgeo.VectorTileSource({ 18 | url: 'http://localhost:1314/v2/tile/{z}/{x}/{y}' 19 | }) 20 | 21 | var worldStreetsLayer = new ol.thinkgeo.VectorTileLayer("thinkgeo-world-streets-light-new.json", { 22 | mapLayerId: "worldstreets", 23 | source: worldStreetsSource 24 | }); 25 | 26 | var layer = new ol.layer.Tile({ 27 | source: new ol.source.OSM() 28 | }); 29 | 30 | var debugLayer = new ol.layer.Tile({ 31 | source: new ol.source.TileDebug({ 32 | projection: "EPSG:3857", 33 | tileGrid: worldStreetsLayer.getSource().getTileGrid() 34 | }) 35 | }); 36 | 37 | var vectorLayer = new ol.layer.Vector({ 38 | source: new ol.source.Vector(), 39 | style: function (feature, resolution) { 40 | return new ol.style.Style({ 41 | image: new ol.style.Circle({ 42 | fill: new ol.style.Fill({ 43 | color: "red" 44 | }), 45 | radius: 10 46 | }), 47 | text: new ol.style.Text({ 48 | fill: new ol.style.Fill({ 49 | color: "black" 50 | }), 51 | }), 52 | stroke: new ol.style.Stroke({ 53 | color: "red", 54 | width: 1 55 | }) 56 | }) 57 | } 58 | }) 59 | 60 | var map = new ol.Map({ 61 | layers: [worldStreetsLayer, vectorLayer, debugLayer], 62 | renderer:['webgl'], 63 | target: 'map', 64 | view: view, 65 | loadTilesWhileInteracting: true 66 | }); 67 | 68 | map.on("click", function showInfo(event) { 69 | 70 | var features = map.getFeaturesAtPixel(event.pixel); 71 | 72 | if (!features) { 73 | info.innerText = ''; 74 | info.style.opacity = 0; 75 | } 76 | else { 77 | var properties = features[0].getProperties(); 78 | delete properties["geometry"]; 79 | info.innerText = JSON.stringify(properties, null, 2); 80 | info.style.opacity = 1; 81 | } 82 | 83 | if (features) { 84 | for (let index = 0; index < features.length; index++) { 85 | const element = features[index]; 86 | } 87 | vectorLayer.getSource().clear(); 88 | let olFeature = new ol.Feature({ 89 | geometry: getGeometryByType(features[0].type_, features[0].flatCoordinates_, 'XY') 90 | }); 91 | olFeature.getGeometry()['ends_'] = features[0].ends_; 92 | olFeature.setProperties(features[0].properties_); 93 | vectorLayer.getSource().addFeature(olFeature); 94 | } 95 | else { 96 | vectorLayer.getSource().clear(); 97 | } 98 | }) 99 | 100 | let getGeometryByType = (type, flatCoordinates, layout) => { 101 | var geometry; 102 | layout = layout || 'XY'; 103 | 104 | var transformedCoordinates = []; 105 | for (let i = 0; i < flatCoordinates.length; i += 2) { 106 | transformedCoordinates.push([flatCoordinates[i], flatCoordinates[i + 1]]); 107 | } 108 | 109 | switch (type) { 110 | case 'Point': geometry = new ol.geom.Point(flatCoordinates, layout); break; 111 | case 'Polygon': geometry = new ol.geom.Polygon([transformedCoordinates], layout); break; 112 | case 'LineString': geometry = new ol.geom.LineString(transformedCoordinates, layout); break; 113 | case 'MultiLineString': geometry = new ol.geom.MultiLineString([transformedCoordinates], layout); break; 114 | default: ; 115 | } 116 | 117 | return geometry; 118 | }; -------------------------------------------------------------------------------- /example/html/satellite-with-labels.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Vector Tiles on Aerial Imagery 9 | 10 | 11 | 12 | 13 | 14 | 92 | 93 | 94 | 95 | 96 |
97 | 98 |
99 |
100 |

We're having trouble communicating with the ThinkGeo Cloud. Please check the API key being used in 101 | this 102 | sample's JavaScript source code, and ensure it has access to the ThinkGeo Cloud services you are 103 | requesting. You can create and manage your API keys at https://cloud.thinkgeo.com.

105 | 106 |
107 |
108 |
109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /style/vectormap.css: -------------------------------------------------------------------------------- 1 | .ol-box{box-sizing:border-box;border-radius:2px;border:2px solid #00f}.ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:rgba(0,60,136,.3);border-radius:4px;bottom:8px;left:8px;padding:2px;position:absolute}.ol-scale-line-inner{border:1px solid #eee;border-top:0;color:#eee;font-size:10px;text-align:center;margin:1px;will-change:contents,width}.ol-overlay-container{will-change:left,right,top,bottom}.ol-unsupported{display:none}.ol-unselectable,.ol-viewport{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-selectable{-webkit-touch-callout:default;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.ol-grabbing{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.ol-grab{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.ol-control{position:absolute;background-color:rgba(255,255,255,.4);border-radius:4px;padding:2px}.ol-control:hover{background-color:rgba(255,255,255,.6)}.ol-zoom{top:.5em;left:.5em}.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}@media print{.ol-control{display:none}}.ol-control button{display:block;margin:1px;padding:0;color:#fff;font-size:1.14em;font-weight:700;text-decoration:none;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:rgba(0,60,136,.5);border:0;border-radius:2px}.ol-control button::-moz-focus-inner{border:0;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;font-weight:400;font-size:1.2em;will-change:transform}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:focus,.ol-control button:hover{text-decoration:none;background-color:rgba(0,60,136,.7)}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em)}.ol-attribution ul{margin:0;padding:0 .5em;font-size:.7rem;line-height:1.375em;color:#000;text-shadow:0 0 2px #fff}.ol-attribution li{display:inline;list-style:none;line-height:inherit}.ol-attribution li:not(:last-child):after{content:" "}.ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}.ol-attribution button,.ol-attribution ul{display:inline-block}.ol-attribution.ol-collapsed ul{display:none}.ol-attribution.ol-logo-only ul{display:block}.ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0;height:1.1em;line-height:1em}.ol-attribution.ol-logo-only{background:0;bottom:.4em;height:1.1em;line-height:1em}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-logo-only button,.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{top:4.5em;left:.5em;height:200px}.ol-zoomslider button{position:relative;height:10px}.ol-touch .ol-zoomslider{top:5.5em}.ol-overviewmap{left:.5em;bottom:.5em}.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:inline-block}.ol-overviewmap .ol-overviewmap-map{border:1px solid #7b98bc;height:150px;margin:2px;width:150px}.ol-overviewmap:not(.ol-collapsed) button{bottom:1px;left:2px;position:absolute}.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}.ol-overviewmap:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-overviewmap-box{border:2px dotted rgba(0,60,136,.7)}.ol-overviewmap .ol-overviewmap-box:hover{cursor:move}html,body{margin:0;padding:0;font-family:Arial,Verdana,Helvetica,Sans-Serif;width:100%;height:100%}.ol-zoom-in,.ol-zoom-out{height:1.6em!important;width:1.6em!important;font-size:1.6em!important;background-color:#fff!important;color:#2d3c4d!important;border:solid 1px #ccc!important;box-shadow:0 1px 2px 0 rgba(34,36,38,.15)}.ol-attribution{display:none}@media(max-width:767px){.location-buttons{position:absolute;z-index:1000;bottom:1.5em;left:.5em}} -------------------------------------------------------------------------------- /example/js/imagery-with-labels.js: -------------------------------------------------------------------------------- 1 | /*===========================================================================*/ 2 | // Vector Tiles on 3rd Party Imagery 3 | // Sample map by ThinkGeo 4 | // 5 | // 1. ThinkGeo Cloud API Key 6 | // 2. Map Control Setup 7 | // 3. Tile Loading Event Handlers 8 | /*===========================================================================*/ 9 | 10 | 11 | /*---------------------------------------------*/ 12 | // 1. ThinkGeo Cloud API Key 13 | /*---------------------------------------------*/ 14 | 15 | // First, let's define our ThinkGeo Cloud API key, which we'll use to 16 | // authenticate our requests to the ThinkGeo Cloud API. Each API key can be 17 | // restricted for use only from a given web domain or IP address. To create your 18 | // own API key, you'll need to sign up for a ThinkGeo Cloud account at 19 | // https://cloud.thinkgeo.com. 20 | const apiKey = 'WPLmkj3P39OPectosnM1jRgDixwlti71l8KYxyfP2P0~' 21 | 22 | 23 | /*---------------------------------------------*/ 24 | // 2. Map Control Setup 25 | /*---------------------------------------------*/ 26 | 27 | // This sample demonstrates a hybrid map: one that displays custom imagery data 28 | // from NASA as the background layer, and vector-based street data on top of 29 | // that layer. This demonstrates how you can overlay ThinkGeo Cloud Maps 30 | // Vector Tiles on top of any custom background imagery you want! 31 | // 32 | // For more info about these services, see our wiki: 33 | // https://wiki.thinkgeo.com/wiki/thinkgeo_cloud_maps_vector_tiles 34 | // https://wiki.thinkgeo.com/wiki/thinkgeo_offline_data_maps_imagery 35 | 36 | // Create the custom imagery background layer using NASA's public EarthData 37 | // Web Map Tile Service (WMTS). 38 | let imageryLayer = new ol.layer.Tile({ 39 | source: new ol.source.XYZ({ 40 | url: 'https://map1.vis.earthdata.nasa.gov/wmts-webmerc/VIIRS_CityLights_2012/default/GoogleMapsCompatible_Level8/{z}/{y}/{x}.jpg' //Source from NASA 41 | }), 42 | }); 43 | 44 | // Create the vector street map layer using ThinkGeo Cloud. 45 | let vectorStreetsLayer = new ol.mapsuite.VectorTileLayer("https://cdn.thinkgeo.com/worldstreets-styles/3.0.0/transparent-background.json", { 46 | apiKey: apiKey, 47 | visible: true 48 | }); 49 | 50 | // Create and initialize our interactive map. 51 | let map = new ol.Map({ 52 | renderer: 'webgl', 53 | loadTilesWhileAnimating: true, 54 | loadTilesWhileInteracting: true, 55 | 56 | // Add our previously-defined NASA imagery and ThinkGeo Cloud layers to the map. 57 | layers: [imageryLayer, vectorStreetsLayer], 58 | // States that the HTML tag with id="map" should serve as the container for our map. 59 | target: 'map', 60 | // Create a default view for the map when it starts up. 61 | view: new ol.View({ 62 | 63 | // Center the map on the United States and start at zoom level 3. 64 | center: ol.proj.fromLonLat([-96.79620, 35.79423]), 65 | maxResolution: 40075016.68557849 / 512, 66 | zoom: 3, 67 | minZoom: 3, 68 | maxZoom: 7, 69 | }), 70 | }); 71 | 72 | // Add a button to the map that lets us toggle full-screen display mode. 73 | map.addControl(new ol.control.FullScreen()); 74 | 75 | 76 | /*---------------------------------------------*/ 77 | // 3. Tile Loading Event Handlers 78 | /*---------------------------------------------*/ 79 | 80 | // These events allow you to perform custom actions when 81 | // a map tile encounters an error while loading. 82 | const errorLoadingTile = () => { 83 | const errorModal = document.querySelector('#error-modal'); 84 | if (errorModal.classList.contains('hide')) { 85 | // Show the error tips when Tile loaded error. 86 | errorModal.classList.remove('hide'); 87 | } 88 | } 89 | 90 | const setLayerSourceEventHandlers = (layer) => { 91 | let layerSource = layer.getSource(); 92 | layerSource.on('tileloaderror', function () { 93 | errorLoadingTile(); 94 | }); 95 | } 96 | 97 | setLayerSourceEventHandlers(vectorStreetsLayer); 98 | 99 | document.querySelector('#error-modal button').addEventListener('click', () => { 100 | document.querySelector('#error-modal').classList.add('hide'); 101 | }) -------------------------------------------------------------------------------- /example/html/high-dpi-maps.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Raster Tiles (High Resolution) 9 | 10 | 11 | 12 | 13 | 14 | 102 | 103 | 104 | 105 | 106 |
107 | 108 |
109 |
110 |

We're having trouble communicating with the ThinkGeo Cloud. Please check the API key being used in 111 | this 112 | sample's JavaScript source code, and ensure it has access to the ThinkGeo Cloud services you are 113 | requesting. You can create and manage your API keys at https://cloud.thinkgeo.com.

115 | 116 |
117 |
118 |
119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | -------------------------------------------------------------------------------- /example/data/educationLsee.geoJson: -------------------------------------------------------------------------------- 1 | { 2 | "type": "FeatureCollection", 3 | "name": "education", 4 | "crs": { 5 | "type": "name", 6 | "properties": { 7 | "name": "urn:ogc:def:crs:OGC:1.3:CRS84" 8 | } 9 | }, 10 | "features": [ 11 | { 12 | "type": "Feature", 13 | "properties": { 14 | "name": "Seattle", 15 | "UHSC": 6, 16 | "HS": 11, 17 | "Col": 23, 18 | "Bcav": 61 19 | }, 20 | "geometry": { 21 | "type": "Point", 22 | "coordinates": [-122.34193084586849, 47.571947912530732] 23 | } 24 | }, { 25 | "type": "Feature", 26 | "properties": { 27 | "name": "San Francisco", 28 | "UHSC": 12, 29 | "HS": 13, 30 | "Col": 20, 31 | "Bcav": 55 32 | }, 33 | "geometry": { 34 | "type": "Point", 35 | "coordinates": [-122.417168773552248, 37.769195629687431] 36 | } 37 | }, 38 | { 39 | "type": "Feature", 40 | "properties": { 41 | "name": "Phoenix", 42 | "UHSC": 19, 43 | "HS": 24, 44 | "Col": 30, 45 | "Bcav": 27 46 | }, 47 | "geometry": { 48 | "type": "Point", 49 | "coordinates": [-112.071937559694675, 33.541925736367602] 50 | } 51 | }, 52 | { 53 | "type": "Feature", 54 | "properties": { 55 | "name": "Kansas City", 56 | "UHSC": 11, 57 | "HS": 42, 58 | "Col": 31, 59 | "Bcav": 16 60 | }, 61 | "geometry": { 62 | "type": "Point", 63 | "coordinates": [-94.606040077545799, 39.109034368397488] 64 | } 65 | }, 66 | { 67 | "type": "Feature", 68 | "properties": { 69 | "name": "Denver", 70 | "UHSC": 13, 71 | "HS": 36, 72 | "Col": 36, 73 | "Bcav": 16 74 | }, 75 | "geometry": { 76 | "type": "Point", 77 | "coordinates": [-104.985961810968206, 39.741133906965501] 78 | } 79 | }, 80 | 81 | { 82 | "type": "Feature", 83 | "properties": { 84 | "name": "Dallas", 85 | "UHSC": 23, 86 | "HS": 22, 87 | "Col": 23, 88 | "Bcav": 31 89 | }, 90 | "geometry": { 91 | "type": "Point", 92 | "coordinates": [-96.841962787498176, 32.821969681677331] 93 | } 94 | }, 95 | 96 | { 97 | "type": "Feature", 98 | "properties": { 99 | "name": "Chicago", 100 | "UHSC": 17, 101 | "HS": 23, 102 | "Col": 24, 103 | "Bcav": 37 104 | }, 105 | "geometry": { 106 | "type": "Point", 107 | "coordinates": [-87.752000832709314, 41.831936519278429] 108 | } 109 | }, 110 | { 111 | "type": "Feature", 112 | "properties": { 113 | "name": "Boston", 114 | "UHSC": 14, 115 | "HS": 21, 116 | "Col": 21, 117 | "Bcav": 46 118 | }, 119 | "geometry": { 120 | "type": "Point", 121 | "coordinates": [-71.071959532186838, 42.331906001702293] 122 | } 123 | }, 124 | { 125 | "type": "Feature", 126 | "properties": { 127 | "name": "Atlanta", 128 | "UHSC": 11, 129 | "HS": 19, 130 | "Col": 22, 131 | "Bcav": 48 132 | }, 133 | "geometry": { 134 | "type": "Point", 135 | "coordinates": [-84.40189524187565, 33.831959712605851] 136 | } 137 | } 138 | 139 | 140 | ] 141 | } 142 | -------------------------------------------------------------------------------- /example/js/high-dpi-maps.js: -------------------------------------------------------------------------------- 1 | 2 | /*===========================================================================*/ 3 | // Raster Tiles (High Resolution) 4 | // Sample map by ThinkGeo 5 | // 6 | // 1. ThinkGeo Cloud API Key 7 | // 2. Map Control Setup 8 | // 3. Tile Loading Event Handlers 9 | /*===========================================================================*/ 10 | 11 | 12 | /*---------------------------------------------*/ 13 | // 1. ThinkGeo Cloud API Key 14 | /*---------------------------------------------*/ 15 | 16 | // First, let's define our ThinkGeo Cloud API key, which we'll use to 17 | // authenticate our requests to the ThinkGeo Cloud API. Each API key can be 18 | // restricted for use only from a given web domain or IP address. To create your 19 | // own API key, you'll need to sign up for a ThinkGeo Cloud account at 20 | // https://cloud.thinkgeo.com. 21 | const apiKey = 'WPLmkj3P39OPectosnM1jRgDixwlti71l8KYxyfP2P0~'; 22 | 23 | 24 | /*---------------------------------------------*/ 25 | // 2. Map Control Setup 26 | /*---------------------------------------------*/ 27 | 28 | // Now we'll create the base layer for our map. The base layer uses the ThinkGeo 29 | // Cloud Maps Raster Tile service to display a detailed map, and demonstrates 30 | // how high-resolution tiles can be requested. These tiles will look much 31 | // better on high-DPI displays like those found on mobile phones and tablets. 32 | // 33 | // Available tile resolutions: 34 | // - x1: Standard resolution, suitable for 72-96 DPI displays. 35 | // - x2: Double resolution, suitable for mobiles and other high-DPI displays. 36 | // 37 | // For more info about our high-DPI support, see our wiki: 38 | // https://wiki.thinkgeo.com/wiki/thinkgeo_cloud_maps_raster_tiles 39 | 40 | // Create a raster tile layer that specifies 512 x 512 tile size and "x2" 41 | // resolution in the URL. In practice, this means the tiles we receive will be 42 | // double the requested size, so 1024 x 1024. 43 | let tileResolution = 'x2'; 44 | let highDpiLayer = new ol.layer.Tile({ 45 | source: new ol.source.XYZ({ 46 | url: `https://cloud.thinkgeo.com/api/v1/maps/raster/light/${tileResolution}/3857/512/{z}/{x}/{y}.png?apiKey=${apiKey}`, 47 | // The next two options must be set for proper display of high-DPI 48 | // tiles. Each 1024 x 1024 tile will be displayed at 512 x 512 49 | // which doubles the visible detail. 50 | tileSize: 512, 51 | tilePixelRatio: 2 52 | }), 53 | }); 54 | 55 | // Create and initialize our interactive map. 56 | let map = new ol.Map({ 57 | renderer: 'webgl', 58 | loadTilesWhileAnimating: true, 59 | loadTilesWhileInteracting: true, 60 | 61 | // Add our previously-defined ThinkGeo Cloud High Resolution Raster Tile layer to the map. 62 | layers: [highDpiLayer], 63 | // States that the HTML tag with id="map" should serve as the container for our map. 64 | target: 'map', 65 | // Create a default view for the map when it starts up. 66 | view: new ol.View({ 67 | 68 | // Center the map on the United States and start at zoom level 3. 69 | center: ol.proj.fromLonLat([-96.79620, 32.79423]), 70 | maxResolution: 40075016.68557849 / 512, 71 | zoom: 3, 72 | minZoom: 1, 73 | maxZoom: 19, 74 | progressiveZoom: false, 75 | }), 76 | }); 77 | 78 | // Add a button to the map that lets us toggle full-screen display mode. 79 | map.addControl(new ol.control.FullScreen()); 80 | 81 | 82 | /*---------------------------------------------*/ 83 | // 3. Tile Loading Event Handlers 84 | /*---------------------------------------------*/ 85 | 86 | // These events allow you to perform custom actions when 87 | // a map tile encounters an error while loading. 88 | const errorLoadingTile = () => { 89 | const errorModal = document.querySelector('#error-modal'); 90 | if (errorModal.classList.contains('hide')) { 91 | // Show the error tips when Tile loaded error. 92 | errorModal.classList.remove('hide'); 93 | } 94 | } 95 | 96 | const setLayerSourceEventHandlers = (layer) => { 97 | let layerSource = layer.getSource(); 98 | layerSource.on('tileloaderror', function () { 99 | errorLoadingTile(); 100 | }); 101 | } 102 | 103 | setLayerSourceEventHandlers(highDpiLayer); 104 | 105 | document.querySelector('#error-modal button').addEventListener('click', () => { 106 | document.querySelector('#error-modal').classList.add('hide'); 107 | }) -------------------------------------------------------------------------------- /debug/mapsuite.css: -------------------------------------------------------------------------------- 1 | .ol-box{box-sizing:border-box;border-radius:2px;border:2px solid #00f}.ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:rgba(0,60,136,.3);border-radius:4px;bottom:8px;left:8px;padding:2px;position:absolute}.ol-scale-line-inner{border:1px solid #eee;border-top:0;color:#eee;font-size:10px;text-align:center;margin:1px;will-change:contents,width}.ol-overlay-container{will-change:left,right,top,bottom}.ol-unsupported{display:none}.ol-unselectable,.ol-viewport{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-selectable{-webkit-touch-callout:default;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.ol-grabbing{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.ol-grab{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.ol-control{position:absolute;background-color:rgba(255,255,255,.4);border-radius:4px;padding:2px}.ol-control:hover{background-color:rgba(255,255,255,.6)}.ol-zoom{top:.5em;left:.5em}.ol-rotate{top:6em;left:.5em;transition:opacity .25s linear,visibility 0s linear}.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}@media print{.ol-control{display:none}}.ol-control button{display:block;margin:1px;padding:0;color:#fff;font-size:1.14em;font-weight:700;text-decoration:none;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:rgba(0,60,136,.5);border:0;border-radius:2px}.ol-control button::-moz-focus-inner{border:0;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E %3Cpolygon fill='%23333333' points='10,0 2,20 10,15 10,0'/%3E %3Cpolygon fill='%23aaa' points='10,0 10,15 18,20 10,0 '/%3E %3C/svg%3E");background-size: 60%;background-repeat: no-repeat;background-position: 50% 50%;width: 100% !important;height: 100% !important;font-weight:400;font-size:1.2em;will-change:transform}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:focus,.ol-control button:hover{text-decoration:none;background-color:rgba(0,60,136,.7)}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em)}.ol-attribution ul{margin:0;padding:0 .5em;font-size:.7rem;line-height:1.375em;color:#000;text-shadow:0 0 2px #fff}.ol-attribution li{display:inline;list-style:none;line-height:inherit}.ol-attribution li:not(:last-child):after{content:" "}.ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}.ol-attribution button,.ol-attribution ul{display:inline-block}.ol-attribution.ol-collapsed ul{display:none}.ol-attribution.ol-logo-only ul{display:block}.ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0;height:1.1em;line-height:1em}.ol-attribution.ol-logo-only{background:0;bottom:.4em;height:1.1em;line-height:1em}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-logo-only button,.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{top:4.5em;left:.5em;height:200px}.ol-zoomslider button{position:relative;height:10px}.ol-touch .ol-zoomslider{top:5.5em}.ol-overviewmap{left:.5em;bottom:.5em}.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:inline-block}.ol-overviewmap .ol-overviewmap-map{border:1px solid #7b98bc;height:150px;margin:2px;width:150px}.ol-overviewmap:not(.ol-collapsed) button{bottom:1px;left:2px;position:absolute}.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}.ol-overviewmap:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-overviewmap-box{border:2px dotted rgba(0,60,136,.7)}.ol-overviewmap .ol-overviewmap-box:hover{cursor:move}html,body{margin:0;padding:0;font-family:Arial,Verdana,Helvetica,Sans-Serif;width:100%;height:100%}.ol-zoom-in,.ol-zoom-out,.ol-rotate-reset{height:1.6em!important;width:1.6em!important;font-size:1.6em!important;background-color:#fff!important;color:#2d3c4d!important;border:solid 1px #ccc!important;box-shadow:0 1px 2px 0 rgba(34,36,38,.15)}.ol-attribution{display:none}@media(max-width:767px){.location-buttons{position:absolute;z-index:1000;bottom:1.5em;left:.5em}} -------------------------------------------------------------------------------- /example/js/KML.js: -------------------------------------------------------------------------------- 1 | /*===========================================================================*/ 2 | // Style Polygons from KML 3 | // Sample map by ThinkGeo 4 | // 5 | // 1. KML Layer Setup 6 | // 2. Map Control Setup 7 | /*===========================================================================*/ 8 | 9 | 10 | /*---------------------------------------------*/ 11 | // 1. KML Layer Setup 12 | /*---------------------------------------------*/ 13 | 14 | // Create another layer from a KML format data file hosted on our server, this time to hold the style 15 | // for the KML polygon, line and point. Then apply the styleJSON to KML layer. 16 | 17 | // For more info about StyleJSON, see our wiki: 18 | // https://thinkgeo.gitbooks.io/map-suite-stylejson-specification/content/ 19 | 20 | // For more info about Map Suite Portable Data Format, see our wiki: 21 | // https://wiki.thinkgeo.com/wiki/map_suite_portable_data_format_guide 22 | const geosjonStyle = { 23 | "id": "kml-stylejson", 24 | "version": 1.3, 25 | "owner": "ThinkGeo LLC", 26 | "time": "2018/06/09", 27 | "background": "#aac6ee", 28 | "variables": {}, 29 | "styles": [{ 30 | "id": "country", 31 | "style": [{ 32 | "line-color": "#635B5A", 33 | "line-width": 1 34 | }] 35 | }, 36 | { 37 | "id": "state", 38 | "style": [{ 39 | "filter": "name='South Dakota,Tennessee,Texas,Utah,Vermont,Virginia,Washington,West Virginia,Wisconsin,Wyoming'", 40 | "style": [{ 41 | "polygon-fill": "#4c79c1" 42 | }] 43 | }, 44 | { 45 | "filter": "name='Alabama,Alaska,Arizona,Arkansas,California,Colorado,Connecticut,Delaware,District of Columbia,Florida,Georgia,Hawaii,Idaho,Illinois,Indiana,Iowa,Kansas,Kentucky,Louisiana,Maine,Maryland'", 46 | "style": [{ 47 | "polygon-fill": "rgb(121, 166, 238)" 48 | }] 49 | }, 50 | { 51 | "filter": "name='Massachusetts,Michigan,Minnesota,Mississippi,Missouri,Montana,Nebraska,Nevada,New Hampshire,New Jersey,New Mexico,New York,North Carolina,North Dakota,Ohio,Oklahoma,Oregon,Pennsylvania,Rhode Island,South Carolina'", 52 | "style": [{ 53 | "polygon-fill": "#25529a" 54 | }] 55 | } 56 | ] 57 | }, 58 | { 59 | "id": "state_name", 60 | "style": [{ 61 | "text-name": "name", 62 | "text-wrap-width": 20, 63 | "text-fill": "#496588", 64 | "text-halo-fill": "#b1dff5", 65 | "text-halo-radius": 2, 66 | "style": [{ 67 | "filter": "zoom>=0;zoom<=19;", 68 | "text-font": "oblique 600 16px Arial, Helvetica, sans-serif" 69 | }] 70 | }] 71 | } 72 | ], 73 | "sources": [{ 74 | "id": "data_source", 75 | "url": "../data/map.kml", 76 | "type": "KML" 77 | }], 78 | "layers": [{ 79 | "id": "states_layer", 80 | "source": "data_source", 81 | "styles": ["state", "country", "state_name"] 82 | }] 83 | }; 84 | 85 | // Create KML layer by using the pre-defined StyleJSON. 86 | let kmlLayer = new ol.mapsuite.VectorLayer(geosjonStyle, { 87 | multithread: false 88 | }); 89 | 90 | /*---------------------------------------------*/ 91 | // 2. Map Control Setup 92 | /*---------------------------------------------*/ 93 | 94 | // Now, we'll set up the map control and add the pre-defined layer to map. 95 | 96 | // Create and initialize our map control. 97 | let map = new ol.Map({ 98 | renderer: 'webgl', 99 | loadTilesWhileAnimating: true, 100 | loadTilesWhileInteracting: true, 101 | // States that the HTML tag with id="map" should serve as the container for our map. 102 | target: "map", 103 | // Add our previously-defined KML layer to the map. 104 | layers: [kmlLayer], 105 | // Create a default view for the map when it starts up. 106 | view: new ol.View({ 107 | // Center the map on the United States and start at zoom level 4. 108 | center: ol.proj.fromLonLat([-96.7962, 37.79423]), 109 | maxResolution: 40075016.68557849 / 512, 110 | zoom: 4, 111 | minZoom: 1, 112 | maxZoom: 19 113 | }) 114 | }); 115 | 116 | // Add a button to the map that lets us toggle full-screen display mode. 117 | map.addControl(new ol.control.FullScreen()); -------------------------------------------------------------------------------- /example/html/heatmap-json.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Road Congestion Heatmap 9 | 10 | 11 | 12 | 13 | 14 | 119 | 120 | 121 | 122 | 123 |
124 | 125 |
126 |
127 |

We're having trouble communicating with the ThinkGeo Cloud. Please check the API key being used in 128 | this 129 | sample's JavaScript source code, and ensure it has access to the ThinkGeo Cloud services you are 130 | requesting. You can create and manage your API keys at https://cloud.thinkgeo.com.

132 | 133 |
134 |
135 |
136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | -------------------------------------------------------------------------------- /example/html/WFS.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Work with WFS 9 | 10 | 11 | 12 | 13 | 14 | 120 | 121 | 122 | 123 | 124 |
125 | 126 |
127 |
128 |

We're having trouble communicating with the ThinkGeo Cloud. Please check the API key being used in 129 | this 130 | sample's JavaScript source code, and ensure it has access to the ThinkGeo Cloud services you are 131 | requesting. You can create and manage your API keys at https://cloud.thinkgeo.com.

133 | 134 |
135 |
136 |
137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ThinkGeo Cloud and VectorMap.js Samples - Build Better Maps Faster 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 71 |
72 |
73 | 83 |
84 |
85 |
86 |
87 | 88 |
89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /src/source/GeoVector.js: -------------------------------------------------------------------------------- 1 | 2 | class GeoVectorSource extends ol.source.Vector { 3 | constructor(opt_options) { 4 | const options = opt_options || {}; 5 | super(options); 6 | 7 | // Custom xhr function 8 | if (options.loader !== undefined) { 9 | this.loader_ = options.loader; 10 | } else if (this.url_ !== undefined) { 11 | ol.asserts.assert(this.format_, 7); // `format` must be set when `url` is set 12 | var format = this.getFormat(); 13 | // create a XHR feature loader for "url" and "format" 14 | this.loader_ = this.xhr(this.url_, /** @type {import("../format/Feature.js").default} */(this.format_)); 15 | } 16 | } 17 | 18 | xhr(url, format) { 19 | return this.loadFeaturesXhr(url, format, 20 | /** 21 | * @param {Array} features The loaded features. 22 | * @param {import("./proj/Projection.js").default} dataProjection Data 23 | * projection. 24 | * @this {import("./source/Vector").default|import("./VectorTile.js").default} 25 | */ 26 | function (features, dataProjection) { 27 | const sourceOrTile = /** @type {?} */ (this); 28 | if (typeof sourceOrTile.addFeatures === 'function') { 29 | /** @type {import("./source/Vector").default} */ (sourceOrTile).addFeatures(features); 30 | } 31 | }, /* FIXME handle error */ function() {}); 32 | } 33 | 34 | loadFeaturesXhr(url, format, success, failure) { 35 | return ( 36 | /** 37 | * @param {import("./extent.js").Extent} extent Extent. 38 | * @param {number} resolution Resolution. 39 | * @param {import("./proj/Projection.js").default} projection Projection. 40 | * @this {import("./source/Vector").default|import("./VectorTile.js").default} 41 | */ 42 | function (extent, resolution, projection) { 43 | 44 | const xhr = new XMLHttpRequest(); 45 | xhr.open('GET', 46 | typeof url === 'function' ? url(extent, resolution, projection) : url, 47 | true); 48 | if (format.getType() == ol.format.FormatType.ARRAY_BUFFER) { 49 | xhr.responseType = 'arraybuffer'; 50 | } 51 | /** 52 | * @param {Event} event Event. 53 | * @private 54 | */ 55 | xhr.onload = function (event) { 56 | // status will be 0 for file:// urls 57 | if (!xhr.status || xhr.status >= 200 && xhr.status < 300) { 58 | const type = format.getType(); 59 | /** @type {Document|Node|Object|string|undefined} */ 60 | let source; 61 | if (type == ol.format.FormatType.JSON || type == ol.format.FormatType.TEXT) { 62 | source = xhr.responseText; 63 | } else if (type == ol.format.FormatType.XML) { 64 | source = xhr.responseXML; 65 | if (!source) { 66 | source = new DOMParser().parseFromString(xhr.responseText, 'application/xml'); 67 | } 68 | } else if (type == ol.format.FormatType.ARRAY_BUFFER) { 69 | source = /** @type {ArrayBuffer} */ (xhr.response); 70 | } 71 | if (source) { 72 | let features = []; 73 | if (format.dataProjection !== undefined) { 74 | features = format.readFeatures(source, { featureProjection: projection, dataProjection: format.dataProjection }) 75 | } 76 | else { 77 | features = format.readFeatures(source, { featureProjection: projection }) 78 | } 79 | 80 | success.call(this, features, format.readProjection(source), format.getLastExtent()); 81 | } else { 82 | failure.call(this); 83 | } 84 | } else { 85 | failure.call(this); 86 | } 87 | }.bind(this); 88 | /** 89 | * @private 90 | */ 91 | xhr.onerror = function () { 92 | failure.call(this); 93 | }.bind(this); 94 | xhr.send(); 95 | } 96 | ); 97 | } 98 | } 99 | export default GeoVectorSource; -------------------------------------------------------------------------------- /example/html/GPX.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Work with GPX 9 | 10 | 11 | 12 | 13 | 14 | 119 | 120 | 121 | 122 | 123 |
124 | 125 |
126 |
127 |

We're having trouble communicating with the ThinkGeo Cloud. Please check the API key being used in 128 | this 129 | sample's JavaScript source code, and ensure it has access to the ThinkGeo Cloud services you are 130 | requesting. You can create and manage your API keys at https://cloud.thinkgeo.com.

132 | 133 |
134 |
135 |
136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | -------------------------------------------------------------------------------- /example/html/WKT.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Work with WKT 9 | 10 | 11 | 12 | 13 | 14 | 119 | 120 | 121 | 122 | 123 |
124 | 125 |
126 |
127 |

We're having trouble communicating with the ThinkGeo Cloud. Please check the API key being used in 128 | this 129 | sample's JavaScript source code, and ensure it has access to the ThinkGeo Cloud services you are 130 | requesting. You can create and manage your API keys at https://cloud.thinkgeo.com.

132 | 133 |
134 |
135 |
136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | -------------------------------------------------------------------------------- /example/html/styling-points.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Render POIs 9 | 10 | 11 | 12 | 13 | 14 | 119 | 120 | 121 | 122 | 123 |
124 | 125 |
126 |
127 |

We're having trouble communicating with the ThinkGeo Cloud. Please check the API key being used in 128 | this 129 | sample's JavaScript source code, and ensure it has access to the ThinkGeo Cloud services you are 130 | requesting. You can create and manage your API keys at https://cloud.thinkgeo.com.

132 | 133 |
134 |
135 |
136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | -------------------------------------------------------------------------------- /example/html/heatmap-KML.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Global Earthquake Distribution 9 | 10 | 11 | 12 | 13 | 14 | 119 | 120 | 121 | 122 | 123 | 124 |
125 | 126 |
127 |
128 |

We're having trouble communicating with the ThinkGeo Cloud. Please check the API key being used in 129 | this 130 | sample's JavaScript source code, and ensure it has access to the ThinkGeo Cloud services you are 131 | requesting. You can create and manage your API keys at https://cloud.thinkgeo.com.

133 | 134 |
135 |
136 |
137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | -------------------------------------------------------------------------------- /example/html/scatter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Average Precipitation 9 | 10 | 11 | 12 | 117 | 118 | 119 | 120 | 121 |
122 | 123 |
124 |
125 |

We're having trouble communicating with the ThinkGeo Cloud. Please check the API key being used in 126 | this 127 | sample's JavaScript source code, and ensure it has access to the ThinkGeo Cloud services you are 128 | requesting. You can create and manage your API keys at https://cloud.thinkgeo.com.

130 | 131 |
132 |
133 |
134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | -------------------------------------------------------------------------------- /example/js/cloud-maps-wms.js: -------------------------------------------------------------------------------- 1 | const apiKey = 'WPLmkj3P39OPectosnM1jRgDixwlti71l8KYxyfP2P0~'; 2 | let currentPoint = [-77.0617786, 38.8947822]; 3 | 4 | if (!navigator.geolocation) { 5 | document.getElementsByClassName('your-location')[0].classList.add('hide'); 6 | } 7 | 8 | let image = new Image(); 9 | 10 | const loading = document.getElementsByClassName('loading')[0]; 11 | const btnGroups = document.getElementsByClassName('btn-group')[0]; 12 | btnGroups.addEventListener('click', (e) => { 13 | const target = e.target; 14 | if (target.nodeName === "BUTTON") { 15 | const location = target.getAttribute('data-location'); 16 | switch (location) { 17 | case 'your-location': 18 | navigator.geolocation.getCurrentPosition(showPosition, showError); 19 | break; 20 | case 'london': 21 | currentPoint = [-0.131833, 51.508734]; 22 | getWmsMap(currentPoint); 23 | break; 24 | case 'newyork': 25 | currentPoint = [-73.975499, 40.725948]; 26 | getWmsMap(currentPoint); 27 | break; 28 | case 'washington': 29 | currentPoint = [-77.0617786, 38.8947822]; 30 | getWmsMap(currentPoint); 31 | break; 32 | } 33 | } 34 | }) 35 | 36 | const showPosition = (position) => { 37 | currentPoint = [position.coords.longitude, position.coords.latitude]; 38 | getWmsMap(currentPoint); 39 | } 40 | 41 | const showError = (error) => { //can't use the location information 42 | loading.classList.add('hide'); 43 | switch (error.code) { 44 | case error.PERMISSION_DENIED: 45 | alert(`Couldn’t get a map of your location because permission was denied.`); 46 | break; 47 | case error.POSITION_UNAVAILABLE: 48 | alert("Location information is unavailable."); 49 | break; 50 | case error.TIMEOUT: 51 | alert("The request to get user location timed out."); 52 | break; 53 | case error.UNKNOWN_ERROR: 54 | alert("An unknown error occurred.") 55 | break; 56 | } 57 | } 58 | 59 | const getWmsMap = (coord) => { 60 | image.setAttribute('src', ''); 61 | loading.classList.remove('hide'); 62 | const type = document.querySelector('.travel-row select').selectedOptions[0].value; 63 | let layers = 'WorldStreets'; 64 | const xycoord = ol.proj.transform(coord, 'EPSG:4326', 'EPSG:3857'); 65 | const width = locationImage.offsetWidth; 66 | const height = locationImage.offsetHeight; 67 | const size = [width, height]; 68 | const center = xycoord; 69 | const resolution = 611.49622628141; 70 | bbox = getForViewAndSize(center, resolution, 0, size); 71 | const url = `https://cloud.thinkgeo.com/api/v1/maps/wms?Request=GetMap&Service=WMS&Layers=${layers}&Styles=${type}&Format=IMAGE%2FPNG&Transparent=true&Version=1.1.1&Width=${width}&Height=${height}&Srs=EPSG%3A3857&BBOX=${bbox[0]},${bbox[1]},${bbox[2]},${bbox[3]}&apikey=${apiKey}`; 72 | image.src = url; 73 | } 74 | 75 | const view = new ol.View({ 76 | center: ol.proj.fromLonLat([-96.79620, 32.79423]), 77 | zoom: 8, 78 | minZoom: 2, 79 | maxZoom: 19 80 | }) 81 | 82 | const getForViewAndSize = (center, resolution, rotation, size, opt_extent) => { 83 | var dx = resolution * size[0] / 2; 84 | var dy = resolution * size[1] / 2; 85 | var cosRotation = Math.cos(rotation); 86 | var sinRotation = Math.sin(rotation); 87 | var xCos = dx * cosRotation; 88 | var xSin = dx * sinRotation; 89 | var yCos = dy * cosRotation; 90 | var ySin = dy * sinRotation; 91 | var x = center[0]; 92 | var y = center[1]; 93 | var x0 = x - xCos + ySin; 94 | var x1 = x - xCos - ySin; 95 | var x2 = x + xCos - ySin; 96 | var x3 = x + xCos + ySin; 97 | var y0 = y - xSin - yCos; 98 | var y1 = y - xSin + yCos; 99 | var y2 = y + xSin + yCos; 100 | var y3 = y + xSin - yCos; 101 | return createOrUpdate( 102 | Math.min(x0, x1, x2, x3), Math.min(y0, y1, y2, y3), 103 | Math.max(x0, x1, x2, x3), Math.max(y0, y1, y2, y3), 104 | opt_extent); 105 | } 106 | 107 | const createOrUpdate = (minX, minY, maxX, maxY, opt_extent) => { 108 | if (opt_extent) { 109 | opt_extent[0] = minX; 110 | opt_extent[1] = minY; 111 | opt_extent[2] = maxX; 112 | opt_extent[3] = maxY; 113 | return opt_extent; 114 | } else { 115 | return [minX, minY, maxX, maxY]; 116 | } 117 | } 118 | 119 | getWmsMap(currentPoint); 120 | 121 | document.addEventListener('DOMContentLoaded', function () { 122 | document.querySelector('#locationImage').appendChild(image); 123 | document.querySelector('.travel-row select').addEventListener('change', function () { 124 | getWmsMap(currentPoint); 125 | }) 126 | }); 127 | 128 | image.onload = () => { 129 | loading.classList.add('hide'); 130 | }; 131 | image.onerror = () => { 132 | loading.classList.add('hide'); 133 | }; -------------------------------------------------------------------------------- /example/js/WFS.js: -------------------------------------------------------------------------------- 1 | /*===========================================================================*/ 2 | // Work with WFS 3 | // Sample map by ThinkGeo 4 | // 5 | // 1. ThinkGeo Cloud API Key 6 | // 2. WFS Setup 7 | // 3. Map Control Setup 8 | // 4. Tile Loading Event Handlers 9 | /*===========================================================================*/ 10 | 11 | 12 | /*---------------------------------------------*/ 13 | // 1. ThinkGeo Cloud API Key 14 | /*---------------------------------------------*/ 15 | 16 | // First, let's define our ThinkGeo Cloud API key, which we'll use to 17 | // authenticate our requests to the ThinkGeo Cloud API. Each API key can be 18 | // restricted for use only from a given web domain or IP address. To create your 19 | // own API key, you'll need to sign up for a ThinkGeo Cloud account at 20 | // https://cloud.thinkgeo.com. 21 | const apiKey = 'WPLmkj3P39OPectosnM1jRgDixwlti71l8KYxyfP2P0~'; 22 | 23 | 24 | /*---------------------------------------------*/ 25 | // 2. WFS Setup 26 | /*---------------------------------------------*/ 27 | 28 | // Create another layer from the Great Lakes Water GeoJSON, this time to hold the boundary 29 | // color for each water. Then use this styleJSON object to render WFS layer. 30 | 31 | // For more info about StyleJSON, see our wiki: 32 | // https://thinkgeo.gitbooks.io/map-suite-stylejson-specification/content/ 33 | 34 | // For more info about Map Suite Portable Data Format, see our wiki: 35 | // https://wiki.thinkgeo.com/wiki/map_suite_portable_data_format_guide 36 | const wfsStyleJson = 37 | { 38 | "id": "thinkgeo-world-streets", 39 | "version": 1.3, 40 | "owner": "ThinkGeo LLC", 41 | "time": "2018/06/09", 42 | "background": "#aac6ee", 43 | "variables": { 44 | }, 45 | "styles": [{ 46 | "id": "water", 47 | "style": [ 48 | { 49 | "line-color": "#ff00ff", 50 | "line-width": 2, 51 | }, 52 | ] 53 | }, 54 | ], 55 | "sources": [{ 56 | "id": "data_source", 57 | "url": "../data/water_areas.geojson", 58 | "type": "WFS", 59 | "dataProjection": "EPSG:3857" 60 | }], 61 | "layers": [{ 62 | "id": "worldstreets_layers", 63 | "source": "data_source", 64 | "styles": [ 65 | "water" 66 | ] 67 | }] 68 | } 69 | 70 | // Create WFS layer by using the pre-defined StyleJSON. 71 | let wfsLayer = new ol.mapsuite.VectorLayer(wfsStyleJson, { 72 | multithread: false 73 | }) 74 | 75 | 76 | /*---------------------------------------------*/ 77 | // 3. Map Control Setup 78 | /*---------------------------------------------*/ 79 | 80 | // Now we'll create the base layer for our map. The base layer uses the ThinkGeo Cloud 81 | // Maps Raster Tile service to display a detailed map. For more info, see our wiki: 82 | // https://wiki.thinkgeo.com/wiki/thinkgeo_cloud_maps_raster_tiles 83 | let baseLayer = new ol.layer.Tile({ 84 | source: new ol.source.XYZ({ 85 | url: `https://cloud.thinkgeo.com/api/v1/maps/raster/aerial/x1/3857/512/{z}/{x}/{y}.jpeg?apiKey=${apiKey}`, 86 | }), 87 | }); 88 | 89 | // Create and initialize our map control. 90 | let map = new ol.Map({ 91 | renderer: 'webgl', 92 | loadTilesWhileAnimating: true, 93 | loadTilesWhileInteracting: true, 94 | // States that the HTML tag with id="map" should serve as the container for our map. 95 | target: 'map', 96 | // Add our previously-defined ThinkGeo Cloud Raster Tile layers and WFS data layers to the map. 97 | layers: [ 98 | baseLayer, wfsLayer 99 | ], 100 | // Create a default view for the map when it starts up. 101 | view: new ol.View({ 102 | // Center the map on the Great Lakes region and start at zoom level 12. 103 | center: [-8908887.277395891, 5381918.072437216], 104 | zoom: 12, 105 | minZoom: 1, 106 | maxZoom: 19, 107 | progressiveZoom: false, 108 | }) 109 | }); 110 | 111 | // Add a button to the map that lets us toggle full-screen display mode. 112 | map.addControl(new ol.control.FullScreen()); 113 | 114 | 115 | /*---------------------------------------------*/ 116 | // 4. Tile Loading Event Handlers 117 | /*---------------------------------------------*/ 118 | 119 | // These events allow you to perform custom actions when 120 | // a map tile encounters an error while loading. 121 | const errorLoadingTile = () => { 122 | const errorModal = document.querySelector('#error-modal'); 123 | if (errorModal.classList.contains('hide')) { 124 | // Show the error tips when Tile loaded error. 125 | errorModal.classList.remove('hide'); 126 | } 127 | } 128 | 129 | const setLayerSourceEventHandlers = (layer) => { 130 | let layerSource = layer.getSource(); 131 | layerSource.on('tileloaderror', function () { 132 | errorLoadingTile(); 133 | }); 134 | } 135 | 136 | setLayerSourceEventHandlers(baseLayer); 137 | 138 | document.querySelector('#error-modal button').addEventListener('click', () => { 139 | document.querySelector('#error-modal').classList.add('hide'); 140 | }) -------------------------------------------------------------------------------- /example/html/cloud-vector-maps.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Vector Tiles 9 | 10 | 11 | 12 | 13 | 120 | 121 | 122 | 123 | 124 |
125 | 126 |
127 |
128 |
129 |
130 |
131 |
132 | 133 | 134 |
135 |
136 |

We're having trouble communicating with the ThinkGeo Cloud. Please check the API key being used in 137 | this 138 | sample's JavaScript source code, and ensure it has access to the ThinkGeo Cloud services you are 139 | requesting. You can create and manage your API keys at https://cloud.thinkgeo.com.

141 | 142 |
143 |
144 |
145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | -------------------------------------------------------------------------------- /src/style/geoStyleProperty.ts: -------------------------------------------------------------------------------- 1 | import { GeoFilterItem } from "../filter/geoFilterItem"; 2 | import { GeoZoomFilter } from "../filter/geoZoomFilter"; 3 | import { GeoStringAttributeFilter } from "../filter/geoStringAttributeFilter"; 4 | import { GeoRegexFilter } from "../filter/geoRegexFilter"; 5 | import { GeoNumberAttributeFilter } from "../filter/geoNumberAttributeFilter"; 6 | 7 | export class GeoStyleProperty { 8 | public styleJsonValue: any; 9 | public defaultValue: any; 10 | 11 | public value: any; 12 | public conditions: any; 13 | public values: any; 14 | 15 | constructor(styleJsonValue, defaultValue?) { 16 | this.styleJsonValue = styleJsonValue; 17 | this.defaultValue = defaultValue; 18 | } 19 | 20 | public initialize() { 21 | if (this.styleJsonValue !== undefined) { 22 | if (typeof this.styleJsonValue === "object") { 23 | this.conditions = []; 24 | this.values = []; 25 | for (let name in this.styleJsonValue) { 26 | let filters = this.createFilter(name); 27 | this.conditions.push(filters); 28 | this.values.push(this.initializeValue(this.styleJsonValue[name])); 29 | } 30 | } 31 | } 32 | this.value = this.initializeValue(this.defaultValue); 33 | } 34 | 35 | public initializeValue(value) { 36 | return value; 37 | } 38 | 39 | public isCondition() { 40 | return this.conditions && this.conditions.length > 0; 41 | } 42 | 43 | public getValue(columnValue?) { 44 | if (this.conditions && this.conditions.length > 0) { 45 | if (columnValue) { 46 | let i = 0; 47 | let matched = false; 48 | for (i = 0; i < this.conditions.length; i++) { 49 | let filterGroup = this.conditions[i]; 50 | for (let j = 0; j < filterGroup.length; j++) { 51 | let filters = filterGroup[j]; 52 | let groupMatched = true; 53 | for (let k = 0; k < filters.length; k++) { 54 | let filter = filters[k]; 55 | let rawFeature = { properties: columnValue }; 56 | if (!filter.matchOLFeature(rawFeature, 0)) { 57 | groupMatched = false; 58 | break; 59 | } 60 | } 61 | if (groupMatched) { 62 | matched = true; 63 | break; 64 | } 65 | } 66 | if (matched) { 67 | break; 68 | } 69 | } 70 | if (matched) { 71 | return this.values[i]; 72 | } 73 | } 74 | else { 75 | return this.value; 76 | } 77 | 78 | } 79 | else { 80 | return this.value; 81 | } 82 | } 83 | 84 | public createFilter(filterString) { 85 | let filterGroup = []; 86 | if (filterString) { 87 | let filterStrings = filterString.split("|"); 88 | for (let i = 0; i < filterStrings.length; i++) { 89 | let filterStr = filterStrings[i]; 90 | let expression = "(\\w+?=~'.+?')|(\\w+?[<>!=]*'[^;]+?')|(\\w+?[<>!=]*[^;]+)"; 91 | let regex = new RegExp(expression, "g"); 92 | let results = filterStr.match(regex); 93 | let rangeFilters = {}; 94 | let filters = []; 95 | 96 | let geoZoomFilter: GeoZoomFilter; 97 | 98 | for (let i = 0; i < results.length; i++) { 99 | if (results[i]) { 100 | let filterItem = GeoFilterItem.createFilterItem(results[i]); 101 | 102 | if (filterItem.value.indexOf("~'") === 0) { 103 | filters.push(new GeoRegexFilter([filterItem])); 104 | } else if (filterItem.key === "zoom") { 105 | if (geoZoomFilter === undefined) { 106 | geoZoomFilter = new GeoZoomFilter([]); 107 | } 108 | geoZoomFilter.addFilterItem(filterItem); 109 | } else if (filterItem.value.includes("'")) { 110 | filters.push(new GeoStringAttributeFilter([filterItem])); 111 | } else { 112 | rangeFilters[filterItem.key] = rangeFilters[filterItem.key] || new GeoNumberAttributeFilter([]); 113 | rangeFilters[filterItem.key].addFilterItem(filterItem); 114 | } 115 | } 116 | } 117 | for (let name in rangeFilters) { 118 | filters.push(rangeFilters[name]); 119 | } 120 | filterGroup.push(filters); 121 | } 122 | } 123 | return filterGroup; 124 | } 125 | } 126 | -------------------------------------------------------------------------------- /example/html/radar-map.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Education Achievement - Radar 9 | 10 | 11 | 12 | 13 | 14 | 124 | 125 | 126 | 127 | 128 |
129 | 130 |
131 |
132 |

We're having trouble communicating with the ThinkGeo Cloud. Please check the API key being used in 133 | this 134 | sample's JavaScript source code, and ensure it has access to the ThinkGeo Cloud services you are 135 | requesting. You can create and manage your API keys at https://cloud.thinkgeo.com.

137 | 138 |
139 |
140 |
141 | 142 | 143 |
144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | --------------------------------------------------------------------------------