鼠标悬停时使用不同颜色的传单突出显示标记

【问题标题】：Leaflet highlight marker when mouseover with different colors鼠标悬停时使用不同颜色的传单突出显示标记
【发布时间】：2016-04-14 15:15:06
【问题描述】：

当我将鼠标悬停在标记上时，我正在尝试设置标记突出显示。我的标记根据用户是否处于活动状态而着色。如果它们是活跃的，则标记进一步区分男性和女性。

我的 HTML 文件如下所示：

<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/11">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <!--The CSS files-->
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css"/>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css">

  <!--The dependent .js files-->
  <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
</head>

<body>
    <title>Circle Highlight</title>
    <style> html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    #map {
      height: 100%;
    }
    </style>
</body> 

<div id="map"></div>
<script type='text/javascript' src='C:\Users\Lukasz Obara\OneDrive\Programing\HTML\Slider\circles.geojson'></script>
<script type='text/javascript' src='C:\Users\Lukasz Obara\OneDrive\Programing\HTML\Slider\leaflet_demo_circles.js'></script>

我的 circles.geojson 文件：

var circles= {
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [35.1966, 31.7825]
        },
        "properties": {
            "GPSId": "2",
            "DateStart": "2015-06-23",
            "DateClosed": "2016-01-23",
            "GPSUserName": "fake2",
            "GPSUserColor": "#FF5500",
            "Gender": "Male",
            "Active": 1
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [35.2, 31.780117]
        },
        "properties": {
            "GPSId": "6",
            "DateStart": "2015-06-23",
            "DateClosed": "2016-01-23",
            "GPSUserName": "fake1",
            "GPSUserColor": "#00FF57",
            "Gender": "Female",
            "Active": 0
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [35.201715, 31.779548]
        },
        "properties": {
            "GPSId": "15",
            "DateStart": "2015-02-21",
            "DateClosed": "2016-02-28",
            "GPSUserName": "fake10",
            "GPSUserColor": "#00FF57",
            "Gender": "Male",
            "Active": 1
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [35.200987, 31.779606]
        },
        "properties": {
            "GPSId": "16",
            "DateStart": "2015-01-01",
            "DateClosed": "2016-01-01",
            "GPSUserName": "fake11",
            "GPSUserColor": "#00FF57",
            "Gender": "Female",
            "Active": 0
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [35.200987, 31.780522]
        },
        "properties": {
            "GPSId": "17",
            "DateStart": "2015-02-04",
            "DateClosed": "2016-09-21",
            "GPSUserName": "fake12",
            "GPSUserColor": "#00FF57",
            "Gender": "Male",
            "Active": 1
        }
    }]
};

还有我的 javascript leaflet_demo_circles.js 文件

var map = L.map( 'map', {
center: [31.780117, 35.2],
zoom: 17,
minZoom: 2,
maxZoom: 20
});

L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',
    subdomains: ['otile1','otile2','otile3','otile4']
}).addTo(map);

// This will produce a static black circle
var circle2 = L.circle([31.7805, 35.203], 8, {
    color: "#000000",
    stroke: true,
    fillColor: "#000000",
    weight: 2,
    fillOpacity: 0.7
}).addTo(map);

///////////////////////////////////////////////////////////////////////////
//Aesthetics                                                             //
///////////////////////////////////////////////////////////////////////////

//define styles for circle markers
var blueMarker ={
    radius: 8,
    stroke: true,
    color: "#0000FF",
    weight: 2,
    opacity: 1,
    fill: true,
//  fillColor: "#FF0000",
    fillOpacity: 0.5
}

var pinkMarker ={
    radius: 8,
    stroke: true,
    color: "#FF99FF",
    weight: 2,
    opacity: 1,
    fill: true,
//  fillColor: "#FF0000",
    fillOpacity: 0.5
}

var greyMarker = {
    radius: 8,
    stroke: true,
    color: "#808080",
    weight: 2,
    opacity: 1,
    fill: true,
//  fillColor: "#FF0000",
    fillOpacity: 0.5
};

// Highlighted circles ///////////////////
var blueMarkerHighlighted ={
    radius: 10,
    stroke: true,
    color: "#0000FF",
    weight: 2,
    opacity: 1,
    fill: true,
//  fillColor: "#FF0000",
    fillOpacity: 0.75
}

var pinkMarkerHighlighted ={
    radius: 10,
    stroke: true,
    color: "#FF99FF",
    weight: 2,
    opacity: 1,
    fill: true,
//  fillColor: "#FF0000",
    fillOpacity: 0.75
}

var greyMarkerHighlighted = {
    radius: 10,
    stroke: true,
    color: "#808080",
    weight: 2,
    opacity: 1,
    fill: true,
//  fillColor: "#FF0000",
    fillOpacity: 0.75
};

///////////////////////////////////////////////////////////////////////////
//functions to attach styles and popups to the marker layer              //
///////////////////////////////////////////////////////////////////////////

//Assigns colors based on activity and gender
function colors (feature, layer) {
    if (feature.properties.Active === 1) {
        if (feature.properties.Gender === "Male") {
            return L.circleMarker(layer, blueMarker);
        } else {
            return L.circleMarker(layer, pinkMarker);
       }
    } else {
        return L.circleMarker(layer, greyMarker);
    }
};

function popup (feature, layer) {
    layer.bindPopup("<h1>" + feature.properties.GPSUserName + "</h1>");
};

///////////////////////////////////////////////////////////////////////////
//displaying the data on the map                                         //
///////////////////////////////////////////////////////////////////////////

dotlayer = L.geoJson(circles, {
    pointToLayer: colors,
    onEachFeature: popup
}).addTo(map);

我尝试将上面的两个函数替换为下面的函数来分配颜色并在鼠标悬停时产生效果，但没有成功。

function dotStyleDefault() {
    if (feature.properties.Active === 1) {
        if (feature.properties.Gender === "Male") {
            return blueMarker;
        } else {
            return pinkMarker;
       }
    } else {
        return greyMarker;
    }
};

function dotStyleHighlight(){
    if (feature.properties.Active === 1) {
        if (feature.properties.Gender === "Male") {
            return blueMarkerHighlighted;
        } else {
            return pinkMarkerHighlighted;
       }
    } else {
        return greyMarkerHighlighted;
    }
}

function highlightDot(e) {
    var layer = e.target;
    layer.setStyle(dotStyleHighlight);
};

function resetDotHighlight(e) {
    var layer = e.target;
    layer.setStyle(dotStyleDefault);
};

function onEachDot(feature, layer) {
    layer.on({
        mouseover: highlightDot,
        mouseout: resetDotHighlight
    });
    layer.bindPopup('<table style="width:150px"><tbody><tr><td><div><b>name:</b></div></td><td><div>' + feature.properties.GPSId + '</div></td></tr><tr class><td><div><b>year:</b></div></td><td><div>' + feature.properties.DateStart + '</div></td></tr></tbody></table>');
};

///////////////////////////////////////////////////////////////////////////
//displaying the data on the map                                         //
///////////////////////////////////////////////////////////////////////////

dotlayer = L.geoJson(circles, {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, dotStyleDefault);
    },
    onEachFeature: onEachDot
}).addTo(map);

【问题讨论】：

    标签： javascript jquery leaflet


    【解决方案1】：

    我发现的一个解决方案是修改geojson 文件以包含Colour 属性。因此circles.geojson 将类似于

    var circles = {
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [35.1966, 31.7825]
        },
        "properties": {
            "GPSId": "2",
            "DateStart": "2015-06-23",
            "DateClosed": "2016-01-23",
            "GPSUserName": "2",
            "GPSUserColor": "#FF5500",
            "Gender": "Male",
            "Active": 1,
            "Colour": "#0000FF" //THIS IS ADDED BASED ON ACTIVITY LEVEL AND GENDER
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [35.2, 31.780117]
        },
        "properties": {
            "GPSId": "6",
            "DateStart": "2015-06-23",
            "DateClosed": "2016-01-23",
            "GPSUserName": "fake1",
            "GPSUserColor": "#00FF57",
            "Gender": "Female",
            "Active": 0,
            "Colour": "#808080" //THIS IS ADDED BASED ON ACTIVITY LEVEL AND GENDER
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [35.201715, 31.779548]
        },
        "properties": {
            "GPSId": "15",
            "DateStart": "2015-02-21",
            "DateClosed": "2016-02-28",
            "GPSUserName": "fake10",
            "GPSUserColor": "#00FF57",
            "Gender": "Male",
            "Active": 1,
            "Colour": "#0000FF" //THIS IS ADDED BASED ON ACTIVITY LEVEL AND GENDER
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [35.200987, 31.779606]
        },
        "properties": {
            "GPSId": "16",
            "DateStart": "2015-01-01",
            "DateClosed": "2016-01-01",
            "GPSUserName": "fake11",
            "GPSUserColor": "#00FF57",
            "Gender": "Female",
            "Active": 0,
            "Colour": "#808080" //THIS IS ADDED BASED ON ACTIVITY LEVEL AND GENDER
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [35.200987, 31.780522]
        },
        "properties": {
            "GPSId": "17",
            "DateStart": "2015-02-04",
            "DateClosed": "2016-09-21",
            "GPSUserName": "fake12",
            "GPSUserColor": "#00FF57",
            "Gender": "Male",
            "Active": 1,
            "Colour": "#0000FF" //THIS IS ADDED BASED ON ACTIVITY LEVEL AND GENDER
        }
    }

    那么我可以省略circles.js 中的条件语句，这将导致：

    var map = L.map( 'map', {
    center: [31.780117, 35.2],
    zoom: 17,
    minZoom: 2,
    maxZoom: 20
});

L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',
    subdomains: ['otile1','otile2','otile3','otile4']
}).addTo(map);

// This will produce a static black circle
var circle2 = L.circle([31.7805, 35.203], 8, {
    color: "#000000",
    stroke: true,
    fillColor: "#000000",
    weight: 2,
    fillOpacity: 0.7
}).addTo(map);

///////////////////////////////////////////////////////////////////////////////
//Aesthetics                                                                 //
///////////////////////////////////////////////////////////////////////////////

var markerDefault = {
    radius: 8,
    weight: 2,
    opacity: 1,
    fillOpacity: 0.5
};

var markerHighlight = {
    radius: 10,
    weight: 3,
    opacity: 1,
    fillOpacity: 0.75
};

///////////////////////////////////////////////////////////////////////////////
//functions to attach styles and popups to the marker layer                  //
///////////////////////////////////////////////////////////////////////////////

function highlightDot(e) {
    var layer = e.target;
    layer.setStyle(markerHighlight);
};

function resetDotHighlight(e) {
    var layer = e.target;
    layer.setStyle(markerDefault);
};

function onEachDot(feature, layer) {
    layer.on({
        mouseover: highlightDot,
        mouseout: resetDotHighlight
    });
    layer.bindPopup('<table style="width:150px"><tbody><tr><td><div><b>name:</b></div></td><td><div>' + feature.properties.GPSId + '</div></td></tr><tr class><td><div><b>year:</b></div></td><td><div>' + feature.properties.DateStart + '</div></td></tr></tbody></table>');
};

///////////////////////////////////////////////////////////////////////////
//displaying the data on the map                                         //
///////////////////////////////////////////////////////////////////////////

dotlayer = L.geoJson(circles, {
    style: function(feature) {
        return {color: feature.properties.Colour};
    },
    pointToLayer: function(feature, latlng) {
        return new L.CircleMarker(latlng, markerDefault);
    },
    onEachFeature: onEachDot
}).addTo(map);

// init a map scale
L.control.scale().addTo(map);

    在不修改.geojson文件的情况下找到解决方案还是不错的

    【讨论】：

      猜你喜欢
      • 2014-03-17
      • 1970-01-01
      • 1970-01-01
      • 2023-03-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-12-26
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode