123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383 |
- <style lang='scss'>
- .mapContent {
- position: relative;
- margin-top: 10px;
- .center-add {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- margin: auto;
- z-index: 999;
- width: 30px;
- height: 30px;
- }
- }
- #mapContainer {
- width: 100%;
- height: 506px;
- }
- #tip {
- position: absolute;
- top: -45px;
- display: flex;
- }
- #tip .el-input {
- // width: 179px;
- margin-right: 0px;
- }
- #tip .el-select {
- margin-right: 10px;
- }
- #tip .el-select {
- width: 179px;
- }
- #tip .el-textarea {
- width: 179px;
- /deep/ .el-textarea__inner {
- height: 40px;
- resize: none;
- }
- }
- .el-button--primary {
- background-color: #5878e8;
- border-color: #5878e8;
- }
- .el-button--default {
- color: #5878e8;
- border-color: #5473e8;
- }
- .address {
- display: flex;
- align-items: center;
- margin-right: 20px;
- .address-input {
- display: inline-block;
- width: 480px;
- }
- }
- .amap-marker {
- opacity: 0;
- }
- .amap-marker-label {
- background: #0000004f;
- z-index: 1158;
- border: 0px solid rgb(102, 102, 102);
- color: #eee;
- padding: 10px 20px;
- font-size: 16px;
- font-weight: 500;
- border-radius: 4px;
- }
- /*动画*/
- /* .amap-marker-label {
- -webkit-animation: Tada 3s infinite;
- -moz-animation: Tada 3s infinite;
- -ms-animation: Tada 3s infinite;
- animation: Tada 3s infinite;
- }
- @keyframes Tada {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
- } */
- </style>
- <template>
- <div class="mapContent">
- <div id="mapContainer"></div>
- </div>
- </template>
- <script>
- import {
- regionData,
- CodeToText,
- TextToCode
- } from 'element-china-area-data'
- import image from '../../../public/img/ic_locationmarker.jpg'
- import AMapLoader from '@amap/amap-jsapi-loader';
- export default {
- data() {
- return {
- mapPointData: {},
- mapLineData: {},
- map: null,
- provinces: [],
- province: '',
- districts: [],
- district: '',
- citys: [],
- city: '',
- polygons: [],
- selectedOptions1: [],
- areacode: '',
- address: '',
- objPoint: [],
- zoomEnable: true,
- dragEnable: true,
- status: true,
- center: '',
- markerList: [],
- timer: ''
- }
- },
- props: ['listData'],
- computed: {
- showFlag() {
- return this.flagVisible
- },
- },
- watch: {
- listData: function(val1, val2) {
- this.listData = val1
- var that = this
- this.makeJsonData()
- AMapLoader.load({
- "key": "211dd6f989e719022aaf47ddb0659c47", // 申请好的Web端开发者Key,首次调用 load 时必填
- "version": "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
- "plugins": ['plugin=AMap.Scale', 'AMap.ToolBar','AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geocoder', 'AMap.DistrictSearch','AMap.Geolocation', 'Geolocation'],
- "Loca": { // 是否加载 Loca, 缺省不加载
- "version": '2.0.0' // Loca 版本,缺省 1.3.2
- },
- }).then((AMap) => {
- this.loadmap()
- }).catch(e => {
- console.log(e);
- })
- }
- },
- async created() {},
- mounted() {},
- beforeDestroy() {
- clearInterval(this.timer);
- if (this.timer) {
- clearInterval(this.timer); // 在Vue实例销毁前,清除定时器
- }
- },
- methods: {
- makeJsonData() {
- let _features1 = []
- let _features2 = []
- for (let i = 0; i < this.listData.biViewInfoList.length; i++) {
- let _data = this.listData.biViewInfoList[i]
- let _coordinates1 = []
- let _coordinates11 = []
- let _position1 = _data.endPlace ? _data.endPlace.split(',') : []
- _coordinates1.push(Number(_position1[1]))
- _coordinates1.push(Number(_position1[0]))
- let _obj1 = {
- "type": "Feature",
- "properties": {
- "type": i,
- },
- "geometry": {
- "type": "Point",
- "coordinates": _coordinates1
- }
- }
- let _position11 = _data.startPlace ? _data.startPlace.split(',') : []
- _coordinates11.push(Number(_position11[1]))
- _coordinates11.push(Number(_position11[0]))
- let _obj11 = {
- "type": "Feature",
- "properties": {
- "type": i,
- },
- "geometry": {
- "type": "Point",
- "coordinates": _coordinates11
- }
- }
- _features1.push(_obj1)
- _features1.push(_obj11)
- let _coordinates2 = []
- let _start = []
- let _end = []
- let _marker = {}
- let _positionStart = _data.startPlace ? _data.startPlace.split(',') : []
- _start.push(Number(_positionStart[1]))
- _start.push(Number(_positionStart[0]))
- let _positionEnd = _data.endPlace ? _data.endPlace.split(',') : []
- _end.push(Number(_positionEnd[1]))
- _end.push(Number(_positionEnd[0]))
- _coordinates2.push(_start)
- _coordinates2.push(_end)
- _marker.iconSrc = _start
- _marker.name = _data.name
- this.markerList.push(_marker)
- let _obj2 = {
- "type": "Feature",
- "properties": {
- },
- "geometry": {
- "type": "LineString",
- "coordinates": _coordinates2
- }
- }
- _features2.push(_obj2)
- }
- this.mapPointData = {
- "type": "FeatureCollection",
- "features": _features1
- }
- this.mapLineData = {
- "type": "FeatureCollection",
- "features": _features2
- }
- console.log("this.mapPointData", this.mapPointData)
- console.log("this.mapPointData", this.mapLineData)
- },
- loadmap(val) {
- var map = new AMap.Map('mapContainer', {
- zoom: 4.89,
- showLabel: true,
- viewMode: '3D',
- pitch: 0, //地圖仰角
- center: [122.122, 40.227],
- mapStyle: 'amap://styles/c0ed286f357b7f4c7312476637a7ab04',
- buildingAnimation: false,
- showIndoorMap: false,
- });
- var loca = new Loca.Container({
- map,
- });
- for (let i = 0; i < this.markerList.length; i++) {
- // 构造点标记
- if (this.markerList[i].iconSrc[0] && this.markerList[i].iconSrc[1]) {
- var marker = new AMap.Marker({
- position: this.markerList[i].iconSrc,
- anchor: 'bottom-center',
- icon: new AMap.Icon({
- image: 'data:image/png;base64,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',
- size: new AMap.Size(30, 30), //图标所处区域大小
- imageSize: new AMap.Size(30, 30) //图标大小
- }),
- });
- map.add(marker);
- marker.setLabel({
- offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
- content: "<div class = 'maker-item'>" + this.markerList[i].name + "</div>", //设置文本标注内容
- direction: 'right' //设置文本标注方位
- });
- }
- }
- // 定时刷新动画
- let _markerDom = document.getElementsByClassName('amap-marker')
- let _index = 0
- this.timer = setInterval(function() {
- _markerDom[_index].style.opacity = 1
- _markerDom[_index].style.transition = '2s'
- var elseLi = _markerDom;
- for (var i = 0; i < elseLi.length; i++) {
- if (elseLi[i] !== _markerDom[_index]) { //判断是否是ele节点,是否与触发事件的节点相同
- elseLi[i].style.opacity = 0
- _markerDom[_index].style.transition = '2s'
- }
- }
- _index++;
- if (_index == _markerDom.length) _index = 0
- }, 3000)
- // 呼吸点
- var scatter = new Loca.ScatterLayer({
- loca,
- zIndex: 10,
- opacity: 0.6,
- visible: true,
- zooms: [2, 22],
- });
- var pointGeo = new Loca.GeoJSONSource({
- // url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/pulselink-china-city-point.json',
- data: this.mapPointData
- });
- scatter.setSource(pointGeo);
- scatter.setStyle({
- unit: 'meter',
- size: [100000, 100000],
- borderWidth: 0,
- texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_red.png',
- duration: 2000,
- animate: true,
- });
- loca.add(scatter);
- // 弧线
- var pulseLink = new Loca.PulseLinkLayer({
- // loca,
- zIndex: 10,
- opacity: 1,
- visible: true,
- zooms: [2, 22],
- depth: true,
- });
- var geo = new Loca.GeoJSONSource({
- // url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-line-out.json',
- data: this.mapLineData
- });
- pulseLink.setSource(geo);
- pulseLink.setStyle({
- unit: 'meter',
- dash: [40000, 0, 40000, 0],
- lineWidth: function() {
- return [25000, 10000];
- },
- height: function(index, feat) {
- return feat.distance / 3 + 1000;
- },
- // altitude: 1000,
- smoothSteps: 50,
- speed: function(index, prop) {
- return 1000 + Math.random() * 300000;
- },
- flowLength: 200000,
- lineColors: function(index, feat) {
- return ['#ebf0f700'];
- },
- maxHeightScale: 0.3, // 弧顶位置比例
- headColor: 'rgb(36, 131, 255)',
- trailColor: 'rgba(255, 255,0,0)',
- });
- loca.add(pulseLink);
- loca.animate.start();
- }
- },
- }
- </script>
|