Skip to content

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

见象地图接入,暂存

parent 89110b06
Expand all Show 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
This diff is collapsed.
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
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