@here/harp-examples
Version:
harp.gl Examples
1 lines • 6.05 kB
JavaScript
(()=>{"use strict";var e={7266:(e,t,o)=>{t.t=void 0;const n=o(8957),i=o(5636),r=o(3074),a=o(2998),s=o(3860),l=o(4428),d=o(4565);!function(e){var t;const o=new n.GeoCoordinates(52.5186234,13.373993),c={lat:o.lat,lng:o.lng,alt:null!==(t=o.altitude)&&void 0!==t?t:0};function p(){h.updateDisplay();const t=e.mapView.getScreenPosition({latitude:c.lat,longitude:c.lng,altitude:c.alt});!function(e){void 0!==g&&void 0!==e?(g.style.left=e.x.toString()+"px",g.style.top=e.y.toString()+"px",g.style.opacity="0.8"):g.style.opacity="0.1"}(t),function(e){m.innerHTML=void 0!==g&&void 0!==e?"x: "+Math.round(e.x)+" y: "+Math.round(e.y):"x: undefined , y: undefined"}(t),function(){if(void 0!==y&&void 0!==y.geoPosition){const t=e.mapView.targetDistance/1e4;y.scale.x!==t&&(y.scale.set(t,t,t),e.mapView.update()),y.geoPosition.latitude===c.lat&&y.geoPosition.longitude===c.lng&&y.geoPosition.altitude===c.alt||(y.geoPosition.latitude=c.lat,y.geoPosition.longitude=c.lng,y.geoPosition.altitude=c.alt,e.mapView.update())}}()}let u;function w(){void 0===u&&0===u||clearTimeout(u)}window.addEventListener("keydown",(t=>{switch(t.key){case"ArrowLeft":case"ArrowRight":case"ArrowUp":case"ArrowDown":!function(t){const o=1/Math.pow(e.mapView.zoomLevel,2);switch(t){case"ArrowLeft":c.lng-=o;break;case"ArrowRight":c.lng+=o;break;case"ArrowUp":c.lat+=o;break;case"ArrowDown":c.lat-=o;break;default:w()}u=setTimeout(p,.1)}(t.key)}})),window.addEventListener("keyup",(t=>{switch(t.key){case"ArrowLeft":case"ArrowRight":case"ArrowUp":case"ArrowDown":w();break;case"j":e.mapView.lookAt({target:new n.GeoCoordinates(e.mapView.target.latitude,e.mapView.target.longitude-=360)});break;case"l":e.mapView.lookAt({target:new n.GeoCoordinates(e.mapView.target.latitude,e.mapView.target.longitude+=360)});break;case"p":console.log("target: ",e.mapView.target," tilt: ",e.mapView.tilt," heading: ",e.mapView.heading," zoom: ",e.mapView.zoomLevel," canvassize: ",e.mapView.canvas.height,e.mapView.canvas.width,"near: ",e.mapView.camera.near,"far: ",e.mapView.camera.far)}})),e.mapView=function(e){const t=document.getElementById("mapCanvas"),s=new r.MapView({canvas:t,projection:n.mercatorProjection,tileWrappingEnabled:!1,theme:"resources/berlin_tilezen_night_reduced.json",target:o,zoomLevel:8,tilt:45,heading:-80});s.renderLabels=!1,r.CopyrightElementHandler.install("copyrightNotice",s);const l=new i.MapControls(s);l.maxTiltAngle=180;const c=new i.MapControlsUI(l,{zoomLevel:"input"});return t.parentElement.appendChild(c.domElement),s.resize(window.innerWidth,window.innerHeight),window.addEventListener("resize",(()=>{s.resize(window.innerWidth,window.innerHeight)})),function(e){const t=new a.VectorTileDataSource({baseUrl:"https://vector.hereapi.com/v2/vectortiles/base/mc",authenticationCode:d.apikey});e.addDataSource(t)}(s),s}();const h=function(){const t=new s.GUI({width:300});return t.add(c,"lat").step(1e-4).onChange(p),t.add(c,"lng").step(1e-4).onChange(p),t.add(c,"alt").step(1e-4).onChange(p),t.add(e.mapView,"tileWrappingEnabled").onChange((t=>{e.mapView.tileWrappingEnabled=t})),t.add({projection:"mercatorProjection"},"projection",["sphereProjection","mercatorProjection"]).onChange((t=>{e.mapView.projection="sphereProjection"===t?n.sphereProjection:n.mercatorProjection})),t}(),g=function(){const e=document.createElement("div");return e.id="screenAnchor",e.style.position="absolute",e.style.backgroundColor="red",e.style.width="10px",e.style.height="10px",e.style.pointerEvents="none",document.body.appendChild(e),e}(),m=function(){const e=document.createElement("div");return e.id="screenAnchorOutput",e.style.position="absolute",e.style.cssFloat="bottom-right",e.style.bottom="10px",e.style.left="10px",e.style.textAlign="left",e.style.textShadow="0px 0px 2px gray",document.body.appendChild(e),e}(),y=function(e){const t=new l.Mesh(new l.BoxBufferGeometry(100,100,100),new l.MeshBasicMaterial({color:"green"}));return t.geoPosition=o,t.overlay=!0,t.renderOrder=Number.MAX_SAFE_INTEGER,e.mapAnchors.add(t),t}(e.mapView);!function(){const e=document.createElement("div");e.innerHTML='\n <br /> This example shows how MapView.getScreenPosition works for various cases\n <br /> the red square is painted on the screen in screen coordinates, whereas the green cube\n <br /> lives in the world.\n <br /> Use the arrow keys or the gui to change the geoPosition\n <br /> Jump to next worlds with "j" and "l"\n ',e.style.position="absolute",e.style.cssFloat="right",e.style.top="10px",e.style.left="100px",e.style.textAlign="left",e.style.textShadow="0px 0px 2px gray",document.body.appendChild(e)}(),e.mapView.addEventListener(r.MapViewEventNames.Update,p)}(t.t||(t.t={}))},4428:e=>{e.exports=THREE}},t={};function o(n){if(t[n])return t[n].exports;var i=t[n]={exports:{}};return e[n].call(i.exports,i,i.exports,o),i.exports}o.m=e,o.x=e=>{},o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.j=469,(()=>{var e={469:0,738:0},t=[[7266,592]],n=e=>{},i=(i,r)=>{for(var a,s,[l,d,c,p]=r,u=0,w=[];u<l.length;u++)s=l[u],o.o(e,s)&&e[s]&&w.push(e[s][0]),e[s]=0;for(a in d)o.o(d,a)&&(o.m[a]=d[a]);for(c&&c(o),i&&i(r);w.length;)w.shift()();return p&&t.push.apply(t,p),n()},r=self.webpackChunk_here_harp_examples=self.webpackChunk_here_harp_examples||[];function a(){for(var n,i=0;i<t.length;i++){for(var r=t[i],a=!0,s=1;s<r.length;s++){var l=r[s];0!==e[l]&&(a=!1)}a&&(t.splice(i--,1),n=o(o.s=r[0]))}return 0===t.length&&(o.x(),o.x=e=>{}),n}r.forEach(i.bind(null,0)),r.push=i.bind(null,r.push.bind(r));var s=o.x;o.x=()=>(o.x=s||(e=>{}),(n=a)())})(),o.x()})();