|
@@ -117,182 +117,141 @@
|
|
|
},
|
|
|
watch: {},
|
|
|
async created() {
|
|
|
- AMapLoader.reset();
|
|
|
// debugger
|
|
|
- // 已载入高德地图API,则直接初始化地图
|
|
|
- if ( window.Loca) {
|
|
|
- this.loadmap()
|
|
|
- // 未载入高德地图API,则先载入API再初始化
|
|
|
- } else {
|
|
|
- // await remoteLoad(`https://webapi.amap.com/maps?v=2.0&key=211dd6f989e719022aaf47ddb0659c47&plugin=AMap.Scale,AMap.ToolBar`)
|
|
|
- // await remoteLoad('https://webapi.amap.com/loca?v=2.0.0&key=211dd6f989e719022aaf47ddb0659c47')
|
|
|
- this.remoteLoad()
|
|
|
- }
|
|
|
+ // // 已载入高德地图API,则直接初始化地图
|
|
|
+ // if (window.AMap && window.AMapUI && window.Loca) {
|
|
|
+ // this.loadmap()
|
|
|
+ // // 未载入高德地图API,则先载入API再初始化
|
|
|
+ // } else {
|
|
|
+ // this.remoteLoad()
|
|
|
+ // // await remoteLoad(`https://webapi.amap.com/maps?v=2.0&key=211dd6f989e719022aaf47ddb0659c47&plugin=AMap.Scale,AMap.ToolBar`)
|
|
|
+ // // await remoteLoad('https://webapi.amap.com/loca?v=2.0.0&key=211dd6f989e719022aaf47ddb0659c47')
|
|
|
+
|
|
|
+ // }
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.loadmap()
|
|
|
- },
|
|
|
- methods: {
|
|
|
-remoteLoad(){
|
|
|
- // debugger
|
|
|
- // delete window.AMap;
|
|
|
- // let scriptElement1 = document.createElement('script')
|
|
|
- // scriptElement1.src =
|
|
|
- // "https://webapi.amap.com/maps?v=2.0&key=211dd6f989e719022aaf47ddb0659c47&plugin=AMap.Scale,AMap.ToolBar"
|
|
|
- // document.body.appendChild(scriptElement1)
|
|
|
- // let scriptElement2 = document.createElement('script')
|
|
|
- // scriptElement2.src = "https://webapi.amap.com/loca?v=2.0.0&key=211dd6f989e719022aaf47ddb0659c47"
|
|
|
- // document.body.appendChild(scriptElement2)
|
|
|
- // this.loadmap()
|
|
|
- // window.Loca = Loca
|
|
|
- // console.log(Loca)
|
|
|
+ AMapLoader.reset();
|
|
|
+ delete window.AMap;
|
|
|
+ AMapLoader.load({
|
|
|
+ "key": "211dd6f989e719022aaf47ddb0659c47", // 申请好的Web端开发者Key,首次调用 load 时必填
|
|
|
+ "version": "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
|
|
|
+ "plugins": ['plugin=AMap.Scale', 'AMap.ToolBar'],
|
|
|
+ "Loca": { // 是否加载 Loca, 缺省不加载
|
|
|
+ "version": '2.0.0' // Loca 版本,缺省 1.3.2
|
|
|
+ },
|
|
|
+ }).then((AMap) => {
|
|
|
|
|
|
-},
|
|
|
- loadmap(val) {
|
|
|
- AMapLoader.load({ //首次调用 load
|
|
|
- key:'211dd6f989e719022aaf47ddb0659c47',//首次load key为必填
|
|
|
- version:'2.0',
|
|
|
- Loca:{
|
|
|
- version: '2.0.0',
|
|
|
- }
|
|
|
- }).then((AMap)=>{
|
|
|
- map = new AMap.Map('mapContainer',{
|
|
|
- zoom: 5,
|
|
|
- });
|
|
|
|
|
|
- var layer = new Loca.PointLayer({
|
|
|
- map: map,
|
|
|
-
|
|
|
- });
|
|
|
-
|
|
|
- layer.setData(districts, {
|
|
|
- // 指定经纬度所在字段
|
|
|
- lnglat: 'center'
|
|
|
- });
|
|
|
+ this.loadmap()
|
|
|
+ }).catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ })
|
|
|
|
|
|
- layer.setOptions({
|
|
|
- style: {
|
|
|
- // 圆形半径,单位像素
|
|
|
- radius: 15,
|
|
|
- // 填充颜色
|
|
|
- color: '#07E8E4',
|
|
|
- // 描边颜色
|
|
|
- borderColor: '#5DFBF9',
|
|
|
- // 描边宽度,单位像素
|
|
|
- borderWidth: 1,
|
|
|
- // 透明度 [0-1]
|
|
|
- opacity: 0.9,
|
|
|
- }
|
|
|
- });
|
|
|
|
|
|
- layer.render();
|
|
|
- }).catch((e)=>{
|
|
|
- console.log(e);
|
|
|
- });
|
|
|
- // setTimeout(() => {
|
|
|
- // // debugger
|
|
|
- // var map = new AMap.Map('mapContainer', {
|
|
|
- // zoom: 5.29,
|
|
|
- // // showLabel: false,
|
|
|
- // // viewMode: '3D',
|
|
|
- // pitch: 48,
|
|
|
- // center: [104.780269, 34.955403],
|
|
|
- // mapStyle: 'amap://styles/dark',
|
|
|
- // });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ loadmap(val) {
|
|
|
+ var map = new AMap.Map('mapContainer', {
|
|
|
+ zoom: 5.29,
|
|
|
+ showLabel: false,
|
|
|
+ viewMode: '3D',
|
|
|
+ pitch: 48,
|
|
|
+ center: [104.780269, 34.955403],
|
|
|
+ mapStyle: 'amap://styles/dark',
|
|
|
+ });
|
|
|
|
|
|
- // var loca = new Loca.Container({
|
|
|
- // map,
|
|
|
- // });
|
|
|
+ var loca = new Loca.Container({
|
|
|
+ map,
|
|
|
+ });
|
|
|
|
|
|
- // // 颜色配置
|
|
|
- // var headColors = ['#ECFFB1', '#146968', '#146968', '#146968', '#146968', '#146968', '#146968', '#146968'];
|
|
|
- // var trailColors = [
|
|
|
- // 'rgba(255,178,6, 0.2)',
|
|
|
- // 'rgba(255,178,6, 0.2)',
|
|
|
- // 'rgba(20,105,104, 0.2)',
|
|
|
- // 'rgba(20,105,104, 0.2)',
|
|
|
- // 'rgba(20,105,104, 0.2)',
|
|
|
- // 'rgba(20,105,104, 0.2)',
|
|
|
- // 'rgba(20,105,104, 0.2)',
|
|
|
- // 'rgba(20,105,104, 0.2)',
|
|
|
- // ];
|
|
|
+ // 颜色配置
|
|
|
+ var headColors = ['#ECFFB1', '#146968', '#146968', '#146968', '#146968', '#146968', '#146968', '#146968'];
|
|
|
+ var trailColors = [
|
|
|
+ 'rgba(255,178,6, 0.2)',
|
|
|
+ 'rgba(255,178,6, 0.2)',
|
|
|
+ 'rgba(20,105,104, 0.2)',
|
|
|
+ 'rgba(20,105,104, 0.2)',
|
|
|
+ 'rgba(20,105,104, 0.2)',
|
|
|
+ 'rgba(20,105,104, 0.2)',
|
|
|
+ 'rgba(20,105,104, 0.2)',
|
|
|
+ 'rgba(20,105,104, 0.2)',
|
|
|
+ ];
|
|
|
|
|
|
- // // 进入北京方向的线
|
|
|
- // var inLineSource = new Loca.GeoJSONSource({
|
|
|
- // url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-line-in.json',
|
|
|
- // });
|
|
|
+ // 进入北京方向的线
|
|
|
+ var inLineSource = new Loca.GeoJSONSource({
|
|
|
+ url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-line-in.json',
|
|
|
+ });
|
|
|
|
|
|
- // var inLinelayer = new Loca.PulseLineLayer({
|
|
|
- // // loca,
|
|
|
- // zIndex: 11,
|
|
|
- // opacity: 1,
|
|
|
- // visible: true,
|
|
|
- // zooms: [2, 22],
|
|
|
- // });
|
|
|
+ var inLinelayer = new Loca.PulseLineLayer({
|
|
|
+ // loca,
|
|
|
+ zIndex: 11,
|
|
|
+ opacity: 1,
|
|
|
+ visible: true,
|
|
|
+ zooms: [2, 22],
|
|
|
+ });
|
|
|
|
|
|
- // inLinelayer.setStyle({
|
|
|
- // altitude: 0,
|
|
|
- // lineWidth: (_, feature) => feature.properties.lineWidthRatio * 4 + 1,
|
|
|
- // headColor: (_, feature) => headColors[feature.properties.type],
|
|
|
- // trailColor: (_, feature) => trailColors[feature.properties.type],
|
|
|
- // interval: 0.5,
|
|
|
- // duration: 2000,
|
|
|
- // });
|
|
|
- // inLinelayer.setSource(inLineSource);
|
|
|
- // loca.add(inLinelayer);
|
|
|
+ inLinelayer.setStyle({
|
|
|
+ altitude: 0,
|
|
|
+ lineWidth: (_, feature) => feature.properties.lineWidthRatio * 4 + 1,
|
|
|
+ headColor: (_, feature) => headColors[feature.properties.type],
|
|
|
+ trailColor: (_, feature) => trailColors[feature.properties.type],
|
|
|
+ interval: 0.5,
|
|
|
+ duration: 2000,
|
|
|
+ });
|
|
|
+ inLinelayer.setSource(inLineSource);
|
|
|
+ loca.add(inLinelayer);
|
|
|
|
|
|
- // // 出北京方向的线
|
|
|
- // var outLineSource = new Loca.GeoJSONSource({
|
|
|
- // url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-line-out.json',
|
|
|
- // });
|
|
|
+ // 出北京方向的线
|
|
|
+ var outLineSource = new Loca.GeoJSONSource({
|
|
|
+ url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-line-out.json',
|
|
|
+ });
|
|
|
|
|
|
- // var outLinelayer = new Loca.PulseLineLayer({
|
|
|
- // // loca,
|
|
|
- // zIndex: 11,
|
|
|
- // opacity: 1,
|
|
|
- // visible: true,
|
|
|
- // zooms: [2, 22],
|
|
|
- // });
|
|
|
+ var outLinelayer = new Loca.PulseLineLayer({
|
|
|
+ // loca,
|
|
|
+ zIndex: 11,
|
|
|
+ opacity: 1,
|
|
|
+ visible: true,
|
|
|
+ zooms: [2, 22],
|
|
|
+ });
|
|
|
|
|
|
- // outLinelayer.setStyle({
|
|
|
- // altitude: 0,
|
|
|
- // lineWidth: (_, feature) => feature.properties.lineWidthRatio * 1 + 3,
|
|
|
- // headColor: (_, feature) => headColors[feature.properties.type],
|
|
|
- // trailColor: (_, feature) => trailColors[feature.properties.type],
|
|
|
- // interval: 0.25,
|
|
|
- // duration: 5000,
|
|
|
- // });
|
|
|
- // outLinelayer.setSource(outLineSource);
|
|
|
- // loca.add(outLinelayer);
|
|
|
+ outLinelayer.setStyle({
|
|
|
+ altitude: 0,
|
|
|
+ lineWidth: (_, feature) => feature.properties.lineWidthRatio * 1 + 3,
|
|
|
+ headColor: (_, feature) => headColors[feature.properties.type],
|
|
|
+ trailColor: (_, feature) => trailColors[feature.properties.type],
|
|
|
+ interval: 0.25,
|
|
|
+ duration: 5000,
|
|
|
+ });
|
|
|
+ outLinelayer.setSource(outLineSource);
|
|
|
+ loca.add(outLinelayer);
|
|
|
|
|
|
- // // 下方呼吸点层
|
|
|
- // var scatter = new Loca.ScatterLayer({
|
|
|
- // loca,
|
|
|
- // zIndex: 10,
|
|
|
- // opacity: 1,
|
|
|
- // visible: true,
|
|
|
- // zooms: [2, 22],
|
|
|
- // });
|
|
|
+ // 下方呼吸点层
|
|
|
+ var scatter = new Loca.ScatterLayer({
|
|
|
+ loca,
|
|
|
+ zIndex: 10,
|
|
|
+ opacity: 1,
|
|
|
+ visible: true,
|
|
|
+ zooms: [2, 22],
|
|
|
+ });
|
|
|
|
|
|
- // var scatterGeo = new Loca.GeoJSONSource({
|
|
|
- // url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-scatter.json',
|
|
|
- // });
|
|
|
- // scatter.setSource(scatterGeo);
|
|
|
- // scatter.setStyle({
|
|
|
- // unit: 'px',
|
|
|
- // size: (_, feature) => {
|
|
|
- // var size = feature.properties.lineWidthRatio * 2 + 30;
|
|
|
- // return [size, size];
|
|
|
- // },
|
|
|
- // borderWidth: 0,
|
|
|
- // texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_yellow.png',
|
|
|
- // duration: 2000,
|
|
|
- // animate: true,
|
|
|
- // });
|
|
|
- // loca.add(scatter);
|
|
|
+ var scatterGeo = new Loca.GeoJSONSource({
|
|
|
+ url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-scatter.json',
|
|
|
+ });
|
|
|
+ scatter.setSource(scatterGeo);
|
|
|
+ scatter.setStyle({
|
|
|
+ unit: 'px',
|
|
|
+ size: (_, feature) => {
|
|
|
+ var size = feature.properties.lineWidthRatio * 2 + 30;
|
|
|
+ return [size, size];
|
|
|
+ },
|
|
|
+ borderWidth: 0,
|
|
|
+ texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_yellow.png',
|
|
|
+ duration: 2000,
|
|
|
+ animate: true,
|
|
|
+ });
|
|
|
+ loca.add(scatter);
|
|
|
|
|
|
- // loca.animate.start();
|
|
|
- // }, 500)
|
|
|
+ loca.animate.start();
|
|
|
}
|
|
|
},
|
|
|
}
|