添加地图
parent
2037e5400f
commit
46317ed4ce
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
|
|
@ -33,6 +33,8 @@
|
|||
import { useVContext } from '../useVContext'
|
||||
import { getAgriculturalBasic } from '/@/api/sys/other'
|
||||
import { useVisualizationStore } from '/@/store/modules/visualization'
|
||||
import SheepImg from '/@/assets/images/sheep.png'
|
||||
import PigImg from '/@/assets/images/pig.png'
|
||||
|
||||
const domImg = document.createElement('img')
|
||||
domImg.style.height = '8px'
|
||||
|
|
@ -44,6 +46,7 @@
|
|||
domImgHover.src =
|
||||
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAIAAAAmKNuZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFDQ0Q2RjYyQTdDRDExRUI4ODUxRDIxRjkzMEExNzg2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFDQ0Q2RjYzQTdDRDExRUI4ODUxRDIxRjkzMEExNzg2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUNDRDZGNjBBN0NEMTFFQjg4NTFEMjFGOTMwQTE3ODYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QUNDRDZGNjFBN0NEMTFFQjg4NTFEMjFGOTMwQTE3ODYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6FboimAAAASklEQVR42mIUnL9XtHsDAzXA69IARjWtXJYX7+FCfyQEKeEyMVAVDG7jWCB+RhaihAsybjQqRqNiNCpGo2I0KoZZVDBSt9oGCDAAhYNrvRu3DWEAAAAASUVORK5CYII='
|
||||
const img2 = 'image://https://www.makeapie.cn/asset/get/s/data-1619318279159-o6ZbTGoO0.png'
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const visualizationStore = useVisualizationStore()
|
||||
|
|
@ -69,122 +72,155 @@
|
|||
|
||||
async function mapNyTypeInit() {
|
||||
const _mapNyNxData = (await (await import('./nylx.json')).default) as any
|
||||
console.log(_mapNyNxData)
|
||||
|
||||
const _data = [
|
||||
{
|
||||
value: 1,
|
||||
name: '稻渔综合种养',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
name: '优品柑桔种植',
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
name: '高粱产业',
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
name: '油茶产业',
|
||||
},
|
||||
]
|
||||
registerMap('lcxz', _mapNyNxData)
|
||||
options = {
|
||||
visualMap: {
|
||||
right: 10,
|
||||
bottom: 300,
|
||||
type: 'piecewise',
|
||||
pieces: [
|
||||
legend: {
|
||||
data: [
|
||||
{
|
||||
value: 0,
|
||||
label: '优质柑桔种植',
|
||||
color: '#2c9a42',
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '稻鱼综合种养',
|
||||
color: '#d08a00',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '高粱产业',
|
||||
color: '#c23c33',
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '油茶产业',
|
||||
color: '#c23c33',
|
||||
icon: `image://${PigImg}`,
|
||||
name: '生猪产业分布点',
|
||||
},
|
||||
],
|
||||
color: '#fff',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
visibility: 'off',
|
||||
},
|
||||
// visualMap: {
|
||||
// right: 60,
|
||||
// bottom: 100,
|
||||
// pieces: [
|
||||
// {
|
||||
// value: 1,
|
||||
// label: '稻渔综合种养',
|
||||
// color: 'rgb(242,230,230 , 0.7)',
|
||||
// },
|
||||
// {
|
||||
// value: 2,
|
||||
// label: '优品柑桔种植',
|
||||
// color: 'rgb(187,216,106 , 0.7)',
|
||||
// },
|
||||
// {
|
||||
// value: 3,
|
||||
// label: '高粱产业',
|
||||
// color: 'rgb(238,98,73 , 0.7)',
|
||||
// },
|
||||
// {
|
||||
// value: 4,
|
||||
// label: '油茶产业',
|
||||
// color: 'rgb(172,220,243 , 0.7)',
|
||||
// },
|
||||
// ],
|
||||
// color: '#fff',
|
||||
// textStyle: {
|
||||
// color: '#fff',
|
||||
// },
|
||||
// visibility: 'off',
|
||||
// },
|
||||
backgroundColor: 'transparent',
|
||||
stateAnimation: {
|
||||
duration: 100,
|
||||
},
|
||||
// geo: {
|
||||
// map: 'lcxz',
|
||||
// aspectScale: 0.75,
|
||||
// layoutCenter: ['50%', '50.5%'],
|
||||
// layoutSize: '100%',
|
||||
// silent: true,
|
||||
// roam: false,
|
||||
// z: 0,
|
||||
// label: {
|
||||
// color: '#fff',
|
||||
// show: false,
|
||||
// },
|
||||
// itemStyle: {
|
||||
// areaColor: 'rgba(0, 15, 40, 0.0)',
|
||||
// shadowColor: 'rgba(0, 0, 0, 1)',
|
||||
// shadowBlur: 0,
|
||||
// shadowOffsetX: 0,
|
||||
// shadowOffsetY: 5,
|
||||
// borderColor: '#fff',
|
||||
// borderWidth: 0.1,
|
||||
// },
|
||||
// emphasis: {
|
||||
// itemStyle: {
|
||||
// areaColor: '#2AB8FF',
|
||||
// borderWidth: 1,
|
||||
// color: 'green',
|
||||
// },
|
||||
// label: {
|
||||
// show: false,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
series: [
|
||||
{
|
||||
type: 'map',
|
||||
zoom: 1.1,
|
||||
roam: false,
|
||||
map: 'lcxz',
|
||||
select: {
|
||||
disabled: true,
|
||||
geo: {
|
||||
map: 'lcxz',
|
||||
aspectScale: 0.75,
|
||||
layoutCenter: ['50%', '50.5%'],
|
||||
layoutSize: '100%',
|
||||
silent: true,
|
||||
roam: false,
|
||||
z: 0,
|
||||
label: {
|
||||
color: '#fff',
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: 'rgba(0, 15, 40, 0.0)',
|
||||
shadowColor: 'rgba(0, 0, 0, 1)',
|
||||
shadowBlur: 0,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 5,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 0.1,
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
areaColor: '#2AB8FF',
|
||||
borderWidth: 1,
|
||||
color: 'green',
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
color: '#fff',
|
||||
normal: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: {
|
||||
image: domImg,
|
||||
repeat: 'repeat',
|
||||
},
|
||||
borderColor: 'rgba(147, 235, 248, 1)',
|
||||
borderWidth: 1,
|
||||
areaColor: 'rgb(30,54,80 , 0.8)',
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
color: '#fff',
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: 'rgb(30,54,80 , 0.8)',
|
||||
borderColor: 'rgba(147, 235, 248, 1)',
|
||||
borderWidth: 1,
|
||||
shadowColor: 'rgba(0, 255, 255, 1)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'geo',
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
show: true,
|
||||
},
|
||||
symbol: `image://${PigImg}`,
|
||||
symbolSize: [30, 30],
|
||||
symbolOffset: [0, 0],
|
||||
z: 9999,
|
||||
data: [
|
||||
{
|
||||
img: `image://${SheepImg}`,
|
||||
map: '',
|
||||
name: '羊',
|
||||
value: ['105.2333', '29.2641'],
|
||||
},
|
||||
{
|
||||
img: `image://${PigImg}`,
|
||||
map: '',
|
||||
name: '猪',
|
||||
value: ['105.2333', '29.2643'],
|
||||
},
|
||||
],
|
||||
// data: mapData,
|
||||
},
|
||||
// {
|
||||
// type: 'map',
|
||||
// zoom: 1.1,
|
||||
// name: 'map',
|
||||
// roam: false,
|
||||
// map: 'lcxz',
|
||||
// select: {
|
||||
// disabled: true,
|
||||
// },
|
||||
// label: {
|
||||
// show: false,
|
||||
// color: '#fff',
|
||||
// normal: {
|
||||
// show: false,
|
||||
// },
|
||||
// },
|
||||
// itemStyle: {
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: false,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// data: _data[0],
|
||||
// },
|
||||
],
|
||||
}
|
||||
setOptions(options)
|
||||
|
|
@ -200,15 +236,14 @@
|
|||
img: 'image://https://www.makeapie.cn/asset/get/s/data-1619059442567-s5l7-f8Eu9.png',
|
||||
})
|
||||
})
|
||||
console.log(mapData)
|
||||
|
||||
registerMap('lcxz', tempMapJSON.value)
|
||||
options = {
|
||||
backgroundColor: 'transparent',
|
||||
stateAnimation: {
|
||||
duration: 100,
|
||||
},
|
||||
// tooltip: {
|
||||
// trigger: 'item',
|
||||
// },
|
||||
geo: {
|
||||
map: 'lcxz',
|
||||
aspectScale: 0.75,
|
||||
|
|
@ -262,18 +297,9 @@
|
|||
},
|
||||
},
|
||||
itemStyle: {
|
||||
// areaColor: {
|
||||
// image: domImg,
|
||||
// repeat: 'repeat',
|
||||
// },
|
||||
borderColor: 'rgba(147, 235, 248, 1)',
|
||||
borderWidth: 1,
|
||||
areaColor: 'rgb(30,54,80 , 0.8)',
|
||||
|
||||
// shadowColor: 'rgba(128, 217, 248, 1)',
|
||||
// shadowOffsetX: -2,
|
||||
// shadowOffsetY: 2,
|
||||
// shadowBlur: 10,
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
|
|
@ -281,10 +307,6 @@
|
|||
color: '#fff',
|
||||
},
|
||||
itemStyle: {
|
||||
// areaColor: {
|
||||
// image: domImg,
|
||||
// repeat: 'repeat',
|
||||
// },
|
||||
areaColor: 'rgb(30,54,80 , 0.8)',
|
||||
borderColor: 'rgba(147, 235, 248, 1)',
|
||||
borderWidth: 1,
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue