init
This commit is contained in:
djerom
commit
b0cb3e60d6
14
file.js
Normal file
14
file.js
Normal file
@ -0,0 +1,14 @@
|
||||
export default {
|
||||
download(filename, text) {
|
||||
var element = document.createElement("a");
|
||||
element.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(text));
|
||||
element.setAttribute("download", filename);
|
||||
|
||||
element.style.display = "none";
|
||||
document.body.appendChild(element);
|
||||
|
||||
element.click();
|
||||
|
||||
document.body.removeChild(element);
|
||||
},
|
||||
};
|
||||
503
index.html
Normal file
503
index.html
Normal file
@ -0,0 +1,503 @@
|
||||
<script src="https://unpkg.com/axios@0.2.1/dist/axios.min.js"></script>
|
||||
<!-- <script src="index.js" type="module"></script> -->
|
||||
|
||||
<style>
|
||||
.panel div {
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="panel">
|
||||
<div>
|
||||
<button onclick="save()">Download</button>
|
||||
</div>
|
||||
|
||||
<div style="width: 100px;"> </div>
|
||||
|
||||
<div>
|
||||
<button onclick="build_map_wopt()">WOPT map</button>
|
||||
</div>
|
||||
<div>
|
||||
<button onclick="build_map_wwpt()">WWPT map</button>
|
||||
</div>
|
||||
<div>
|
||||
<button onclick="build_map_wgpt()">WGPT map</button>
|
||||
</div>
|
||||
<div>
|
||||
<button onclick="build_map_wwit()">WWIT map</button>
|
||||
</div>
|
||||
<div style="width: 100px;"> </div>
|
||||
|
||||
<div>
|
||||
<button onclick="build_map_wopt()">WOPR map</button>
|
||||
</div>
|
||||
<div>
|
||||
<button onclick="build_map_wwpt()">WWPR map</button>
|
||||
</div>
|
||||
<div>
|
||||
<button onclick="build_map_wgpr()">WGPR map</button>
|
||||
</div>
|
||||
<div>
|
||||
<button onclick="build_map_wwit()">WWIR map</button>
|
||||
</div>
|
||||
<div style="width: 100px;"> </div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button onclick="scale()">Scale</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="map" style="border: 1px #000 solid;"></div>
|
||||
|
||||
|
||||
<div>
|
||||
<div>menu</div>
|
||||
<div>map</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
function download(filename, text) {
|
||||
var element = document.createElement('a');
|
||||
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
|
||||
element.setAttribute('download', filename);
|
||||
element.setAttribute('target', '_blank');
|
||||
|
||||
element.style.display = 'none';
|
||||
document.body.appendChild(element);
|
||||
|
||||
element.click();
|
||||
|
||||
document.body.removeChild(element);
|
||||
}
|
||||
|
||||
let wells = [
|
||||
{ id: 1, name: 'well1', whx: 100, why: 100 },
|
||||
{ id: 2, name: 'well2', whx: 200, why: 300 },
|
||||
{ id: 3, name: 'well3', whx: 300, why: 500 },
|
||||
{ id: 4, name: 'well4', whx: 100, why: 500 }
|
||||
]
|
||||
|
||||
let map = {
|
||||
layers: [
|
||||
|
||||
]
|
||||
}
|
||||
|
||||
function render_map(map) {
|
||||
// let header = `<svg viewBox="-200 -200 2000 2000" version="1.1" xmlns="http://www.w3.org/2000/svg">`
|
||||
let header = `<svg viewBox="-200 -200 2000 2000" version="1.1" xmlns="http://www.w3.org/2000/svg" id="svg">`
|
||||
// let header = `<svg viewBox="-200 -200 2000 2000" version="1.1" xmlns="http://www.w3.org/2000/svg" id="svg" preserveAspectRatio="xMinYMax meet">`
|
||||
let footer = `</svg>`
|
||||
let body = map.layers.join('')
|
||||
|
||||
return header + body + footer
|
||||
}
|
||||
// let layer = '<g>' + wells.map(x => `<circle cx="${x.whx}" cy="${x.whx}" r="50" />`).join('') + '</g>'
|
||||
|
||||
class SvgNode {
|
||||
constructor(tag, attrs) {
|
||||
this.tag = tag
|
||||
this.attrs = attrs || {}
|
||||
}
|
||||
|
||||
set_attr(attr, value) {
|
||||
if (typeof attr === 'string')
|
||||
this.attrs[attr] = value
|
||||
else
|
||||
this.attrs = { ...this.attrs, ...attr }
|
||||
return this
|
||||
}
|
||||
|
||||
set_style(style) {
|
||||
this.style = { ...this.style || {}, ...style }
|
||||
return this
|
||||
}
|
||||
|
||||
clear_style(style) {
|
||||
this.style = null
|
||||
return this
|
||||
}
|
||||
|
||||
move(x, y) {
|
||||
this.transform = { x, y }
|
||||
return this
|
||||
}
|
||||
|
||||
get(attr) {
|
||||
|
||||
}
|
||||
|
||||
_render_node(node) {
|
||||
// console.log(typeof node)
|
||||
// if (typeof node == 'undefined') return ''
|
||||
if (typeof node == 'string') return node
|
||||
else if (typeof node == 'SvgNode') return node.render()
|
||||
else return ''
|
||||
}
|
||||
|
||||
render() {
|
||||
let attrs = Object.keys(this.attrs).map(x => `${x}="${this.attrs[x]}"`).join(' ')
|
||||
// console.log(this.style ? Object.keys(this.style).map(x => `${x}:${this.style[x]}`) : '')
|
||||
let style = this.style ? 'style="' + Object.keys(this.style).map(x => `${x}:${this.style[x]}`).join('; ') + '"' : ''
|
||||
let transfrom = this.transform ? `transform="translate(${this.transform.x},${this.transform.y})"` : ''
|
||||
let children = this.items ? this.items.map(x => this._render_node(x)).join('') : ''
|
||||
return `<${this.tag} ${attrs} ${style} ${transfrom}>${children}</${this.tag}>`
|
||||
}
|
||||
}
|
||||
|
||||
svg_node = {}
|
||||
|
||||
|
||||
svg_path = {
|
||||
move(x, y) {
|
||||
|
||||
},
|
||||
|
||||
line(x, y) {
|
||||
|
||||
},
|
||||
|
||||
arc(x, y, r, a) {
|
||||
|
||||
},
|
||||
|
||||
attrs: {
|
||||
'stroke-width': 3
|
||||
},
|
||||
|
||||
layers: [],
|
||||
|
||||
render() {
|
||||
return `<path d="M0 0 L${c0} ${s0} A ${r} ${r} 0 ${aa} 0 ${c1} ${s1} z" stroke-width="3" stroke="#f00" fill="#0f0"/>`
|
||||
}
|
||||
}
|
||||
|
||||
function arc(r, ang) {
|
||||
var sa = -Math.sin(ang * Math.PI / 180) * r;
|
||||
var ca = Math.cos(ang * Math.PI / 180) * r;
|
||||
var aa = (ang > 180) ? 1 : 0;
|
||||
// var p = new TimalSvg.Data.SvgPath(string.Format("M0 0 L{0} 0 A {0} {0} 0 {3} 0 {1} {2} z", FN(r), ca, sa, aa));
|
||||
// p.Transform = string.Format("rotate({0})", FN(ang / 2));
|
||||
|
||||
return `<path d="M${r} 0 A ${r} ${r} 0 ${aa} 0 ${ca} ${sa}" stroke-width="30" stroke="#f00" fill="none"/>`
|
||||
}
|
||||
|
||||
function sector(r, a0, a1) {
|
||||
const k = Math.PI / 180
|
||||
let s0 = -Math.sin(a0 * k) * r;
|
||||
let c0 = Math.cos(a0 * k) * r;
|
||||
let s1 = -Math.sin(a1 * k) * r;
|
||||
let c1 = Math.cos(a1 * k) * r;
|
||||
|
||||
var aa = (a1 - a0 > 180) ? 1 : 0
|
||||
// var p = new TimalSvg.Data.SvgPath(string.Format("M0 0 L{0} 0 A {0} {0} 0 {3} 0 {1} {2} z", FN(r), ca, sa, aa));
|
||||
// p.Transform = string.Format("rotate({0})", FN(ang / 2));
|
||||
|
||||
return `<path d="M0 0 L${c0} ${s0} A ${r} ${r} 0 ${aa} 0 ${c1} ${s1} z" stroke-width="3" stroke="#f00" fill="#0f0"/>`
|
||||
}
|
||||
|
||||
function svg_sector(r, a0, a1) {
|
||||
const k = Math.PI / 180
|
||||
let s0 = -Math.sin(a0 * k) * r;
|
||||
let c0 = Math.cos(a0 * k) * r;
|
||||
let s1 = -Math.sin(a1 * k) * r;
|
||||
let c1 = Math.cos(a1 * k) * r;
|
||||
|
||||
var aa = (a1 - a0 > 180) ? 1 : 0
|
||||
// var p = new TimalSvg.Data.SvgPath(string.Format("M0 0 L{0} 0 A {0} {0} 0 {3} 0 {1} {2} z", FN(r), ca, sa, aa));
|
||||
// p.Transform = string.Format("rotate({0})", FN(ang / 2));
|
||||
|
||||
return new SvgNode('path', { d: `M0 0 L${c0} ${s0} A ${r} ${r} 0 ${aa} 0 ${c1} ${s1} z` })
|
||||
}
|
||||
|
||||
let style = {
|
||||
'stroke-width': 3,
|
||||
'stroke': '#f00',
|
||||
'fill': '#0f0'
|
||||
}
|
||||
|
||||
function circle(r) {
|
||||
return new SvgNode('circle').set_attr('r', r)
|
||||
}
|
||||
|
||||
function svg_ring_sector(r0, r1, a0, a1) {
|
||||
const k = Math.PI / 180
|
||||
let s0 = -Math.sin(a0 * k);
|
||||
let c0 = Math.cos(a0 * k);
|
||||
let s1 = -Math.sin(a1 * k);
|
||||
let c1 = Math.cos(a1 * k);
|
||||
|
||||
var aa = (a1 - a0 > 180) ? 1 : 0
|
||||
|
||||
return new SvgNode('path', {
|
||||
'd': `M${c0 * r0} ${s0 * r0}
|
||||
A ${r0} ${r0} 0 ${aa} 0 ${c1 * r0} ${s1 * r0}
|
||||
L${c1 * r1} ${s1 * r1}
|
||||
A ${r1} ${r1} 0 ${aa} 1 ${c0 * r1} ${s0 * r1} z`
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
let style2 = {
|
||||
'stroke-width': 3,
|
||||
'stroke': '#00f',
|
||||
'fill': '#0ff'
|
||||
}
|
||||
|
||||
let style3 = {
|
||||
'stroke-width': 1,
|
||||
'stroke': '#000',
|
||||
'fill': '#fff'
|
||||
}
|
||||
|
||||
|
||||
let style_fault = {
|
||||
'stroke-width': 3,
|
||||
'stroke-dasharray': "10 10",
|
||||
'stroke': '#000',
|
||||
'fill': 'none'
|
||||
}
|
||||
|
||||
let style_vnk = {
|
||||
'stroke-width': 2,
|
||||
'stroke-dasharray': "2 2",
|
||||
'stroke': '#00f',
|
||||
'fill': 'none'
|
||||
}
|
||||
|
||||
|
||||
let style_wellhead = {
|
||||
'stroke-width': 2,
|
||||
'stroke': '#f00',
|
||||
'fill': '#eee',
|
||||
'font-family': 'Courier new',
|
||||
'font-weight': 'bold',
|
||||
'font-size': '26px'
|
||||
}
|
||||
|
||||
let style_wellhead_text = {
|
||||
'stroke-width': 1,
|
||||
'stroke': '#fff',
|
||||
'fill': '#000',
|
||||
'font-family': 'Courier new',
|
||||
'font-weight': 'bold',
|
||||
'font-size': '26px'
|
||||
}
|
||||
|
||||
|
||||
let style_wir = {
|
||||
'stroke-width': 3,
|
||||
'stroke': '#00f',
|
||||
'fill': '#0af'
|
||||
}
|
||||
|
||||
let style_opr = {
|
||||
'stroke-width': 1,
|
||||
'stroke': '#00f',
|
||||
'fill': '#293324'
|
||||
}
|
||||
|
||||
let style_gpr = {
|
||||
'stroke-width': 1,
|
||||
'stroke': '#00f',
|
||||
'fill': '#ff0'
|
||||
}
|
||||
|
||||
let fault = {
|
||||
name: 'Fault 1', lines: [
|
||||
[
|
||||
{ x: 10, y: 20 },
|
||||
{ x: 300, y: 50 },
|
||||
{ x: 170, y: 10 },
|
||||
{ x: 120, y: -150 }
|
||||
]
|
||||
]
|
||||
}
|
||||
|
||||
function render_fault(fault) {
|
||||
let path0 = fault.lines[0]
|
||||
path0 = path0.slice(0, 1).map(x => `M${x.x} ${x.y}`).join(' ') + ' ' + path0.slice(1).map(x => `L${x.x} ${x.y}`).join(' ')
|
||||
|
||||
return new SvgNode('path').set_attr('d', path0)
|
||||
}
|
||||
|
||||
let vnk1 = [
|
||||
{ x: -10, y: -20 },
|
||||
{ x: 300, y: 0 },
|
||||
{ x: 470, y: 300 },
|
||||
{ x: -120, y: 290 }
|
||||
]
|
||||
|
||||
function render_contour(curve) {
|
||||
let path0 = curve.slice(0, 1).map(x => `M${x.x} ${x.y}`).join(' ') + ' ' + curve.slice(1).map(x => `L${x.x} ${x.y}`).join(' ') + ' z'
|
||||
|
||||
return new SvgNode('path').set_attr('d', path0)
|
||||
}
|
||||
|
||||
function render_well(well) {
|
||||
|
||||
}
|
||||
|
||||
function svg_text(text) {
|
||||
let node = new SvgNode('text')
|
||||
node.items = [text]
|
||||
node.set_attr('x', 0).set_attr('y', 0)
|
||||
// node.set_attr('style', style)
|
||||
// node.set_attr('stroke', "#fff")
|
||||
// node.set_attr('stroke-width', "1")
|
||||
return node
|
||||
}
|
||||
|
||||
const text_style = 'font-family: Courier new; font-weight:bold; font-size:26px; fill:#000; stroke:#0f0; stroke-width:1'
|
||||
|
||||
map = {
|
||||
layers: [
|
||||
'<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00" />',
|
||||
// '<g>' + wells.map(x => `<circle cx="${x.whx}" cy="${x.why}" r="5" strokeWidth="1" stroke="#f00" fill="none" />`).join('') + '</g>',
|
||||
// '<path d="M0 0 L{0} 0 A {0} {0} 0 {3} 0 {1} {2} z"/>',
|
||||
// '<circle cx="200" cy="200" r="50" stroke-width="25" stroke-dasharray="180" stroke-dashoffset="180" stroke="#f00" fill="none" />'
|
||||
// sector(100, 0, 290),
|
||||
// sector(50, 90, 360),
|
||||
// svg_ring_sector(50, 100, 0, 290).set_attr(style).render(),
|
||||
// svg_ring_sector(50, 100, 290, 360).set_attr(style2).render(),
|
||||
// circle(15).set_attr(style3).render(),
|
||||
// '<text x="10" y="-10" style="font-family: Courier new; font-weight:bold; font-size:26px; fill:#000" stroke="#fff" stroke-width="1">G-504</text>',
|
||||
// render_fault(fault).set_attr(style_fault).render(),
|
||||
// render_contour(vnk1).set_attr(style_vnk).render(),
|
||||
// svg_text('Hallo world', text_style).render()
|
||||
]
|
||||
}
|
||||
|
||||
let cur_map = ''
|
||||
|
||||
|
||||
function save() {
|
||||
download('file.svg', cur_map)
|
||||
}
|
||||
|
||||
// document.getElementById('map').innerHTML = render_map(map)
|
||||
|
||||
const query = 'SELECT * FROM wells WHERE whx < 2000 AND why < 2000'
|
||||
axios.post('http://localhost:4000/proxy/sqlite', { query }).then(x => x.data)
|
||||
.then(wells => {
|
||||
|
||||
let layer_wells = wells.map(w => circle(15).set_style(style_wellhead).move(w.whx, w.why).render())
|
||||
let layer_wells_wpr = wells.map(w => svg_sector(70, 0, 70).set_style(style_wir).move(w.whx, w.why).render())
|
||||
|
||||
let layer_wells_gpr = wells.map(w => svg_sector(70, 70, 130).set_style(style_gpr).move(w.whx, w.why).render())
|
||||
let layer_wells_opr = wells.map(w => svg_sector(70, 130, 360).set_style(style_opr).move(w.whx, w.why).render())
|
||||
|
||||
let layer_well_names = wells.map(w => svg_text(w.well).set_style(style_wellhead_text).move(w.whx + 10, w.why - 10).render())
|
||||
// let layers = [...layer_wells, ...layer_wells_wpr, ...layer_well_names]
|
||||
// let layers = layer_wells_wpr
|
||||
let layers = [...layer_wells_wpr, ...layer_wells_gpr, ...layer_wells_opr, ...layer_wells, ...layer_well_names,
|
||||
render_fault(fault).set_attr(style_fault).render(),
|
||||
render_contour(vnk1).set_attr(style_vnk).render()
|
||||
]
|
||||
|
||||
cur_map = render_map({ layers })
|
||||
document.getElementById('map').innerHTML = cur_map
|
||||
|
||||
new SvgMap(document.getElementById('svg'))
|
||||
})
|
||||
|
||||
|
||||
class SvgMap {
|
||||
constructor(el) {
|
||||
this.el = el
|
||||
this.scale = 1
|
||||
this.pos = { x: 0, y: 0 }
|
||||
console.log(el)
|
||||
this.el.onwheel = this.handle_wheel.bind(this)
|
||||
this.el.onmousedown = this.handle_mousedown.bind(this)
|
||||
this.el.onmousemove = this.handle_mousemove.bind(this)
|
||||
this.el.onmouseup = this.handle_mouseup.bind(this)
|
||||
|
||||
this.is_down = false
|
||||
|
||||
this.set_scale(1)
|
||||
}
|
||||
|
||||
handle_mousedown(event) {
|
||||
this.is_down = true
|
||||
this.downin = { x: event.clientX, y: event.clientY }
|
||||
console.log(event)
|
||||
// clientX: 451, clientY: 297
|
||||
// layerX: 451, layerY: 297
|
||||
}
|
||||
|
||||
handle_mousemove(event) {
|
||||
if (this.is_down) {
|
||||
event.preventDefault()
|
||||
let dx = event.clientX - this.downin.x
|
||||
let dy = event.clientY - this.downin.y
|
||||
|
||||
this.pos.x -= dx * this.scale
|
||||
this.pos.y -= dy * this.scale
|
||||
this.set_scale(this.scale)
|
||||
this.downin = { x: event.clientX, y: event.clientY }
|
||||
// this.downin = {x: event.clientX, y: event.clientY}
|
||||
}
|
||||
// console.log(event.target.tagName)
|
||||
}
|
||||
|
||||
handle_mouseup(event) {
|
||||
this.is_down = false
|
||||
}
|
||||
|
||||
|
||||
handle_wheel(event) {
|
||||
event.preventDefault()
|
||||
|
||||
if (event.ctrlKey) {
|
||||
if (event.deltaY > 0) {
|
||||
this.scale_up()
|
||||
}
|
||||
else
|
||||
this.scale_down()
|
||||
}
|
||||
|
||||
else if (event.shiftKey) {
|
||||
console.log('shifted')
|
||||
}
|
||||
|
||||
else {
|
||||
|
||||
}
|
||||
|
||||
console.log(event)
|
||||
}
|
||||
|
||||
set_scale(scale) {
|
||||
this.scale = scale
|
||||
this.el.setAttribute("viewBox", `${this.pos.x} ${this.pos.y} ${2000 * this.scale} ${2000 * this.scale}`)
|
||||
}
|
||||
|
||||
scale_up() {
|
||||
this.set_scale(this.scale * 1.1)
|
||||
}
|
||||
|
||||
scale_down() {
|
||||
this.set_scale(this.scale * 0.9)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function handle_wheel(event) {
|
||||
event.preventDefault()
|
||||
console.log(event.deltaY)
|
||||
console.log(event)
|
||||
|
||||
document.getElementById('svg').setAttribute("viewBox", "0 0 3000 3000")
|
||||
}
|
||||
|
||||
|
||||
function scale() {
|
||||
document.getElementById('svg').setAttribute("viewBox", "0 0 3000 3000")
|
||||
}
|
||||
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user