<!--
|
* @Descripttion:
|
* @version:
|
* @Author: song
|
* @Date: 2021-04-08 15:14:57
|
* @LastEditors: song
|
* @LastEditTime: 2021-04-24 11:59:43
|
-->
|
<template>
|
<div id="map"
|
style="height: 100%"></div>
|
</template>
|
<script>
|
import OLCesium from 'olcs/OLCesium.js'
|
import 'ol/ol.css'
|
import OlView from 'ol/View.js'
|
import XYZ from 'ol/source/XYZ'
|
import OlLayerTile from 'ol/layer/Tile.js'
|
import OlMap from 'ol/Map.js'
|
|
import {
|
// eslint-disable-next-line no-unused-vars
|
defaults as OlControlDefaults,
|
defaults,
|
// 全屏控件
|
FullScreen,
|
// 比例尺控件
|
ScaleLine,
|
// 缩放滚动条控件
|
// eslint-disable-next-line no-unused-vars
|
ZoomSlider,
|
// 鼠标位置控件
|
// eslint-disable-next-line no-unused-vars
|
MousePosition,
|
// -地图属性控件
|
Attribution,
|
// 鹰眼控件
|
// eslint-disable-next-line no-unused-vars
|
OverviewMap,
|
// 缩放到范围控件
|
// eslint-disable-next-line no-unused-vars
|
ZoomToExtent,
|
Rotate
|
|
} from 'ol/control.js'
|
|
import VectorLayer from 'ol/layer/Vector'
|
import VectorSource from 'ol/source/Vector'
|
|
import Feature from 'ol/Feature.js'
|
import Point from 'ol/geom/Point.js'
|
import LineString from 'ol/geom/LineString.js'
|
import { Icon, Style, Fill, Stroke } from 'ol/style.js'
|
|
export default {
|
name: 'Map',
|
data () {
|
return {
|
gunAddlayer: new VectorLayer({ // 图标图层
|
zIndex: 22,
|
source: new VectorSource()
|
}),
|
peopleAddlayer: new VectorLayer({ // 图标图层
|
zIndex: 22,
|
source: new VectorSource()
|
}),
|
carAddlayer: new VectorLayer({ // 图标图层
|
zIndex: 22,
|
source: new VectorSource()
|
}),
|
peopleLineAddlayer: new VectorLayer({ // 图标图层
|
zIndex: 22,
|
source: new VectorSource()
|
}),
|
}
|
},
|
mounted () {
|
const ol2d = new OlMap({
|
layers: [
|
new OlLayerTile({
|
zIndex: 4,
|
title: '影像',
|
source: new XYZ({
|
url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0' // 行政区划
|
})
|
}),
|
new OlLayerTile({
|
zIndex: 5,
|
title: '道路+中文注记',
|
source: new XYZ({
|
url: 'http://t3.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0' // 注记
|
})
|
})
|
],
|
|
// 注意地图控件的写法
|
controls: defaults().extend([
|
new FullScreen(),
|
new ScaleLine(),
|
new MousePosition(),
|
new Rotate(),
|
new Attribution()
|
]),
|
target: 'map',
|
view: new OlView({
|
center: [0, 0],
|
zoom: 2,
|
projection: 'EPSG:4326'
|
})
|
})
|
window.ol2d = ol2d
|
|
var view = ol2d.getView()
|
|
view.setCenter([115.85883507433789, 28.708432053474827])
|
|
view.setZoom(13)
|
|
const ol3d = new OLCesium({ map: window.ol2d })
|
window.ol3d = ol3d
|
|
ol2d.addLayer(this.gunAddlayer)
|
ol2d.addLayer(this.peopleAddlayer)
|
ol2d.addLayer(this.carAddlayer)
|
ol2d.addLayer(this.peopleLineAddlayer)
|
this.addLines()
|
},
|
methods: {
|
init3D (val) {
|
window.ol3d.setEnabled(val)
|
},
|
addEntitys (item, icon, scale, name, type) {
|
const iconFeature = new Feature({
|
geometry: new Point([Number(item.LGTD), Number(item.LTTD)]),
|
name: name,
|
attributes: item
|
})
|
|
const iconStyle = new Style({
|
// text: new Text({ // 字体, 未成功, 浪费许多时间
|
// font: 'Normal ' + 12 + 'px ' + 'iconfont',
|
// text: "\e645",
|
// fill: new Fill({ color: "green" }),
|
// }),
|
|
image: new Icon({
|
scale: scale,
|
opacity: 1,
|
src: icon
|
// src: require('../../assets/Mark.png')
|
})
|
|
// new CircleStyle({ // 普通样式
|
// radius: 6,
|
// fill: new Fill({
|
// color: 'rgba(200, 155, 155, 0.8)'
|
// }),
|
// stroke: new Stroke({
|
// color: 'black',
|
// width: 0.3,
|
// })
|
// }),
|
})
|
|
iconFeature.setStyle(iconStyle)
|
|
this[type].getSource().addFeature(iconFeature)
|
},
|
|
addLines () {
|
|
// 点坐标
|
var lineCoords = [
|
[115.87471898408013, 28.720924466928977],
|
[115.87471898408013, 28.724163802651635],
|
[115.87401037939081, 28.72456871961697],
|
[115.87147964835748, 28.7246699488583],
|
[115.86925260504815, 28.7246699488583],
|
[115.86621572780817, 28.7246699488583],
|
[115.8635837675335, 28.72578347051296]
|
];// 线里点的集合
|
|
// 要素
|
// var lineCoords = [[featureInfo.lineString[0][0],featureInfo.lineString[0][0]],[featureInfo.lineString(0),featureInfo.lineString(0)]];
|
var feature_LineString = new Feature({
|
geometry: new LineString(lineCoords)
|
});
|
|
|
feature_LineString.setStyle(new Style({
|
//填充色
|
fill: new Fill({
|
color: 'rgba(255, 255, 255, 0.2)'
|
}),
|
//边线颜色
|
stroke: new Stroke({
|
color: 'rgb(252, 94, 32)',
|
width: 5
|
})
|
}))
|
|
|
this.peopleLineAddlayer.getSource().addFeature(feature_LineString)
|
|
}
|
}
|
}
|
</script>
|
