amap-route v0.0.5

高德地图路线预览

• 没啥稀奇的，不过是给两个项目用，单独提取处理。

• 这是一个vue的项目

简单用法

npm

• npm i amap-route
• somepage.vue
  • template:
  • script: import AmapRoute from 'amap-route'
  • vue components: AmapRoute

yarn

• yarn add amap-route
• somepage.vue
  • template:
  • script: import AmapRoute from 'amap-route'
  • vue components: AmapRoute

也没有复杂用法

外部参数

• className:'',
• loadPoint:lng, lat
• unloadPoint:lng, lat

• loadRule:

  (distance) => { // distance单位米
    return [{
      type:'province',// 'city', 'district', 
      strokeColor:'',
      strokeWeight:'',
      fillOpacity:0.4,
      fillColor:'',
    }, {
      type:'circle',
      strokeColor:'',
      strokeWeight:'',
      fillOpacity:0.4,
      fillColor:'',
      circleRange:10,
    }, {
      type:'marker',
      image:'url', // URL.createObjectURL()
      size:[56,56],
      offset:[-28,-45],
    }]
  } || defaultLoadRule

• unloadRule:

  (distance) => { // distance单位米
    return [{
      type:'province',// 'city', 'district', 
      strokeColor:'',
      strokeWeight:'',
      fillOpacity:0.4,
      fillColor:'',
    }, {
      type:'circle',
      strokeColor:'',
      strokeWeight:'',
      fillOpacity:0.4,
      fillColor:'',
      circleRange:10,
    }, {
      type:'marker',
      image:'url', // URL.createObjectURL()
      size:[56,56],
      offset:[-28,-45],
    }]
  } || defaultUnloadRule

• amap 需要插件 AMap.DistrictSearch,AMap.Geolocation,AMap.Geocoder

内部参数

• defaultLoadRule

    (distance) => {
      const circleOption={
        fillColor: "#E0202040",
        strokeColor: "#E0202080",
        fillOpacity: 0.5, //填充透明度
        strokeOpacity: 0.5 //线透明度
      };
      const marker = {
        image: URL.createObjectURL(new Blob([loadPointMarker], {type:'image/svg+xml'})),
        size:[56, 56],
        offset:[-28, -45],
        type:'marker',
      };
      if(distance <= 10e3) {
        return [marker, Object.assign({type:'circle', radius:3000}, circleOption)];
      } else if (distance <= 30e3) {
        return [marker, Object.assign({type:'circle', radius:4000}, circleOption)];
      } else if (distance < 100e3) {
        return [
          marker,
          Object.assign({ type:'district' }, circleOption, {fillOpacity:0.4}),
          Object.assign({ type:'circle', radius:5000 }, circleOption)
        ];
      } else {
        return [
          marker,
          Object.assign({ type:'district' }, circleOption, {fillOpacity:0.4}),
          Object.assign({ type:'circle', radius:10000 }, circleOption)
        ];
      };
    }

• defaultUnloadRule:

    (distance) => {
      const circleOption={
        fillColor: "#E0202040",
        strokeColor: "#E0202080",
        fillOpacity: 0.5, //填充透明度
        strokeOpacity: 0.5 //线透明度
      };
      const marker = {
        image: URL.createObjectURL(new Blob([unloadPointMarker], {type:'image/svg+xml'})),
        size:[56, 56],
        offset:[-28, -45],
        type:'marker',
      };
      if(distance <= 10e3) {
        return [marker, Object.assign({type:'circle', radius:3000}, circleOption)];
      } else if (distance <= 30e3) {
        return [marker, Object.assign({type:'circle', radius:4000}, circleOption)];
      } else if (distance < 100e3) {
        return [
          marker,
          Object.assign({ type:'district' }, circleOption, {fillOpacity:0.4}),
          Object.assign({ type:'circle', radius:5000 }, circleOption)
        ];
      } else {
        return [
          marker,
          Object.assign({ type:'district' }, circleOption, {fillOpacity:0.4}),
          Object.assign({ type:'circle', radius:10000 }, circleOption)
        ];
      };
    }