fork download
copy 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6.     <title>VueLayers UMD</title>
  7.     <!-- include Vue -->
  8.     <script src="https://u...content-available-to-author-only...g.com/vue/dist/vue.js"></script>
  9.     <!-- include OpenLayers -->
  10.     <script src="https://u...content-available-to-author-only...g.com/openlayers/dist/ol.js"></script>
  11.     <!-- include UMD VueLayers build -->
  12.     <link rel="stylesheet" href="https://u...content-available-to-author-only...g.com/vuelayers/lib/style.css">
  13.     <script src="https://u...content-available-to-author-only...g.com/vuelayers/lib/index.umd.js"></script>
  14.     <style>
  15.         html, body, #app {
  16.             width: 100%;
  17.             height: 100%;
  18.             margin: 0;
  19.             padding: 0;
  20.             box-sizing: border-box;
  21.         }
  22.  
  23.             body * {
  24.                 box-sizing: border-box;
  25.             }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div id="app">
  30.         <div>
  31.             <vl-map :load-tiles-while-animating="true"
  32.                     :load-tiles-while-interacting="true"
  33.                     data-projection="EPSG:4326">
  34.                 <vl-view :zoom="zoom"
  35.                          :center="center"
  36.                          :max-zoom="maxZoom"
  37.                          :min-zoom="minZoom"
  38.                          :rotation="rotation"></vl-view>
  39.  
  40.                 <vl-layer-tile>
  41.                     <vl-source-xyz :url="'/map/{z}/{x}/{y}'"></vl-source-xyz>
  42.                 </vl-layer-tile>
  43.  
  44.                 <vl-layer-vector>
  45.                     <vl-source-vector>
  46.                         <vl-feature v-for="f in features" :key="f.id">
  47.                             <vl-geom-point :coordinates="f.geometry.coordinates"></vl-geom-point>
  48.                             <vl-style-box>
  49.                                 <vl-style-text :text="_fommatText(f)"
  50.                                                font="bold 24px Arial"
  51.                                                text-align="end"
  52.                                                text-baseline="middle">
  53.                                     <vl-style-stroke :width="3"
  54.                                                      color="rgba(250,0,0,0.8)"></vl-style-stroke>
  55.                                     <vl-style-fill :color="f.properties.color"></vl-style-fill>
  56.                                 </vl-style-text>
  57.                                 <vl-style-icon src="/Scripts/VueLayers/dot.png"
  58.                                                cross-origin="anonymous"
  59.                                                :color="f.properties.color"></vl-style-icon>
  60.                             </vl-style-box>
  61.                         </vl-feature>
  62.                     </vl-source-vector>
  63.                 </vl-layer-vector>
  64.  
  65.                 <vl-layer-vector>
  66.                     <vl-source-vector ident="draw-target" ></vl-source-vector>
  67.                     <vl-style-box>
  68.                         <vl-style-text text=" how to bin text by data?"
  69.                                        font="bold 25px Arial"
  70.                                        text-align="end"
  71.                                        text-baseline="middle">
  72.                             <vl-style-stroke color="red" :width="3"></vl-style-stroke>
  73.                             <vl-style-fill color="yellow"></vl-style-fill>
  74.                         </vl-style-text>
  75.                         <vl-style-icon src="/Scripts/VueLayers/dot.png"
  76.                                        cross-origin="anonymous"
  77.                                        color="yellow"></vl-style-icon>
  78.                     </vl-style-box>
  79.                 </vl-layer-vector>
  80.                 <vl-interaction-draw source="draw-target" type="Point"></vl-interaction-draw>
  81.                 <vl-interaction-snap source="draw-target"></vl-interaction-snap>
  82.                 <vl-interaction-modify source="draw-target"></vl-interaction-modify>
  83.  
  84.             </vl-map>
  85.         </div>
  86.         <div>
  87.             <button @@click="test">test</button>
  88.         </div>
  89.     </div>
  90.  
  91.     <script>
  92.         // all input/output coordinates, GeoJSON features in EPSG:4326 projection
  93.         Vue.use(VueLayers, {
  94.             dataProjection: 'EPSG:4326',
  95.         })
  96.  
  97.         var app = new Vue({
  98.             el: '#app',
  99.             data: {
  100.                 center: [37.41, 8.82],
  101.                 rotation: 0,
  102.                 zoom: 5,
  103.                 maxZoom: 5,
  104.                 minZoom: 5,
  105.                 features: [
  106.                     {
  107.                         id: "d45bdba2-84b7-46d9-80a0-64b78c67acd1",
  108.                         type: "Feature",
  109.                         geometry: {
  110.                             type: 'Point',
  111.                             coordinates: [37.41, 15.82],
  112.                         },
  113.                         properties: {
  114.                             name: "Point 1",
  115.                             color: 'yellow',
  116.                             value: 100,
  117.                         },
  118.                     },
  119.                     {
  120.                         id: "d45bdba2-84b7-46d9-80a0-64b78c67acd2",
  121.                         type: "Feature",
  122.                         geometry: {
  123.                             type: 'Point',
  124.                             coordinates: [30.41, 10.82],
  125.                         },
  126.                         properties: {
  127.                             name: "Point 2",
  128.                             color: 'yellow',
  129.                             value: 50,
  130.                         },
  131.                     },
  132.                     {
  133.                         id: "d45bdba2-84b7-46d9-80a0-64b78c67acd3",
  134.                         type: "Feature",
  135.                         geometry: {
  136.                             type: 'Point',
  137.                             coordinates: [47.41, 15.82],
  138.                         },
  139.                         properties: {
  140.                             name: "Point 3",
  141.                             color: 'yellow',
  142.                             value: 0,
  143.                         },
  144.                     },
  145.                 ],
  146.             },
  147.             methods: {
  148.                 _fommatText(f) {
  149.                     return `  ${f.properties.name}
  150.        ${f.properties.value}%`;
  151.                 },
  152.                 test() {
  153.                     setInterval(() => {
  154.                         for (var i = 0; i < this.features.length; i++) {
  155.                             let color = ["blue", "yellow", "green", "pink"][Math.ceil(Math.random() * 100) % 4];
  156.                             let value = Math.ceil(Math.random() * 100);
  157.                             this.features[i].properties.color = color;
  158.                             this.features[i].properties.value = value;
  159.                         }
  160.                     }, 1000);
  161.                 }
  162.             },
  163.         })
  164.     </script>
  165. </body>
  166. </html>
Runtime error #stdin #stdout #stderr 0.02s 16616KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
Standard output is empty
stderr
copy 
prog.js:1:0 SyntaxError: expected expression, got '<':
prog.js:1:0 <!DOCTYPE html>
prog.js:1:0 ^
https://ideone.com/Os9K9S
language:
JavaScript (SMonkey 60.2.3)
created:
5 years ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!