openlayers 点击添加标记（要素）动态效果 Demo（可直接运行） 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" />
  <script type="text/javascript" src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
  <title>Document</title>
</head>
<body>
  <div id="map"></div>
  <script>
      var beijing = ol.proj.fromLonLat([116.28, 39.54]);
      var map = new ol.Map({
          target: 'map',
          layers: [
          new ol.layer.Tile({  
            source: new ol.source.OSM()
          })  
          ],
          view: new ol.View({
              center: beijing,
              zoom: 4
          })
      });

      //实例化矢量点要素，通过矢量图层添加到地图容器中
      //这样就实现了预先加载图文标注
      var iconFeature = new ol.Feature({
          geometry: new ol.geom.Point(beijing),
          name: '北京市',                         //名称属性
          population: 2115                       //人口数（万）
      });
      //设置点要素样式
      iconFeature.setStyle(createLabelStyle(iconFeature));
      //矢量标注的数据源
      var vectorSource = new ol.source.Vector({
          features: [iconFeature]
      });
      //矢量标注图层
      var vectorLayer = new ol.layer.Vector({
          source: vectorSource
      });
      map.addLayer(vectorLayer);

      //矢量标注样式设置函数，设置image为图标ol.style.Icon
      function createLabelStyle(feature){
          console.log(feature);
          return new ol.style.Style({
              // image: new ol.style.Icon({
              //     anchor: [0.5, 60],              //锚点
              //     anchorOrigin:'top-right',       //锚点源
              //     anchorXUnits: 'fraction',       //锚点X值单位
              //     anchorYUnits: 'pixels',         //锚点Y值单位
              //     offsetOrigin: 'top-right',      //偏移原点
              //     opacity: 0.75,
              //     scale: 0.05,
              //     src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594359193211&di=1d6bb819a5daa724ff65cc4d011d4d42&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_pic%2F17%2F10%2F27%2F05dc60e54e3aa5d093cdc32611303643.jpg'  //图标的URL
              // }),
              text: new ol.style.Text({
                  textAlign: 'center',            //位置
                  textBaseline: 'middle',         //基准线
                  font: 'normal 14px 微软雅黑',    //文字样式
                  text: feature.get('name'),      //文本内容
                  fill: new ol.style.Fill({       //文本填充样式（即文字颜色)
                      color: '#000'
                  }),
                  stroke: new ol.style.Stroke({
                      color: '#F00', 
                      width: 2
                  })
              })
          });
      }

      map.on('click', function(evt){
          var coordinate = evt.coordinate;        //鼠标单击点的坐标
          //新建一个要素ol.Feature
          var newFeature = new ol.Feature({
              geometry: new ol.geom.Point(coordinate),  //几何信息
              name: '标注点'
          });
          newFeature.setStyle(createLabelStyle(newFeature));      //设置要素样式
          vectorSource.addFeature(newFeature);
      });
  </script>
</body>
</html>

样式使用img时（注释text部分）效果图：

样式使用text时（注释image部分）效果图：

posted @ 2020-08-13 17:35  wwj007  阅读(3675)  评论(3)  编辑  收藏  举报
……