Skip to content

E
east-nanjing-new
Commit 442972d1 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

见象地图接入,暂存

parent 89110b06
Hide whitespace changes
Inline Side-by-side
Showing with 577 additions and 155 deletions
index.html
View file @ 442972d1
......@@ -10,10 +10,11 @@
<body>
<div id="app"></div>
<script src="http://172.82.20.1/hp_map/js/index_v1.0.js"></script>
<!-- <script src="/SMap.min.js"></script> -->
<script src="/dev/SMap.min.js"></script>
<script src="/Plugins.min.js"></script>
<script src="/hls.js"></script>
<!-- <script src="/dev/SMap.min.js"></script> -->
<!-- <script src="/Plugins.min.js"></script> -->
<!-- <script src="/hls.js"></script> -->
<script type="module" src="/src/main.ts"></script>
</body>
......
src/components/MyComponent/MyMap/my-map-bak.vue 0 → 100644
View file @ 442972d1
<template>
<div id="MapContainer" :style="`width:${width}`" />
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
import store from '@/store'
declare const SMap: any
declare const Plugins: any
interface PointProp {
data: unknown[]
key: string
labelKey?: string
icon?: string
size?: number | number[]
color?: string
}
export default defineComponent({
name: 'MyMap',
displayName: 'm-map',
props: {
config: {
type: Object as PropType<{ [key: string]: unknown }>,
default: null,
},
width: {
type: String as PropType<string>,
default: '67vw',
},
},
emits: ['complete', 'event'],
setup(props, ctx) {
const curMapType = computed(() => store.state.curMapType)
let map: any = null
// onMounted(async () => {
// await nextTick()
// initMap()
// })
function initMap(config?: any) {
map = new SMap.Map('MapContainer', {
viewMode: '3D',
center: [1019.614669, 54.167243],
// center: [-135.98002789627407, -722.1597065437004],
zooms: [6, 20],
zoom: 8,
pitch: 45,
mapStyle: 'smap://styles/dark',
showBuildingBlock: true,
...config,
...props.config,
}).on(SMap.MapEvent.maploaded, () => {
// setBuildingBlock()
ctx.emit('complete', map)
addListener()
hideCommunity()
})
}
function setMouseEvent(val: boolean) {
map.enableMouseEvent(val)
}
function layer(name: string) {
return map.getLayer(name)
}
function setBuildingBlock(val = false) {
map.getLayer('model_white_zw').visible = val // 整个街道图层名
map.getLayer('model_white_zhenxing2').visible = val // 振兴小区名
map.getLayer('model_white_WEIHAI33').visible = val // 威海小区名
map.getLayer('model_white_dyjd').visible = val // 第一街道名
}
function hideCommunity() {
map.hideXQ_Poly()
map.hideMPZ()
map.hideXQ_Point()
}
function showCommunity() {
map.showXQ_Poly()
map.showMPZ()
map.showXQ_Point()
}
function setFilter(arr: unknown[], key = 'sect_id') {
if (arr.length === 0) return
const valid = arr.map((val) => {
return `${key} = '${val}'`
})
map.setFilter('wg_gis_xq_point', valid.join(' or '))
map.setFilter('wg_gis_mpz', valid.join(' or '))
map.setFilter('wg_gis_xq_poly', valid.join(' or '))
}
function addListener() {
// 触发地图点击事件
map.on(SMap.MapEvent.click, (view: any, eventParamter: any) => {
const { x, y } = eventParamter.mapPoint
console.log([x, y])
// console.log(map.getZoom(), map.getCenter())
view.hitTest(eventParamter).then((res: any) => {
if (res.results && res.results.length > 0) {
ctx.emit(
'event',
res.results[0] && res.results[0].graphic.attributes
)
}
})
})
}
/**
* ------ 聚焦点位 -------
* @param {String} x [必填 - x坐标]
* @param {String} y [必填 - y坐标]
* @param {Number} zoom [可选 - 放大比例（默认为6）]
*/
function focus(x: string | number, y: string | number, zoom = 6) {
if (!map || !x || !y) {
console.error('传入的坐标点不能为空')
return
}
curMapType.value === '3D'
? map.setZoomAndCenter(zoom, [+x, +y, 0])
: map.setZoomAndCenter(zoom, [+x, +y])
}
function zoom(type: string) {
if (type === 'in') map.zoomIn()
else map.zoomOut()
}
// 添加边界
function addBoundary({
name = '',
type = 'jd_boundary',
weight = 10,
count = 10,
color = 'rgba(51,145,255,.6)',
maskColor = [0, 17, 33, 0.9],
}) {
const boundary = {
boundaryType: type,
boundaryDefinition: `name like '%${name}%'`,
boundarydistance: weight,
bounarycount: count,
boundaryColor: color,
maskColor: maskColor,
}
console.log('=====', boundary)
const Boundary = new Plugins.MaskBoundary(map.view)
Boundary.add(boundary)
return Boundary
}
function rotate(deg: number) {
map.setRotation(deg)
}
function cameraTo({
center = [0, 0],
heading = 180,
tilt = 45,
}: {
center: number[]
heading: number
tilt: number
}) {
// map.setPitch(60)
// map.setCenter(0, 0, 0)
// map.setRotation(180)
map.view.goTo({
// center,
heading,
tilt,
})
}
// 将数据转换为符合地图的点数组
function getMapPoints({
data = [],
key,
labelKey,
icon,
size,
color = '#47B3FF',
}: PointProp) {
return data.map((item: any) => {
let sizeProp = Array.isArray(size)
? new SMap.Size(size[0], size[1])
: new SMap.Size(size, size)
if (item.size) {
sizeProp = Array.isArray(item.size)
? new SMap.Size(item.size[0], item.size[1])
: new SMap.Size(item.size, item.size)
}
const result = {
icon: new SMap.Icon({
size: sizeProp,
image: item.icon || icon,
}),
attributes: { key, ...item },
position: [
item.cx || item.communityMinx || item.X || item.x || item.gpsx,
item.cy || item.communityMiny || item.Y || item.y || item.gpsy,
item.communityMinz || item.Z || item.z || item.gpsz || 0,
],
label: new SMap.Label({
text: labelKey ? (item[labelKey] || item[key]) + '' : '',
size,
color,
}),
}
return new SMap.Marker(result)
})
}
// 添加点
function addPoint({
key,
data = [],
labelKey = '',
icon = 'test.png',
size = 14,
color = '#47B3FF',
}: PointProp) {
if (!map) return
const points = getMapPoints({ data, key, labelKey, icon, size, color })
map.add(points)
return points
}
// 删除点
function remove(points: any) {
if (!map || !points) return
map.remove(points)
}
// 添加线状覆盖物
function addPolyLine({
paths,
attributes = {},
strokeColor = 'rgba(51,145,255,.6)',
width = 2,
}: {
paths: any[]
attributes: any
strokeColor: string
width: number
}) {
const polyline = new SMap.Polyline({
path: paths.map((item: any) => new SMap.LngLat(item[0], item[1])),
attributes,
cap: 'square',
strokeColor,
style: 'solid',
lineJoin: 'round',
width,
})
map.add(polyline)
return polyline
}
return {
initMap,
focus,
zoom,
setMouseEvent,
layer,
setBuildingBlock,
hideCommunity,
showCommunity,
addBoundary,
rotate,
cameraTo,
addPoint,
addPolyLine,
remove,
setFilter,
}
},
})
</script>
<style lang="stylus" scoped>
#MapContainer
position fixed
height 100vh
top 0
left 0
</style>
<style lang="stylus">
.esri-component.esri-attribution.esri-widget
display none
</style>
src/components/MyComponent/MyMap/my-map.vue
View file @ 442972d1
......@@ -4,9 +4,9 @@
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
import point2 from '@/assets/images/point2.png'
import store from '@/store'
declare const SMap: any
declare const Plugins: any
declare const JMap: any
interface PointProp {
data: unknown[]
......@@ -34,50 +34,70 @@ export default defineComponent({
setup(props, ctx) {
const curMapType = computed(() => store.state.curMapType)
let map: any = null
// onMounted(async () => {
// await nextTick()
// initMap()
// })
function initMap(config?: any) {
map = new SMap.Map('MapContainer', {
viewMode: '3D',
center: [1019.614669, 54.167243],
// center: [-135.98002789627407, -722.1597065437004],
zooms: [6, 20],
zoom: 8,
pitch: 45,
mapStyle: 'smap://styles/dark',
showBuildingBlock: true,
...config,
...props.config,
}).on(SMap.MapEvent.maploaded, () => {
// setBuildingBlock()
ctx.emit('complete', map)
addListener()
hideCommunity()
})
}
function setMouseEvent(val: boolean) {
map.enableMouseEvent(val)
map = new JMap()
map.createMap(
'MapContainer',
'6b446c2db7094389aef2acb11e9cd27b',
window.location.origin,
{
area: '12',
base_layer_name: 'blue',
model_data_name: '',
camera: {
x: 121.4772444529965,
y: 31.216214566384625,
radius: 3200.0,
offset: { heading: -10.11789142234001, pitch: -90, range: 0 },
},
// ...config,
// ...props.config,
map_complete_callback: function () {
ctx.emit('complete', map)
// addListener()
hideCommunity()
},
}
)
// map = new SMap.Map('MapContainer', {
// viewMode: '3D',
// center: [1019.614669, 54.167243],
// // center: [-135.98002789627407, -722.1597065437004],
// zooms: [6, 20],
// zoom: 8,
// pitch: 45,
// mapStyle: 'smap://styles/dark',
// showBuildingBlock: true,
// ...config,
// ...props.config,
// }).on(SMap.MapEvent.maploaded, () => {
// // setBuildingBlock()
// ctx.emit('complete', map)
// addListener()
// hideCommunity()
// })
}
// function setMouseEvent(val: boolean) {
// map.enableMouseEvent(val)
// }
function layer(name: string) {
return map.getLayer(name)
}
function setBuildingBlock(val = false) {
map.getLayer('model_white_zw').visible = val // 整个街道图层名
map.getLayer('model_white_zhenxing2').visible = val // 振兴小区名
map.getLayer('model_white_WEIHAI33').visible = val // 威海小区名
map.getLayer('model_white_dyjd').visible = val // 第一街道名
// map.getLayer('model_white_zw').visible = val // 整个街道图层名
// map.getLayer('model_white_zhenxing2').visible = val // 振兴小区名
// map.getLayer('model_white_WEIHAI33').visible = val // 威海小区名
// map.getLayer('model_white_dyjd').visible = val // 第一街道名
}
function hideCommunity() {
map.hideXQ_Poly()
map.hideMPZ()
map.hideXQ_Point()
// map.hideXQ_Poly()
// map.hideMPZ()
// map.hideXQ_Point()
}
function showCommunity() {
map.showXQ_Poly()
map.showMPZ()
map.showXQ_Point()
// map.showXQ_Poly()
// map.showMPZ()
// map.showXQ_Point()
}
function setFilter(arr: unknown[], key = 'sect_id') {
if (arr.length === 0) return
......@@ -88,22 +108,22 @@ export default defineComponent({
map.setFilter('wg_gis_mpz', valid.join(' or '))
map.setFilter('wg_gis_xq_poly', valid.join(' or '))
}
function addListener() {
// 触发地图点击事件
map.on(SMap.MapEvent.click, (view: any, eventParamter: any) => {
const { x, y } = eventParamter.mapPoint
console.log([x, y])
// console.log(map.getZoom(), map.getCenter())
view.hitTest(eventParamter).then((res: any) => {
if (res.results && res.results.length > 0) {
ctx.emit(
'event',
res.results[0] && res.results[0].graphic.attributes
)
}
})
})
}
// function addListener() {
// // 触发地图点击事件
// map.on(SMap.MapEvent.click, (view: any, eventParamter: any) => {
// const { x, y } = eventParamter.mapPoint
// console.log([x, y])
// // console.log(map.getZoom(), map.getCenter())
// view.hitTest(eventParamter).then((res: any) => {
// if (res.results && res.results.length > 0) {
// ctx.emit(
// 'event',
// res.results[0] && res.results[0].graphic.attributes
// )
// }
// })
// })
// }
/**
* ------ 聚焦点位 -------
* @param {String} x [必填 - x坐标]
......@@ -111,18 +131,35 @@ export default defineComponent({
* @param {Number} zoom [可选 - 放大比例（默认为6）]
*/
function focus(x: string | number, y: string | number, zoom = 6) {
if (!map || !x || !y) {
console.error('传入的坐标点不能为空')
return
}
curMapType.value === '3D'
? map.setZoomAndCenter(zoom, [+x, +y, 0])
: map.setZoomAndCenter(zoom, [+x, +y])
// if (!map || !x || !y) {
// console.error('传入的坐标点不能为空')
// return
// }
// map.goTo({
// x: +x,
// y: +y,
// radius: +zoom * 100,
// })
}
let zoomLevel = 100
function zoom(type: string) {
if (type === 'in') map.zoomIn()
else map.zoomOut()
map.goTo(
{
x: 121.46136207910762,
y: 31.234266864811183,
radius: (zoomLevel += 500),
},
{
offset: {
heading: 0,
pitch: -90,
range: 0,
},
}
)
// if (type === 'in') map.zoomIn()
// else map.zoomOut()
}
// 添加边界
......@@ -134,43 +171,56 @@ export default defineComponent({
color = 'rgba(51,145,255,.6)',
maskColor = [0, 17, 33, 0.9],
}) {
const boundary = {
boundaryType: type,
boundaryDefinition: `name like '%${name}%'`,
boundarydistance: weight,
bounarycount: count,
boundaryColor: color,
maskColor: maskColor,
}
console.log('=====', boundary)
const Boundary = new Plugins.MaskBoundary(map.view)
Boundary.add(boundary)
return Boundary
// const boundary = {
// boundaryType: type,
// boundaryDefinition: `name like '%${name}%'`,
// boundarydistance: weight,
// bounarycount: count,
// boundaryColor: color,
// maskColor: maskColor,
// }
// console.log('=====', boundary)
// const Boundary = new Plugins.MaskBoundary(map.view)
// Boundary.add(boundary)
// return Boundary
// const region = {
// id: key,
// attributes,
// position: paths.map((item: any) => ({ x: item[0], y: item[1], z: 0 })),
// }
// map.Locate.regionLocate(region, {
// isZoom: false,
// style: {
// color: bgColor,
// outlineColor: strokeColor,
// transparency: 0.6,
// },
// })
// return key
}
function rotate(deg: number) {
map.setRotation(deg)
// map.setRotation(deg)
}
function cameraTo({
center = [0, 0],
heading = 180,
tilt = 45,
}: {
center: number[]
heading: number
tilt: number
}) {
// map.setPitch(60)
// map.setCenter(0, 0, 0)
// map.setRotation(180)
// function cameraTo({
// center = [0, 0],
// heading = 180,
// tilt = 45,
// }: {
// center: number[]
// heading: number
// tilt: number
// }) {
// // map.setPitch(60)
// // map.setCenter(0, 0, 0)
// // map.setRotation(180)
map.view.goTo({
// center,
heading,
tilt,
})
}
// map.view.goTo({
// // center,
// heading,
// tilt,
// })
// }
// 将数据转换为符合地图的点数组
function getMapPoints({
data = [],
......@@ -180,33 +230,45 @@ export default defineComponent({
size,
color = '#47B3FF',
}: PointProp) {
return data.map((item: any) => {
let sizeProp = Array.isArray(size)
? new SMap.Size(size[0], size[1])
: new SMap.Size(size, size)
if (item.size) {
sizeProp = Array.isArray(item.size)
? new SMap.Size(item.size[0], item.size[1])
: new SMap.Size(item.size, item.size)
}
const result = {
icon: new SMap.Icon({
size: sizeProp,
image: item.icon || icon,
}),
return data.map((item: any, i) => {
const sizeProp = Array.isArray(size) ? size : [size, size]
return {
id: `${key}-${i + 1}`,
position: {
x:
+item.x ||
+item.communityMinx ||
+item.X ||
+item.cx ||
+item.gpsx,
y:
+item.y ||
+item.communityMiny ||
+item.Y ||
+item.cy ||
+item.gpsy,
z:
+item.z ||
+item.communityMinz ||
+item.Z ||
+item.cz ||
+item.gpsz ||
0.1,
},
attributes: { key, ...item },
position: [
item.cx || item.communityMinx || item.X || item.x || item.gpsx,
item.cy || item.communityMiny || item.Y || item.y || item.gpsy,
item.communityMinz || item.Z || item.z || item.gpsz || 0,
],
label: new SMap.Label({
image: {
url: item.icon || icon,
width: sizeProp[0],
height: sizeProp[1],
pixelOffset: [0, -13],
},
label: {
text: labelKey ? (item[labelKey] || item[key]) + '' : '',
size,
font: '16px Helvetica',
color,
}),
pixelOffset: [0, -50],
},
}
return new SMap.Marker(result)
})
}
// 添加点
......@@ -220,53 +282,65 @@ export default defineComponent({
}: PointProp) {
if (!map) return
const points = getMapPoints({ data, key, labelKey, icon, size, color })
map.add(points)
return points
map.Locate.pointLocate(points, {
isZoom: false,
click: (res: any) => {
console.log('res', res)
if (res?._attributes) {
ctx.emit('event', res._attributes)
}
},
})
return points.map((item) => item.id)
}
// 删除点
function remove(points: any) {
if (!map || !points) return
map.remove(points)
function remove(points?: string[]) {
if (!map) return
map.Locate.clearLocate(points)
}
// 添加线状覆盖物
function addPolyLine({
key,
paths,
attributes = {},
strokeColor = 'rgba(51,145,255,.6)',
width = 2,
}: {
key: string
paths: any[]
attributes: any
strokeColor: string
width: number
}) {
const polyline = new SMap.Polyline({
path: paths.map((item: any) => new SMap.LngLat(item[0], item[1])),
const polyline = {
id: key,
attributes,
cap: 'square',
strokeColor,
style: 'solid',
lineJoin: 'round',
width,
position: paths.map((item: any) => ({ x: item[0], y: item[1], z: 0 })),
}
map.Locate.trackLocate(polyline, {
isZoom: false,
style: {
width: width,
color: strokeColor,
},
})
map.add(polyline)
return polyline
return key
}
return {
initMap,
focus,
zoom,
setMouseEvent,
// setMouseEvent,
layer,
setBuildingBlock,
hideCommunity,
showCommunity,
addBoundary,
rotate,
cameraTo,
// cameraTo,
addPoint,
addPolyLine,
remove,
......
src/components/MyComponent/MyMap/test-map.html 0 → 100644
View file @ 442972d1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#testMap {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="testMap"></div>
</body>
<script src="http://172.82.20.1/hp_map/js/index_v1.0.js"></script>
<script>
var jMap = new JMap();
var map_params = {
map_complete_callback: function () {
jMap.Locate.pointLocate([{
id: "100001",
position: {
x: 121.47953245042869, y: 31.23356958247664, z: 0
},
attributes: {
name: "黄浦区大数据中心",
description: "测试自定义字段信息"
},
label: {
text: "黄浦区大数据中心",
font: "16px Helvetica",
color: "rgb(135, 206, 235, 1)",
pixelOffset: [0, -50]
},
image: {
url: "http://localhost:3002/star.png",
width: 29.5,
height: 48.5,
pixelOffset: [0, -13]
}
}], {
isZoom: false,
click: (res) => {
},
})
},
map_left_click_callback: function (obj, type, movement) {
},
map_right_click_callback: function (obj) {
},
area: '12',
base_layer_name: 'blue',
model_data_name: '',
camera: {
x: 121.4772444529965, y: 31.216214566384625, radius: 2200.0,
offset: { heading: -10.11789142234001, pitch: -90, range: 0 }
},
}
jMap.createMap('testMap', '6b446c2db7094389aef2acb11e9cd27b', window.location.origin, map_params, {});
</script>
</html>
\ No newline at end of file
src/view/hooks/useSwitchMap.ts
View file @ 442972d1
......@@ -107,6 +107,7 @@ export default function useSwitchMap(map: any): any {
color = '#FFCE34'
}
return map.value.addPolyLine({
key: name,
paths: store.state[name].paths,
strokeColor: color,
})
......
src/view/main.vue
View file @ 442972d1
......@@ -116,6 +116,9 @@ export default defineComponent({
}
})
const { handleMapComplete, selectArea, handleZoom } = useSwitchMap(map)
// function handleMapComplete() {}
// function selectArea() {}
// function handleZoom() {}
const onMapClick = (data: any) => {
console.log('click: ', data)
}
......
src/view/new-community/community-video.vue
View file @ 442972d1
......@@ -27,22 +27,6 @@
</a-select>
</div>
<div class="community-video">
<!-- <div
v-for="item in list"
:key="item.name"
:style="`background:url(${
item.photo &&
item.photo
.replace('https://zhongbang.omniview.pro/', prefix)
.replace('http://zhongbang.omniview.pro/', prefix)
}) 100% / 100% 100% no-repeat`"
@click="handleClick(item.video)"
>
<p>{{ item.name }}</p>
<div class="mask">
<img src="@/assets/images/play.png" />
</div>
</div> -->
<template v-if="videoList.length > 0">
<div
v-for="item in videoList.slice(0, 3)"
......
src/view/new-community/left.vue
View file @ 442972d1
......@@ -240,10 +240,10 @@ const option3 = {
border-radius 50%
margin-right .05rem
p
&:last-child
padding-left .15rem
span+span
margin-left .1rem
span
margin-left .1rem
&:nth-of-type(2)
padding-left .03rem
.sum
display flex
justify-content space-around
......
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