Skip to content

M
missis-demo
Commit de20ebd9 authored by 张泽丹's avatar 张泽丹 💻
Browse files
Options

feat&fix:拖动样式；记录地图缩放后的z以及center;debug

parent cce25f11
Hide whitespace changes
Inline Side-by-side
Showing with 90 additions and 32 deletions
src/components/codeMirror/CodeMirror.vue
View file @ de20ebd9
......@@ -22,7 +22,7 @@
</div>
<!-- 代码编辑器 -->
<codemirror id="editor" v-model="code" :options="options"></codemirror>
<codemirror id="editor" ref="editor" v-model="code" :options="options"></codemirror>
</div>
</div>
</div>
......@@ -41,6 +41,8 @@ import './setting.js'
import { code } from './codeMirrorConf.js'
// import Card from '@/components/card/Card'
var center = []
var zoom = 0
export default {
name: 'codeMirror',
data () {
......@@ -85,7 +87,6 @@ export default {
watch: {
url: {
handler: function (newval) {
console.log(newval)
// 初始化加载,组件入口
this.changeUrl(newval)
}
......@@ -98,6 +99,28 @@ export default {
const frame = document.querySelector('#frame')
frame.contentWindow.document.open()
frame.contentWindow.document.write(this.code)
// 根据需求对iframe里的页面进行操作
this.$nextTick(() => {
setTimeout(() => {
frame.contentWindow.document.body.onmousemove = this.$parent.move
let map = null
switch (this.language) {
case 'leaflet':
map = window.frame.mymap
map.on('zoom', () => {
center = [map._animateToCenter.lat, map._animateToCenter.lng]
zoom = map._zoom
})
break
case 'mapbox':
map = window.frame.map
map.on('zoom', () => {
center = [map.transform.center.lng, map.transform.center.lat]
zoom = map.transform._zoom
})
}
}, 100)
})
},
// 复制代码并保持格式
copyCode () {
......@@ -113,27 +136,49 @@ export default {
// 切换代码 mapbox和leafLet 切换
changeCode (value) {
this.language = value
center = []
zoom = 0
if (JSON.parse(JSON.stringify(this.allCode))[this.language]) {
this.code = JSON.parse(JSON.stringify(this.allCode))[this.language]
} else {
this.code = ''
}
this.runCode()
this.changeUrl(this.url)
},
// 更换展示·数据
changeUrl (url = '') {
console.log(center, zoom)
let _center = []
let _zoom = 0
switch (this.language) {
case 'leaflet':
_center = [26, 10]
_zoom = 2
break
case 'mapbox':
_center = [10, 34]
_zoom = 1
break
}
if (center && zoom) {
_center = center
_zoom = zoom
}
if (!url) {
return
}
// 获取code列表 代码模板
const _code = JSON.parse(JSON.stringify(code))
url = url.replace(/"/g, '\\"')
console.log(url)
for (const index in _code) {
_code[index] = code[index].replace('你的URL', url)
.replace('中心点', _center).replace('层级', _zoom)
}
this.allCode = JSON.parse(JSON.stringify(_code))
this.code = this.allCode[this.language]
this.$nextTick(() => {
this.$refs.editor.refresh()
})
this.runCode()
}
}
......
src/components/codeMirror/codeMirrorConf.js
View file @ de20ebd9
......@@ -26,9 +26,10 @@ export const code = {
"sources": {},
"layers": [],
},
center: [30,34],
zoom: 1,
attributionControl: true
center: [中心点],
zoom: 层级,
attributionControl: true,
renderWorldCopies: false
});
map.on('load', function () { // 底图加载成功 添加服务
map.addSource('raster-layer', {
......@@ -61,7 +62,7 @@ export const code = {
<body>
<div id="mapid" style="width: 100%; height: 100vh;"></div>
<script>
var mymap = L.map('mapid').setView([26, 10], 2);
var mymap = L.map('mapid').setView([中心点], 层级);
// 添加服务
L.tileLayer("你的URL", {
noWrap: true
......
src/views/Main.vue
View file @ de20ebd9
<template>
<div class="page">
<div class="page"
@mousemove="move"
@mouseup="stopMove">
<div class="left" :style="{width: leftWidth}">
<add-controls v-show="curShow === 'style'"></add-controls>
<code-mirror v-show="curShow === 'code'" class="code-mirror" ref='codeMirror' :url="getStyleUrl"></code-mirror>
</div>
<div class="width-slider"
@mousedown="startMove"
@mousemove="move"
@mouseup="stopMove"
:style="{left: leftWidth}"
>
<a-icon type="align-center" /></div>
</div>
<div class="right">
<!-- 编辑器代码实现 -->
<section id="preview">
<iframe id="frame" frameborder="0"></iframe>
<iframe id="frame" name="frame" frameborder="0"></iframe>
</section>
</div>
<div class="top-absolute">
......@@ -45,20 +45,28 @@ export default {
AddControls,
codeMirror
},
methods: {
startMove (e) {
start = e.pageX
console.log(start)
},
move (e) {
if (start) {
end = e.pageX
this.leftWidth = `${end - 20}px`
}
},
stopMove (e) {
start = 0
}
mounted () {
},
watch: {
curShow (newVal) {
this.$nextTick(() => {
this.$refs.codeMirror.$refs.editor.refresh()
})
}
},
methods: {
startMove (e) {
start = e.screenX
},
move (e) {
if (start) {
end = e.screenX
this.leftWidth = `${end - 1}px`
}
},
stopMove (e) {
start = 0
}
}
}
</script>
......@@ -85,11 +93,10 @@ export default {
.width-slider{
position: absolute;
left: 25%;
width: 13px;
width: 3px;
height: 100%;
background-color: #333;
box-shadow: 0 0 5px 0 #ddd inset;
cursor: pointer;
cursor: move;
transition: .3s;
display: flex;
align-items: center;
......@@ -100,7 +107,8 @@ export default {
font-weight: bold;
}
&:hover{
width: 40px;
background-color: #0f69c7;
box-shadow: none;
}
}
}
......
src/views/addcontrols.vue
View file @ de20ebd9
......@@ -69,7 +69,6 @@ export default {
const styleCfg = {}
this.checkedList.forEach(item => {
if (item.id === 'agnp') {
console.log(this.$refs[item.id])
styleCfg[item.id] = this.$refs[item.id][0].$refs.styleSetting.map(item => item.layerStyle)
} else {
styleCfg[item.id] = [this.$refs[item.id][0].$refs.styleSetting.layerStyle]
......@@ -157,6 +156,11 @@ export default {
onCheckAllChange(checked) {
this.checkAll = checked
this.layerProp.forEach(item => item.isShow = checked)
this.$nextTick(() => {
setTimeout(() => {
this.onChange()
}, 100);
})
},
handleLayerMoved (e) {
this.$nextTick(() => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment